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

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
  1. package/dist/mcp.mjs +1 -1
  2. package/docs/generated-docs/maz-alert.doc.md +1 -1
  3. package/docs/generated-docs/maz-avatar.doc.md +1 -1
  4. package/docs/generated-docs/maz-badge.doc.md +8 -8
  5. package/docs/generated-docs/maz-btn.doc.md +26 -26
  6. package/docs/generated-docs/maz-card.doc.md +19 -19
  7. package/docs/generated-docs/maz-chart.doc.md +8 -8
  8. package/docs/generated-docs/maz-container.doc.md +20 -20
  9. package/docs/generated-docs/maz-drawer.doc.md +8 -8
  10. package/docs/generated-docs/maz-dropdown.doc.md +1 -1
  11. package/docs/generated-docs/maz-dropzone.doc.md +2 -2
  12. package/docs/generated-docs/maz-gallery.doc.md +15 -15
  13. package/docs/generated-docs/maz-icon.doc.md +11 -14
  14. package/docs/generated-docs/maz-input.doc.md +38 -38
  15. package/docs/generated-docs/maz-lazy-img.doc.md +18 -0
  16. package/docs/generated-docs/maz-link.doc.md +9 -9
  17. package/docs/generated-docs/maz-pagination.doc.md +9 -9
  18. package/docs/generated-docs/maz-popover.doc.md +5 -1
  19. package/docs/generated-docs/maz-radio-buttons.doc.md +17 -17
  20. package/docs/generated-docs/maz-select.doc.md +2 -2
  21. package/docs/generated-docs/maz-skeleton.doc.md +10 -10
  22. package/docs/generated-docs/maz-table.doc.md +37 -37
  23. package/docs/generated-docs/maz-textarea.doc.md +1 -1
  24. package/docs/generated-docs/maz-timeline.doc.md +1 -1
  25. package/docs/src/blog/v4.md +7 -7
  26. package/docs/src/blog/v5.md +186 -0
  27. package/docs/src/components/maz-accordion.md +1 -1
  28. package/docs/src/components/maz-alert.md +15 -15
  29. package/docs/src/components/maz-animated-counter.md +4 -4
  30. package/docs/src/components/maz-avatar.md +2 -2
  31. package/docs/src/components/maz-backdrop.md +7 -7
  32. package/docs/src/components/maz-badge.md +16 -34
  33. package/docs/src/components/maz-bottom-sheet.md +74 -74
  34. package/docs/src/components/maz-btn-group.md +17 -17
  35. package/docs/src/components/maz-btn.md +129 -96
  36. package/docs/src/components/maz-card-spotlight.md +5 -5
  37. package/docs/src/components/maz-card.md +20 -20
  38. package/docs/src/components/maz-carousel.md +14 -14
  39. package/docs/src/components/maz-chart.md +23 -4
  40. package/docs/src/components/maz-checkbox.md +3 -3
  41. package/docs/src/components/maz-checklist.md +19 -19
  42. package/docs/src/components/maz-circular-progress-bar.md +4 -4
  43. package/docs/src/components/maz-container.md +52 -37
  44. package/docs/src/components/maz-date-picker.md +7 -7
  45. package/docs/src/components/maz-dialog-confirm.md +2 -2
  46. package/docs/src/components/maz-drawer.md +14 -14
  47. package/docs/src/components/maz-dropdown.md +27 -12
  48. package/docs/src/components/maz-dropzone.md +6 -6
  49. package/docs/src/components/maz-expand-animation.md +2 -2
  50. package/docs/src/components/maz-fullscreen-loader.md +2 -2
  51. package/docs/src/components/maz-gallery.md +1 -1
  52. package/docs/src/components/maz-icon.md +113 -60
  53. package/docs/src/components/maz-input-code.md +1 -1
  54. package/docs/src/components/maz-input-phone-number.md +89 -88
  55. package/docs/src/components/maz-input-tags.md +2 -2
  56. package/docs/src/components/maz-input.md +42 -12
  57. package/docs/src/components/maz-link.md +28 -12
  58. package/docs/src/components/maz-pagination.md +2 -2
  59. package/docs/src/components/maz-popover.md +236 -236
  60. package/docs/src/components/maz-pull-to-refresh.md +2 -2
  61. package/docs/src/components/maz-radio-buttons.md +11 -11
  62. package/docs/src/components/maz-radio.md +3 -3
  63. package/docs/src/components/maz-read-more.md +7 -7
  64. package/docs/src/components/maz-select-country.md +26 -26
  65. package/docs/src/components/maz-select.md +1 -1
  66. package/docs/src/components/maz-skeleton.md +25 -25
  67. package/docs/src/components/maz-spinner.md +2 -2
  68. package/docs/src/components/maz-stepper.md +5 -5
  69. package/docs/src/components/maz-switch.md +1 -1
  70. package/docs/src/components/maz-table.md +10 -10
  71. package/docs/src/components/maz-tabs.md +17 -17
  72. package/docs/src/components/maz-textarea.md +8 -8
  73. package/docs/src/components/maz-ticker.md +37 -37
  74. package/docs/src/components/maz-timeline.md +9 -9
  75. package/docs/src/composables/use-dialog.md +1 -1
  76. package/docs/src/composables/use-display-names.md +2 -2
  77. package/docs/src/composables/use-form-validator.md +35 -35
  78. package/docs/src/composables/use-idle-timeout.md +3 -3
  79. package/docs/src/composables/use-reading-time.md +5 -5
  80. package/docs/src/composables/use-string-matching.md +4 -4
  81. package/docs/src/composables/use-swipe.md +3 -3
  82. package/docs/src/composables/use-timer.md +3 -3
  83. package/docs/src/composables/use-toast.md +1 -1
  84. package/docs/src/composables/use-user-visibility.md +1 -1
  85. package/docs/src/composables/use-wait.md +2 -2
  86. package/docs/src/directives/click-outside.md +17 -17
  87. package/docs/src/directives/lazy-img.md +5 -5
  88. package/docs/src/directives/tooltip.md +15 -15
  89. package/docs/src/directives/zoom-img.md +1 -1
  90. package/docs/src/ecosystem/eslint-config.md +187 -0
  91. package/docs/src/ecosystem/stylelint-config.md +302 -0
  92. package/docs/src/guide/browser-support.md +81 -0
  93. package/docs/src/guide/getting-started.md +23 -16
  94. package/docs/src/guide/icon-set.md +11 -11
  95. package/docs/src/guide/icons.md +32 -5
  96. package/docs/src/guide/maz-ui-provider.md +6 -6
  97. package/docs/src/guide/migration-v4.md +3 -3
  98. package/docs/src/guide/migration-v5.md +662 -0
  99. package/docs/src/guide/nuxt.md +27 -44
  100. package/docs/src/guide/resolvers.md +2 -2
  101. package/docs/src/guide/tailwind.md +154 -0
  102. package/docs/src/guide/themes.md +258 -485
  103. package/docs/src/guide/vue.md +8 -5
  104. package/docs/src/helpers/capitalize.md +4 -4
  105. package/docs/src/helpers/country-code-to-unicode-flag.md +37 -37
  106. package/docs/src/helpers/currency.md +4 -4
  107. package/docs/src/helpers/date.md +4 -4
  108. package/docs/src/helpers/get-country-flag-url.md +9 -9
  109. package/docs/src/helpers/number.md +5 -5
  110. package/docs/src/index.md +296 -266
  111. package/docs/src/made-with-maz-ui.md +5 -5
  112. package/docs/src/plugins/aos.md +6 -6
  113. package/docs/src/plugins/dialog.md +4 -4
  114. package/docs/src/plugins/toast.md +3 -3
  115. package/docs/src/plugins/wait.md +1 -1
  116. package/package.json +5 -5
package/docs/src/blog/v5.md ADDED
@@ -0,0 +1,186 @@
1
+ ---
2
+ title: Maz-UI v5.0.0 - Theming, perfected
3
+ 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.
4
+ date: 2026-05-05
5
+ author: Louis Mazel
6
+ layout: doc
7
+ head:
8
+ - - meta
9
+ - name: keywords
10
+ content: vue ui library, vue components, nuxt ui, maz-ui v5, theming, tailwindcss v4, oklch, rtl, migration
11
+ ---
12
+
13
+ <img src="/img/post-layer-v5.jpg" alt="Maz-UI v5.0.0" class="maz:rounded-md maz:w-full maz:mb-12" />
14
+
15
+ # Maz-UI v5.0.0 - Theming, perfected
16
+
17
+ 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.
18
+
19
+ ## Why v5
20
+
21
+ Two things forced the major.
22
+
23
+ **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.
24
+
25
+ **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.
26
+
27
+ 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.
28
+
29
+ ## What's new
30
+
31
+ ### Theming, top to bottom
32
+
33
+ **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.
34
+
35
+ **Honest names.** `background` is now `surface`, `border` is now `divider` — same rename in the runtime CSS variables (`--maz-surface[-N]`, `--maz-divider[-N]`).
36
+
37
+ **A real radius scale.** `foundation.radius` becomes `scales.rounded.{xs..3xl}`, so `maz:rounded-md`, `maz:rounded-lg`, etc. all move with your preset.
38
+
39
+ **A `components` block.** Per-component tokens (button font weight, container/input backgrounds, …) are now explicit knobs you can override. Optional, with sensible defaults.
40
+
41
+ **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.
42
+
43
+ **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`.
44
+
45
+ **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.
46
+
47
+ ### Components that respect direction
48
+
49
+ Every prop, slot and CSS hook that named a *visual* edge is now a *logical* edge:
50
+
51
+ - `left-icon` / `right-icon` → `start-icon` / `end-icon` (props, slots, classes)
52
+ - `MazCard` `footer-align` and `MazDrawer` `variant` flip from `left | right` to `start | end`
53
+ - `top` / `bottom` stay (block-axis edges that don't flip in RTL)
54
+
55
+ Drop `dir="rtl"` on `<html>` and components mirror correctly. Same approach as Radix, MUI or native CSS logical properties.
56
+
57
+ ### A lighter chart
58
+
59
+ `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.
60
+
61
+ ### A simpler icon API
62
+
63
+ `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.
64
+
65
+ Plus three small additions:
66
+
67
+ - `fallback` — used when the icon is missing or fails to load.
68
+ - `flip-icon-for-rtl` — auto-mirrors chevrons / arrows in RTL.
69
+ - `@maz-ui/icons/raw/*` — every bundled icon as a **raw SVG string** for inlining without a Vue component or async chunk.
70
+
71
+ ### `MazBadge` size, standardized
72
+
73
+ 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'`.
74
+
75
+ ### Modern browsers, finally
76
+
77
+ 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.
78
+
79
+ ## Migration
80
+
81
+ Two tools so the upgrade isn't a chore.
82
+
83
+ ### `@maz-ui/upgrade` — a one-shot CLI
84
+
85
+ ```bash
86
+ # Preview
87
+ npx @maz-ui/upgrade ./ --dry-run
88
+
89
+ # Apply
90
+ npx @maz-ui/upgrade ./
91
+ ```
92
+
93
+ 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.
94
+
95
+ It respects your `.gitignore`, walks `.vue`/`.css`/`.ts`/`.tsx`/`.cts`/`.mts`/`.js`/`.jsx`/`.cjs`/`.mjs` and `package.json`, and skips the usual build dirs.
96
+
97
+ ### `@maz-ui/mcp` — for everything else
98
+
99
+ 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.
100
+
101
+ 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.
102
+
103
+ ```bash
104
+ # Claude Code
105
+ claude mcp add maz-ui npx @maz-ui/mcp --scope project
106
+ ```
107
+
108
+ Cursor, Windsurf, VS Code Copilot, Cline and Claude Desktop are all in the [MCP guide](/guide/mcp).
109
+
110
+ ### The full guide
111
+
112
+ Everything that changed: [v5 migration guide](/guide/migration-v5).
113
+
114
+ ## Solo maintainer notice
115
+
116
+ 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.
117
+
118
+ ## Getting Started
119
+
120
+ ### For Vue projects
121
+
122
+ ```bash
123
+ npm install maz-ui@5
124
+ ```
125
+
126
+ ```typescript
127
+ // main.ts
128
+ import { createApp } from 'vue'
129
+ import { MazUi } from 'maz-ui/plugins/maz-ui'
130
+ import { mazUi } from '@maz-ui/themes/presets'
131
+ import { fr } from '@maz-ui/translations'
132
+ import 'maz-ui/style.css'
133
+
134
+ const app = createApp(App)
135
+
136
+ app.use(MazUi, {
137
+ theme: { preset: mazUi },
138
+ translations: { locale: 'fr', fallbackLocale: 'en', messages: { fr } },
139
+ })
140
+
141
+ app.mount('#app')
142
+ ```
143
+
144
+ ### For Nuxt projects
145
+
146
+ ```bash
147
+ npm install @maz-ui/nuxt@5
148
+ ```
149
+
150
+ ```typescript
151
+ // nuxt.config.ts
152
+ export default defineNuxtConfig({
153
+ modules: ['@maz-ui/nuxt'],
154
+ })
155
+ ```
156
+
157
+ ## Essential Links
158
+
159
+ - **[v5 Migration Guide](/guide/migration-v5)** — every breaking change, the upgrade CLI, the MCP flow
160
+ - **[Theming](/guide/themes)** — preset authoring, `scales` and `components` blocks, runtime switching
161
+ - **[Browser Support](/guide/browser-support)** — minimum versions and the features they enable
162
+ - **[Tailwind integration](/guide/tailwind)** — for consumers who ship their own Tailwind setup
163
+ - **[`@maz-ui/upgrade` README](https://github.com/LouisMazel/maz-ui/tree/master/packages/upgrade)** — full transform list and CLI reference
164
+ - **[Model Context Protocol (MCP)](/guide/mcp)** — connect AI assistants to the Maz-UI docs
165
+ - **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** — source code & issues
166
+ - **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** — detailed release notes
167
+
168
+ ## Get Started
169
+
170
+ **Ready to upgrade to Maz-UI v5?**
171
+
172
+ <div class="maz:flex maz:gap-4 maz:mt-8 maz:flex-wrap">
173
+ <MazBtn href="https://maz-ui.com/guide/migration-v5" size="md" class="vp-raw">
174
+ Migration Guide
175
+ </MazBtn>
176
+ <MazBtn href="https://maz-ui.com/guide/getting-started" color="surface" outlined size="md" class="vp-raw">
177
+ Get Started
178
+ </MazBtn>
179
+ <MazBtn href="https://github.com/LouisMazel/maz-ui" color="surface" outlined size="md" target="blank" class="vp-raw">
180
+ View on GitHub
181
+ </MazBtn>
182
+ </div>
183
+
184
+ ---
185
+
186
+ *Feedback and contributions welcome — open an issue or discussion on GitHub.*
package/docs/src/components/maz-accordion.md CHANGED
@@ -11,7 +11,7 @@ description: MazAccordion is a standalone component that allows you to create an
11
11
 
12
12
  ## Basic usage
13
13
 
14
- <MazAccordion class="maz-w-full">
14
+ <MazAccordion class="maz:w-full">
15
15
  <template #title-1>
16
16
  Title 1
17
17
  </template>
package/docs/src/components/maz-alert.md CHANGED
@@ -38,7 +38,7 @@ MazAlert supports two visual variants: `soft` (default) with transparent backgro
38
38
  The soft variant uses a transparent background with colored text.
39
39
 
40
40
  <ComponentDemo>
41
- <div class="maz-flex maz-flex-col maz-gap-4">
41
+ <div class="maz:flex maz:flex-col maz:gap-4">
42
42
  <MazAlert color="info" variant="soft" title="Soft Info" content="This is the default soft variant with transparent background." />
43
43
  <MazAlert color="success" variant="soft" title="Soft Success" content="Subtle and non-intrusive style." />
44
44
  <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.
62
62
  The solid variant uses the full color as background with contrasting text.
63
63
 
64
64
  <ComponentDemo>
65
- <div class="maz-flex maz-flex-col maz-gap-4">
65
+ <div class="maz:flex maz:flex-col maz:gap-4">
66
66
  <MazAlert color="info" variant="solid" title="Solid Info" content="Full color background for high visibility." />
67
67
  <MazAlert color="success" variant="solid" title="Solid Success" content="Great for important notifications." />
68
68
  <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.
84
84
  ### All colors with solid variant
85
85
 
86
86
  <ComponentDemo>
87
- <div class="maz-flex maz-flex-col maz-gap-4">
87
+ <div class="maz:flex maz:flex-col maz:gap-4">
88
88
  <MazAlert v-for="color in colors" :key="color" :color="color" variant="solid" :title="capitalize(color)" :content="`Solid ${color} alert.`" />
89
89
  </div>
90
90
 
@@ -108,7 +108,7 @@ The solid variant uses the full color as background with contrasting text.
108
108
  MazAlert supports all theme colors to convey different types of messages.
109
109
 
110
110
  <ComponentDemo>
111
- <div class="maz-flex maz-flex-col maz-gap-4">
111
+ <div class="maz:flex maz:flex-col maz:gap-4">
112
112
  <MazAlert v-for="color in colors" :key="color" :color="color" :title="capitalize(color)" :content="`This is a ${color} alert message.`" />
113
113
  </div>
114
114
 
@@ -139,7 +139,7 @@ Use slots for more complex content with custom HTML.
139
139
  <template #title>
140
140
  3 errors found
141
141
  </template>
142
- <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
142
+ <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
143
143
  <li>firstname - Invalid length: Expected >=5 but received 0</li>
144
144
  <li>lastname - Invalid length: Expected >=2 but received 0</li>
145
145
  <li>age - Invalid type: Expected number but received ""</li>
@@ -154,7 +154,7 @@ Use slots for more complex content with custom HTML.
154
154
  <template #title>
155
155
  3 errors found
156
156
  </template>
157
- <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
157
+ <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
158
158
  <li>firstname - Invalid length: Expected >=5 but received 0</li>
159
159
  <li>lastname - Invalid length: Expected >=2 but received 0</li>
160
160
  <li>age - Invalid type: Expected number but received ""</li>
@@ -171,7 +171,7 @@ Use slots for more complex content with custom HTML.
171
171
  Remove the border with `:bordered="false"`.
172
172
 
173
173
  <ComponentDemo>
174
- <div class="maz-flex maz-flex-col maz-gap-4">
174
+ <div class="maz:flex maz:flex-col maz:gap-4">
175
175
  <MazAlert color="success" title="Without border" content="This alert has no border." :bordered="false" />
176
176
  <MazAlert color="success" title="With border (default)" content="This alert has a border." />
177
177
  </div>
@@ -203,7 +203,7 @@ Remove the border with `:bordered="false"`.
203
203
  Customize the border radius with the `rounded-size` prop.
204
204
 
205
205
  <ComponentDemo>
206
- <div class="maz-flex maz-flex-col maz-gap-4">
206
+ <div class="maz:flex maz:flex-col maz:gap-4">
207
207
  <MazAlert v-for="size in roundedSizes" :key="size" :rounded-size="size" :title="`Rounded: ${size}`" content="Customize the border radius." />
208
208
  </div>
209
209
 
@@ -230,7 +230,7 @@ Customize the border radius with the `rounded-size` prop.
230
230
  Hide the default icon with `hide-icon`.
231
231
 
232
232
  <ComponentDemo>
233
- <div class="maz-flex maz-flex-col maz-gap-4">
233
+ <div class="maz:flex maz:flex-col maz:gap-4">
234
234
  <MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
235
235
  <MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
236
236
  </div>
@@ -252,7 +252,7 @@ Hide the default icon with `hide-icon`.
252
252
  Provide a custom icon using the `icon` prop.
253
253
 
254
254
  <ComponentDemo>
255
- <MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="bell" />
255
+ <MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="/bell.svg" />
256
256
 
257
257
  <template #code>
258
258
 
@@ -262,7 +262,7 @@ Provide a custom icon using the `icon` prop.
262
262
  color="primary"
263
263
  title="Custom icon"
264
264
  content="This alert uses a custom icon."
265
- icon="bell"
265
+ icon="/bell.svg"
266
266
  />
267
267
  </template>
268
268
  ```
@@ -275,7 +275,7 @@ Provide a custom icon using the `icon` prop.
275
275
  You can use either title, content, or both.
276
276
 
277
277
  <ComponentDemo>
278
- <div class="maz-flex maz-flex-col maz-gap-4">
278
+ <div class="maz:flex maz:flex-col maz:gap-4">
279
279
  <MazAlert color="info" title="Title only alert" />
280
280
  <MazAlert color="success" content="Content only alert without a title." />
281
281
  <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.
300
300
 
301
301
  <ComponentDemo>
302
302
  <MazAlert color="destructive" title="Please fix the following errors:">
303
- <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
303
+ <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
304
304
  <li>Email address is required</li>
305
305
  <li>Password must be at least 8 characters</li>
306
306
  </ul>
@@ -311,7 +311,7 @@ You can use either title, content, or both.
311
311
  ```vue
312
312
  <template>
313
313
  <MazAlert color="destructive" title="Please fix the following errors:">
314
- <ul class="maz-m-0 maz-list-inside maz-list-disc maz-pl-0">
314
+ <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
315
315
  <li>Email address is required</li>
316
316
  <li>Password must be at least 8 characters</li>
317
317
  </ul>
@@ -364,7 +364,7 @@ You can use either title, content, or both.
364
364
 
365
365
  <script lang="ts" setup>
366
366
  const colors = ['info', 'success', 'warning', 'destructive', 'primary', 'secondary', 'accent', 'contrast']
367
- const roundedSizes = ['none', 'sm', 'md', 'base', 'lg', 'xl', '2xl', '3xl']
367
+ const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
368
368
 
369
369
  function capitalize(str: string) {
370
370
  return str.charAt(0).toUpperCase() + str.slice(1)
package/docs/src/components/maz-animated-counter.md CHANGED
@@ -71,7 +71,7 @@ You can add a prefix and a suffix to the number with props or slots.
71
71
  Be careful, you can't use both at the same time.
72
72
 
73
73
  <ComponentDemo>
74
- <p class="maz-font-semibold">
74
+ <p class="maz:font-semibold">
75
75
  Prefixed
76
76
  </p>
77
77
 
@@ -86,7 +86,7 @@ Be careful, you can't use both at the same time.
86
86
  <br />
87
87
  <br />
88
88
 
89
- <p class="maz-font-semibold">
89
+ <p class="maz:font-semibold">
90
90
  Suffixed
91
91
  </p>
92
92
 
@@ -101,7 +101,7 @@ Be careful, you can't use both at the same time.
101
101
  <template #code>
102
102
 
103
103
  ```html
104
- <p class="maz-font-semibold">Prefixed</p>
104
+ <p class="maz:font-semibold">Prefixed</p>
105
105
 
106
106
  <MazAnimatedCounter :count="20" prefix="$" />
107
107
 
@@ -109,7 +109,7 @@ Be careful, you can't use both at the same time.
109
109
  <template #prefix>$</template>
110
110
  </MazAnimatedCounter>
111
111
 
112
- <p class="maz-font-semibold">Suffixed</p>
112
+ <p class="maz:font-semibold">Suffixed</p>
113
113
 
114
114
  <MazAnimatedCounter :count="100" suffix="%" />
115
115
 
package/docs/src/components/maz-avatar.md CHANGED
@@ -47,7 +47,7 @@ See all the options props [here](#props-event-slots)
47
47
  clickable
48
48
  >
49
49
  <template #icon>
50
- <MazIcon name="eye" style="color: white;" size="2rem" />
50
+ <MazIcon icon="/eye.svg" style="color: white;" size="2rem" />
51
51
  </template>
52
52
  </MazAvatar>
53
53
 
@@ -90,7 +90,7 @@ function clicked() { console.log('clicked') }
90
90
  no-size
91
91
  >
92
92
  <template #icon>
93
- <MazIcon name="eye" />
93
+ <MazIcon icon="/eye.svg" />
94
94
  </template>
95
95
  </MazAvatar>
96
96
  <MazAvatar
package/docs/src/components/maz-backdrop.md CHANGED
@@ -54,9 +54,9 @@ const basicOpen = ref(false)
54
54
 
55
55
  <style lang="css" scoped>
56
56
  .demo-content {
57
- background: hsl(var(--maz-background));
57
+ background: var(--maz-surface);
58
58
  padding: 2rem;
59
- border-radius: var(--maz-radius);
59
+ border-radius: var(--maz-rounded-md);
60
60
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
61
61
  max-width: 400px;
62
62
  text-align: center;
@@ -68,7 +68,7 @@ const basicOpen = ref(false)
68
68
 
69
69
  .demo-content p {
70
70
  margin-bottom: 1.5rem;
71
- color: hsl(var(--maz-muted));
71
+ color: var(--maz-muted);
72
72
  }
73
73
  </style>
74
74
  ```
@@ -115,7 +115,7 @@ A persistent backdrop cannot be closed by clicking outside or pressing Escape. P
115
115
  You can control where your content appears using `justify` and `align` props. It's like choosing where to place a sticker on your screen!
116
116
 
117
117
  <ComponentDemo>
118
- <div class="maz-flex maz-flex-wrap maz-gap-2">
118
+ <div class="maz:flex maz:flex-wrap maz:gap-2">
119
119
  <MazBtn @click="topLeftOpen = true">Top Left</MazBtn>
120
120
  <MazBtn @click="centerOpen = true">Center</MazBtn>
121
121
  <MazBtn @click="bottomRightOpen = true">Bottom Right</MazBtn>
@@ -231,9 +231,9 @@ These features work automatically - you don't need to do anything extra!
231
231
 
232
232
  <style scoped>
233
233
  .demo-content {
234
- background: hsl(var(--maz-background));
234
+ background: var(--maz-surface);
235
235
  padding: 2rem;
236
- border-radius: var(--maz-radius);
236
+ border-radius: var(--maz-rounded-md);
237
237
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
238
238
  max-width: 400px;
239
239
  text-align: center;
@@ -245,6 +245,6 @@ These features work automatically - you don't need to do anything extra!
245
245
 
246
246
  .demo-content p {
247
247
  margin-bottom: 1.5rem;
248
- color: hsl(var(--maz-muted));
248
+ color: var(--maz-muted);
249
249
  }
250
250
  </style>
package/docs/src/components/maz-badge.md CHANGED
@@ -54,7 +54,7 @@ description: MazBadge is a standalone component to show short text in colored co
54
54
  'destructive',
55
55
  'contrast',
56
56
  'accent',
57
- 'background',
57
+ 'surface',
58
58
  'transparent',
59
59
  ]
60
60
  </script>
@@ -89,7 +89,7 @@ const colors = [
89
89
  'destructive',
90
90
  'contrast',
91
91
  'accent',
92
- 'background',
92
+ 'surface',
93
93
  'transparent',
94
94
  ]
95
95
  </script>
@@ -124,7 +124,7 @@ const colors = [
124
124
  'destructive',
125
125
  'contrast',
126
126
  'accent',
127
- 'background',
127
+ 'surface',
128
128
  'transparent',
129
129
  ]
130
130
  </script>
@@ -138,46 +138,26 @@ const colors = [
138
138
 
139
139
  ### Size
140
140
 
141
+ 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.
142
+
141
143
  <br />
142
144
 
143
145
  <div class="flex space-between gap-05 items-center flex-wrap">
144
- <MazBadge size="0.8rem">
145
- 0.8rem
146
- </MazBadge>
147
- <MazBadge size="1.2rem">
148
- 1.2rem
149
- </MazBadge>
150
- <MazBadge size="1.6rem">
151
- 1.6rem
152
- </MazBadge>
153
- <MazBadge size="2rem">
154
- 2rem
155
- </MazBadge>
156
- <MazBadge size="2.4rem">
157
- 2.4rem
146
+ <MazBadge v-for="size in sizes" :key="size" :size="size">
147
+ {{ size }}
158
148
  </MazBadge>
159
149
  </div>
160
150
 
161
151
  ```vue
162
152
  <script lang="ts" setup>
163
153
  import MazBadge from 'maz-ui/components/MazBadge'
154
+
155
+ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
164
156
  </script>
165
157
 
166
158
  <template>
167
- <MazBadge size="0.8rem">
168
- 0.8rem
169
- </MazBadge>
170
- <MazBadge size="1.2rem">
171
- 1.2rem
172
- </MazBadge>
173
- <MazBadge size="1.6rem">
174
- 1.6rem
175
- </MazBadge>
176
- <MazBadge size="2rem">
177
- 2rem
178
- </MazBadge>
179
- <MazBadge size="2.4rem">
180
- 2.4rem
159
+ <MazBadge v-for="size in sizes" :key="size" :size="size">
160
+ {{ size }}
181
161
  </MazBadge>
182
162
  </template>
183
163
  ```
@@ -187,7 +167,7 @@ import MazBadge from 'maz-ui/components/MazBadge'
187
167
  <br />
188
168
 
189
169
  <div class="flex space-between gap-05 items-center flex-wrap">
190
- <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size" size="1.2rem">
170
+ <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size">
191
171
  {{ size }}
192
172
  </MazBadge>
193
173
  </div>
@@ -200,7 +180,7 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
200
180
  </script>
201
181
 
202
182
  <template>
203
- <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size" size="1.2rem">
183
+ <MazBadge v-for="size in roundedSize" :key="size" :rounded-size="size">
204
184
  {{ size }}
205
185
  </MazBadge>
206
186
  </template>
@@ -216,10 +196,12 @@ const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
216
196
  'destructive',
217
197
  'contrast',
218
198
  'accent',
219
- 'background',
199
+ 'surface',
220
200
  'transparent',
221
201
  ]
222
202
 
203
+ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
204
+
223
205
  const roundedSize = ['none', 'sm', 'md', 'lg', 'xl', 'full']
224
206
  </script>
225
207