@maltjoy/mcp-server 0.3.0 → 0.3.2

package/dist/doc/index.json

@@ -1,18 +1,19 @@
 {
-  "generated": "2026-02-20T10:05:20.068Z",
-  "version": "1.0.0",
+  "generated": "2026-03-31T07:17:49.017Z",
+  "version": "0.3.2",
   "statistics": {
-    "totalComponents": 74,
-    "totalProps": 410,
-    "totalEvents": 57,
-    "totalSlots": 136,
-    "componentsWithVModel": 18,
+    "totalComponents": 78,
+    "totalProps": 433,
+    "totalEvents": 62,
+    "totalSlots": 139,
+    "componentsWithVModel": 20,
     "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.",
       "path": "VJoyAdminBanner/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -21,6 +22,7 @@
     },
     {
       "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.",
       "path": "VJoyAvailability/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -29,6 +31,7 @@
     },
     {
       "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.",
       "path": "VJoyAvatar/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -37,6 +40,7 @@
     },
     {
       "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.",
       "path": "VJoyAvatarsList/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -45,6 +49,7 @@
     },
     {
       "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.",
       "path": "VJoyBadge/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -53,6 +58,7 @@
     },
     {
       "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.",
       "path": "VJoyBadgeLevel/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -61,6 +67,7 @@
     },
     {
       "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.",
       "path": "VJoyBlockSkeleton/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -69,6 +76,7 @@
     },
     {
       "name": "VJoyBottomSheet",
+      "description": "",
       "path": "VJoyBottomSheet/metadata.json",
       "propsCount": 5,
       "eventsCount": 1,
@@ -77,6 +85,7 @@
     },
     {
       "name": "VJoyBottomSheetTrigger",
+      "description": "",
       "path": "VJoyBottomSheetTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -85,6 +94,7 @@
     },
     {
       "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.",
       "path": "VJoyButton/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -93,6 +103,7 @@
     },
     {
       "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.",
       "path": "VJoyCheckbox/metadata.json",
       "propsCount": 10,
       "eventsCount": 3,
@@ -101,6 +112,7 @@
     },
     {
       "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.",
       "path": "VJoyCollapse/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
@@ -109,6 +121,7 @@
     },
     {
       "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.",
       "path": "VJoyCollapseItem/metadata.json",
       "propsCount": 6,
       "eventsCount": 2,
@@ -117,6 +130,7 @@
     },
     {
       "name": "VJoyCompanyAvatar",
+      "description": "DEPRECATED. Use VJoyAvatar component instead.",
       "path": "VJoyCompanyAvatar/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -125,6 +139,7 @@
     },
     {
       "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.",
       "path": "VJoyDialog/metadata.json",
       "propsCount": 16,
       "eventsCount": 6,
@@ -133,6 +148,7 @@
     },
     {
       "name": "VJoyDialogTrigger",
+      "description": "",
       "path": "VJoyDialogTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -141,6 +157,7 @@
     },
     {
       "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.",
       "path": "VJoyDot/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -149,6 +166,7 @@
     },
     {
       "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.",
       "path": "VJoyDrawer/metadata.json",
       "propsCount": 12,
       "eventsCount": 6,
@@ -157,6 +175,7 @@
     },
     {
       "name": "VJoyDrawerTrigger",
+      "description": "",
       "path": "VJoyDrawerTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -165,6 +184,7 @@
     },
     {
       "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.",
       "path": "VJoyDropdown/metadata.json",
       "propsCount": 13,
       "eventsCount": 4,
@@ -173,6 +193,7 @@
     },
     {
       "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.",
       "path": "VJoyDropdownList/metadata.json",
       "propsCount": 9,
       "eventsCount": 3,
@@ -181,6 +202,7 @@
     },
     {
       "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.",
       "path": "VJoyDropzone/metadata.json",
       "propsCount": 11,
       "eventsCount": 0,
@@ -189,6 +211,7 @@
     },
     {
       "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.",
       "path": "VJoyFilterBar/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -197,6 +220,7 @@
     },
     {
       "name": "VJoyFilterBarButton",
+      "description": "",
       "path": "VJoyFilterBarButton/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
@@ -205,6 +229,7 @@
     },
     {
       "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.",
       "path": "VJoyFormError/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -213,14 +238,25 @@
     },
     {
       "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.",
       "path": "VJoyFormFieldSkeleton/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
       "slotsCount": 0,
       "hasError": false
     },
+    {
+      "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!",
+      "path": "VJoyFormGroup/metadata.json",
+      "propsCount": 0,
+      "eventsCount": 0,
+      "slotsCount": 1,
+      "hasError": false
+    },
     {
       "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.",
       "path": "VJoyFunnel/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -229,6 +265,7 @@
     },
     {
       "name": "VJoyFunnelFooter",
+      "description": "",
       "path": "VJoyFunnelFooter/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -237,6 +274,7 @@
     },
     {
       "name": "VJoyFunnelHeader",
+      "description": "",
       "path": "VJoyFunnelHeader/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -245,6 +283,7 @@
     },
     {
       "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.",
       "path": "VJoyHighlight/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -253,6 +292,7 @@
     },
     {
       "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.",
       "path": "VJoyIcon/metadata.json",
       "propsCount": 7,
       "eventsCount": 0,
@@ -261,6 +301,7 @@
     },
     {
       "name": "VJoyIndicator",
+      "description": "",
       "path": "VJoyIndicator/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -269,6 +310,7 @@
     },
     {
       "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.",
       "path": "VJoyIndicators/metadata.json",
       "propsCount": 2,
       "eventsCount": 1,
@@ -277,14 +319,34 @@
     },
     {
       "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.",
       "path": "VJoyInput/metadata.json",
       "propsCount": 19,
       "eventsCount": 1,
+      "slotsCount": 2,
+      "hasError": false
+    },
+    {
+      "name": "VJoyInputDigit",
+      "description": "One-time code input with auto-navigation between slots. Supports numeric filtering with disabled/invalid states.",
+      "path": "VJoyInputDigit/metadata.json",
+      "propsCount": 6,
+      "eventsCount": 4,
+      "slotsCount": 0,
+      "hasError": false
+    },
+    {
+      "name": "VJoyInputPassword",
+      "description": "Password input built on top of VJoyInput with built-in visibility toggle.",
+      "path": "VJoyInputPassword/metadata.json",
+      "propsCount": 15,
+      "eventsCount": 1,
       "slotsCount": 1,
       "hasError": false
     },
     {
       "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.",
       "path": "VJoyLabel/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -293,6 +355,7 @@
     },
     {
       "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).",
       "path": "VJoyLink/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -301,6 +364,7 @@
     },
     {
       "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.",
       "path": "VJoyListItem/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -309,6 +373,7 @@
     },
     {
       "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>; } ```",
       "path": "VJoyMenu/metadata.json",
       "propsCount": 3,
       "eventsCount": 1,
@@ -317,6 +382,7 @@
     },
     {
       "name": "VJoyMenuItem",
+      "description": "",
       "path": "VJoyMenuItem/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -325,6 +391,7 @@
     },
     {
       "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.",
       "path": "VJoyMultiCheckbox/metadata.json",
       "propsCount": 8,
       "eventsCount": 1,
@@ -333,6 +400,7 @@
     },
     {
       "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.",
       "path": "VJoyPagination/metadata.json",
       "propsCount": 5,
       "eventsCount": 1,
@@ -341,6 +409,7 @@
     },
     {
       "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.",
       "path": "VJoyPanel/metadata.json",
       "propsCount": 7,
       "eventsCount": 0,
@@ -349,14 +418,25 @@
     },
     {
       "name": "VJoyPanelSection",
+      "description": "",
       "path": "VJoyPanelSection/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
       "slotsCount": 2,
       "hasError": false
     },
+    {
+      "name": "VJoyPasswordRequirement",
+      "description": "A component to display a password requirement status. This is meant to be displayed under a VJoyInput of type password.",
+      "path": "VJoyPasswordRequirement/metadata.json",
+      "propsCount": 2,
+      "eventsCount": 0,
+      "slotsCount": 0,
+      "hasError": false
+    },
     {
       "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.",
       "path": "VJoyProductTour/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -365,6 +445,7 @@
     },
     {
       "name": "VJoyProductTourTrigger",
+      "description": "",
       "path": "VJoyProductTourTrigger/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -373,6 +454,7 @@
     },
     {
       "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.",
       "path": "VJoyProgressBar/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -381,6 +463,7 @@
     },
     {
       "name": "VJoyRadio",
+      "description": "",
       "path": "VJoyRadio/metadata.json",
       "propsCount": 8,
       "eventsCount": 1,
@@ -389,6 +472,7 @@
     },
     {
       "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.",
       "path": "VJoyRadioGroup/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -397,6 +481,7 @@
     },
     {
       "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.",
       "path": "VJoyRatingStars/metadata.json",
       "propsCount": 3,
       "eventsCount": 0,
@@ -405,6 +490,7 @@
     },
     {
       "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.",
       "path": "VJoyScreenLoader/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -413,6 +499,7 @@
     },
     {
       "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.",
       "path": "VJoySelect/metadata.json",
       "propsCount": 12,
       "eventsCount": 1,
@@ -421,6 +508,7 @@
     },
     {
       "name": "VJoySelectableItem",
+      "description": "",
       "path": "VJoySelectableItem/metadata.json",
       "propsCount": 11,
       "eventsCount": 1,
@@ -429,6 +517,7 @@
     },
     {
       "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>)[]`",
       "path": "VJoySelectableItemGroup/metadata.json",
       "propsCount": 14,
       "eventsCount": 1,
@@ -437,6 +526,7 @@
     },
     {
       "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.",
       "path": "VJoySeparator/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -445,6 +535,7 @@
     },
     {
       "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' } }); } ```",
       "path": "VJoySnackbar/metadata.json",
       "propsCount": 9,
       "eventsCount": 0,
@@ -453,6 +544,7 @@
     },
     {
       "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.",
       "path": "VJoySpinner/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -461,6 +553,7 @@
     },
     {
       "name": "VJoyStep",
+      "description": "",
       "path": "VJoyStep/metadata.json",
       "propsCount": 6,
       "eventsCount": 1,
@@ -469,6 +562,7 @@
     },
     {
       "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",
       "path": "VJoyStepper/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -477,6 +571,7 @@
     },
     {
       "name": "VJoyTab",
+      "description": "",
       "path": "VJoyTab/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -485,6 +580,7 @@
     },
     {
       "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.",
       "path": "VJoyTabs/metadata.json",
       "propsCount": 1,
       "eventsCount": 1,
@@ -493,6 +589,7 @@
     },
     {
       "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.",
       "path": "VJoyTag/metadata.json",
       "propsCount": 12,
       "eventsCount": 3,
@@ -501,6 +598,7 @@
     },
     {
       "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.**",
       "path": "VJoyTagsInput/metadata.json",
       "propsCount": 9,
       "eventsCount": 2,
@@ -509,6 +607,7 @@
     },
     {
       "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",
       "path": "VJoyTagsList/metadata.json",
       "propsCount": 6,
       "eventsCount": 2,
@@ -517,6 +616,7 @@
     },
     {
       "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.",
       "path": "VJoyTemplate/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -525,6 +625,7 @@
     },
     {
       "name": "VJoyTemplateShape",
+      "description": "",
       "path": "VJoyTemplateShape/metadata.json",
       "propsCount": 0,
       "eventsCount": 0,
@@ -533,6 +634,7 @@
     },
     {
       "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.",
       "path": "VJoyText/metadata.json",
       "propsCount": 2,
       "eventsCount": 0,
@@ -541,6 +643,7 @@
     },
     {
       "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.",
       "path": "VJoyTextarea/metadata.json",
       "propsCount": 16,
       "eventsCount": 1,
@@ -549,6 +652,7 @@
     },
     {
       "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`.",
       "path": "VJoyTitleBrand/metadata.json",
       "propsCount": 1,
       "eventsCount": 0,
@@ -557,6 +661,7 @@
     },
     {
       "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.",
       "path": "VJoyToggle/metadata.json",
       "propsCount": 10,
       "eventsCount": 1,
@@ -565,6 +670,7 @@
     },
     {
       "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.",
       "path": "VJoyTooltip/metadata.json",
       "propsCount": 8,
       "eventsCount": 0,
@@ -573,6 +679,7 @@
     },
     {
       "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.",
       "path": "VJoyUserCard/metadata.json",
       "propsCount": 5,
       "eventsCount": 0,
@@ -581,6 +688,7 @@
     },
     {
       "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.",
       "path": "VJoyWalkthrough/metadata.json",
       "propsCount": 7,
       "eventsCount": 3,
@@ -589,6 +697,7 @@
     },
     {
       "name": "VJoyWalkthroughTrigger",
+      "description": "",
       "path": "VJoyWalkthroughTrigger/metadata.json",
       "propsCount": 4,
       "eventsCount": 0,
@@ -597,6 +706,7 @@
     },
     {
       "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.",
       "path": "VJoyWrapper/metadata.json",
       "propsCount": 8,
       "eventsCount": 0,

package/dist/index.js

@@ -21,7 +21,7 @@ class JoyMcpServer {
     constructor() {
         this.server = new Server({
             name: 'joy-design-system',
-            version: '0.3.0',
+            version: '0.2.0',
         }, {
             capabilities: {
                 tools: {},