@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.0

package/docs/{src/components → components}/maz-sidebar.md

@@ -1,30 +1,37 @@
 ---
-title: MazSidebar
-description: MazSidebar is a composable sidebar system for dashboard, admin, and SaaS applications. It provides a fully accessible, collapsible navigation with multiple display modes.
+title: "MazSidebar"
+description: "MazSidebar is a composable sidebar system for dashboard, admin, and SaaS applications. It provides a fully accessible, collapsible navigation with multiple display modes."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-sidebar"
 ---
 
-# {{ $frontmatter.title }}
+# MazSidebar
 
-{{ $frontmatter.description }}
+> MazSidebar is a composable sidebar system for dashboard, admin, and SaaS applications. It provides a fully accessible, collapsible navigation with multiple display modes.
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazSidebar from 'maz-ui/components/MazSidebar'` or `import MazSidebarMenuButton from 'maz-ui/components/MazSidebarMenuButton'` or `import MazSidebarMenuSub from 'maz-ui/components/MazSidebarMenuSub'` or `import MazSidebarGroup from 'maz-ui/components/MazSidebarGroup'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-sidebar
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Tip:**
 
-::: tip
 `MazSidebar` shares its state with all sub-components via Vue's `provide`/`inject`. No separate Provider component is needed. All sub-components must be descendants of `MazSidebar`.
-:::
 
-::: warning Deferred features (v1.1)
+**Warning: Deferred features (v1.1)**
+
 The following features are planned for a future release and are **not yet available**:
 - `localStorage` state persistence
 - `Cmd/Ctrl+B` keyboard shortcut
 - Automatic mobile drawer under a breakpoint
-:::
 
 ## Sub-components
 
 | Component              | Role                                                                  |
 | ---------------------- | --------------------------------------------------------------------- |
-| `MazSidebar`           | Root container — provides state context                               |
+| `MazSidebar`           | Root container - provides state context                               |
 | `MazSidebarHeader`     | Fixed top area                                                        |
 | `MazSidebarContent`    | Scrollable central area                                               |
 | `MazSidebarFooter`     | Fixed bottom area                                                     |
@@ -38,36 +45,11 @@ The following features are planned for a future release and are **not yet availa
 
 ## Basic usage
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
-    <MazSidebar v-model:open="basicOpen" class="maz:h-full">
-      <MazSidebarHeader>
-        <div class="maz:p-4 maz:font-bold">My App</div>
-      </MazSidebarHeader>
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Dashboard" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Settings" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-      <MazSidebarFooter>
-        <div class="maz:p-4">Footer</div>
-      </MazSidebarFooter>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:p-4">Main content</main>
-  </div>
-
-<template #code>
-
 ```html
-<div class="maz:flex maz:h-screen">
+<div class="flex h-screen">
   <MazSidebar v-model:open="isOpen">
     <MazSidebarHeader>
-      <div class="maz:p-4 maz:font-bold">My App</div>
+      <div class="p-4 font-bold">My App</div>
     </MazSidebarHeader>
     <MazSidebarContent>
       <MazSidebarMenu>
@@ -80,10 +62,10 @@ The following features are planned for a future release and are **not yet availa
       </MazSidebarMenu>
     </MazSidebarContent>
     <MazSidebarFooter>
-      <div class="maz:p-4">Footer</div>
+      <div class="p-4">Footer</div>
     </MazSidebarFooter>
   </MazSidebar>
-  <main class="maz:flex-1 maz:p-4">Main content</main>
+  <main class="flex-1 p-4">Main content</main>
 </div>
 
 <script setup>
@@ -91,43 +73,8 @@ const isOpen = ref(true)
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Groups & dividers
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
-    <MazSidebar v-model:open="groupsOpen" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarGroup label="Navigation">
-          <MazSidebarMenu>
-            <MazSidebarMenuItem>
-              <MazSidebarMenuButton label="Dashboard" :active="true" />
-            </MazSidebarMenuItem>
-            <MazSidebarMenuItem>
-              <MazSidebarMenuButton label="Projects" />
-            </MazSidebarMenuItem>
-          </MazSidebarMenu>
-        </MazSidebarGroup>
-        <MazSidebarSeparator />
-        <MazSidebarGroup label="Settings">
-          <MazSidebarMenu>
-            <MazSidebarMenuItem>
-              <MazSidebarMenuButton label="Profile" />
-            </MazSidebarMenuItem>
-            <MazSidebarMenuItem>
-              <MazSidebarMenuButton label="Billing" />
-            </MazSidebarMenuItem>
-          </MazSidebarMenu>
-        </MazSidebarGroup>
-      </MazSidebarContent>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:p-4">Main content</main>
-  </div>
-
-<template #code>
-
 ```html
 <MazSidebar v-model:open="isOpen">
   <MazSidebarContent>
@@ -153,44 +100,8 @@ const isOpen = ref(true)
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Sub-menus
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
-    <MazSidebar v-model:open="submenusOpen" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Dashboard" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuSub label="Products" :default-open="true">
-              <MazSidebarMenuItem>
-                <MazSidebarMenuButton label="All Products" />
-              </MazSidebarMenuItem>
-              <MazSidebarMenuItem>
-                <MazSidebarMenuButton label="Add Product" />
-              </MazSidebarMenuItem>
-            </MazSidebarMenuSub>
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuSub label="Reports">
-              <MazSidebarMenuItem>
-                <MazSidebarMenuButton label="Sales" />
-              </MazSidebarMenuItem>
-            </MazSidebarMenuSub>
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:p-4">Main content</main>
-  </div>
-
-<template #code>
-
 ```html
 <MazSidebar v-model:open="isOpen">
   <MazSidebarContent>
@@ -210,9 +121,6 @@ const isOpen = ref(true)
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Icon mode with tooltips
 
 When `collapsible="icon"` and the sidebar is collapsed, labels fade out and only the icons stay visible. To help users identify items in collapsed state, provide a `tooltip` prop on each `MazSidebarMenuButton`: it uses the `v-tooltip` directive and is only shown on hover when the sidebar is collapsed by default.
@@ -221,8 +129,8 @@ When `collapsible="icon"` and the sidebar is collapsed, labels fade out and only
 
 Both `MazSidebar` and `MazSidebarMenuButton` accept a `tooltip-mode` prop:
 
-- `closed` (default on the sidebar) — tooltip only shows on hover when the sidebar is collapsed
-- `always` — tooltip shows on hover regardless of the sidebar state
+- `closed` (default on the sidebar) - tooltip only shows on hover when the sidebar is collapsed
+- `always` - tooltip shows on hover regardless of the sidebar state
 
 Set it on the sidebar to apply to every descendant button, or override per-button:
 
@@ -243,34 +151,9 @@ Set it on the sidebar to apply to every descendant button, or override per-butto
 </MazSidebar>
 ```
 
-::: tip Performance
-When no `tooltip` prop is provided on a button, the `v-tooltip` directive is not attached at all — no listeners, no popover instance.
-:::
-
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[25rem] maz:flex">
-    <MazSidebar v-model:open="iconModeOpen" collapsible="icon" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton :icon="MazHome" label="Dashboard" tooltip="Go to Dashboard" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton :icon="MazCog6Tooth" label="Settings" tooltip="Open Settings" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-      <MazSidebarFooter>
-        <MazSidebarTrigger />
-      </MazSidebarFooter>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:flex maz:flex-col maz:gap-4 maz:p-4">
-      Click the trigger to collapse/expand
-      <MazBtn @click="iconModeOpen = !iconModeOpen">Toggle sidebar</MazBtn>
-    </main>
-  </div>
+**Tip: Performance**
 
-<template #code>
+When no `tooltip` prop is provided on a button, the `v-tooltip` directive is not attached at all - no listeners, no popover instance.
 
 ```html
 <script setup>
@@ -296,35 +179,13 @@ const isOpen = ref(true)
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Hover mode
 
 `collapsible="hover"` displays the sidebar in icon-only mode and **automatically expands it when the mouse enters the sidebar (or any descendant) and collapses it when the mouse leaves**. Keyboard focus also expands the sidebar, so users navigating with `Tab` see the full labels.
 
-::: tip
-This is a **purely visual** state. The `v-model:open` value is not updated and the persistence cookie is not written when the sidebar expands or collapses through hover. Use this mode when you want the rail-style sidebar of `collapsible="icon"` without exposing a toggle.
-:::
-
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[22rem] maz:flex">
-    <MazSidebar collapsible="hover" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton :icon="MazHome" label="Dashboard" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton :icon="MazCog6Tooth" label="Settings" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:p-4">Move your cursor over the sidebar to expand it.</main>
-  </div>
+**Tip:**
 
-<template #code>
+This is a **purely visual** state. The `v-model:open` value is not updated and the persistence cookie is not written when the sidebar expands or collapses through hover. Use this mode when you want the rail-style sidebar of `collapsible="icon"` without exposing a toggle.
 
 ```html
 <MazSidebar collapsible="hover">
@@ -341,71 +202,19 @@ This is a **purely visual** state. The `v-model:open` value is not updated and t
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Offcanvas mode
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[20rem] maz:flex">
-    <MazSidebar v-model:open="offcanvasOpen" collapsible="offcanvas" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Home" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="About" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:flex maz:flex-col maz:gap-4 maz:p-4">
-      <MazBtn @click="offcanvasOpen = !offcanvasOpen">Toggle sidebar</MazBtn>
-      Main content — sidebar disappears completely when closed
-    </main>
-  </div>
-
-<template #code>
-
 ```html
 <MazSidebar v-model:open="isOpen" collapsible="offcanvas">
   <!-- content -->
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Overlay vs push mode
 
 In `mode="push"` (default), the sidebar is part of the document flow and pushes the main content.
 In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape key support and focus trapping.
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[20rem] maz:relative">
-    <MazBtn class="maz:absolute maz:top-4 maz:left-4 maz:z-1" @click="overlayOpen = !overlayOpen">
-      Toggle overlay sidebar
-    </MazBtn>
-    <MazSidebar v-model:open="overlayOpen" mode="overlay">
-      <MazSidebarHeader>
-        <div class="maz:p-4 maz:font-bold">Overlay Sidebar</div>
-      </MazSidebarHeader>
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Home" :active="true" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-      <MazSidebarFooter>
-        <MazSidebarTrigger />
-      </MazSidebarFooter>
-    </MazSidebar>
-  </div>
-
-<template #code>
-
 ```html
 <!-- Overlay mode: sidebar floats over content -->
 <MazSidebar v-model:open="isOpen" mode="overlay">
@@ -413,71 +222,21 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Side end (right)
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[20rem] maz:flex">
-    <main class="maz:flex-1 maz:p-4">Main content</main>
-    <MazSidebar v-model:open="sideEndOpen" side="end" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Right panel item" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-    </MazSidebar>
-  </div>
-
-<template #code>
-
 ```html
-<div class="maz:flex maz:h-screen">
-  <main class="maz:flex-1">Main content</main>
+<div class="flex h-screen">
+  <main class="flex-1">Main content</main>
   <MazSidebar v-model:open="isOpen" side="end">
     <!-- content -->
   </MazSidebar>
 </div>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Badges
 
 `badge` accepts a `string`, a `number`, or a full `MazBadgeProps` object (with an optional `text`) to fine-tune color, size, outlined, etc.
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[22rem] maz:flex">
-    <MazSidebar v-model:open="badgesOpen" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Inbox" :badge="12" :active="true" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Errors" :badge="{ text: 3, color: 'destructive' }" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Beta" :badge="{ text: 'NEW', color: 'success', outlined: true }" />
-          </MazSidebarMenuItem>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Settings" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:flex maz:flex-col maz:gap-4 maz:p-4">
-      Badges are hidden in icon-collapsed mode.
-      <MazBtn @click="badgesOpen = !badgesOpen">Toggle sidebar</MazBtn>
-    </main>
-  </div>
-
-<template #code>
-
 ```html
 <!-- Simple: pass a string or number -->
 <MazSidebarMenuButton label="Inbox" :badge="12" />
@@ -493,59 +252,28 @@ In `mode="overlay"`, the sidebar floats over the content with a backdrop, escape
 />
 ```
 
-  </template>
-</ComponentDemo>
-
 ## User menu in footer
 
-<ComponentDemo>
-  <div class="maz:border maz:border-divider maz:overflow-hidden maz:rounded-md maz:h-[22rem] maz:flex">
-    <MazSidebar v-model:open="userMenuOpen" class="maz:h-full">
-      <MazSidebarContent>
-        <MazSidebarMenu>
-          <MazSidebarMenuItem>
-            <MazSidebarMenuButton label="Dashboard" :active="true" />
-          </MazSidebarMenuItem>
-        </MazSidebarMenu>
-      </MazSidebarContent>
-      <MazSidebarFooter>
-        <div class="maz:flex maz:items-center maz:gap-3 maz:p-3">
-          <MazAvatar src="https://placedog.net/100/100" size="0.8rem" />
-          <div class="maz:flex-1 maz:min-w-0">
-            <p class="maz:m-0 maz:text-md maz:font-semibold">Jane Doe</p>
-            <p class="maz:m-0 maz:text-xs maz:text-muted">jane@example.com</p>
-          </div>
-        </div>
-      </MazSidebarFooter>
-    </MazSidebar>
-    <main class="maz:flex-1 maz:p-4">Main content</main>
-  </div>
-
-<template #code>
-
 ```html
 <MazSidebar v-model:open="isOpen">
   <MazSidebarContent><!-- ... --></MazSidebarContent>
   <MazSidebarFooter>
-    <div class="maz:flex maz:items-center maz:gap-3 maz:p-3">
+    <div class="flex items-center gap-3 p-3">
       <MazAvatar src="..." size="0.8rem" />
-      <div class="maz:flex-1 maz:min-w-0">
-        <p class="maz:m-0 maz:text-md maz:font-semibold">Jane Doe</p>
-        <p class="maz:m-0 maz:text-xs maz:text-muted">jane@example.com</p>
+      <div class="flex-1 min-w-0">
+        <p class="m-0 text-md font-semibold">Jane Doe</p>
+        <p class="m-0 text-xs text-muted">jane@example.com</p>
       </div>
     </div>
   </MazSidebarFooter>
 </MazSidebar>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Mobile (static rendering)
 
-::: info
+**Note:**
+
 Automatic mobile drawer (drawer auto under a breakpoint with backdrop) is a **deferred v1.1 feature**. For now, control the sidebar visibility programmatically based on viewport.
-:::
 
 ```html
 <script setup>
@@ -561,11 +289,11 @@ watch(isMobile, (mobile) => {
 </script>
 
 <template>
-  <div class="maz:flex maz:h-screen">
+  <div class="flex h-screen">
     <MazSidebar v-model:open="isOpen" :mode="isMobile ? 'overlay' : 'push'">
       <!-- content -->
     </MazSidebar>
-    <main class="maz:flex-1">
+    <main class="flex-1">
       <MazSidebarTrigger />
       <!-- page content -->
     </main>
@@ -628,7 +356,7 @@ The sidebar persists its open/collapsed state in a cookie (`maz-sidebar-open`) s
 
 ### SSR considerations
 
-Persistence is **SSR-native** — the server reads the request cookie and renders the sidebar in its persisted state immediately, so there is no expand → collapse flash on hydration. This works out of the box in Nuxt and any Vue 3 SSR runtime that exposes the request headers through `useSSRContext()`.
+Persistence is **SSR-native** - the server reads the request cookie and renders the sidebar in its persisted state immediately, so there is no expand → collapse flash on hydration. This works out of the box in Nuxt and any Vue 3 SSR runtime that exposes the request headers through `useSSRContext()`.
 
 If you prefer to manage the state yourself (e.g. to share it with other parts of your app), disable persistence and feed the cookie via your own ref:
 
@@ -648,7 +376,7 @@ const sidebarOpen = useCookie<boolean>('maz-sidebar-open', { default: () => true
 
 ## With router (vue-router / NuxtLink)
 
-`MazSidebarMenuButton` uses `resolveLinkComponent()` internally — it detects `RouterLink` (vue-router) or a provided `NuxtLink`. Pass the `to` prop for router navigation, `href` for plain anchor links.
+`MazSidebarMenuButton` uses `resolveLinkComponent()` internally - it detects `RouterLink` (vue-router) or a provided `NuxtLink`. Pass the `to` prop for router navigation, `href` for plain anchor links.
 
 ```html
 <!-- With vue-router -->
@@ -687,33 +415,93 @@ Customize the sidebar width using these CSS custom properties (also settable via
 
 ## MazSidebar
 
-<!--@include: ./../../.vitepress/generated-docs/maz-sidebar.doc.md-->
+## MazSidebar API
+
+`import MazSidebar from 'maz-ui/components/MazSidebar'`
+
+### Props
+
+- `id` (`string`): Unique identifier for the sidebar (auto-generated if not provided).
+- `open` (`boolean`, default: `true`, `v-model:open`): Whether the sidebar is open.
+- `side` (`"end" | "start"`, default: `"start"`): Side of the sidebar.
+- `collapsible` (`"icon" | "none" | "hover" | "offcanvas"`, default: `"offcanvas"`): How the sidebar collapses - offcanvas: completely hidden - icon: only icons visible - hover: only icons visible by default, expands on mouse hover or keyboard focus (transient visual state - does not update `v-model:open` nor the persistence cookie) - none: always fully visible.
+- `mode` (`"push" | "overlay"`, default: `"push"`): How the sidebar affects layout - push: sidebar is in document flow - overlay: sidebar floats over content with a backdrop.
+- `width` (`string`, default: `"16rem"`): Width of the expanded sidebar.
+- `icon-width` (`string`, default: `"3rem"`): Width of the collapsed sidebar in icon mode.
+- `tooltip-mode` (`MazSidebarTooltipMode`, default: `"closed"`): When descendant `MazSidebarMenuButton` components should display their tooltip. - `always`: tooltip shows on hover regardless of the sidebar state - `closed`: tooltip only shows on hover when the sidebar is collapsed Individual buttons can override this via their own `tooltipMode` prop.
+- `persist` (`boolean`, default: `true`): Persist the open/collapsed state in a cookie so it survives reloads. Restoration happens on client mount (SSR-safe). For zero-flash SSR, read the cookie server-side and forward it via `v-model:open`.
+- `persist-key` (`string`, default: `"maz-sidebar-open"`): Cookie key used when `persist` is enabled. Set a unique key per sidebar instance if you mount several sidebars on the same site.
+
+### Events
+
+- `@update:open` (payload: `value: boolean`): Emitted when open state changes
+
+### Slots
+
+- `#default`
+
+### Exposed (template ref)
+
+- `toggle`
+- `setOpen`
 
 ## MazSidebarMenuButton
 
-<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-menu-button.doc.md-->
+## MazSidebarMenuButton API
+
+`import MazSidebarMenuButton from 'maz-ui/components/MazSidebarMenuButton'`
+
+### Props
+
+- `to` (`string | Record<string, unknown>`): Route for router-link navigation.
+- `href` (`string`): URL for anchor navigation.
+- `icon` (`any`): Icon to display before the label. Accepts a bare icon value (Vue component, raw SVG string, URL) or a full `MazIconProps` object for fine-grained control (size, title, fallback, …).
+- `label` (`string`): Label text.
+- `badge` (`MazSidebarMenuButtonBadge`): Badge content. Pass a `string`/`number` for a simple primary badge, or a full `MazBadgeProps` object (with optional `text`) to customise color, size, outlined, ….
+- `tooltip` (`string`): Tooltip text. When provided, shows a tooltip on hover via the `v-tooltip` directive.
+- `tooltip-mode` (`MazSidebarTooltipMode`): Controls when the tooltip should be displayed. - `always`: tooltip shows on hover regardless of the sidebar state - `closed`: tooltip only shows on hover when the sidebar is collapsed Overrides the parent `MazSidebar`'s `tooltipMode`. Falls back to the sidebar value (which defaults to `always`) when not provided.
+- `active` (`boolean`): Whether the item is active (highlights with `aria-current="page"`).
+- `disabled` (`boolean`): Whether the item is disabled.
+- `size` (`"sm" | "md" | "lg"`, default: `"md"`): Size of the button.
+
+### Events
+
+- `@click` (payload: `event: MouseEvent`)
+
+### Slots
+
+- `#icon`
+- `#default`
 
 ## MazSidebarMenuSub
 
-<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-menu-sub.doc.md-->
+## MazSidebarMenuSub API
+
+`import MazSidebarMenuSub from 'maz-ui/components/MazSidebarMenuSub'`
+
+### Props
+
+- `label` (`string`): Label for the sub-menu trigger button.
+- `icon` (`any`): Icon to display before the label. Accepts a bare icon value (Vue component, raw SVG string, URL) or a full `MazIconProps` object for fine-grained control.
+- `default-open` (`boolean`, default: `false`): Whether the sub-menu is open by default.
+
+### Slots
+
+- `#icon`
+- `#label`
+- `#chevron`
+- `#default`
 
 ## MazSidebarGroup
 
-<!--@include: ./../../.vitepress/generated-docs/maz-sidebar-group.doc.md-->
+## MazSidebarGroup API
 
-<script setup>
-import { ref } from 'vue'
+`import MazSidebarGroup from 'maz-ui/components/MazSidebarGroup'`
 
-import { MazHome } from '@maz-ui/icons/lazy/MazHome'
-import { MazCog6Tooth } from '@maz-ui/icons/lazy/MazCog6Tooth'
+### Props
 
-const overlayOpen = ref(false)
-const offcanvasOpen = ref(true)
-const userMenuOpen = ref(true)
-const badgesOpen = ref(true)
-const sideEndOpen = ref(true)
-const iconModeOpen = ref(true)
-const submenusOpen = ref(true)
-const groupsOpen = ref(true)
-const basicOpen = ref(true)
-</script>
+- `label` (`string`): Optional label for the group.
+
+### Slots
+
+- `#default`