@maltjoy/mcp-server 0.3.2 → 0.4.0

package/dist/doc/index.json

@@ -1,19 +1,20 @@
 {
-  "generated": "2026-03-31T07:17:49.017Z",
-  "version": "0.3.2",
+  "generated": "2026-04-16T12:48:46.193Z",
+  "version": "0.4.0",
   "statistics": {
-    "totalComponents": 78,
-    "totalProps": 433,
-    "totalEvents": 62,
-    "totalSlots": 139,
-    "componentsWithVModel": 20,
+    "totalComponents": 83,
+    "totalProps": 484,
+    "totalEvents": 67,
+    "totalSlots": 148,
+    "componentsWithVModel": 23,
     "componentsWithErrors": 0,
     "componentsWithPartialErrors": 1
   },
   "components": [
     {
       "name": "VJoyAdminBanner",
-      "description": "The AdminBanner component displays a visual indicator when users are viewing the application in admin mode. It features a distinctive banner with an eye icon and customizable label, typically positioned at the top of the interface to clearly communicate the current viewing context to administrators.",
+      "description": "The AdminBanner component displays a visual indicator when users are viewing the application in admin mode.\nIt features a distinctive banner with an eye icon and customizable label, typically positioned at the top of the interface to clearly communicate the current viewing context to administrators.",
+      "category": "Admin",
       "path": "VJoyAdminBanner/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -22,7 +23,8 @@
     },
     {
       "name": "VJoyAvailability",
-      "description": "A status indicator component for displaying user availability information. Features colored dots and optional labels to communicate different availability states such as available, not available, available soon, or partially available. Can be displayed as a simple dot indicator or with descriptive text labels that handle long content gracefully.",
+      "description": "A status indicator component for displaying user availability information.\nFeatures colored dots and optional labels to communicate different availability states such as available, not available, available soon, or partially available.\nCan be displayed as a simple dot indicator or with descriptive text labels that handle long content gracefully.",
+      "category": "View",
       "path": "VJoyAvailability/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -31,7 +33,8 @@
     },
     {
       "name": "VJoyAvatar",
-      "description": "A versatile avatar component for displaying user profile pictures, initials, or placeholders depending on given properties. Supports multiple sizes, fallback to initials when no photo is provided, anonymous states with icons, numeric indicators for \"more users\" displays, and special variants like strategy profiles and company avatars. Can be styled as clickable links and includes empty states for various use cases.",
+      "description": "A versatile avatar component for displaying user profile pictures, initials, or placeholders depending on given properties.\nSupports multiple sizes, fallback to initials when no photo is provided, anonymous states with icons, numeric indicators for \"more users\" displays, and special variants like strategy profiles and company avatars.\nCan be styled as clickable links and includes empty states for various use cases.",
+      "category": "View",
       "path": "VJoyAvatar/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -40,7 +43,8 @@
     },
     {
       "name": "VJoyAvatarsList",
-      "description": "A container component for displaying multiple avatars in a styled group layout. Provides consistent spacing and alignment for avatar collections, with an optional compressed mode for more compact displays. Designed to work seamlessly with VJoyAvatar components.",
+      "description": "A container component for displaying multiple avatars in a styled group layout.\nProvides consistent spacing and alignment for avatar collections, with an optional compressed mode for more compact displays.\nDesigned to work seamlessly with VJoyAvatar components.",
+      "category": "View",
       "path": "VJoyAvatarsList/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -49,7 +53,8 @@
     },
     {
       "name": "VJoyBadge",
-      "description": "A versatile badge component for labeling, categorizing, and highlighting content with colored indicators. Supports various color variants for different semantic meanings, optional bulletpoint dots for visual emphasis, and can display either text labels or numeric values. Perfect for status indicators, tags, and notification counters.",
+      "description": "A versatile badge component for labeling, categorizing, and highlighting content with colored indicators.\nSupports various color variants for different semantic meanings, optional bulletpoint dots for visual emphasis,\nand can display either text labels or numeric values. Perfect for status indicators, tags, and notification counters.",
+      "category": "View",
       "path": "VJoyBadge/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -58,7 +63,8 @@
     },
     {
       "name": "VJoyBadgeLevel",
-      "description": "A specialized badge component for displaying user achievement levels and status indicators. Features custom SVG icons for different categories including SuperMalter levels (with crown icons), High Potential badges (with diamond icons), verified status, and special designations like Malt Linker. Can display icons only or with accompanying text labels for different user recognition levels.",
+      "description": "A specialized badge component for displaying user achievement levels and status indicators.\nFeatures custom SVG icons for different categories including SuperMalter levels (with crown icons),\nHigh Potential badges (with diamond icons), verified status, and special designations like Malt Linker.\nCan display icons only or with accompanying text labels for different user recognition levels.",
+      "category": "View",
       "path": "VJoyBadgeLevel/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -67,7 +73,8 @@
     },
     {
       "name": "VJoyBlockSkeleton",
-      "description": "A highly configurable skeleton loading component for creating placeholder blocks during content loading. Features customizable dimensions, circle variant for avatars, and smooth shimmer animations to improve perceived performance. More flexible than VJoyFormFieldSkeleton and integrates seamlessly with VJoyWrapper for responsive layouts.",
+      "description": "A highly configurable skeleton loading component for creating placeholder blocks during content loading.\nFeatures customizable dimensions, circle variant for avatars, and smooth shimmer animations to improve perceived performance.\nMore flexible than VJoyFormFieldSkeleton and integrates seamlessly with VJoyWrapper for responsive layouts.",
+      "category": "Skeletons",
       "path": "VJoyBlockSkeleton/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -76,7 +83,8 @@
     },
     {
       "name": "VJoyBottomSheet",
-      "description": "",
+      "description": "A mobile-optimized bottom sheet component that slides up from the bottom of the screen.\nFeatures drag-to-dismiss functionality, customizable content slots, and teleportation support.\n\n**IMPORTANT** : for documentation purpose, you can't hide the bottom sheets here.\n\nBy default, the component is teleported to the body root. You can override this by passing a teleport value.\n\nHow to use:\n\n```html\n<template>\n   <VJoyBottomSheet ref=\"bottomSheet\">\n      <template #bottom-sheet-content>\n         The content\n      </template>\n   </VJoyBottomSheet>\n</template>\n\n<script lang=\"ts\" setup>\nimport {ref} from 'vue';\nimport {VJoyBottomSheet} from '@maltjoy/core-vue';\n\n// declare the VJoyBottomSheet ref using the component type definition\nconst bottomSheet = ref<InstanceType<typeof VJoyBottomSheet> | null>(null);\n\n// use this function when you need to (onMounted, when clicking on any trigger...)\nfunction openBottomSheet() {\n   bottomSheet.value?.show();\n}\n\n</script>\n```\n\n> You can use the `VJoyBottomSheetTrigger` subcomponent if it's easier for you.",
+      "category": "Overlays",
       "path": "VJoyBottomSheet/metadata.json",
       "propsCount": 5,
       "eventsCount": 1,
@@ -86,6 +94,7 @@
     {
       "name": "VJoyBottomSheetTrigger",
       "description": "",
+      "category": "Overlays",
       "path": "VJoyBottomSheetTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -94,25 +103,58 @@
     },
     {
       "name": "VJoyButton",
-      "description": "A button component supporting multiple variants, sizes, and states. Features icon support, loading states and can function as either a button or link element. Includes ripple effects and comprehensive styling options for different use cases from primary actions to subtle ghost buttons. **Tips:** set a \"href\" attribute to make the button a link.",
+      "description": "A button component supporting multiple variants, sizes, and states.\nFeatures icon support, loading states and can function as either a button or link element.\nIncludes ripple effects and comprehensive styling options for different use cases from primary actions to subtle ghost buttons.\n\n**Tips:** set a \"href\" attribute to make the button a link.",
+      "category": "Buttons",
       "path": "VJoyButton/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
       "slotsCount": 1,
       "hasError": false
     },
+    {
+      "name": "VJoyButtonCard",
+      "description": "This component is a CTA or a link used to render complex interactive buttons.\n\nIf your goal is to only use a short string, use `VJoyButton` instead.\n\nPlease note that you have to deal with the content and its style by yourself.",
+      "category": "Buttons",
+      "path": "VJoyButtonCard/metadata.json",
+      "propsCount": 4,
+      "eventsCount": 0,
+      "slotsCount": 1,
+      "hasError": false
+    },
     {
       "name": "VJoyCheckbox",
-      "description": "A form checkbox component with support for standard, indeterminate, and disabled states. Features accessible labeling, focus indicators, form integration with validation feedback, and additional content slots. Supports both single selections scenarios with proper event handling and state management.",
+      "description": "A form checkbox component with support for standard, indeterminate, and disabled states.\nFeatures accessible labeling, focus indicators, form integration with validation feedback, and additional content slots.\nSupports both single selections scenarios with proper event handling and state management.",
+      "category": "Forms",
       "path": "VJoyCheckbox/metadata.json",
       "propsCount": 10,
       "eventsCount": 3,
       "slotsCount": 2,
       "hasError": false
     },
+    {
+      "name": "VJoyCheckboxCard",
+      "description": "",
+      "category": "Forms",
+      "path": "VJoyCheckboxCard/metadata.json",
+      "propsCount": 11,
+      "eventsCount": 3,
+      "slotsCount": 2,
+      "hasError": false
+    },
+    {
+      "name": "VJoyCheckboxGroup",
+      "description": "A multi-selection checkbox group component for handling arrays of selected values.\nSimplifies multi-selection scenarios by managing checkbox states and array manipulation automatically.\nFeatures integrated labeling, fieldset structure for accessibility, and customizable checkbox content through slots.\nPerfect for filtering interfaces and bulk selection operations.",
+      "category": "Forms",
+      "path": "VJoyCheckboxGroup/metadata.json",
+      "propsCount": 9,
+      "eventsCount": 1,
+      "slotsCount": 2,
+      "hasError": false
+    },
     {
       "name": "VJoyCollapse",
-      "description": "A container component for creating accordion and collapsible content sections. Manages multiple VJoyCollapseItem components with support for accordion mode (single open item) or standard collapse behavior (multiple open items). Features v-model integration for programmatic control and various visual modes for different design requirements.",
+      "description": "A container component for creating accordion and collapsible content sections.\nManages multiple VJoyCollapseItem components with support for accordion mode (single open item)\nor standard collapse behavior (multiple open items). Features v-model integration for\nprogrammatic control and various visual modes for different design requirements.",
+      "category": "Buttons",
       "path": "VJoyCollapse/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
@@ -121,7 +163,8 @@
     },
     {
       "name": "VJoyCollapseItem",
-      "description": "An individual collapsible content item that can expand and collapse to show/hide content. Features header and subheader support, optional summary icons, preview content when collapsed, and custom header actions. Can be used within VJoyCollapse for grouped accordion behavior.",
+      "description": "An individual collapsible content item that can expand and collapse to show/hide content.\nFeatures header and subheader support, optional summary icons, preview content when collapsed, and custom header actions.\nCan be used within VJoyCollapse for grouped accordion behavior.",
+      "category": "Buttons",
       "path": "VJoyCollapseItem/metadata.json",
       "propsCount": 6,
       "eventsCount": 2,
@@ -131,6 +174,7 @@
     {
       "name": "VJoyCompanyAvatar",
       "description": "DEPRECATED. Use VJoyAvatar component instead.",
+      "category": "View",
       "path": "VJoyCompanyAvatar/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -139,7 +183,8 @@
     },
     {
       "name": "VJoyDialog",
-      "description": "VJoyDialog component exposes two methods: `show` and `hide`. **Both are asynchronous**. You can use the `VJoyDialogTrigger` component as well if it's easier. ```html <template> <VJoyDialog ref=\"dialog\">...</VJoyDialog> </template> <script lang=\"ts\" setup> import {ref} from 'vue'; import {VJoyDialog} from '@maltjoy/core-vue'; const dialog = ref<InstanceType<typeof VJoyDialog>>(); async function showDialog() { await dialog.value?.show(); } // execute the publicly exposed hide function. async function hideDialog() { // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit dialog:hide event. await dialog.value?.hide(); } </script> ``` > FYI, the \"teleport\" property is applied on these docs only for preview quality purpose. > By default, dialogs are rendered at the end of body tag.",
+      "description": "VJoyDialog component exposes two methods: `show` and `hide`. **Both are asynchronous**.\n\nYou can use the `VJoyDialogTrigger` component as well if it's easier.\n\n\n```html\n<template>\n   <VJoyDialog ref=\"dialog\">...</VJoyDialog>\n</template>\n\n<script lang=\"ts\" setup>\nimport {ref} from 'vue';\nimport {VJoyDialog} from '@maltjoy/core-vue';\n\nconst dialog = ref<InstanceType<typeof VJoyDialog>>();\n\nasync function showDialog() {\n   await dialog.value?.show();\n}\n\n// execute the publicly exposed hide function.\nasync function hideDialog() {\n   // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit dialog:hide event.\n   await dialog.value?.hide();\n}\n</script>\n```\n\n\n> FYI, the \"teleport\" property is applied on these docs only for preview quality purpose.\n> By default, dialogs are rendered at the end of body tag.",
+      "category": "Overlays",
       "path": "VJoyDialog/metadata.json",
       "propsCount": 16,
       "eventsCount": 6,
@@ -149,6 +194,7 @@
     {
       "name": "VJoyDialogTrigger",
       "description": "",
+      "category": "Overlays",
       "path": "VJoyDialogTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -157,7 +203,8 @@
     },
     {
       "name": "VJoyDot",
-      "description": "A simple colored dot indicator component for status display and notifications. Can display as a plain colored dot or include numeric values for notification counters. Features automatic formatting for large numbers (99+) and supports multiple color variants for different semantic meanings and visual emphasis.",
+      "description": "A simple colored dot indicator component for status display and notifications.\nCan display as a plain colored dot or include numeric values for notification counters.\nFeatures automatic formatting for large numbers (99+) and supports multiple color variants\nfor different semantic meanings and visual emphasis.",
+      "category": "View",
       "path": "VJoyDot/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -166,7 +213,8 @@
     },
     {
       "name": "VJoyDrawer",
-      "description": "VJoyDrawer component exposes two methods: `show` and `hide`. **Both are asynchronous**. You can use the `VJoyDrawerTrigger` component as well if it's easier. ```html <template> <VJoyDrawer ref=\"dialog\">...</VJoyDrawer> </template> <script lang=\"ts\" setup> import {ref} from 'vue'; import {VJoyDrawer} from '@maltjoy/core-vue'; const drawer = ref<InstanceType<typeof VJoyDrawer> | null>(null); async function showDrawer() { await drawer.value?.show(); } // execute the publicly exposed hide function. async function hideDrawer() { // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit drawer:hide event. await drawer.value?.hide(); } </script> ``` If you need confirmation from the user or wait for an API call to close the drawer you can use the `on-before-hide` function property. This function can be either synchronous or asynchronous and should return a boolean. Returning `true` closes the drawer and returning `false` cancels the closing.",
+      "description": "VJoyDrawer component exposes two methods: `show` and `hide`. **Both are asynchronous**.\n\nYou can use the `VJoyDrawerTrigger` component as well if it's easier.\n\n\n```html\n<template>\n   <VJoyDrawer ref=\"dialog\">...</VJoyDrawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport {ref} from 'vue';\nimport {VJoyDrawer} from '@maltjoy/core-vue';\n\nconst drawer = ref<InstanceType<typeof VJoyDrawer> | null>(null);\n\nasync function showDrawer() {\n   await drawer.value?.show();\n}\n\n// execute the publicly exposed hide function.\nasync function hideDrawer() {\n   // you can pass an object as parameter: {fireHideEvent: false} if you don't want to emit drawer:hide event.\n   await drawer.value?.hide();\n}\n</script>\n```\n\nIf you need confirmation from the user or wait for an API call to close the drawer you can use the `on-before-hide` function property.\nThis function can be either synchronous or asynchronous and should return a boolean.\nReturning `true` closes the drawer and returning `false` cancels the closing.",
+      "category": "Overlays",
       "path": "VJoyDrawer/metadata.json",
       "propsCount": 12,
       "eventsCount": 6,
@@ -176,6 +224,7 @@
     {
       "name": "VJoyDrawerTrigger",
       "description": "",
+      "category": "Overlays",
       "path": "VJoyDrawerTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -184,7 +233,8 @@
     },
     {
       "name": "VJoyDropdown",
-      "description": "A flexible dropdown component for creating contextual menus and option lists. Features customizable trigger buttons, positioning options (left/right/up/down), and support for both predefined option lists and completely custom content. Includes proper accessibility support and click-outside behavior for seamless user interaction. **ACCESSIBILITY FOCUS:** When using this component, to properly apply useful informations for screen readers, you will need to set an **aria-label** to your dropdown trigger if it has no default text.",
+      "description": "A flexible dropdown component for creating contextual menus and option lists.\nFeatures customizable trigger buttons, positioning options (left/right/up/down), and support for\nboth predefined option lists and completely custom content. Includes proper accessibility support\nand click-outside behavior for seamless user interaction.\n\n**ACCESSIBILITY FOCUS:**\n\nWhen using this component, to properly apply useful informations for screen readers, you will need to set an **aria-label** to your dropdown trigger if it has no default text.",
+      "category": "Forms",
       "path": "VJoyDropdown/metadata.json",
       "propsCount": 13,
       "eventsCount": 4,
@@ -193,7 +243,8 @@
     },
     {
       "name": "VJoyDropdownList",
-      "description": "The core list component used within dropdown interfaces for displaying selectable options. Features customizable sizing, header/footer slots, keyboard navigation, and accessibility compliance. Supports both predefined option arrays and custom content through slots. Can be used standalone or as part of the VJoyDropdown component for complete dropdown functionality.",
+      "description": "The core list component used within dropdown interfaces for displaying selectable options.\nFeatures customizable sizing, header/footer slots, keyboard navigation, and accessibility compliance.\nSupports both predefined option arrays and custom content through slots. Can be used standalone\nor as part of the VJoyDropdown component for complete dropdown functionality.",
+      "category": "Forms",
       "path": "VJoyDropdownList/metadata.json",
       "propsCount": 9,
       "eventsCount": 3,
@@ -202,7 +253,8 @@
     },
     {
       "name": "VJoyDropzone",
-      "description": "A file upload component with drag-and-drop functionality for handling file selection and management. Supports single or multiple file uploads, file validation and customizable file displays. Features visual feedback for drag states, error handling, and flexible content slots for file information and actions. The dropzone required as `v-model` an array containing objects with at least the \"name\" property.",
+      "description": "A file upload component with drag-and-drop functionality for handling file selection and management.\nSupports single or multiple file uploads, file validation and customizable file displays.\nFeatures visual feedback for drag states, error handling, and flexible content slots for file information and actions.\n\nThe dropzone required as `v-model` an array containing objects with at least the \"name\" property.",
+      "category": "Forms",
       "path": "VJoyDropzone/metadata.json",
       "propsCount": 11,
       "eventsCount": 0,
@@ -211,7 +263,8 @@
     },
     {
       "name": "VJoyFilterBar",
-      "description": "A container component for creating grouped filter interfaces with connected filter buttons. Automatically applies appropriate border radius styling to create seamless filter groups that work perfectly with VJoyFilterBarButton components. Includes accessibility support and integrates well with dropdowns for complex filtering scenarios.",
+      "description": "A container component for creating grouped filter interfaces with connected filter buttons.\nAutomatically applies appropriate border radius styling to create seamless filter groups\nthat work perfectly with VJoyFilterBarButton components. Includes accessibility support\nand integrates well with dropdowns for complex filtering scenarios.",
+      "category": "Forms",
       "path": "VJoyFilterBar/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -221,15 +274,27 @@
     {
       "name": "VJoyFilterBarButton",
       "description": "",
+      "category": "Forms",
       "path": "VJoyFilterBarButton/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
       "slotsCount": 1,
       "hasError": false
     },
+    {
+      "name": "VJoyFloatingActionsBar",
+      "description": "A persistent action container displayed at the bottom of the viewport.\nUseful to surface bulk actions when items are selected, or to keep\nprimary actions visible while users scroll through long pages.",
+      "category": "Overlays",
+      "path": "VJoyFloatingActionsBar/metadata.json",
+      "propsCount": 3,
+      "eventsCount": 0,
+      "slotsCount": 2,
+      "hasError": false
+    },
     {
       "name": "VJoyFormError",
-      "description": "A form error display component for showing error messages. Features a warning icon, support for single error messages or multiple error lists, and visibility control for conditional error display. Includes proper accessibility attributes with alert role for screen reader announcement of form errors.",
+      "description": "A form error display component for showing error messages.\nFeatures a warning icon, support for single error messages or multiple error lists, and visibility control for conditional error display.\nIncludes proper accessibility attributes with alert role for screen reader announcement of form errors.",
+      "category": "Forms",
       "path": "VJoyFormError/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -238,7 +303,8 @@
     },
     {
       "name": "VJoyFormFieldSkeleton",
-      "description": "A specialized skeleton loading component designed specifically for form field placeholders. Features form-appropriate sizing, flexible layout support with VJoyWrapper integration, and consistent styling that matches form field dimensions. Perfect for creating skeleton forms and improving perceived loading performance in form-heavy interfaces. Skeleton is 100% width by default. If you want to have a better control on this, use the \"width\" property.",
+      "description": "A specialized skeleton loading component designed specifically for form field placeholders.\nFeatures form-appropriate sizing, flexible layout support with VJoyWrapper integration,\nand consistent styling that matches form field dimensions. Perfect for creating skeleton\nforms and improving perceived loading performance in form-heavy interfaces.\n\nSkeleton is 100% width by default. If you want to have a better control on this, use the \"width\" property.",
+      "category": "Skeletons",
       "path": "VJoyFormFieldSkeleton/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -247,7 +313,8 @@
     },
     {
       "name": "VJoyFormGroup",
-      "description": "A form group component to group form elements together. It is used to group a label, any form component, and form errors together. It is also used to handle the gap between the form elements, and **it resets the existing margins** within form elements!",
+      "description": "A form group component to group form elements together.\n\nIt is used to group a label, any form component, and form errors together.\n\nIt is also used to handle the gap between the form elements, and **it resets the existing margins** within form elements!",
+      "category": "Functional",
       "path": "VJoyFormGroup/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -256,7 +323,8 @@
     },
     {
       "name": "VJoyFunnel",
-      "description": "A full-page layout component designed for multi-step workflows and guided user flows. Features decorative background shapes, header and footer areas, and seamless integration with stepper components. Optimized for mobile experiences and onboarding funnels with different visual profiles and customizable content areas.",
+      "description": "A full-page layout component designed for multi-step workflows and guided user flows.\nFeatures decorative background shapes, header and footer areas, and seamless integration\nwith stepper components. Optimized for mobile experiences and onboarding funnels\nwith different visual profiles and customizable content areas.",
+      "category": "Layout",
       "path": "VJoyFunnel/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -266,6 +334,7 @@
     {
       "name": "VJoyFunnelFooter",
       "description": "",
+      "category": "Layout",
       "path": "VJoyFunnelFooter/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -275,6 +344,7 @@
     {
       "name": "VJoyFunnelHeader",
       "description": "",
+      "category": "Layout",
       "path": "VJoyFunnelHeader/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -283,7 +353,8 @@
     },
     {
       "name": "VJoyHighlight",
-      "description": "A content highlighting component for displaying important information with visual emphasis. Features different severity levels (success, info, warning, error, neutral), optional accent borders, customizable icons, and title support. Includes an experimental AI variant for AI-related content with special styling and decorative elements.",
+      "description": "A content highlighting component for displaying important information with visual emphasis.\nFeatures different severity levels (success, info, warning, error, neutral), optional accent borders, customizable icons, and title support.\nIncludes an experimental AI variant for AI-related content with special styling and decorative elements.",
+      "category": "View",
       "path": "VJoyHighlight/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -292,16 +363,28 @@
     },
     {
       "name": "VJoyIcon",
-      "description": "An icon component supporting the complete Joy icon library with customizable sizing and theming. Features accessibility support with aria labels, multiple color variants and different size options. Provides consistent icon rendering across the design system with proper semantic markup and keyboard navigation capabilities.",
+      "description": "An icon component supporting the complete Joy icon library with customizable sizing and theming.\nFeatures accessibility support with aria labels, multiple color variants and different size options.\nProvides consistent icon rendering across the design system with proper semantic markup and keyboard navigation capabilities.",
+      "category": "Icons",
       "path": "VJoyIcon/metadata.json",
       "propsCount": 7,
       "eventsCount": 0,
       "slotsCount": 0,
       "hasError": false
     },
+    {
+      "name": "VJoyIconButton",
+      "description": "A dedicated icon-button component built on top of `VJoyButton`.\nUse this component instead of the deprecated `circle` prop from `VJoyButton`.",
+      "category": "Buttons",
+      "path": "VJoyIconButton/metadata.json",
+      "propsCount": 6,
+      "eventsCount": 0,
+      "slotsCount": 1,
+      "hasError": false
+    },
     {
       "name": "VJoyIndicator",
       "description": "",
+      "category": "Buttons",
       "path": "VJoyIndicator/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -310,7 +393,8 @@
     },
     {
       "name": "VJoyIndicators",
-      "description": "A navigation component for creating page or content indicators, commonly used in carousels and dialogs. Manages a collection of VJoyIndicator components with selection state and v-model support. Features visual variants and automatic indicator management for seamless navigation experiences with proper accessibility and keyboard interaction support.",
+      "description": "A navigation component for creating page or content indicators, commonly used in carousels and dialogs.\nManages a collection of VJoyIndicator components with selection state and v-model support.\nFeatures visual variants and automatic indicator management for seamless navigation experiences with proper accessibility and keyboard interaction support.",
+      "category": "Buttons",
       "path": "VJoyIndicators/metadata.json",
       "propsCount": 2,
       "eventsCount": 1,
@@ -319,7 +403,8 @@
     },
     {
       "name": "VJoyInput",
-      "description": "A comprehensive form input component with extensive customization and validation features. Supports multiple input types, icon support, clearable functionality, unit displays, and comprehensive validation states. Features auto-focus capabilities, accessibility compliance, and seamless integration with form validation systems.",
+      "description": "A comprehensive form input component with extensive customization and validation features.\nSupports multiple input types, icon support, clearable functionality, unit displays, and comprehensive validation states.\nFeatures auto-focus capabilities, accessibility compliance, and seamless integration with form validation systems.",
+      "category": "Forms",
       "path": "VJoyInput/metadata.json",
       "propsCount": 19,
       "eventsCount": 1,
@@ -328,16 +413,28 @@
     },
     {
       "name": "VJoyInputDigit",
-      "description": "One-time code input with auto-navigation between slots. Supports numeric filtering with disabled/invalid states.",
+      "description": "One-time code input with auto-navigation between slots.\nSupports numeric filtering with disabled/invalid states.",
+      "category": "Forms",
       "path": "VJoyInputDigit/metadata.json",
       "propsCount": 6,
       "eventsCount": 4,
       "slotsCount": 0,
       "hasError": false
     },
+    {
+      "name": "VJoyInputNumber",
+      "description": "Number input built on top of VJoyInput. Displays the unit label on the right of the input.",
+      "category": "Forms",
+      "path": "VJoyInputNumber/metadata.json",
+      "propsCount": 17,
+      "eventsCount": 1,
+      "slotsCount": 0,
+      "hasError": false
+    },
     {
       "name": "VJoyInputPassword",
       "description": "Password input built on top of VJoyInput with built-in visibility toggle.",
+      "category": "Forms",
       "path": "VJoyInputPassword/metadata.json",
       "propsCount": 15,
       "eventsCount": 1,
@@ -346,7 +443,8 @@
     },
     {
       "name": "VJoyLabel",
-      "description": "A flexible form label component with enhanced functionality for complex form layouts. Features size variants, required/optional indicators, tooltip support, and legend text capabilities. Supports both label and legend tag rendering for different form contexts with integrated accessibility features and consistent styling across the design system. All native attributes are not declared as Vue component properties. But the actual label tag inherits from every attribute you pass.",
+      "description": "A flexible form label component with enhanced functionality for complex form layouts.\nFeatures size variants, required/optional indicators, tooltip support, and legend text capabilities.\nSupports both label and legend tag rendering for different form contexts with integrated\naccessibility features and consistent styling across the design system.\n\nAll native attributes are not declared as Vue component properties. But the actual label tag inherits from every attribute you pass.",
+      "category": "Forms",
       "path": "VJoyLabel/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -355,7 +453,8 @@
     },
     {
       "name": "VJoyLink",
-      "description": "Simple link component that should adapt its style depending on the context. Could be a button if **href** prop is undefined (add a **type** prop if needed).",
+      "description": "Simple link component that should adapt its style depending on the context.\nCould be a button if **href** prop is undefined (add a **type** prop if needed).",
+      "category": "Buttons",
       "path": "VJoyLink/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -364,7 +463,8 @@
     },
     {
       "name": "VJoyListItem",
-      "description": "A structured list item component for creating consistent, interactive list entries. Features left and right content areas, optional icon support, hover states, and click handling. Perfect for data lists, navigation items, and content cards where consistent spacing and interactive feedback are essential for user experience.",
+      "description": "A structured list item component for creating consistent, interactive list entries.\nFeatures left and right content areas, optional icon support, hover states, and click handling.\nPerfect for data lists, navigation items, and content cards where consistent spacing\nand interactive feedback are essential for user experience.",
+      "category": "View",
       "path": "VJoyListItem/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -373,7 +473,8 @@
     },
     {
       "name": "VJoyMenu",
-      "description": "A navigation menu component for creating accessible menu lists with keyboard navigation support. Works with VJoyMenuItem components to build complex navigation structures with icons, status indicators, and various link types. Features proper ARIA attributes, selection states, and integration with routing systems for seamless navigation experiences. items property is deprecated. Please use VJoyMenuItem with default slot. Docs generation is broken for the VJoyMenuItem component. Here you have the props interface as workaround. ```ts interface IJoyMenuItem { label: string; icon?: TJoyIconsNames; current?: boolean; disabled?: boolean; status?: TJoyIconsNames; statusColor?: TJoyIconsColors; type?: Component | 'a' | 'button'; linkProps?: ComponentProps<T>; } ```",
+      "description": "A navigation menu component for creating accessible menu lists with keyboard navigation support.\nWorks with VJoyMenuItem components to build complex navigation structures with icons, status indicators,\nand various link types. Features proper ARIA attributes, selection states, and integration with\nrouting systems for seamless navigation experiences.\n\nitems property is deprecated. Please use VJoyMenuItem with default slot.\n\nDocs generation is broken for the VJoyMenuItem component.\nHere you have the props interface as workaround.\n\n```ts\n\ninterface IJoyMenuItem {\n    label: string;\n    icon?: TJoyIconsNames;\n    current?: boolean;\n    disabled?: boolean;\n    status?: TJoyIconsNames;\n    statusColor?: TJoyIconsColors;\n    type?: Component | 'a' | 'button';\n    linkProps?: ComponentProps<T>;\n}\n```",
+      "category": "Navigation",
       "path": "VJoyMenu/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
@@ -383,6 +484,7 @@
     {
       "name": "VJoyMenuItem",
       "description": "",
+      "category": "Navigation",
       "path": "VJoyMenuItem/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -391,16 +493,18 @@
     },
     {
       "name": "VJoyMultiCheckbox",
-      "description": "A multi-selection checkbox group component for handling arrays of selected values. Simplifies multi-selection scenarios by managing checkbox states and array manipulation automatically. Features integrated labeling, fieldset structure for accessibility, and customizable checkbox content through slots. Perfect for filtering interfaces and bulk selection operations.",
+      "description": "A multi-selection checkbox group component for handling arrays of selected values.\nSimplifies multi-selection scenarios by managing checkbox states and array manipulation automatically.\nFeatures integrated labeling, fieldset structure for accessibility, and customizable checkbox content through slots.\nPerfect for filtering interfaces and bulk selection operations.",
+      "category": "Forms",
       "path": "VJoyMultiCheckbox/metadata.json",
-      "propsCount": 8,
+      "propsCount": 9,
       "eventsCount": 1,
-      "slotsCount": 1,
+      "slotsCount": 2,
       "hasError": false
     },
     {
       "name": "VJoyPagination",
-      "description": "A complete pagination component for navigating through large datasets with proper accessibility support. Features automatic page number calculation, gap handling for large page counts, customizable navigation arrows, and router integration support through slots. Includes proper ARIA attributes and keyboard navigation for an accessible pagination experience across different content types.",
+      "description": "A complete pagination component for navigating through large datasets with proper accessibility support.\nFeatures automatic page number calculation, gap handling for large page counts, customizable navigation arrows,\nand router integration support through slots. Includes proper ARIA attributes and keyboard navigation\nfor an accessible pagination experience across different content types.",
+      "category": "Navigation",
       "path": "VJoyPagination/metadata.json",
       "propsCount": 5,
       "eventsCount": 1,
@@ -409,7 +513,8 @@
     },
     {
       "name": "VJoyPanel",
-      "description": "A structured content container component providing consistent layout patterns for cards and sections. Features header with title/subtitle/actions, main body content, footer actions, and loading overlay support. Includes flexible sizing, padding options, AI variant styling, and seamless integration with VJoyPanelSection for complex nested layouts and modular content organization.",
+      "description": "A structured content container component providing consistent layout patterns for cards and sections.\nFeatures header with title/subtitle/actions, main body content, footer actions, and loading overlay support.\nIncludes flexible sizing, padding options, AI variant styling, and seamless integration with\nVJoyPanelSection for complex nested layouts and modular content organization.",
+      "category": "Layout",
       "path": "VJoyPanel/metadata.json",
       "propsCount": 7,
       "eventsCount": 0,
@@ -419,6 +524,7 @@
     {
       "name": "VJoyPanelSection",
       "description": "",
+      "category": "Layout",
       "path": "VJoyPanelSection/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -427,7 +533,8 @@
     },
     {
       "name": "VJoyPasswordRequirement",
-      "description": "A component to display a password requirement status. This is meant to be displayed under a VJoyInput of type password.",
+      "description": "A component to display a password requirement status.\nThis is meant to be displayed under a VJoyInput of type password.",
+      "category": "Forms",
       "path": "VJoyPasswordRequirement/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -436,7 +543,8 @@
     },
     {
       "name": "VJoyProductTour",
-      "description": "An advanced guided tour component for creating interactive product demonstrations with element highlighting. Features intelligent positioning around target elements, multi-step tour progression, customizable banners and actions, and spotlight effects for drawing user attention. Includes SSR compatibility and proper z-index management through Teleport for seamless user onboarding and feature discovery experiences.",
+      "description": "An advanced guided tour component for creating interactive product demonstrations with element highlighting.\nFeatures intelligent positioning around target elements, multi-step tour progression, customizable banners and actions,\nand spotlight effects for drawing user attention. Includes SSR compatibility and proper z-index management\nthrough Teleport for seamless user onboarding and feature discovery experiences.",
+      "category": "Overlays",
       "path": "VJoyProductTour/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -446,6 +554,7 @@
     {
       "name": "VJoyProductTourTrigger",
       "description": "",
+      "category": "Overlays",
       "path": "VJoyProductTourTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -454,7 +563,8 @@
     },
     {
       "name": "VJoyProgressBar",
-      "description": "A visual progress indicator component for displaying completion status with percentage or step-based progress. Features multiple color variants for different semantic meanings (success, warning, error), optional label display, and dual mode support (percentage-based or step-based calculations). Perfect for indicating task completion, loading states, and multi-step process progress with clear visual feedback.",
+      "description": "A visual progress indicator component for displaying completion status with percentage or step-based progress.\nFeatures multiple color variants for different semantic meanings (success, warning, error), optional label display,\nand dual mode support (percentage-based or step-based calculations). Perfect for indicating task completion,\nloading states, and multi-step process progress with clear visual feedback.",
+      "category": "View",
       "path": "VJoyProgressBar/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -464,6 +574,7 @@
     {
       "name": "VJoyRadio",
       "description": "",
+      "category": "Forms",
       "path": "VJoyRadio/metadata.json",
       "propsCount": 8,
       "eventsCount": 1,
@@ -472,7 +583,8 @@
     },
     {
       "name": "VJoyRadioGroup",
-      "description": "A container component for organizing radio button groups with proper fieldset structure and accessibility. Features horizontal and vertical layout options, legend support for group labeling, and seamless integration with VJoyRadio components. Provides proper ARIA attributes and form association for accessible single-choice selection interfaces with consistent spacing and visual organization. Use the same v-model for each `VJoyRadio` (modelValue). Create a ref for it.",
+      "description": "A container component for organizing radio button groups with proper fieldset structure and accessibility.\nFeatures horizontal and vertical layout options, legend support for group labeling, and seamless integration\nwith VJoyRadio components. Provides proper ARIA attributes and form association for accessible\nsingle-choice selection interfaces with consistent spacing and visual organization.\n\nUse the same v-model for each `VJoyRadio` (modelValue). Create a ref for it.",
+      "category": "Forms",
       "path": "VJoyRadioGroup/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -481,7 +593,8 @@
     },
     {
       "name": "VJoyRatingStars",
-      "description": "A visual rating display component using star icons to represent rating values from 0 to 5. Features support for fractional ratings with half-star display, multiple size variants, review count display, and customizable content slots. Includes proper accessibility attributes with configurable ARIA labels for screen reader compatibility. **Accessibility focus**: you can give an aria-label to the component to actually describe the rating. By default it is set to \"Rating: X out of 5\" but is obviously not translated.",
+      "description": "A visual rating display component using star icons to represent rating values from 0 to 5.\nFeatures support for fractional ratings with half-star display, multiple size variants,\nreview count display, and customizable content slots. Includes proper accessibility\nattributes with configurable ARIA labels for screen reader compatibility.\n\n**Accessibility focus**: you can give an aria-label to the component to actually describe the rating.\nBy default it is set to \"Rating: X out of 5\" but is obviously not translated.",
+      "category": "View",
       "path": "VJoyRatingStars/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -490,7 +603,8 @@
     },
     {
       "name": "VJoyScreenLoader",
-      "description": "A full-screen loading overlay component for indicating page or section loading states. Features light and dark color modes, overlay positioning for absolute coverage, customizable spinner slots, and content areas for loading messages. Perfect for blocking user interactions during data loading with professional loading animations and flexible content presentation.",
+      "description": "A full-screen loading overlay component for indicating page or section loading states.\nFeatures light and dark color modes, overlay positioning for absolute coverage, customizable spinner slots,\nand content areas for loading messages. Perfect for blocking user interactions during data loading\nwith professional loading animations and flexible content presentation.",
+      "category": "Loader",
       "path": "VJoyScreenLoader/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -499,7 +613,8 @@
     },
     {
       "name": "VJoySelect",
-      "description": "A styled select dropdown component with integrated labeling. Features multiple size variants, disabled and invalid states, and flexible option rendering. Supports both inline label props and external VJoyLabel component usage.",
+      "description": "A styled select dropdown component with integrated labeling.\nFeatures multiple size variants, disabled and invalid states, and flexible option rendering.\nSupports both inline label props and external VJoyLabel component usage.",
+      "category": "Forms",
       "path": "VJoySelect/metadata.json",
       "propsCount": 12,
       "eventsCount": 1,
@@ -509,6 +624,7 @@
     {
       "name": "VJoySelectableItem",
       "description": "",
+      "category": "Forms",
       "path": "VJoySelectableItem/metadata.json",
       "propsCount": 11,
       "eventsCount": 1,
@@ -517,7 +633,8 @@
     },
     {
       "name": "VJoySelectableItemGroup",
-      "description": "Basic full implementation example : ```html <template> <VJoySelectableItemGroup :options=\"options\" v-model:value=\"selectableModel\" /> <template> <script setup lang=\"ts\"> import {ref} from 'vue'; import {TJoySelectableItemOption} from '@maltjoy/core-vue'; const options = ref<TJoySelectableItemOption[]>([ {value: 'first-selectable-value', label: 'Option 1'}, {value: 'second-selectable-value', label: 'Option 2'}, {value: 'third-selectable-value', label: 'Option 3', {attrs: {...}}}, ]); // Use any type you prefer here, depending on what the backend is sending to you const selectableModel = ref(['second-selectable-value']); </script> ``` > When passing the `options` property, you can include both `value` and `label` properties to each option. > But if it's simpler to use other key names, you can use `valueKey` and `labelKey` properties from `VJoySelectableItemGroup` to define the keys you prefer. > > You will have to deal with the typings by yourself, by creating a mix of interfaces or using satifies with type `TJoySelectableItemOption` depending on your cases. > > Example: `satisfies (TJoySelectableItemOption & Record<string, unknown>)[]`",
+      "description": "Basic full implementation example :\n\n```html\n\n <template>\n     <VJoySelectableItemGroup :options=\"options\" v-model:value=\"selectableModel\" />\n <template>\n\n<script setup lang=\"ts\">\n import {ref} from 'vue';\n import {TJoySelectableItemOption} from '@maltjoy/core-vue';\n\nconst options = ref<TJoySelectableItemOption[]>([\n  {value: 'first-selectable-value', label: 'Option 1'},\n  {value: 'second-selectable-value', label: 'Option 2'},\n  {value: 'third-selectable-value', label: 'Option 3', {attrs: {...}}},\n]); // Use any type you prefer here, depending on what the backend is sending to you\n\n\nconst selectableModel = ref(['second-selectable-value']);\n\n</script>\n```\n\n> When passing the `options` property, you can include both `value` and `label` properties to each option.\n> But if it's simpler to use other key names, you can use `valueKey` and `labelKey` properties from `VJoySelectableItemGroup` to define the keys you prefer.\n>\n> You will have to deal with the typings by yourself, by creating a mix of interfaces or using satifies with type `TJoySelectableItemOption` depending on your cases.\n>\n> Example: `satisfies (TJoySelectableItemOption & Record<string, unknown>)[]`",
+      "category": "Forms",
       "path": "VJoySelectableItemGroup/metadata.json",
       "propsCount": 14,
       "eventsCount": 1,
@@ -526,7 +643,8 @@
     },
     {
       "name": "VJoySeparator",
-      "description": "A visual content separator component with text labeling capabilities for organizing interface sections. Features customizable text content, multiple size options, and styled horizontal lines for improved visual hierarchy. Enhanced version of the HTML hr element with better styling control and integrated text display for clearer content separation and section identification.",
+      "description": "A visual content separator component with text labeling capabilities for organizing interface sections.\nFeatures customizable text content, multiple size options, and styled horizontal lines for improved\nvisual hierarchy. Enhanced version of the HTML hr element with better styling control and\nintegrated text display for clearer content separation and section identification.",
+      "category": "View",
       "path": "VJoySeparator/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -535,7 +653,8 @@
     },
     {
       "name": "VJoySnackbar",
-      "description": "This component should not be directly used. To display it, please use the pushVJoySnackbar service : ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); } ``` If you need to listen  to events fired by the component, you can actually grab the event bus : ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { const {snackbarEventBus} = pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); snackbarEventBus.on('snackbar:hide', () => { // do what you want, and don't forget to unregister the listener on component destroy }); } ``` On the other hand, if you need to access the component instance, you can grab it as well ```typescript import {pushVJoySnackbar} from '@maltjoy/core-vue'; function yourFunction() { const {snackbarApp} = pushVJoySnackbar({ props: { // at least message is mandatory message: 'Your message' } }); } ```",
+      "description": "This component should not be directly used. To display it, please use the pushVJoySnackbar service :\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n}\n```\n\nIf you need to listen  to events fired by the component, you can actually grab the event bus :\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   const {snackbarEventBus} = pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n\n   snackbarEventBus.on('snackbar:hide', () => {\n      // do what you want, and don't forget to unregister the listener on component destroy\n   });\n}\n```\n\nOn the other hand, if you need to access the component instance, you can grab it as well\n\n```typescript\nimport {pushVJoySnackbar} from '@maltjoy/core-vue';\n\nfunction yourFunction() {\n   const {snackbarApp} = pushVJoySnackbar({\n      props: {\n        // at least message is mandatory\n        message: 'Your message'\n      }\n   });\n\n}\n```",
+      "category": "Overlays",
       "path": "VJoySnackbar/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -544,7 +663,8 @@
     },
     {
       "name": "VJoySpinner",
-      "description": "A simple animated loading spinner component for indicating processing or loading states. Features customizable color variants to match different contexts and design requirements. Lightweight and performant with CSS-based animations, perfect for buttons, forms, and content areas that need visual loading feedback.",
+      "description": "A simple animated loading spinner component for indicating processing or loading states.\nFeatures customizable color variants to match different contexts and design requirements.\nLightweight and performant with CSS-based animations, perfect for buttons, forms,\nand content areas that need visual loading feedback.",
+      "category": "Loader",
       "path": "VJoySpinner/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -554,6 +674,7 @@
     {
       "name": "VJoyStep",
       "description": "",
+      "category": "View",
       "path": "VJoyStep/metadata.json",
       "propsCount": 6,
       "eventsCount": 1,
@@ -562,7 +683,8 @@
     },
     {
       "name": "VJoyStepper",
-      "description": "A progress stepper component for visualizing multi-step processes and user workflows. Manages a collection of VJoyStep components with support for main steps and sub-steps for granular progress tracking. Features automatic step state management (completed, current, upcoming), visual progress indicators, and flexible step sizing. Perfect for onboarding flows, form wizards, and guided processes. See **VJoyStep** stories for properties related to `VJoyStepper` children",
+      "description": "A progress stepper component for visualizing multi-step processes and user workflows.\nManages a collection of VJoyStep components with support for main steps and sub-steps for granular progress tracking.\nFeatures automatic step state management (completed, current, upcoming), visual progress indicators,\nand flexible step sizing. Perfect for onboarding flows, form wizards, and guided processes.\n\nSee **VJoyStep** stories for properties related to `VJoyStepper` children",
+      "category": "View",
       "path": "VJoyStepper/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -572,6 +694,7 @@
     {
       "name": "VJoyTab",
       "description": "",
+      "category": "Navigation",
       "path": "VJoyTab/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -580,7 +703,8 @@
     },
     {
       "name": "VJoyTabs",
-      "description": "A tabbed navigation component for organizing content into switchable panels with proper accessibility support. Features scrollable tab headers for overflow management, notification badges, custom header content slots, and both local navigation and external link support. Includes automatic tab selection management and event handling for seamless content organization and user experience.",
+      "description": "A tabbed navigation component for organizing content into switchable panels with proper accessibility support.\nFeatures scrollable tab headers for overflow management, notification badges, custom header content slots,\nand both local navigation and external link support. Includes automatic tab selection management\nand event handling for seamless content organization and user experience.",
+      "category": "Navigation",
       "path": "VJoyTabs/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -589,7 +713,8 @@
     },
     {
       "name": "VJoyTag",
-      "description": "A versatile tag component for labeling, categorizing, and interactive content organization. Features multiple variants and sizes, removable functionality, drag visual indicators, selectable states, link styling, and AI-specific variants. Supports click handlers, removal events, and flexible content through slots for complex tag implementations.",
+      "description": "A versatile tag component for labeling, categorizing, and interactive content organization.\nFeatures multiple variants and sizes, removable functionality, drag visual indicators,\nselectable states, link styling, and AI-specific variants. Supports click handlers,\nremoval events, and flexible content through slots for complex tag implementations.",
+      "category": "View",
       "path": "VJoyTag/metadata.json",
       "propsCount": 12,
       "eventsCount": 3,
@@ -598,7 +723,8 @@
     },
     {
       "name": "VJoyTagsInput",
-      "description": "A specialized form input component for managing collections of tags with dynamic add/remove functionality. Features email validation, duplication detection, multi-line responsive layout, and comprehensive error handling. Integrates seamlessly with VJoyTag components for consistent tag display and provides flexible labeling options for complex form scenarios with collections management. > **To render the component with default model, pass it an array of values.** > **Storybook code snippet is broken at the moment.**",
+      "description": "A specialized form input component for managing collections of tags with dynamic add/remove functionality.\nFeatures email validation, duplication detection, multi-line responsive layout, and comprehensive error handling.\nIntegrates seamlessly with VJoyTag components for consistent tag display and provides flexible labeling\noptions for complex form scenarios with collections management.\n\n> **To render the component with default model, pass it an array of values.**\n> **Storybook code snippet is broken at the moment.**",
+      "category": "Forms",
       "path": "VJoyTagsInput/metadata.json",
       "propsCount": 9,
       "eventsCount": 2,
@@ -607,7 +733,8 @@
     },
     {
       "name": "VJoyTagsList",
-      "description": "**VJoyTagsList** is a simple wrapper for **VJoyTag** allowing you to create a list with pre-defined style. If it is more flexible for you to directly use **VJoyTag** don't hesitate to get rid of this parent component! Instead you can wrap your **VJoyTag** list in a **VJoyWrapper** for instance",
+      "description": "**VJoyTagsList** is a simple wrapper for **VJoyTag** allowing you to create a list with pre-defined style.\nIf it is more flexible for you to directly use **VJoyTag** don't hesitate to get rid of this parent component!\nInstead you can wrap your **VJoyTag** list in a **VJoyWrapper** for instance",
+      "category": "View",
       "path": "VJoyTagsList/metadata.json",
       "propsCount": 6,
       "eventsCount": 2,
@@ -616,25 +743,18 @@
     },
     {
       "name": "VJoyTemplate",
-      "description": "A comprehensive page layout template component providing structured slots for complete page organization. Features header area with title/subtitle/actions, main content with optional sidebar, back navigation support, loading overlay integration, and decorative background shapes. Perfect for creating consistent page layouts with flexible content positioning and professional presentation across the application.",
+      "description": "A comprehensive page layout template component providing structured slots for complete page organization.\nFeatures header area with title/subtitle/actions, main content with optional sidebar, back navigation support,\nloading overlay integration, and decorative background shapes. Perfect for creating consistent page layouts\nwith flexible content positioning and professional presentation across the application.",
+      "category": "Layout",
       "path": "VJoyTemplate/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
       "slotsCount": 7,
       "hasError": false
     },
-    {
-      "name": "VJoyTemplateShape",
-      "description": "",
-      "path": "VJoyTemplateShape/metadata.json",
-      "propsCount": 0,
-      "eventsCount": 0,
-      "slotsCount": 0,
-      "hasError": false
-    },
     {
       "name": "VJoyText",
-      "description": "This component is directly dependant from `@maltjoy/css` package, a CSS class utils package built on top of `@maltjoy/themes` that contains our design tokens. **Reminder**: values ending with 50 have same size but are bold. See \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts **Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
+      "description": "This component is directly dependant from `@maltjoy/css` package, a CSS class utils package built on top of `@maltjoy/themes` that contains our design tokens.\n\n**Reminder**: values ending with 50 have same size but are bold.\n\nSee \"Fonts\" section here https://doc.malt.tech/joy-storybook/?path=/docs/css-framework--docs#advanced-fonts\n\n**Warning** If you use long text within a VJoyWrapper, you'll have to set a max-width to prevent the text from breaking the layout.",
+      "category": "View",
       "path": "VJoyText/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -643,7 +763,8 @@
     },
     {
       "name": "VJoyTextarea",
-      "description": "A comprehensive multi-line text input component with advanced features for form interfaces. Features autogrow functionality, character count validation, min/max length constraints, integrated labeling, and form validation support. Includes visual feedback for length limits, disabled states, and seamless integration with VJoyLabel for flexible form layouts.",
+      "description": "A comprehensive multi-line text input component with advanced features for form interfaces.\nFeatures autogrow functionality, character count validation, min/max length constraints,\nintegrated labeling, and form validation support. Includes visual feedback for length limits,\ndisabled states, and seamless integration with VJoyLabel for flexible form layouts.",
+      "category": "Forms",
       "path": "VJoyTextarea/metadata.json",
       "propsCount": 16,
       "eventsCount": 1,
@@ -652,7 +773,8 @@
     },
     {
       "name": "VJoyTitleBrand",
-      "description": "A branded title component for creating visually striking headings with highlighted text segments. Features flexible HTML tag rendering (h1-h6, p) and automatic styling for span elements with rotated background highlights. Perfect for page headers, dialog titles, and marketing content where brand emphasis is important for visual hierarchy and user attention. This component can be used in `VJoyTemplate` or `VJoyDialog`.",
+      "description": "A branded title component for creating visually striking headings with highlighted text segments.\nFeatures flexible HTML tag rendering (h1-h6, p) and automatic styling for span elements with\nrotated background highlights. Perfect for page headers, dialog titles, and marketing content\nwhere brand emphasis is important for visual hierarchy and user attention.\n\nThis component can be used in `VJoyTemplate` or `VJoyDialog`.",
+      "category": "View",
       "path": "VJoyTitleBrand/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -661,7 +783,8 @@
     },
     {
       "name": "VJoyToggle",
-      "description": "A form toggle switch component for binary on/off state management with visual feedback. Features multiple variants including default (with smile icon) and admin (with eye icon), integrated labeling, disabled states, and proper accessibility attributes. Provides smooth animations and clear visual indicators for user interactions in forms and settings interfaces.",
+      "description": "A form toggle switch component for binary on/off state management with visual feedback.\nFeatures multiple variants including default (with smile icon) and admin (with eye icon), integrated labeling, disabled states, and proper accessibility attributes.\nProvides smooth animations and clear visual indicators for user interactions in forms and settings interfaces.",
+      "category": "Forms",
       "path": "VJoyToggle/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -670,7 +793,8 @@
     },
     {
       "name": "VJoyTooltip",
-      "description": "A floating tooltip overlay component for providing contextual information and help text. Features intelligent positioning with automatic placement adjustments, support for both hover and click triggers, and flexible content through text props or HTML slots. Uses Teleport for proper z-index management and includes proper accessibility attributes with ARIA support for screen readers.",
+      "description": "A floating tooltip overlay component for providing contextual information and help text.\nFeatures intelligent positioning with automatic placement adjustments, support for both hover and click triggers,\nand flexible content through text props or HTML slots. Uses Teleport for proper z-index management\nand includes proper accessibility attributes with ARIA support for screen readers.",
+      "category": "Overlays",
       "path": "VJoyTooltip/metadata.json",
       "propsCount": 8,
       "eventsCount": 0,
@@ -679,7 +803,8 @@
     },
     {
       "name": "VJoyUserCard",
-      "description": "A comprehensive user profile card component for displaying user information in a structured layout. Features integrated avatar display, name/subtitle presentation, rating stars support, and optional link functionality for navigation. Includes multiple customization slots for avatar, title, subtitle, and rating components, with full attribute inheritance for link behavior and accessibility.",
+      "description": "A comprehensive user profile card component for displaying user information in a structured layout.\nFeatures integrated avatar display, name/subtitle presentation, rating stars support, and optional\nlink functionality for navigation. Includes multiple customization slots for avatar, title, subtitle,\nand rating components, with full attribute inheritance for link behavior and accessibility.",
+      "category": "View",
       "path": "VJoyUserCard/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -688,7 +813,8 @@
     },
     {
       "name": "VJoyWalkthrough",
-      "description": "A comprehensive guided tour component for creating interactive onboarding experiences and feature walkthroughs. Features collapsible modal interface with trigger button, progress tracking with visual indicators, mobile-responsive design, and flexible content slots for illustrations, descriptions, and custom actions. Uses Teleport for proper z-index management and includes accessibility support for guided user experiences. > ⚠ The use of **disableTeleport** property is only for documentation purpose. You won't need it in production.",
+      "description": "A comprehensive guided tour component for creating interactive onboarding experiences and feature walkthroughs.\nFeatures collapsible modal interface with trigger button, progress tracking with visual indicators, mobile-responsive\ndesign, and flexible content slots for illustrations, descriptions, and custom actions. Uses Teleport for proper\nz-index management and includes accessibility support for guided user experiences.\n\n> ⚠ The use of **disableTeleport** property is only for documentation purpose. You won't need it in production.",
+      "category": "Overlays",
       "path": "VJoyWalkthrough/metadata.json",
       "propsCount": 7,
       "eventsCount": 3,
@@ -698,6 +824,7 @@
     {
       "name": "VJoyWalkthroughTrigger",
       "description": "",
+      "category": "Overlays",
       "path": "VJoyWalkthroughTrigger/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -706,7 +833,8 @@
     },
     {
       "name": "VJoyWrapper",
-      "description": "A flexible CSS flexbox utility wrapper component for creating responsive layouts with consistent spacing. Features comprehensive flexbox controls including justify-content, align-items, flex-direction, and wrap properties. Includes automatic gap management, item stretching capabilities, and margin controls. Perfect for form layouts, button groups, and any content that needs structured, responsive arrangement with minimal CSS.",
+      "description": "A flexible CSS flexbox utility wrapper component for creating responsive layouts with consistent spacing.\nFeatures comprehensive flexbox controls including justify-content, align-items, flex-direction, and wrap properties.\nIncludes automatic gap management, item stretching capabilities, and margin controls. Perfect for form layouts,\nbutton groups, and any content that needs structured, responsive arrangement with minimal CSS.",
+      "category": "Layout",
       "path": "VJoyWrapper/metadata.json",
       "propsCount": 8,
       "eventsCount": 0,