@maltjoy/mcp-server 0.3.1 → 0.4.0

package/dist/doc/index.json

@@ -1,18 +1,20 @@
 {
-  "generated": "2026-03-05T13:53:47.737Z",
-  "version": "0.3.1",
+  "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.\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,
@@ -21,6 +23,8 @@
     },
     {
       "name": "VJoyAvailability",
+      "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,
@@ -29,6 +33,8 @@
     },
     {
       "name": "VJoyAvatar",
+      "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,
@@ -37,6 +43,8 @@
     },
     {
       "name": "VJoyAvatarsList",
+      "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,
@@ -45,6 +53,8 @@
     },
     {
       "name": "VJoyBadge",
+      "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,
@@ -53,6 +63,8 @@
     },
     {
       "name": "VJoyBadgeLevel",
+      "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,
@@ -61,6 +73,8 @@
     },
     {
       "name": "VJoyBlockSkeleton",
+      "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,
@@ -69,6 +83,8 @@
     },
     {
       "name": "VJoyBottomSheet",
+      "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,
@@ -77,6 +93,8 @@
     },
     {
       "name": "VJoyBottomSheetTrigger",
+      "description": "",
+      "category": "Overlays",
       "path": "VJoyBottomSheetTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -85,22 +103,58 @@
     },
     {
       "name": "VJoyButton",
+      "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.\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.\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,
@@ -109,6 +163,8 @@
     },
     {
       "name": "VJoyCollapseItem",
+      "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,
@@ -117,6 +173,8 @@
     },
     {
       "name": "VJoyCompanyAvatar",
+      "description": "DEPRECATED. Use VJoyAvatar component instead.",
+      "category": "View",
       "path": "VJoyCompanyAvatar/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -125,6 +183,8 @@
     },
     {
       "name": "VJoyDialog",
+      "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,
@@ -133,6 +193,8 @@
     },
     {
       "name": "VJoyDialogTrigger",
+      "description": "",
+      "category": "Overlays",
       "path": "VJoyDialogTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -141,6 +203,8 @@
     },
     {
       "name": "VJoyDot",
+      "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,
@@ -149,6 +213,8 @@
     },
     {
       "name": "VJoyDrawer",
+      "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,
@@ -157,6 +223,8 @@
     },
     {
       "name": "VJoyDrawerTrigger",
+      "description": "",
+      "category": "Overlays",
       "path": "VJoyDrawerTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -165,6 +233,8 @@
     },
     {
       "name": "VJoyDropdown",
+      "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,
@@ -173,6 +243,8 @@
     },
     {
       "name": "VJoyDropdownList",
+      "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,
@@ -181,6 +253,8 @@
     },
     {
       "name": "VJoyDropzone",
+      "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,
@@ -189,6 +263,8 @@
     },
     {
       "name": "VJoyFilterBar",
+      "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,
@@ -197,14 +273,28 @@
     },
     {
       "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.\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,
@@ -213,6 +303,8 @@
     },
     {
       "name": "VJoyFormFieldSkeleton",
+      "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,
@@ -221,6 +313,8 @@
     },
     {
       "name": "VJoyFormGroup",
+      "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,
@@ -229,6 +323,8 @@
     },
     {
       "name": "VJoyFunnel",
+      "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,
@@ -237,6 +333,8 @@
     },
     {
       "name": "VJoyFunnelFooter",
+      "description": "",
+      "category": "Layout",
       "path": "VJoyFunnelFooter/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -245,6 +343,8 @@
     },
     {
       "name": "VJoyFunnelHeader",
+      "description": "",
+      "category": "Layout",
       "path": "VJoyFunnelHeader/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -253,6 +353,8 @@
     },
     {
       "name": "VJoyHighlight",
+      "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,
@@ -261,14 +363,28 @@
     },
     {
       "name": "VJoyIcon",
+      "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,
@@ -277,6 +393,8 @@
     },
     {
       "name": "VJoyIndicators",
+      "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,
@@ -285,6 +403,8 @@
     },
     {
       "name": "VJoyInput",
+      "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,
@@ -293,14 +413,28 @@
     },
     {
       "name": "VJoyInputDigit",
+      "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,
@@ -309,6 +443,8 @@
     },
     {
       "name": "VJoyLabel",
+      "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,
@@ -317,6 +453,8 @@
     },
     {
       "name": "VJoyLink",
+      "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,
@@ -325,6 +463,8 @@
     },
     {
       "name": "VJoyListItem",
+      "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,
@@ -333,6 +473,8 @@
     },
     {
       "name": "VJoyMenu",
+      "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,
@@ -341,6 +483,8 @@
     },
     {
       "name": "VJoyMenuItem",
+      "description": "",
+      "category": "Navigation",
       "path": "VJoyMenuItem/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -349,14 +493,18 @@
     },
     {
       "name": "VJoyMultiCheckbox",
+      "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.\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,
@@ -365,6 +513,8 @@
     },
     {
       "name": "VJoyPanel",
+      "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,
@@ -373,6 +523,8 @@
     },
     {
       "name": "VJoyPanelSection",
+      "description": "",
+      "category": "Layout",
       "path": "VJoyPanelSection/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -381,6 +533,8 @@
     },
     {
       "name": "VJoyPasswordRequirement",
+      "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,
@@ -389,6 +543,8 @@
     },
     {
       "name": "VJoyProductTour",
+      "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,
@@ -397,6 +553,8 @@
     },
     {
       "name": "VJoyProductTourTrigger",
+      "description": "",
+      "category": "Overlays",
       "path": "VJoyProductTourTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -405,6 +563,8 @@
     },
     {
       "name": "VJoyProgressBar",
+      "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,
@@ -413,6 +573,8 @@
     },
     {
       "name": "VJoyRadio",
+      "description": "",
+      "category": "Forms",
       "path": "VJoyRadio/metadata.json",
       "propsCount": 8,
       "eventsCount": 1,
@@ -421,6 +583,8 @@
     },
     {
       "name": "VJoyRadioGroup",
+      "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,
@@ -429,6 +593,8 @@
     },
     {
       "name": "VJoyRatingStars",
+      "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,
@@ -437,6 +603,8 @@
     },
     {
       "name": "VJoyScreenLoader",
+      "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,
@@ -445,6 +613,8 @@
     },
     {
       "name": "VJoySelect",
+      "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,
@@ -453,6 +623,8 @@
     },
     {
       "name": "VJoySelectableItem",
+      "description": "",
+      "category": "Forms",
       "path": "VJoySelectableItem/metadata.json",
       "propsCount": 11,
       "eventsCount": 1,
@@ -461,6 +633,8 @@
     },
     {
       "name": "VJoySelectableItemGroup",
+      "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,
@@ -469,6 +643,8 @@
     },
     {
       "name": "VJoySeparator",
+      "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,
@@ -477,6 +653,8 @@
     },
     {
       "name": "VJoySnackbar",
+      "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,
@@ -485,6 +663,8 @@
     },
     {
       "name": "VJoySpinner",
+      "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,
@@ -493,6 +673,8 @@
     },
     {
       "name": "VJoyStep",
+      "description": "",
+      "category": "View",
       "path": "VJoyStep/metadata.json",
       "propsCount": 6,
       "eventsCount": 1,
@@ -501,6 +683,8 @@
     },
     {
       "name": "VJoyStepper",
+      "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,
@@ -509,6 +693,8 @@
     },
     {
       "name": "VJoyTab",
+      "description": "",
+      "category": "Navigation",
       "path": "VJoyTab/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -517,6 +703,8 @@
     },
     {
       "name": "VJoyTabs",
+      "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,
@@ -525,6 +713,8 @@
     },
     {
       "name": "VJoyTag",
+      "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,
@@ -533,6 +723,8 @@
     },
     {
       "name": "VJoyTagsInput",
+      "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,
@@ -541,6 +733,8 @@
     },
     {
       "name": "VJoyTagsList",
+      "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,
@@ -549,22 +743,18 @@
     },
     {
       "name": "VJoyTemplate",
+      "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",
-      "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.\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,
@@ -573,6 +763,8 @@
     },
     {
       "name": "VJoyTextarea",
+      "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,
@@ -581,6 +773,8 @@
     },
     {
       "name": "VJoyTitleBrand",
+      "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,
@@ -589,6 +783,8 @@
     },
     {
       "name": "VJoyToggle",
+      "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,
@@ -597,6 +793,8 @@
     },
     {
       "name": "VJoyTooltip",
+      "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,
@@ -605,6 +803,8 @@
     },
     {
       "name": "VJoyUserCard",
+      "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,
@@ -613,6 +813,8 @@
     },
     {
       "name": "VJoyWalkthrough",
+      "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,
@@ -621,6 +823,8 @@
     },
     {
       "name": "VJoyWalkthroughTrigger",
+      "description": "",
+      "category": "Overlays",
       "path": "VJoyWalkthroughTrigger/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -629,6 +833,8 @@
     },
     {
       "name": "VJoyWrapper",
+      "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,