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

package/docs/generated-docs/maz-input.doc.md

@@ -1,38 +1,38 @@
 ## Props
 
-| Name               | Description                                                                                                                                                                    | Type                                                         | Required | Default     | Possible values                                                                            |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ------------------------------------------------------------------------------------------ |
-| **style**          | Inline styles to apply to the component root element                                                                                                                           | `HTMLAttributes['style']`                                    | No       | `undefined` | -                                                                                          |
-| **class**          | CSS classes to apply to the component root element                                                                                                                             | `HTMLAttributes['class']`                                    | No       | `undefined` | -                                                                                          |
-| **model-value**    | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />`              | `T`                                                          | No       | `undefined` | -                                                                                          |
-| **placeholder**    | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"`                                                                         | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **label**          | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"`          | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **top-label**      | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"`                                              | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"`                             | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **color**          | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"`                                                                                 | `MazColor`                                                   | No       | `'primary'` | `primary, secondary, accent, info, success, warning, destructive, contrast`                |
-| **type**           | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"`                                                                         | `InputHTMLAttributes['type']`                                | No       | `'text'`    | `text, password, email, number, tel, url, search, date, time, datetime-local, month, week` |
-| **required**       | Makes the input field mandatory for form submission<br/>**Example:** `true`                                                                                                    | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **disabled**       | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false`                                                                             | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **readonly**       | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false`                                                                       | `boolean`                                                    | No       | `undefined` | -                                                                                          |
-| **id**             | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"`                                                                | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **error**          | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true`                                                                             | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **success**        | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true`                                                                      | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **warning**        | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true`                                                                          | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **hint**           | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"`                                                        | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **input-classes**  | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"`                                                            | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **border**         | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true`                                                                    | `boolean`                                                    | No       | `true`      | -                                                                                          |
-| **inputmode**      | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"`                                                              | `InputHTMLAttributes['inputmode']`                           | No       | `'text'`    | `text, numeric, decimal, tel, search, email, url`                                          |
-| **size**           | Controls the height and text size of the input component<br/>**Example:** `"md"`                                                                                               | `MazSize`                                                    | No       | `'md'`      | `xs, sm, md, lg, xl, mini`                                                                 |
-| **debounce**       | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number`                                          | No       | `false`     | -                                                                                          |
-| **auto-focus**     | Automatically focuses the input when the component mounts<br/>**Example:** `false`                                                                                             | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **border-active**  | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false`                                                                              | `boolean`                                                    | No       | `false`     | -                                                                                          |
-| **left-icon**      | Icon displayed on the left side of the input. Can be an icon name string or icon component<br/>**Example:** `"user"`                                                           | `string \| IconComponent`                                    | No       | `undefined` | -                                                                                          |
-| **right-icon**     | Icon displayed on the right side of the input. Can be an icon name string or icon component<br/>**Example:** `"search"`                                                        | `string \| IconComponent`                                    | No       | `undefined` | -                                                                                          |
-| **rounded-size**   | Controls the border radius of the input component<br/>**Example:** `"lg"`                                                                                                      | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` | No       | `'base'`    | `none, sm, md, lg, xl, full`                                                               |
-| **block**          | Makes the input expand to the full width of its container<br/>**Example:** `false`                                                                                             | `boolean`                                                    | No       | `undefined` | -                                                                                          |
-| **name**           | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                                                | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **autocomplete**   | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                             | `string`                                                     | No       | `undefined` | -                                                                                          |
-| **loading**        | Loading state for the input field. Used to show a loading spinner                                                                                                              | `boolean`                                                    | No       | `false`     | -                                                                                          |
+| Name               | Description                                                                                                                                                                                                                                                    | Type                                               | Required | Default     | Possible values                                                                            |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------ |
+| **style**          | Inline styles to apply to the component root element                                                                                                                                                                                                           | `HTMLAttributes['style']`                          | No       | `undefined` | -                                                                                          |
+| **class**          | CSS classes to apply to the component root element                                                                                                                                                                                                             | `HTMLAttributes['class']`                          | No       | `undefined` | -                                                                                          |
+| **model-value**    | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />`                                                                                              | `T`                                                | No       | `undefined` | -                                                                                          |
+| **placeholder**    | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"`                                                                                                                                                         | `string`                                           | No       | `undefined` | -                                                                                          |
+| **label**          | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"`                                                                                          | `string`                                           | No       | `undefined` | -                                                                                          |
+| **top-label**      | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"`                                                                                                                              | `string`                                           | No       | `undefined` | -                                                                                          |
+| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"`                                                                                                             | `string`                                           | No       | `undefined` | -                                                                                          |
+| **color**          | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"`                                                                                                                                                                 | `MazColor`                                         | No       | `'primary'` | `primary, secondary, accent, info, success, warning, destructive, contrast`                |
+| **type**           | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"`                                                                                                                                                         | `InputHTMLAttributes['type']`                      | No       | `'text'`    | `text, password, email, number, tel, url, search, date, time, datetime-local, month, week` |
+| **required**       | Makes the input field mandatory for form submission<br/>**Example:** `true`                                                                                                                                                                                    | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **disabled**       | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false`                                                                                                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **readonly**       | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false`                                                                                                                                                       | `boolean`                                          | No       | `undefined` | -                                                                                          |
+| **id**             | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"`                                                                                                                                                | `string`                                           | No       | `undefined` | -                                                                                          |
+| **error**          | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true`                                                                                                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **success**        | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true`                                                                                                                                                      | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **warning**        | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true`                                                                                                                                                          | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **hint**           | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"`                                                                                                                                        | `string`                                           | No       | `undefined` | -                                                                                          |
+| **input-classes**  | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"`                                                                                                                                            | `string`                                           | No       | `undefined` | -                                                                                          |
+| **border**         | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true`                                                                                                                                                    | `boolean`                                          | No       | `true`      | -                                                                                          |
+| **inputmode**      | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"`                                                                                                                                              | `InputHTMLAttributes['inputmode']`                 | No       | `'text'`    | `text, numeric, decimal, tel, search, email, url`                                          |
+| **size**           | Controls the height and text size of the input component<br/>**Example:** `"md"`                                                                                                                                                                               | `MazSize`                                          | No       | `'md'`      | `xs, sm, md, lg, xl, mini`                                                                 |
+| **debounce**       | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true`                                                                                 | `boolean \| number`                                | No       | `false`     | -                                                                                          |
+| **auto-focus**     | Automatically focuses the input when the component mounts<br/>**Example:** `false`                                                                                                                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **border-active**  | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false`                                                                                                                                                              | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **start-icon**     | Icon displayed on the inline-start edge of the input (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, …). | `MazIconLike`                                      | No       | `undefined` | -                                                                                          |
+| **end-icon**       | Icon displayed on the inline-end edge of the input (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.                                                                                                                          | `MazIconLike`                                      | No       | `undefined` | -                                                                                          |
+| **rounded-size**   | Controls the border radius of the input component<br/>**Example:** `"lg"`                                                                                                                                                                                      | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No       | `'md'`      | `none, sm, md, lg, xl, full`                                                               |
+| **block**          | Makes the input expand to the full width of its container<br/>**Example:** `false`                                                                                                                                                                             | `boolean`                                          | No       | `undefined` | -                                                                                          |
+| **name**           | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                                                                                                                                | `string`                                           | No       | `undefined` | -                                                                                          |
+| **autocomplete**   | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                                                                                                             | `string`                                           | No       | `undefined` | -                                                                                          |
+| **loading**        | Loading state for the input field. Used to show a loading spinner                                                                                                                                                                                              | `boolean`                                          | No       | `false`     | -                                                                                          |
 
 ## Events
 
@@ -47,8 +47,8 @@
 
 ## Slots
 
-| Name       | Description                                           | Bindings |
-| ---------- | ----------------------------------------------------- | -------- |
-| left-icon  | Custom content for the left side of the input field.  |          |
-| right-icon | Custom content for the right side of the input field. |          |
-| loader     | Loader slot.                                          |          |
+| Name       | Description                                                                              | Bindings |
+| ---------- | ---------------------------------------------------------------------------------------- | -------- |
+| start-icon | Custom content for the inline-start edge of the input field (left in LTR, right in RTL). |          |
+| end-icon   | Custom content for the inline-end edge of the input field (right in LTR, left in RTL).   |          |
+| loader     | Loader slot.                                                                             |          |

package/docs/generated-docs/maz-lazy-img.doc.md

@@ -29,3 +29,21 @@
 | Name    | Description | Bindings |
 | ------- | ----------- | -------- |
 | default |             |          |
+
+## Expose
+
+### onIntersecting
+
+>
+
+### onLoading
+
+>
+
+### onLoaded
+
+>
+
+### onError
+
+>

package/docs/generated-docs/maz-link.doc.md

@@ -9,7 +9,7 @@
 | **title**           | The title of the link                                                                                                                                                                                                                     | `string`                                                                                  | No       | `undefined`                                                                                          | -                                         |
 | **href**            | The href of the link                                                                                                                                                                                                                      | `string`                                                                                  | No       | `undefined`                                                                                          | -                                         |
 | **to**              | The route location (router-link) of the link                                                                                                                                                                                              | `RouteLocationRaw`                                                                        | No       | `undefined`                                                                                          | -                                         |
-| **color**           | The color of the link                                                                                                                                                                                                                     | `MazColor \| "muted" \| "background" \| "inherit"`                                        | No       | `primary' When 'none', the link will not have any color, so it will inherit the color of the parent` | -                                         |
+| **color**           | The color of the link                                                                                                                                                                                                                     | `MazColor \| "muted" \| "surface" \| "inherit"`                                           | No       | `primary' When 'none', the link will not have any color, so it will inherit the color of the parent` | -                                         |
 | **target**          | The target of the link                                                                                                                                                                                                                    | `"_blank" \| "_self" \| "_parent" \| "_top" \| string`                                    | No       | `_self`                                                                                              | `_blank', '_self', '_parent', '_top`      |
 | **download**        | The download of the link                                                                                                                                                                                                                  | `string`                                                                                  | No       | `undefined`                                                                                          | -                                         |
 | **rel**             | The rel of the link                                                                                                                                                                                                                       | `string`                                                                                  | No       | `undefined`                                                                                          | -                                         |
@@ -17,15 +17,15 @@
 | **underline**       | Add an underline to the link                                                                                                                                                                                                              | `boolean`                                                                                 | No       | `false`                                                                                              | -                                         |
 | **underline-hover** | Add an underline only on hover                                                                                                                                                                                                            | `boolean`                                                                                 | No       | `true`                                                                                               | -                                         |
 | **auto-external**   | Add an external icon to the link if target is '\_blank'                                                                                                                                                                                   | `boolean`                                                                                 | No       | `true`                                                                                               | -                                         |
-| **left-icon**       | The name of the icon or component to display on the left of the text `@type` `{string \| FunctionalComponent \| ComponentPublicInstance \| Component}`                                                                                    | `string \| IconComponent`                                                                 | No       | `undefined`                                                                                          | -                                         |
-| **right-icon**      | The name of the icon or component to display on the right of the text `@type` `{string \| FunctionalComponent \| ComponentPublicInstance \| Component}`                                                                                   | `string \| IconComponent`                                                                 | No       | `undefined`                                                                                          | -                                         |
+| **start-icon**      | Icon displayed on the inline-start edge (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control.                                   | `MazIconLike`                                                                             | No       | `undefined`                                                                                          | -                                         |
+| **end-icon**        | Icon displayed on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.                                                                                                                  | `MazIconLike`                                                                             | No       | `undefined`                                                                                          | -                                         |
 | **disabled**        | The disabled state of the link if the component is a button                                                                                                                                                                               | `boolean`                                                                                 | No       | `false`                                                                                              | -                                         |
 
 ## Slots
 
-| Name          | Description                                 | Bindings |
-| ------------- | ------------------------------------------- | -------- |
-| left-icon     | The icon to display on the left of the text |          |
-| default       | Text of the link                            |          |
-| right-icon    | The icon to display on the left of the text |          |
-| external-icon | Replace the default external icon           |          |
+| Name          | Description                                                                          | Bindings |
+| ------------- | ------------------------------------------------------------------------------------ | -------- |
+| start-icon    | The icon to display on the inline-start edge of the text (left in LTR, right in RTL) |          |
+| default       | Text of the link                                                                     |          |
+| end-icon      | The icon to display on the inline-end edge of the text (right in LTR, left in RTL)   |          |
+| external-icon | Replace the default external icon                                                    |          |

package/docs/generated-docs/maz-pagination.doc.md

@@ -1,14 +1,14 @@
 ## Props
 
-| Name             | Description                                                     | Type                       | Required | Default     | Possible values                                                                                         |
-| ---------------- | --------------------------------------------------------------- | -------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------- |
-| **model-value**  | `v-model` <br/>The current page number.                         | `number`                   | No       | `1`         | -                                                                                                       |
-| **button-props** | Props apply to the MazBtn components.                           | `Partial<MazBtnProps>`     | No       | `undefined` | -                                                                                                       |
-| **active-color** | Color of the active button.                                     | `MazColor \| "background"` | No       | `contrast`  | `contrast', 'primary', 'secondary', 'info', 'success', 'warning', 'destructive', 'accent', 'background` |
-| **size**         | Size of the buttons.                                            | `MazSize`                  | No       | `md`        | `mini', 'xs', 'sm', 'md', 'lg', 'xl`                                                                    |
-| **total-pages**  | Total number of pages.                                          | `number`                   | Yes      | `10`        | -                                                                                                       |
-| **page-range**   | Number of buttons to display before and after the current page. | `number`                   | No       | `1`         | -                                                                                                       |
-| **loading**      | Enable loading state of current button                          | `boolean`                  | No       | `false`     | -                                                                                                       |
+| Name             | Description                                                     | Type                    | Required | Default     | Possible values                                                                                      |
+| ---------------- | --------------------------------------------------------------- | ----------------------- | -------- | ----------- | ---------------------------------------------------------------------------------------------------- |
+| **model-value**  | `v-model` <br/>The current page number.                         | `number`                | No       | `1`         | -                                                                                                    |
+| **button-props** | Props apply to the MazBtn components.                           | `Partial<MazBtnProps>`  | No       | `undefined` | -                                                                                                    |
+| **active-color** | Color of the active button.                                     | `MazColor \| "surface"` | No       | `surface`   | `contrast', 'primary', 'secondary', 'info', 'success', 'warning', 'destructive', 'accent', 'surface` |
+| **size**         | Size of the buttons.                                            | `MazSize`               | No       | `md`        | `mini', 'xs', 'sm', 'md', 'lg', 'xl`                                                                 |
+| **total-pages**  | Total number of pages.                                          | `number`                | Yes      | `10`        | -                                                                                                    |
+| **page-range**   | Number of buttons to display before and after the current page. | `number`                | No       | `1`         | -                                                                                                    |
+| **loading**      | Enable loading state of current button                          | `boolean`               | No       | `false`     | -                                                                                                    |
 
 ## Slots
 

package/docs/generated-docs/maz-popover.doc.md

@@ -25,7 +25,7 @@
 | **id**                     | Custom ID for the popover element                                                                                                                                                                                                                                                                                                     | `string`                                | No       | `undefined`    | -                                                                                                                            |
 | **aria-labelledby**        | ARIA labelledby attribute for accessibility                                                                                                                                                                                                                                                                                           | `string`                                | No       | `undefined`    | -                                                                                                                            |
 | **aria-describedby**       | ARIA describedby attribute for accessibility                                                                                                                                                                                                                                                                                          | `string`                                | No       | `undefined`    | -                                                                                                                            |
-| **color**                  | Color variant of the popover                                                                                                                                                                                                                                                                                                          | `MazColor \| "background"`              | No       | `background`   | `primary, secondary, accent, info, success, warning, destructive, contrast, background`                                      |
+| **color**                  | Color variant of the popover                                                                                                                                                                                                                                                                                                          | `MazColor \| "surface"`                 | No       | `surface`      | `primary, secondary, accent, info, success, warning, destructive, contrast, surface`                                         |
 | **trap-focus**             | Trap focus inside the popover                                                                                                                                                                                                                                                                                                         | `boolean`                               | No       | `true`         | -                                                                                                                            |
 | **keep-open-on-hover**     | Keep popover open when hovering over the panel                                                                                                                                                                                                                                                                                        | `boolean`                               | No       | `false`        | -                                                                                                                            |
 | **block**                  | The popover will be full width of the trigger                                                                                                                                                                                                                                                                                         | `boolean`                               | No       | `false`        | -                                                                                                                            |
@@ -73,3 +73,7 @@
 ### panelRef
 
 > Panel reference <br/>`@description` Reference to the popover panel element<br/>`@usage` `mazPopoverInstance.value?.panelRef`
+
+### onTransitionAfterLeave
+
+>

package/docs/generated-docs/maz-radio-buttons.doc.md

@@ -1,22 +1,22 @@
 ## Props
 
-| Name            | Description                                   | Type                       | Required | Default             | Possible values |
-| --------------- | --------------------------------------------- | -------------------------- | -------- | ------------------- | --------------- |
-| **model-value** | `v-model` <br/>                               | `T`                        | No       | `undefined`         | -               |
-| **options**     | The options to display                        | `Option[]`                 | Yes      | `undefined`         | -               |
-| **name**        | The name of the radio group                   | `string`                   | No       | `'MazButtonsRadio'` | -               |
-| **color**       | The color of the selected radio buttons       | `MazColor \| "background"` | No       | `'primary'`         | -               |
-| **elevation**   | Add elevation to the radio buttons            | `boolean`                  | No       | `false`             | -               |
-| **orientation** | The orientation of the radio buttons          | `"row" \| "col"`           | No       | `'row'`             | `row' \| 'col`  |
-| **wrap**        | Disable the wrap of the radio buttons         | `boolean`                  | No       | `true`              | -               |
-| **equal-size**  | Make all radio buttons the same size          | `boolean`                  | No       | `false`             | -               |
-| **selector**    | Display a selector icon                       | `boolean`                  | No       | `false`             | -               |
-| **block**       | The component will be displayed in full width | `boolean`                  | No       | `false`             | -               |
-| **error**       | Whether there is an error with the input.     | `boolean`                  | No       | `undefined`         | -               |
-| **success**     | Whether the input is successful.              | `boolean`                  | No       | `undefined`         | -               |
-| **warning**     | Whether there is a warning with the input.    | `boolean`                  | No       | `undefined`         | -               |
-| **hint**        | The hint text to display below the input.     | `string`                   | No       | `undefined`         | -               |
-| **size**        | The size of the radio buttons                 | `MazSize`                  | No       | `'md'`              | -               |
+| Name            | Description                                   | Type                    | Required | Default             | Possible values |
+| --------------- | --------------------------------------------- | ----------------------- | -------- | ------------------- | --------------- |
+| **model-value** | `v-model` <br/>                               | `T`                     | No       | `undefined`         | -               |
+| **options**     | The options to display                        | `Option[]`              | Yes      | `undefined`         | -               |
+| **name**        | The name of the radio group                   | `string`                | No       | `'MazButtonsRadio'` | -               |
+| **color**       | The color of the selected radio buttons       | `MazColor \| "surface"` | No       | `'primary'`         | -               |
+| **elevation**   | Add elevation to the radio buttons            | `boolean`               | No       | `false`             | -               |
+| **orientation** | The orientation of the radio buttons          | `"row" \| "col"`        | No       | `'row'`             | `row' \| 'col`  |
+| **wrap**        | Disable the wrap of the radio buttons         | `boolean`               | No       | `true`              | -               |
+| **equal-size**  | Make all radio buttons the same size          | `boolean`               | No       | `false`             | -               |
+| **selector**    | Display a selector icon                       | `boolean`               | No       | `false`             | -               |
+| **block**       | The component will be displayed in full width | `boolean`               | No       | `false`             | -               |
+| **error**       | Whether there is an error with the input.     | `boolean`               | No       | `undefined`         | -               |
+| **success**     | Whether the input is successful.              | `boolean`               | No       | `undefined`         | -               |
+| **warning**     | Whether there is a warning with the input.    | `boolean`               | No       | `undefined`         | -               |
+| **hint**        | The hint text to display below the input.     | `string`                | No       | `undefined`         | -               |
+| **size**        | The size of the radio buttons                 | `MazSize`               | No       | `'md'`              | -               |
 
 ## Events
 

package/docs/generated-docs/maz-select.doc.md

@@ -15,8 +15,8 @@
 
 | Name       | Description                                                                 | Bindings                                                                                                                                                                                                                                                                                                                        |
 | ---------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| left-icon  | Add a custom left icon                                                      | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover                                                                                            |
-| right-icon | Add and replace a custom right icon                                         | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover                                                                                            |
+| start-icon | Add a custom inline-start icon (left in LTR, right in RTL)                  | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover                                                                                            |
+| end-icon   | Add and replace a custom inline-end icon (right in LTR, left in RTL)        | **is-open** `boolean` - Current open state of the popover<br/>**close** `function` - Function to close the popover<br/>**open** `function` - Function to open the popover<br/>**toggle** `function` - Function to toggle the popover                                                                                            |
 | no-results | No results slot - Displayed when no results corresponding with search query |                                                                                                                                                                                                                                                                                                                                 |
 | optgroup   | Custom optgroup label                                                       | **label** `String` - the label of the optgroup                                                                                                                                                                                                                                                                                  |
 | default    | Custom option                                                               | **option** `Object` - the option object<br/>**is-selected** `Boolean` - if the option is selected<br/>**is-open** `Boolean` - if the popover is open<br/>**close** `function` - function to close the popover<br/>**open** `function` - function to open the popover<br/>**toggle** `function` - function to toggle the popover |

package/docs/generated-docs/maz-skeleton.doc.md

@@ -1,12 +1,12 @@
 ## Props
 
-| Name             | Description                                 | Type                                                         | Required | Default                                | Possible values                    |
-| ---------------- | ------------------------------------------- | ------------------------------------------------------------ | -------- | -------------------------------------- | ---------------------------------- |
-| **shape**        | Skeleton shape type                         | `'circle' \| 'rectangle' \| 'square'`                        | No       | `rectangle`                            | `circle, rectangle, square`        |
-| **size**         | Size with units (ex: '2rem', '40px', '3em') | `SizeUnit`                                                   | No       | `1rem`                                 | -                                  |
-| **width**        | Custom width                                | `SizeUnit`                                                   | No       | `undefined`                            | -                                  |
-| **height**       | Custom height                               | `SizeUnit`                                                   | No       | `undefined`                            | -                                  |
-| **animated**     | Disable animation                           | `boolean`                                                    | No       | `true`                                 | -                                  |
-| **rounded-size** | Controls the border radius                  | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'` | No       | `base`                                 | `none, sm, md, lg, xl, full, base` |
-| **aria-label**   | Accessibility label                         | `string`                                                     | No       | `skeleton.ariaLabel' (translations)`   | -                                  |
-| **loading-text** | Loading text for accessibility              | `string`                                                     | No       | `skeleton.loadingText' (translations)` | -                                  |
+| Name             | Description                                 | Type                                               | Required | Default                                | Possible values              |
+| ---------------- | ------------------------------------------- | -------------------------------------------------- | -------- | -------------------------------------- | ---------------------------- |
+| **shape**        | Skeleton shape type                         | `'circle' \| 'rectangle' \| 'square'`              | No       | `rectangle`                            | `circle, rectangle, square`  |
+| **size**         | Size with units (ex: '2rem', '40px', '3em') | `MazSizeUnit`                                      | No       | `1rem`                                 | -                            |
+| **width**        | Custom width                                | `MazSizeUnit`                                      | No       | `undefined`                            | -                            |
+| **height**       | Custom height                               | `MazSizeUnit`                                      | No       | `undefined`                            | -                            |
+| **animated**     | Disable animation                           | `boolean`                                          | No       | `true`                                 | -                            |
+| **rounded-size** | Controls the border radius                  | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No       | `md`                                   | `none, sm, md, lg, xl, full` |
+| **aria-label**   | Accessibility label                         | `string`                                           | No       | `skeleton.ariaLabel' (translations)`   | -                            |
+| **loading-text** | Loading text for accessibility              | `string`                                           | No       | `skeleton.loadingText' (translations)` | -                            |

package/docs/generated-docs/maz-table.doc.md

@@ -1,42 +1,42 @@
 ## Props
 
-| Name                   | Description                                                                              | Type                                                  | Required | Default                                  | Possible values                    |
-| ---------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------- | ---------------------------------------- | ---------------------------------- |
-| **table-class**        | CSS class of the table element                                                           | `HTMLAttributes['class']`                             | No       | `undefined`                              | -                                  |
-| **table-style**        | CSS style of the table element                                                           | `HTMLAttributes['style']`                             | No       | `undefined`                              | -                                  |
-| **model-value**        | `v-model` <br/>List of selected rows                                                     | `(string \| boolean \| number)[]`                     | No       | `undefined`                              | -                                  |
-| **size**               | Size of the table                                                                        | `MazSize`                                             | No       | `'md'`                                   | `xl, lg, md, sm, xs, mini`         |
-| **input-size**         | Size of the search inputs                                                                | `MazSize`                                             | No       | `undefined`                              | `xl, lg, md, sm, xs, mini`         |
-| **title**              | Title of the table                                                                       | `string`                                              | No       | `undefined`                              | -                                  |
-| **headers**            | Headers of the table                                                                     | `MazTableHeader[]`                                    | No       | `undefined`                              | -                                  |
-| **sortable**           | Enable sort feature on all columns                                                       | `boolean`                                             | No       | `false`                                  | -                                  |
-| **headers-align**      | Align all headers                                                                        | `string`                                              | No       | `'left'`                                 | -                                  |
-| **rows**               | Rows of the table                                                                        | `T[]`                                                 | No       | `undefined`                              | -                                  |
-| **hoverable**          | Add hover effect on rows                                                                 | `boolean`                                             | No       | `false`                                  | -                                  |
-| **search**             | Enable search feature in table header                                                    | `boolean`                                             | No       | `false`                                  | -                                  |
-| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean`                                             | No       | `false`                                  | -                                  |
-| **hide-search-by**     | Disable search by column (remove select input "search by")                               | `boolean`                                             | No       | `false`                                  | -                                  |
-| **search-query**       | `v-model:search-query` <br/>Search query in input                                        | `string`                                              | No       | `undefined`                              | -                                  |
-| **background-odd**     | Add background color to odd rows                                                         | `boolean`                                             | No       | `false`                                  | -                                  |
-| **background-even**    | Add background color to even rows                                                        | `boolean`                                             | No       | `false`                                  | -                                  |
-| **elevation**          | Add shadow to the table                                                                  | `boolean`                                             | No       | `false`                                  | -                                  |
-| **divider**            | add divider between rows                                                                 | `boolean`                                             | No       | `false`                                  | -                                  |
-| **caption**            | Caption of the table                                                                     | `string`                                              | No       | `undefined`                              | -                                  |
-| **caption-side**       | Caption side                                                                             | `string`                                              | No       | `'bottom'`                               | `top, bottom`                      |
-| **pagination**         | Add pagination in table footer                                                           | `boolean`                                             | No       | `false`                                  | -                                  |
-| **page**               | `v-model:page` <br/>Current page of pagination                                           | `number`                                              | No       | `1`                                      | -                                  |
-| **page-size**          | `v-model:page-size` <br/>Number of items per page                                        | `number`                                              | No       | `20`                                     | -                                  |
-| **total-pages**        | Total number of pages                                                                    | `number`                                              | No       | `undefined`                              | -                                  |
-| **paginate-rows**      | Don't paginate rows - useful to make pagination request with your server                 | `boolean`                                             | No       | `true`                                   | -                                  |
-| **total-items**        | Total number of items                                                                    | `number`                                              | No       | `undefined`                              | -                                  |
-| **loading**            | Loading state                                                                            | `boolean`                                             | No       | `false`                                  | -                                  |
-| **selectable**         | Enable selection of rows                                                                 | `boolean`                                             | No       | `false`                                  | -                                  |
-| **selected-key**       | Enable selection of rows - key of the selected row                                       | `string`                                              | No       | `undefined`                              | -                                  |
-| **table-layout**       | Table layout                                                                             | `string`                                              | No       | `undefined`                              | `auto, fixed`                      |
-| **color**              | Color of the component                                                                   | `MazColor`                                            | No       | `'primary'`                              | -                                  |
-| **translations**       | Translations of the table                                                                | `DeepPartial<MazUiTranslationsNestedSchema['table']>` | No       | `Translations from @maz-ui/translations` | -                                  |
-| **rounded-size**       | Size radius of the component's border                                                    | `string`                                              | No       | `'lg'`                                   | `none, sm, md, lg, xl, full, base` |
-| **scrollable**         | Enable scrollable on table                                                               | `boolean`                                             | No       | `false`                                  | -                                  |
+| Name                   | Description                                                                              | Type                                                  | Required | Default                                  | Possible values              |
+| ---------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------- | ---------------------------------------- | ---------------------------- |
+| **table-class**        | CSS class of the table element                                                           | `HTMLAttributes['class']`                             | No       | `undefined`                              | -                            |
+| **table-style**        | CSS style of the table element                                                           | `HTMLAttributes['style']`                             | No       | `undefined`                              | -                            |
+| **model-value**        | `v-model` <br/>List of selected rows                                                     | `(string \| boolean \| number)[]`                     | No       | `undefined`                              | -                            |
+| **size**               | Size of the table                                                                        | `MazSize`                                             | No       | `'md'`                                   | `xl, lg, md, sm, xs, mini`   |
+| **input-size**         | Size of the search inputs                                                                | `MazSize`                                             | No       | `undefined`                              | `xl, lg, md, sm, xs, mini`   |
+| **title**              | Title of the table                                                                       | `string`                                              | No       | `undefined`                              | -                            |
+| **headers**            | Headers of the table                                                                     | `MazTableHeader[]`                                    | No       | `undefined`                              | -                            |
+| **sortable**           | Enable sort feature on all columns                                                       | `boolean`                                             | No       | `false`                                  | -                            |
+| **headers-align**      | Align all headers                                                                        | `string`                                              | No       | `'left'`                                 | -                            |
+| **rows**               | Rows of the table                                                                        | `T[]`                                                 | No       | `undefined`                              | -                            |
+| **hoverable**          | Add hover effect on rows                                                                 | `boolean`                                             | No       | `false`                                  | -                            |
+| **search**             | Enable search feature in table header                                                    | `boolean`                                             | No       | `false`                                  | -                            |
+| **hide-search-in-row** | Disable search in rows - useful to filter data yourself or make search request to server | `boolean`                                             | No       | `false`                                  | -                            |
+| **hide-search-by**     | Disable search by column (remove select input "search by")                               | `boolean`                                             | No       | `false`                                  | -                            |
+| **search-query**       | `v-model:search-query` <br/>Search query in input                                        | `string`                                              | No       | `undefined`                              | -                            |
+| **background-odd**     | Add background color to odd rows                                                         | `boolean`                                             | No       | `false`                                  | -                            |
+| **background-even**    | Add background color to even rows                                                        | `boolean`                                             | No       | `false`                                  | -                            |
+| **elevation**          | Add shadow to the table                                                                  | `boolean`                                             | No       | `false`                                  | -                            |
+| **divider**            | add divider between rows                                                                 | `boolean`                                             | No       | `false`                                  | -                            |
+| **caption**            | Caption of the table                                                                     | `string`                                              | No       | `undefined`                              | -                            |
+| **caption-side**       | Caption side                                                                             | `string`                                              | No       | `'bottom'`                               | `top, bottom`                |
+| **pagination**         | Add pagination in table footer                                                           | `boolean`                                             | No       | `false`                                  | -                            |
+| **page**               | `v-model:page` <br/>Current page of pagination                                           | `number`                                              | No       | `1`                                      | -                            |
+| **page-size**          | `v-model:page-size` <br/>Number of items per page                                        | `number`                                              | No       | `20`                                     | -                            |
+| **total-pages**        | Total number of pages                                                                    | `number`                                              | No       | `undefined`                              | -                            |
+| **paginate-rows**      | Don't paginate rows - useful to make pagination request with your server                 | `boolean`                                             | No       | `true`                                   | -                            |
+| **total-items**        | Total number of items                                                                    | `number`                                              | No       | `undefined`                              | -                            |
+| **loading**            | Loading state                                                                            | `boolean`                                             | No       | `false`                                  | -                            |
+| **selectable**         | Enable selection of rows                                                                 | `boolean`                                             | No       | `false`                                  | -                            |
+| **selected-key**       | Enable selection of rows - key of the selected row                                       | `string`                                              | No       | `undefined`                              | -                            |
+| **table-layout**       | Table layout                                                                             | `string`                                              | No       | `undefined`                              | `auto, fixed`                |
+| **color**              | Color of the component                                                                   | `MazColor`                                            | No       | `'primary'`                              | -                            |
+| **translations**       | Translations of the table                                                                | `DeepPartial<MazUiTranslationsNestedSchema['table']>` | No       | `Translations from @maz-ui/translations` | -                            |
+| **rounded-size**       | Size radius of the component's border                                                    | `string`                                              | No       | `'md'`                                   | `none, sm, md, lg, xl, full` |
+| **scrollable**         | Enable scrollable on table                                                               | `boolean`                                             | No       | `false`                                  | -                            |
 
 ## Events
 

package/docs/generated-docs/maz-textarea.doc.md

@@ -17,7 +17,7 @@
 | **warning**        | If the textarea has a warning                                                            | `boolean`                                                                             | No       | `false`         | -                                                                                     |
 | **hint**           | The hint of the textarea                                                                 | `string`                                                                              | No       | `undefined`     | -                                                                                     |
 | **color**          | The color of the textarea                                                                | `MazColor`                                                                            | No       | `'primary'`     | -                                                                                     |
-| **rounded-size**   | Size radius of the component's border                                                    | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "base"`                          | No       | `undefined`     | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'base'`                          |
+| **rounded-size**   | Size radius of the component's border                                                    | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"`                                    | No       | `'md'`          | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`                                    |
 | **padding**        | If the textarea has a padding                                                            | `boolean`                                                                             | No       | `true`          | -                                                                                     |
 | **transparent**    | If the textarea has a transparent background                                             | `boolean`                                                                             | No       | `false`         | -                                                                                     |
 | **border**         | If the textarea has no border                                                            | `boolean`                                                                             | No       | `true`          | -                                                                                     |

package/docs/generated-docs/maz-timeline.doc.md

@@ -12,7 +12,7 @@
 | **auto-validate-steps** | Automatically show a checkmark icon for completed steps                                                                                                      | `boolean`                | No       | `true`      | -                                                                                                         |
 | **clickable**           | Enable click interaction on steps                                                                                                                            | `boolean`                | No       | `false`     | -                                                                                                         |
 | **animated**            | Enable animations (pulse on active, state transitions, connector progress)                                                                                   | `boolean`                | No       | `true`      | -                                                                                                         |
-| **rounded-size**        | Border radius of step indicators                                                                                                                             | `MazTimelineRoundedSize` | No       | `full`      | `'none' \| 'sm' \| 'md' \| 'base' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'`                            |
+| **rounded-size**        | Border radius of step indicators                                                                                                                             | `MazTimelineRoundedSize` | No       | `md`        | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| 'full'`                                      |
 
 ## Events
 

package/docs/src/blog/v4.md

@@ -10,7 +10,7 @@ head:
       content: vue ui library, vue components, nuxt ui, maz-ui v4, tree-shaking, theming, typescript, performance
 ---
 
-<img src="/img/post-layer.png" alt="Maz-UI v4.0.0" class="maz-rounded maz-w-full maz-mb-12" />
+<img src="/img/post-layer.png" alt="Maz-UI v4.0.0" class="maz:rounded-md maz:w-full maz:mb-12" />
 
 # Maz-UI v4.0.0 - The Complete Rebuild
 
@@ -39,7 +39,7 @@ import * as MazUI from 'maz-ui/components'
 // v4: Surgical imports for minimal bundles
 import MazBtn from 'maz-ui/components/MazBtn'
 import { useToast } from 'maz-ui/composables'
-import { formatCurrency } from 'maz-ui/utils'
+import { formatCurrency } from '@maz-ui/utils'
 ```
 
 ### Theme System
@@ -202,7 +202,7 @@ 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/styles'
+import 'maz-ui/style.css'
 
 const app = createApp(App)
 
@@ -259,14 +259,14 @@ Whether you're building a small project or large application, v4 offers the comp
 
 **Ready to try Maz-UI v4.0.0?**
 
-<div class="maz-flex maz-gap-4 maz-mt-8 maz-flex-wrap">
-  <MazBtn href="https://maz-ui.com/guide/getting-started" size="lg">
+<div class="maz:flex maz:gap-4 maz:mt-8 maz:flex-wrap">
+  <MazBtn href="https://maz-ui.com/guide/getting-started" size="md" class="vp-raw">
     Get Started Now
   </MazBtn>
-  <MazBtn href="https://maz-ui.com/guide/migration-v4" color="background" outlined size="lg">
+  <MazBtn href="https://maz-ui.com/guide/migration-v4" color="surface" outlined size="md" class="vp-raw">
     Migration Guide
   </MazBtn>
-  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="background" outlined size="lg" target="blank">
+  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="surface" outlined size="md" target="blank" class="vp-raw">
     View on GitHub
   </MazBtn>
 </div>