@maz-ui/mcp 5.0.0-beta.0 → 5.0.0-beta.11

package/docs/generated-docs/maz-window-mockup.doc.md

@@ -0,0 +1,23 @@
+## Props
+
+| Name              | Description                                                                                       | Type                                                     | Required | Default     | Possible values                     |
+| ----------------- | ------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- | ----------- | ----------------------------------- |
+| **id**            | Stable id used to scope the empty-state SVG pattern. Auto-generated if not provided.              | `string`                                                 | No       | `undefined` | -                                   |
+| **variant**       | Window style variant                                                                              | `MazWindowMockupVariant`                                 | No       | `browser`   | `browser' \| 'terminal' \| 'editor` |
+| **url**           | URL to display in the browser address bar (browser variant only)                                  | `string`                                                 | No       | `localhost` | -                                   |
+| **filename**      | Filename to display in the editor tab (editor variant only)                                       | `string`                                                 | No       | `index.vue` | -                                   |
+| **title**         | Title to display in the terminal title bar (terminal variant only)                                | `string`                                                 | No       | `zsh`       | -                                   |
+| **min-height**    | Minimum height of the content area as a CSS value (e.g. '200px')                                  | `string`                                                 | No       | `undefined` | -                                   |
+| **code**          | Source code to display using MazCodeHighlight. Takes priority over the default slot.              | `string`                                                 | No       | `undefined` | -                                   |
+| **language**      | Language identifier for syntax highlighting (e.g. 'vue', 'ts', 'bash')                            | `string`                                                 | No       | `undefined` | -                                   |
+| **label**         | Label displayed inside the empty-state placeholder when no code and no slot content are provided. | `string`                                                 | No       | `undefined` | -                                   |
+| **hide-prompt**   | Whether to hide the terminal prompt prefix (no-op on non-terminal variants)                       | `boolean`                                                | No       | `false`     | -                                   |
+| **prompt**        | Prefix to display before the code in the terminal (terminal variant only)                         | `string`                                                 | No       | `$`         | -                                   |
+| **hide-url-copy** | Hide the copy-to-clipboard button next to the URL bar (browser variant only).                     | `boolean`                                                | No       | `false`     | -                                   |
+| **translations**  | Custom translations for the component. Override either key independently.                         | `Partial<MazUiTranslationsNestedSchema['windowMockup']>` | No       | `undefined` | -                                   |
+
+## Slots
+
+| Name    | Description                                                            | Bindings |
+| ------- | ---------------------------------------------------------------------- | -------- |
+| default | Free content (image, interface, etc.) shown when code prop is not set. |          |

package/docs/src/blog/v5.md

@@ -90,9 +90,7 @@ 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
 

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

@@ -54,7 +54,7 @@ description: MazBadge is a standalone component to show short text in colored co
     'destructive',
     'contrast',
     'accent',
-    'background',
+    'surface',
     'transparent',
   ]
 </script>
@@ -89,7 +89,7 @@ const colors = [
   'destructive',
   'contrast',
   'accent',
-  'background',
+  'surface',
   'transparent',
 ]
 </script>
@@ -124,7 +124,7 @@ const colors = [
     'destructive',
     'contrast',
     'accent',
-    'background',
+    'surface',
     'transparent',
   ]
 </script>
@@ -196,7 +196,7 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
     'destructive',
     'contrast',
     'accent',
-    'background',
+    'surface',
     'transparent',
   ]
 

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

@@ -141,7 +141,7 @@ const colors = [
   'contrast',
   'accent',
   'transparent',
-  'background',
+  'surface',
 ]
 </script>
 
@@ -597,7 +597,7 @@ When `to` attribute is provided, the component automatically becomes a `<RouterL
     'warning',
     'destructive',
     'contrast',
-    'background',
+    'surface',
     'transparent',
   ]
 

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

@@ -0,0 +1,233 @@
+---
+title: MazCodeHighlight
+description: MazCodeHighlight displays source code with syntax highlighting powered by shiki. It auto-detects dark/light mode, ships with a copy-to-clipboard button, a language badge, and supports lazy loading.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+
+## Installation requirement
+
+Install [`shiki`](https://shiki.style) in your project to enable highlighting:
+
+::: code-group
+
+```bash [pnpm]
+pnpm add shiki
+```
+
+```bash [npm]
+npm install shiki
+```
+
+```bash [yarn]
+yarn add shiki
+```
+
+:::
+
+If `shiki` is not installed, the component falls back to a plain `<pre><code>` block.
+
+## Basic usage
+
+<ComponentDemo>
+  <MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## With slot
+
+The default slot text is used as source code when the `code` prop is not provided. This is useful for plain text blocks.
+
+<ComponentDemo>
+  <MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Languages
+
+Pass any valid [shiki language identifier](https://shiki.style/languages) to the `language` prop. The chosen language is also displayed as a small badge in the top-right corner (the badge fades out on hover when the copy button appears).
+
+<ComponentDemo>
+  <MazCodeHighlight language="vue" :code="vueExample" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight language="vue" :code="vueExample" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+
+  const vueExample = `<script lang="ts" setup>
+  import { ref } from 'vue'
+  const count = ref(0)
+<\/script>
+
+<template>
+  <button @click="count++">Count: {{ count }}</button>
+</template>`
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom theme
+
+Override the auto-detected theme with any [shiki built-in theme](https://shiki.style/themes).
+
+<ComponentDemo>
+  <MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Copy to clipboard
+
+A copy button is displayed in the top-right corner on hover (or when focused via keyboard). Clicking it writes the resolved code to the clipboard and shows a check icon for ~1.5s.
+
+### Disable the copy button
+
+Set `:copyable="false"` to hide the button entirely.
+
+<ComponentDemo>
+  <MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Copy a different value than the displayed code
+
+Use `copyValue` when the displayed source differs from what should be copied — for example to strip a leading `$` prompt when rendering a shell command. This is the mechanism `MazWindowMockup` uses internally to keep the terminal prompt out of the clipboard.
+
+<ComponentDemo>
+  <MazCodeHighlight code="$ pnpm add maz-ui" copy-value="pnpm add maz-ui" language="bash" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight
+    code="$ pnpm add maz-ui"
+    copy-value="pnpm add maz-ui"
+    language="bash"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Disable rounded corners
+
+Set `:rounded="false"` to render the highlighted block with squared corners — useful when embedding inside another container that already has its own border-radius (e.g. inside `MazWindowMockup`).
+
+<ComponentDemo>
+  <MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom translations
+
+The copy button's aria-label and tooltip come from the `@maz-ui/translations` package (`codeHighlight.copyToClipboard` / `codeHighlight.copiedToClipboard`). You can override either key per-instance with the `translations` prop without touching the global locale:
+
+<ComponentDemo>
+  <MazCodeHighlight
+    code="const hello = 'world'"
+    language="ts"
+    :translations="{ copyToClipboard: 'Copier le code', copiedToClipboard: 'Copié !' }"
+  />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight
+    code="const hello = 'world'"
+    language="ts"
+    :translations="{
+      copyToClipboard: 'Copier le code',
+      copiedToClipboard: 'Copié !',
+    }"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
+
+<script lang="ts" setup>
+  const vueExample = `<script lang="ts" setup>
+  import { ref } from 'vue'
+  const count = ref(0)
+<\/script>
+
+<template>
+  <button @click="count++">Count: {{ count }}</button>
+</template>`
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-code-highlight.doc.md-->

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

@@ -301,7 +301,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
 <ComponentDemo>
   <MazContainer
     title="Dashboard Overview"
-    start-icon="chart-bar"
+    start-icon="/chart-bar.svg"
     elevation
     :bordered="false"
     rounded-size="xl"
@@ -329,7 +329,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
 <template>
   <MazContainer
     title="Dashboard Overview"
-    start-icon="chart-bar"
+    start-icon="/chart-bar.svg"
     elevation
     :bordered="false"
     rounded-size="xl"

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

@@ -8,7 +8,7 @@ description: A flexible icon component that accepts Vue components, raw SVG stri
 {{ $frontmatter.description }}
 
 ::: tip
-Download the bundled icons pack [here](#get-icons-pack), or use [`@maz-ui/icons`](../guide/icons.md) for the full set.
+Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../guide/icons.md) for the full set.
 :::
 
 ## How it works

package/docs/src/components/maz-input-phone-number.md

@@ -68,34 +68,28 @@ const results = ref<MazInputPhoneNumberData>()
 Control which countries appear in the dropdown and their order.
 
 <ComponentDemo>
-  <div class="maz:space-y-4">
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Preferred Countries</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Show your most common countries first</p>
-      <MazInputPhoneNumber
-        v-model="phone1"
-        :preferred-countries="['US', 'FR', 'GB', 'DE', 'CA']"
-        placeholder="Common countries appear first"
-      />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Only Specific Countries</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Limit to certain countries only</p>
-      <MazInputPhoneNumber
-        v-model="phone2"
-        :only-countries="['US', 'FR', 'GB', 'DE', 'IT', 'ES']"
-        placeholder="Only European + North American countries"
-      />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Ignore Countries</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Remove unwanted countries</p>
-      <MazInputPhoneNumber
-        v-model="phone3"
-        :ignored-countries="['AF', 'AL', 'DZ']"
-        placeholder="Some countries are hidden"
-      />
-    </div>
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <MazInputPhoneNumber
+      top-label="Preferred Countries"
+      assistive-text="Show your most common countries first"
+      v-model="phone1"
+      :preferred-countries="['US', 'FR', 'GB', 'DE', 'CA']"
+      placeholder="Common countries appear first"
+    />
+    <MazInputPhoneNumber
+      top-label="Only Specific Countries"
+      assistive-text="Limit to certain countries only"
+      v-model="phone2"
+      :only-countries="['US', 'FR', 'GB', 'DE', 'IT', 'ES']"
+      placeholder="Only European + North American countries"
+    />
+    <MazInputPhoneNumber
+      top-label="Ignore Countries"
+      assistive-text="Remove unwanted countries"
+      v-model="phone3"
+      :ignored-countries="['AF', 'AL', 'DZ']"
+      placeholder="Some countries are hidden"
+    />
   </div>
 
 <template #code>
@@ -133,22 +127,22 @@ Control which countries appear in the dropdown and their order.
 Choose how the country selector and phone input are arranged.
 
 <ComponentDemo>
-  <div class="maz:space-y-6">
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Responsive (Default)</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Stacks on mobile, side-by-side on desktop</p>
-      <MazInputPhoneNumber orientation="responsive" />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Always Row</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Side-by-side on all screen sizes</p>
-      <MazInputPhoneNumber orientation="row" />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Always Column</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Stacked on all screen sizes</p>
-      <MazInputPhoneNumber orientation="col" />
-    </div>
+  <div class="maz:flex maz:flex-col maz:gap-6">
+    <MazInputPhoneNumber
+      top-label="Responsive"
+      assistive-text="Stacks on mobile, side-by-side on desktop"
+      orientation="responsive"
+    />
+    <MazInputPhoneNumber
+      top-label="Always Row"
+      assistive-text="Side-by-side on all screen sizes"
+      orientation="row"
+    />
+    <MazInputPhoneNumber
+      top-label="Always Column"
+      assistive-text="Stacked on all screen sizes"
+      orientation="col"
+    />
   </div>
 
 <template #code>
@@ -156,13 +150,25 @@ Choose how the country selector and phone input are arranged.
 ```vue
 <template>
   <!-- Responsive layout (default) -->
-  <MazInputPhoneNumber orientation="responsive" />
+  <MazInputPhoneNumber
+    top-label="Responsive"
+    assistive-text="Stacks on mobile, side-by-side on desktop"
+    orientation="responsive"
+  />
 
   <!-- Always side-by-side -->
-  <MazInputPhoneNumber orientation="row" />
+  <MazInputPhoneNumber
+    top-label="Always Row"
+    assistive-text="Side-by-side on all screen sizes"
+    orientation="row"
+  />
 
   <!-- Always stacked -->
-  <MazInputPhoneNumber orientation="col" />
+  <MazInputPhoneNumber
+    top-label="Always Column"
+    assistive-text="Stacked on all screen sizes"
+    orientation="col"
+  />
 </template>
 ```
 
@@ -174,34 +180,30 @@ Choose how the country selector and phone input are arranged.
 Customize what information is shown to users.
 
 <ComponentDemo>
-  <div class="maz:space-y-6">
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Show Country Names</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Display country names instead of calling codes</p>
-      <MazInputPhoneNumber
-        display-country-name
-        :translations="{
-          countrySelect: { placeholder: 'Choose country' }
-        }"
-      />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Show Calling Codes in List</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Help users see the dialing codes</p>
-      <MazInputPhoneNumber show-code-in-list />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Hide Phone Examples</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">
-        Remove the example phone number hints (visible when the phone input is focused)
-      </p>
-      <MazInputPhoneNumber :example="false" />
-    </div>
-    <div>
-      <h4 class="maz:font-semibold maz:mb-2">Hide Country Flags</h4>
-      <p class="maz:text-sm maz:text-muted maz:mb-2">Text-only country selection</p>
-      <MazInputPhoneNumber hide-flags />
-    </div>
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <MazInputPhoneNumber
+      top-label="Show Country Names"
+      assistive-text="Display country names instead of calling codes"
+      display-country-name
+      :translations="{
+        countrySelect: { placeholder: 'Choose country' }
+      }"
+    />
+    <MazInputPhoneNumber
+      top-label="Show Calling Codes in List"
+      assistive-text="Help users see the dialing codes"
+      show-code-in-list
+    />
+    <MazInputPhoneNumber
+      top-label="Hide Phone Examples"
+      assistive-text="Remove the example phone number hints (visible when the phone input is focused)"
+      :example="false"
+    />
+    <MazInputPhoneNumber
+      top-label="Hide Country Flags"
+      assistive-text="Text-only country selection"
+      hide-flags
+    />
   </div>
 
 <template #code>
@@ -762,34 +764,35 @@ const mobilePhone = ref()
 Understanding what data the component provides.
 
 <ComponentDemo>
-  <div class="maz:space-y-4">
-    <MazInputPhoneNumber
-      v-model="dataPhone"
-      v-model:country-code="dataCountry"
-      label="Enter a phone number to see data"
-      @data="phoneData = $event"
-    />
-    <div v-if="phoneData" class="maz:bg-surface-400 maz:p-4 maz:rounded-md">
-      <h4 class="maz:font-semibold maz:mb-3">📊 Phone Number Data</h4>
-      <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4 maz:text-sm">
-        <div>
-          <strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}
-        </div>
-        <div>
-          <strong>Country:</strong> {{ phoneData?.countryCode || 'None' }}
-        </div>
-        <div>
-          <strong>National Format:</strong> {{ phoneData?.formatNational || 'None' }}
-        </div>
-        <div>
-          <strong>International:</strong> {{ phoneData?.formatInternational || 'None' }}
-        </div>
-        <div>
-          <strong>E164 Format:</strong> {{ phoneData?.e164 || 'None' }}
-        </div>
-        <div>
-          <strong>Phone Type:</strong> {{ phoneData?.type || 'Unknown' }}
-        </div>
+  <MazInputPhoneNumber
+    v-model="dataPhone"
+    v-model:country-code="dataCountry"
+    top-label="Your phone number"
+    placeholder="Enter a phone number to see data"
+    assistive-text="Enter your phone number in international format (e.g. +33612345678)"
+    @data="phoneData = $event"
+  />
+
+  <div v-if="phoneData" class="maz:bg-surface-400 maz:pt-8 maz:rounded-md">
+    <h4 class="maz:font-semibold maz:mb-3">📊 Phone Number Data</h4>
+    <div class="maz:grid maz:grid-cols-1 maz:md:grid-cols-2 maz:gap-4 maz:text-sm">
+      <div>
+        <strong>Valid:</strong> {{ phoneData?.isValid ? '✅' : '❌' }}
+      </div>
+      <div>
+        <strong>Country:</strong> {{ phoneData?.countryCode || 'None' }}
+      </div>
+      <div>
+        <strong>National Format:</strong> {{ phoneData?.formatNational || 'None' }}
+      </div>
+      <div>
+        <strong>International:</strong> {{ phoneData?.formatInternational || 'None' }}
+      </div>
+      <div>
+        <strong>E164 Format:</strong> {{ phoneData?.e164 || 'None' }}
+      </div>
+      <div>
+        <strong>Phone Type:</strong> {{ phoneData?.type || 'Unknown' }}
       </div>
     </div>
   </div>

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

@@ -1356,7 +1356,7 @@ MazPopover follows WAI-ARIA guidelines:
 <script setup>
 import { ref, reactive } from 'vue'
 import MazPopover from 'maz-ui/components/MazPopover'
-import { MazInformationCircle } from '@maz-ui/icons/raw/MazInformationCircle'
+import { MazInformationCircle } from '@maz-ui/icons/static/MazInformationCircle'
 import { MazEllipsisVertical } from '@maz-ui/icons/raw/MazEllipsisVertical'
 
 const isOpen = ref(false)