npm - @maz-ui/mcp - Versions diffs - 4.9.3 → 5.0.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/dist/mcp.mjs +1 -1
package/docs/generated-docs/maz-alert.doc.md +1 -1
package/docs/generated-docs/maz-avatar.doc.md +1 -1
package/docs/generated-docs/maz-badge.doc.md +8 -8
package/docs/generated-docs/maz-btn.doc.md +26 -26
package/docs/generated-docs/maz-card.doc.md +19 -19
package/docs/generated-docs/maz-chart.doc.md +8 -8
package/docs/generated-docs/maz-container.doc.md +20 -20
package/docs/generated-docs/maz-drawer.doc.md +8 -8
package/docs/generated-docs/maz-dropdown.doc.md +1 -1
package/docs/generated-docs/maz-dropzone.doc.md +2 -2
package/docs/generated-docs/maz-gallery.doc.md +15 -15
package/docs/generated-docs/maz-icon.doc.md +11 -14
package/docs/generated-docs/maz-input.doc.md +38 -38
package/docs/generated-docs/maz-lazy-img.doc.md +18 -0
package/docs/generated-docs/maz-link.doc.md +9 -9
package/docs/generated-docs/maz-pagination.doc.md +9 -9
package/docs/generated-docs/maz-popover.doc.md +5 -1
package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
package/docs/generated-docs/maz-select.doc.md +2 -2
package/docs/generated-docs/maz-skeleton.doc.md +10 -10
package/docs/generated-docs/maz-table.doc.md +37 -37
package/docs/generated-docs/maz-textarea.doc.md +1 -1
package/docs/generated-docs/maz-timeline.doc.md +1 -1
package/docs/src/blog/v4.md +7 -7
package/docs/src/blog/v5.md +186 -0
package/docs/src/components/maz-accordion.md +1 -1
package/docs/src/components/maz-alert.md +15 -15
package/docs/src/components/maz-animated-counter.md +4 -4
package/docs/src/components/maz-avatar.md +2 -2
package/docs/src/components/maz-backdrop.md +7 -7
package/docs/src/components/maz-badge.md +12 -30
package/docs/src/components/maz-bottom-sheet.md +74 -74
package/docs/src/components/maz-btn-group.md +17 -17
package/docs/src/components/maz-btn.md +127 -94
package/docs/src/components/maz-card-spotlight.md +5 -5
package/docs/src/components/maz-card.md +20 -20
package/docs/src/components/maz-carousel.md +14 -14
package/docs/src/components/maz-chart.md +23 -4
package/docs/src/components/maz-checkbox.md +3 -3
package/docs/src/components/maz-checklist.md +19 -19
package/docs/src/components/maz-circular-progress-bar.md +4 -4
package/docs/src/components/maz-container.md +52 -37
package/docs/src/components/maz-date-picker.md +7 -7
package/docs/src/components/maz-dialog-confirm.md +2 -2
package/docs/src/components/maz-drawer.md +14 -14
package/docs/src/components/maz-dropdown.md +27 -12
package/docs/src/components/maz-dropzone.md +6 -6
package/docs/src/components/maz-expand-animation.md +2 -2
package/docs/src/components/maz-fullscreen-loader.md +2 -2
package/docs/src/components/maz-gallery.md +1 -1
package/docs/src/components/maz-icon.md +113 -60
package/docs/src/components/maz-input-code.md +1 -1
package/docs/src/components/maz-input-phone-number.md +89 -88
package/docs/src/components/maz-input-tags.md +2 -2
package/docs/src/components/maz-input.md +42 -12
package/docs/src/components/maz-link.md +28 -12
package/docs/src/components/maz-pagination.md +2 -2
package/docs/src/components/maz-popover.md +236 -236
package/docs/src/components/maz-pull-to-refresh.md +2 -2
package/docs/src/components/maz-radio-buttons.md +11 -11
package/docs/src/components/maz-radio.md +3 -3
package/docs/src/components/maz-read-more.md +7 -7
package/docs/src/components/maz-select-country.md +26 -26
package/docs/src/components/maz-select.md +1 -1
package/docs/src/components/maz-skeleton.md +25 -25
package/docs/src/components/maz-spinner.md +2 -2
package/docs/src/components/maz-stepper.md +5 -5
package/docs/src/components/maz-switch.md +1 -1
package/docs/src/components/maz-table.md +10 -10
package/docs/src/components/maz-tabs.md +17 -17
package/docs/src/components/maz-textarea.md +8 -8
package/docs/src/components/maz-ticker.md +37 -37
package/docs/src/components/maz-timeline.md +9 -9
package/docs/src/composables/use-dialog.md +1 -1
package/docs/src/composables/use-display-names.md +2 -2
package/docs/src/composables/use-form-validator.md +35 -35
package/docs/src/composables/use-idle-timeout.md +3 -3
package/docs/src/composables/use-reading-time.md +5 -5
package/docs/src/composables/use-string-matching.md +4 -4
package/docs/src/composables/use-swipe.md +3 -3
package/docs/src/composables/use-timer.md +3 -3
package/docs/src/composables/use-toast.md +1 -1
package/docs/src/composables/use-user-visibility.md +1 -1
package/docs/src/composables/use-wait.md +2 -2
package/docs/src/directives/click-outside.md +17 -17
package/docs/src/directives/lazy-img.md +5 -5
package/docs/src/directives/tooltip.md +15 -15
package/docs/src/directives/zoom-img.md +1 -1
package/docs/src/ecosystem/eslint-config.md +100 -0
package/docs/src/ecosystem/stylelint-config.md +190 -0
package/docs/src/guide/browser-support.md +81 -0
package/docs/src/guide/getting-started.md +23 -16
package/docs/src/guide/icon-set.md +11 -11
package/docs/src/guide/icons.md +32 -5
package/docs/src/guide/maz-ui-provider.md +6 -6
package/docs/src/guide/migration-v4.md +3 -3
package/docs/src/guide/migration-v5.md +662 -0
package/docs/src/guide/nuxt.md +27 -44
package/docs/src/guide/resolvers.md +2 -2
package/docs/src/guide/tailwind.md +154 -0
package/docs/src/guide/themes.md +258 -485
package/docs/src/guide/vue.md +8 -5
package/docs/src/helpers/capitalize.md +4 -4
package/docs/src/helpers/country-code-to-unicode-flag.md +37 -37
package/docs/src/helpers/currency.md +4 -4
package/docs/src/helpers/date.md +4 -4
package/docs/src/helpers/get-country-flag-url.md +9 -9
package/docs/src/helpers/number.md +5 -5
package/docs/src/index.md +296 -266
package/docs/src/made-with-maz-ui.md +5 -5
package/docs/src/plugins/aos.md +6 -6
package/docs/src/plugins/dialog.md +4 -4
package/docs/src/plugins/toast.md +3 -3
package/docs/src/plugins/wait.md +1 -1
package/package.json +5 -5

package/docs/src/blog/v5.md ADDED Viewed

@@ -0,0 +1,186 @@
+---
+title: Maz-UI v5.0.0 - Theming, perfected
+description: Maz-UI v5 is a focused major release - a theming overhaul on top of Tailwind v4, sharper presets, RTL-correct components, a lighter chart, and tooling to make the upgrade itself a single command.
+date: 2026-05-05
+author: Louis Mazel
+layout: doc
+head:
+  - - meta
+    - name: keywords
+      content: vue ui library, vue components, nuxt ui, maz-ui v5, theming, tailwindcss v4, oklch, rtl, migration
+---
+<img src="/img/post-layer-v5.jpg" alt="Maz-UI v5.0.0" class="maz:rounded-md maz:w-full maz:mb-12" />
+# Maz-UI v5.0.0 - Theming, perfected
+After the v4 rebuild, **Maz-UI v5** is a focused major: **theming**, the move to **Tailwind v4**, and a few long-standing rough edges I wanted gone before tagging stable.
+## Why v5
+Two things forced the major.
+**Tailwind v4 landed.** v4's CSS-first config, new prefix syntax and renamed utilities don't migrate behind the scenes. Bumping Tailwind is a real version change.
+**Theming had outgrown the v4 design.** The single foundation `radius`, the `background` / `border` color names that meant something else than what components actually used, the dual-stage critical-CSS pipeline — none of that aged well. v5 cleans the surface, switches the color system to **OKLCh** for perceptually uniform scales, and exposes proper `scales` and `components` blocks.
+The rest builds on those: components flip cleanly under `dir="rtl"`, the chart is lighter, the icon API is simpler, and there's a CLI for the mechanical part of the upgrade.
+## What's new
+### Theming, top to bottom
+**OKLCh under the hood.** Bundled presets and the dynamic scale generator emit `oklch()` strings. Generated scales (`primary-50` → `primary-950`) ramp consistently across hues — yellow-700 no longer looks muddy next to blue-700, and Display P3 is on the table. Existing custom presets in `hsl()`, `rgb()`, `#hex` or the legacy `'210 100% 56%'` form keep parsing.
+**Honest names.** `background` is now `surface`, `border` is now `divider` — same rename in the runtime CSS variables (`--maz-surface[-N]`, `--maz-divider[-N]`).
+**A real radius scale.** `foundation.radius` becomes `scales.rounded.{xs..3xl}`, so `maz:rounded-md`, `maz:rounded-lg`, etc. all move with your preset.
+**A `components` block.** Per-component tokens (button font weight, container/input backgrounds, …) are now explicit knobs you can override. Optional, with sensible defaults.
+**A new bundled preset, `nova`** — electric violet primary, cyan accent, hot coral secondary, Geist font stack — joins `mazUi`, `pristine`, `ocean` and `obsidian`. Each existing preset got a palette refresh so secondary and accent voices actually pop.
+**Preset persistence.** v5 remembers the user's last preset choice in a `maz-preset` cookie (1-year, `SameSite=Lax`) so a runtime theme switcher survives reloads. Opt out with `persistPreset: false`.
+**Single rendering path.** The two-stage critical-CSS / async-full-CSS dance is gone. `Strategy` is now `'runtime' | 'buildtime'`. Less surface, less to worry about.
+### Components that respect direction
+Every prop, slot and CSS hook that named a *visual* edge is now a *logical* edge:
+- `left-icon` / `right-icon` → `start-icon` / `end-icon` (props, slots, classes)
+- `MazCard` `footer-align` and `MazDrawer` `variant` flip from `left | right` to `start | end`
+- `top` / `bottom` stay (block-axis edges that don't flip in RTL)
+Drop `dir="rtl"` on `<html>` and components mirror correctly. Same approach as Radix, MUI or native CSS logical properties.
+### A lighter chart
+`MazChart` no longer wraps `vue-chartjs`. It talks to `chart.js` directly, lazy-loads the engine on mount, and only registers the modules the chart `type` actually needs. `update-mode` defaults to `'none'` so reactive data updates don't re-animate every frame — pass `update-mode="default"` for the v4 behavior.
+### A simpler icon API
+`MazIcon` v4 had four ways to specify an icon. v5 collapses everything into a single `icon` prop that accepts a Vue component, a URL/`data:` URI, or a raw SVG string.
+Plus three small additions:
+- `fallback` — used when the icon is missing or fails to load.
+- `flip-icon-for-rtl` — auto-mirrors chevrons / arrows in RTL.
+- `@maz-ui/icons/raw/*` — every bundled icon as a **raw SVG string** for inlining without a Vue component or async chunk.
+### `MazBadge` size, standardized
+The numeric `size="0.8rem"` form is gone. Like the rest of the library, `MazBadge`'s `size` is one of `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`.
+### Modern browsers, finally
+v5 leans on `color-mix()`, `@property` and native CSS nesting. That means **Chromium 111+, Safari 16.4+, Firefox 128+** — no polyfill path. If your audience still relies on older browsers, stay on v4. Full rationale on the [Browser Support](/guide/browser-support) page.
+## Migration
+Two tools so the upgrade isn't a chore.
+### `@maz-ui/upgrade` — a one-shot CLI
+```bash
+# Preview
+npx @maz-ui/upgrade ./ --dry-run
+# Apply
+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.
+### `@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.
+```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).
+### The full guide
+Everything that changed: [v5 migration guide](/guide/migration-v5).
+## Solo maintainer notice
+Maz-UI is maintained by a single developer. After v5 stable, **v4 will no longer receive support** — no security fixes, no backports. Plan your upgrade.
+## Getting Started
+### For Vue projects
+```bash
+npm install maz-ui@5
+```
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+import { mazUi } from '@maz-ui/themes/presets'
+import { fr } from '@maz-ui/translations'
+import 'maz-ui/style.css'
+const app = createApp(App)
+app.use(MazUi, {
+  theme: { preset: mazUi },
+  translations: { locale: 'fr', fallbackLocale: 'en', messages: { fr } },
+})
+app.mount('#app')
+```
+### For Nuxt projects
+```bash
+npm install @maz-ui/nuxt@5
+```
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+})
+```
+## 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
+- **[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
+- **[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
+## Get Started
+**Ready to upgrade to Maz-UI v5?**
+<div class="maz:flex maz:gap-4 maz:mt-8 maz:flex-wrap">
+  <MazBtn href="https://maz-ui.com/guide/migration-v5" size="md" class="vp-raw">
+    Migration Guide
+  </MazBtn>
+  <MazBtn href="https://maz-ui.com/guide/getting-started" color="surface" outlined size="md" class="vp-raw">
+    Get Started
+  </MazBtn>
+  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="surface" outlined size="md" target="blank" class="vp-raw">
+    View on GitHub
+  </MazBtn>
+</div>
+---
+*Feedback and contributions welcome — open an issue or discussion on GitHub.*

package/docs/src/components/maz-accordion.md CHANGED Viewed

@@ -11,7 +11,7 @@ description: MazAccordion is a standalone component that allows you to create an
 ## Basic usage
-<MazAccordion class="maz-w-full">
+<MazAccordion class="maz:w-full">
   <template #title-1>
     Title 1
   </template>

package/docs/src/components/maz-alert.md CHANGED Viewed

@@ -38,7 +38,7 @@ MazAlert supports two visual variants: `soft` (default) with transparent backgro
 The soft variant uses a transparent background with colored text.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert color="info" variant="soft" title="Soft Info" content="This is the default soft variant with transparent background." />
     <MazAlert color="success" variant="soft" title="Soft Success" content="Subtle and non-intrusive style." />
     <MazAlert color="destructive" variant="soft" title="Soft Error" content="Easy on the eyes while still noticeable." />
@@ -62,7 +62,7 @@ The soft variant uses a transparent background with colored text.
 The solid variant uses the full color as background with contrasting text.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert color="info" variant="solid" title="Solid Info" content="Full color background for high visibility." />
     <MazAlert color="success" variant="solid" title="Solid Success" content="Great for important notifications." />
     <MazAlert color="destructive" variant="solid" title="Solid Error" content="Impossible to miss critical alerts." />
@@ -84,7 +84,7 @@ The solid variant uses the full color as background with contrasting text.
 ### All colors with solid variant
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert v-for="color in colors" :key="color" :color="color" variant="solid" :title="capitalize(color)" :content="`Solid ${color} alert.`" />
   </div>
@@ -108,7 +108,7 @@ The solid variant uses the full color as background with contrasting text.
 MazAlert supports all theme colors to convey different types of messages.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert v-for="color in colors" :key="color" :color="color" :title="capitalize(color)" :content="`This is a ${color} alert message.`" />
   </div>
@@ -139,7 +139,7 @@ Use slots for more complex content with custom HTML.
     <template #title>
       3 errors found
     </template>
-    <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
+    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
       <li>firstname - Invalid length: Expected >=5 but received 0</li>
       <li>lastname - Invalid length: Expected >=2 but received 0</li>
       <li>age - Invalid type: Expected number but received ""</li>
@@ -154,7 +154,7 @@ Use slots for more complex content with custom HTML.
     <template #title>
       3 errors found
     </template>
-    <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
+    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
       <li>firstname - Invalid length: Expected >=5 but received 0</li>
       <li>lastname - Invalid length: Expected >=2 but received 0</li>
       <li>age - Invalid type: Expected number but received ""</li>
@@ -171,7 +171,7 @@ Use slots for more complex content with custom HTML.
 Remove the border with `:bordered="false"`.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert color="success" title="Without border" content="This alert has no border." :bordered="false" />
     <MazAlert color="success" title="With border (default)" content="This alert has a border." />
   </div>
@@ -203,7 +203,7 @@ Remove the border with `:bordered="false"`.
 Customize the border radius with the `rounded-size` prop.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert v-for="size in roundedSizes" :key="size" :rounded-size="size" :title="`Rounded: ${size}`" content="Customize the border radius." />
   </div>
@@ -230,7 +230,7 @@ Customize the border radius with the `rounded-size` prop.
 Hide the default icon with `hide-icon`.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
     <MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
   </div>
@@ -252,7 +252,7 @@ Hide the default icon with `hide-icon`.
 Provide a custom icon using the `icon` prop.
 <ComponentDemo>
-  <MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="bell" />
+  <MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="/bell.svg" />
   <template #code>
@@ -262,7 +262,7 @@ Provide a custom icon using the `icon` prop.
     color="primary"
     title="Custom icon"
     content="This alert uses a custom icon."
-    icon="bell"
+    icon="/bell.svg"
   />
 </template>
 ```
@@ -275,7 +275,7 @@ Provide a custom icon using the `icon` prop.
 You can use either title, content, or both.
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazAlert color="info" title="Title only alert" />
     <MazAlert color="success" content="Content only alert without a title." />
     <MazAlert color="warning" title="Both title and content" content="This alert has both." />
@@ -300,7 +300,7 @@ You can use either title, content, or both.
 <ComponentDemo>
   <MazAlert color="destructive" title="Please fix the following errors:">
-    <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
+    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
       <li>Email address is required</li>
       <li>Password must be at least 8 characters</li>
     </ul>
@@ -311,7 +311,7 @@ You can use either title, content, or both.
 ```vue
 <template>
   <MazAlert color="destructive" title="Please fix the following errors:">
-    <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
+    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
       <li>Email address is required</li>
       <li>Password must be at least 8 characters</li>
     </ul>
@@ -364,7 +364,7 @@ You can use either title, content, or both.
 <script lang="ts" setup>
   const colors = ['info', 'success', 'warning', 'destructive', 'primary', 'secondary', 'accent', 'contrast']
-  const roundedSizes = ['none', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl']
+  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
   function capitalize(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1)

package/docs/src/components/maz-animated-counter.md CHANGED Viewed

@@ -71,7 +71,7 @@ You can add a prefix and a suffix to the number with props or slots.
 Be careful, you can't use both at the same time.
 <ComponentDemo>
-  <p class="maz-font-semibold">
+  <p class="maz:font-semibold">
     Prefixed
   </p>
@@ -86,7 +86,7 @@ Be careful, you can't use both at the same time.
   <br />
   <br />
-  <p class="maz-font-semibold">
+  <p class="maz:font-semibold">
     Suffixed
   </p>
@@ -101,7 +101,7 @@ Be careful, you can't use both at the same time.
 <template #code>
 ```html
-<p class="maz-font-semibold">Prefixed</p>
+<p class="maz:font-semibold">Prefixed</p>
 <MazAnimatedCounter :count="20" prefix="$" />
@@ -109,7 +109,7 @@ Be careful, you can't use both at the same time.
   <template #prefix>$</template>
 </MazAnimatedCounter>
-<p class="maz-font-semibold">Suffixed</p>
+<p class="maz:font-semibold">Suffixed</p>
 <MazAnimatedCounter :count="100" suffix="%" />

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

@@ -47,7 +47,7 @@ See all the options props [here](#props-event-slots)
     clickable
   >
     <template #icon>
-      <MazIcon name="eye" style="color: white;" size="2rem" />
+      <MazIcon icon="/eye.svg" style="color: white;" size="2rem" />
     </template>
   </MazAvatar>
@@ -90,7 +90,7 @@ function clicked() { console.log('clicked') }
     no-size
   >
     <template #icon>
-      <MazIcon name="eye" />
+      <MazIcon icon="/eye.svg" />
     </template>
   </MazAvatar>
   <MazAvatar

package/docs/src/components/maz-backdrop.md CHANGED Viewed

@@ -54,9 +54,9 @@ const basicOpen = ref(false)
 <style lang="css" scoped>
 .demo-content {
-  background: hsl(var(--maz-background));
+  background: var(--maz-surface);
   padding: 2rem;
-  border-radius: var(--maz-radius);
+  border-radius: var(--maz-rounded-md);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   text-align: center;
@@ -68,7 +68,7 @@ const basicOpen = ref(false)
 .demo-content p {
   margin-bottom: 1.5rem;
-  color: hsl(var(--maz-muted));
+  color: var(--maz-muted);
 }
 </style>
 ```
@@ -115,7 +115,7 @@ A persistent backdrop cannot be closed by clicking outside or pressing Escape. P
 You can control where your content appears using `justify` and `align` props. It's like choosing where to place a sticker on your screen!
 <ComponentDemo>
-  <div class="maz-flex maz-flex-wrap maz-gap-2">
+  <div class="maz:flex maz:flex-wrap maz:gap-2">
     <MazBtn @click="topLeftOpen = true">Top Left</MazBtn>
     <MazBtn @click="centerOpen = true">Center</MazBtn>
     <MazBtn @click="bottomRightOpen = true">Bottom Right</MazBtn>
@@ -231,9 +231,9 @@ These features work automatically - you don't need to do anything extra!
 <style scoped>
 .demo-content {
-  background: hsl(var(--maz-background));
+  background: var(--maz-surface);
   padding: 2rem;
-  border-radius: var(--maz-radius);
+  border-radius: var(--maz-rounded-md);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   max-width: 400px;
   text-align: center;
@@ -245,6 +245,6 @@ These features work automatically - you don't need to do anything extra!
 .demo-content p {
   margin-bottom: 1.5rem;
-  color: hsl(var(--maz-muted));
+  color: var(--maz-muted);
 }
 </style>

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

@@ -138,46 +138,26 @@ const colors = [
 ### Size
+The `size` prop accepts one of the standardized `MazSize` values (`'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`). The default is `'md'`. Padding, line-height and dimensions all scale relative to the chosen font-size, so a single keyword controls the whole badge footprint.
 <br />
 <div class="flex space-between gap-05 items-center flex-wrap">
-  <MazBadge size="0.8rem">
-    0.8rem
-  </MazBadge>
-  <MazBadge size="1.2rem">
-    1.2rem
-  </MazBadge>
-  <MazBadge size="1.6rem">
-    1.6rem
-  </MazBadge>
-  <MazBadge size="2rem">
-    2rem
-  </MazBadge>
-  <MazBadge size="2.4rem">
-    2.4rem
+  <MazBadge v-for="size in sizes" :key="size" :size="size">
+    {{ size }}
   </MazBadge>
 </div>
 ```vue
 <script lang="ts" setup>
 import MazBadge from 'maz-ui/components/MazBadge'
+const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 </script>
 <template>
-  <MazBadge size="0.8rem">
-    0.8rem
-  </MazBadge>
-  <MazBadge size="1.2rem">
-    1.2rem
-  </MazBadge>
-  <MazBadge size="1.6rem">
-    1.6rem
-  </MazBadge>
-  <MazBadge size="2rem">
-    2rem
-  </MazBadge>
-  <MazBadge size="2.4rem">
-    2.4rem
+  <MazBadge v-for="size in sizes" :key="size" :size="size">
+    {{ size }}
   </MazBadge>
 </template>
 ```
@@ -187,7 +167,7 @@ import MazBadge from 'maz-ui/components/MazBadge'
 <br />
 <div class="flex space-between gap-05 items-center flex-wrap">
-  <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size" size="1.2rem">
+  <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size">
     {{ size }}
   </MazBadge>
 </div>
@@ -200,7 +180,7 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
 </script>
 <template>
-  <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size" size="1.2rem">
+  <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size">
     {{ size }}
   </MazBadge>
 </template>
@@ -220,6 +200,8 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
     'transparent',
   ]
+  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
   const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
 </script>