@primevue/mcp 5.0.0-rc.2 → 5.0.0-rc.3

package/data/components.json

@@ -1,6 +1,6 @@
 {
   "version": "1.0.0",
-  "generatedAt": "2026-07-08",
+  "generatedAt": "2026-07-14",
   "components": [
     {
       "name": "accordion",
@@ -82,7 +82,7 @@
         {
           "id": "accessibility",
           "label": "Accessibility",
-          "description": "Screen Reader Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby property. Each header has a heading role, for which the level is customized by headerAriaLevel and has a default level of 2 as per W3C specifications. Disabled accordions headers use aria-disabled and are excluded from the keybord navigation. The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. Header Keyboard Support Key Function tab Moves focus to the next the focusable element in the page tab sequence. shift + tab Moves focus to the previous the focusable element in the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. down arrow Moves focus to the next header. up arrow Moves focus to the previous header. home Moves focus to the first header. end Moves focus to the last header.",
+          "description": "Screen Reader Accordion header elements have a button role and use aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read a header element defaults to the value of the header property and can be customized by defining an aria-label or aria-labelledby property. Each header has a heading role, for which the level is customized by headerAriaLevel and has a default level of 2 as per W3C specifications. Disabled accordions headers use aria-disabled and are excluded from the keyboard navigation. The content uses region role, defines an id that matches the aria-controls of the header and aria-labelledby referring to the id of the header. Header Keyboard Support Key Function tab Moves focus to the next the focusable element in the page tab sequence. shift + tab Moves focus to the previous the focusable element in the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content. down arrow Moves focus to the next header. up arrow Moves focus to the previous header. home Moves focus to the first header. end Moves focus to the last header.",
           "examples": null
         }
       ],
@@ -2010,7 +2010,7 @@
           "label": "Document",
           "description": "If the target element is not specified, BlockUI blocks the document by default.",
           "examples": {
-            "basic": "<template>\n    <div>\n        <BlockUI :blocked=\"blocked\" fullScreen />\n        <Button @click=\"blockDocument\">Block</Button>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nconst blocked = ref(false);\nconst blockDocument = () => {\n    blocked.value = true;\n\n    setTimeout(() => {\n        blocked.value = false;\n    }, 3000);\n}\n<\\/script>"
+            "basic": "<template>\n    <div>\n        <BlockUI :blocked=\"blocked\" fullScreen />\n        <div class=\"flex justify-center\">\n            <Button @click=\"blockDocument\">Block</Button>\n        </div>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nconst blocked = ref(false);\nconst blockDocument = () => {\n    blocked.value = true;\n\n    setTimeout(() => {\n        blocked.value = false;\n    }, 3000);\n}\n<\\/script>"
           }
         },
         {
@@ -3961,8 +3961,8 @@
             "description": "Icon only width of root"
           },
           {
-            "token": "button.icon.only.width",
-            "variable": "--p-button-icon-only-width",
+            "token": "button.font.size",
+            "variable": "--p-button-font-size",
             "description": "Font size of root"
           },
           {
@@ -6438,7 +6438,7 @@
         {
           "id": "combo",
           "label": "Combo",
-          "description": "Different chart types can be combined in the same graph usign the type option of a dataset.",
+          "description": "Different chart types can be combined in the same graph using the type option of a dataset.",
           "examples": {
             "basic": "<template>\n    <div>\n        <Chart type=\"bar\" :data=\"chartData\" :options=\"chartOptions\" class=\"h-[30rem]\" />\n    </div>\n</template>\n\n<script setup>\nimport { ref, onMounted } from \"vue\";\n\nonMounted(() => {\n    chartData.value = setChartData();\n    chartOptions.value = setChartOptions();\n});\n\nconst chartData = ref();\nconst chartOptions = ref();\n        \nconst setChartData = () => {\n    const documentStyle = getComputedStyle(document.documentElement);\n\n    return {\n        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n        datasets: [\n            {\n                type: 'line',\n                label: 'Dataset 1',\n                borderColor: documentStyle.getPropertyValue('--p-orange-500'),\n                borderWidth: 2,\n                fill: false,\n                tension: 0.4,\n                data: [50, 25, 12, 48, 56, 76, 42]\n            },\n            {\n                type: 'bar',\n                label: 'Dataset 2',\n                backgroundColor: documentStyle.getPropertyValue('--p-gray-500'),\n                data: [21, 84, 24, 75, 37, 65, 34],\n                borderColor: 'white',\n                borderWidth: 2\n            },\n            {\n                type: 'bar',\n                label: 'Dataset 3',\n                backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),\n                data: [41, 52, 24, 74, 23, 21, 32]\n            }\n        ]\n    };\n};\nconst setChartOptions = () => {\n    const documentStyle = getComputedStyle(document.documentElement);\n    const textColor = documentStyle.getPropertyValue('--p-text-color');\n    const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');\n    const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');\n\n    return {\n        maintainAspectRatio: false,\n        aspectRatio: 0.6,\n        plugins: {\n            legend: {\n                labels: {\n                    color: textColor\n                }\n            }\n        },\n        scales: {\n            x: {\n                ticks: {\n                    color: textColorSecondary\n                },\n                grid: {\n                    color: surfaceBorder\n                }\n            },\n            y: {\n                ticks: {\n                    color: textColorSecondary\n                },\n                grid: {\n                    color: surfaceBorder\n                }\n            }\n        }\n    };\n}\n<\\/script>"
           }
@@ -8257,7 +8257,7 @@
           "label": "Position",
           "description": "The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.",
           "examples": {
-            "basic": "<template>\n    <Toast />\n    <ConfirmDialog group=\"positioned\"></ConfirmDialog>\n    <div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-4\">\n            <Button @click=\"confirmPosition('left')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowRight />\n                Left\n            </Button>\n            <Button @click=\"confirmPosition('right')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowLeft />\n                Right\n            </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-4\">\n            <Button @click=\"confirmPosition('topleft')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowDown />\n                TopLeft\n            </Button>\n            <Button @click=\"confirmPosition('top')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowDown />\n                Top\n            </Button>\n            <Button @click=\"confirmPosition('topright')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowDown />\n                TopRight\n            </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2\">\n            <Button @click=\"confirmPosition('bottomleft')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowUp />\n                BottomLeft\n            </Button>\n            <Button @click=\"confirmPosition('bottom')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowUp />\n                Bottom\n            </Button>\n            <Button @click=\"confirmPosition('bottomright')\" severity=\"secondary\" class=\"min-w-40\">\n                <ArrowUp />\n                BottomRight\n            </Button>\n        </div>\n    </div>\n</template>\n\n<script setup>\nimport ArrowDown from '@primeicons/vue/arrow-down';\nimport ArrowLeft from '@primeicons/vue/arrow-left';\nimport ArrowRight from '@primeicons/vue/arrow-right';\nimport ArrowUp from '@primeicons/vue/arrow-up';\nimport InfoCircle from '@primeicons/vue/info-circle';\nimport { useConfirm } from \"primevue/useconfirm\";\nimport { useToast } from \"primevue/usetoast\";\n\nconst confirm = useConfirm();\nconst toast = useToast();\n\nconst confirmPosition = (position) => {\n    confirm.require({\n        group: 'positioned',\n        message: 'Are you sure you want to proceed?',\n        header: 'Confirmation',\n        icon: InfoCircle,\n        position: position,\n        rejectProps: {\n            label: 'Cancel',\n            severity: 'secondary',\n            text: true\n        },\n        acceptProps: {\n            label: 'Save',\n            text: true\n        },\n        accept: () => {\n            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });\n        },\n        reject: () => {\n            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });\n        }\n    });\n};\n<\\/script>"
+            "basic": "<template>\n    <Toast />\n    <ConfirmDialog group=\"positioned\"></ConfirmDialog>\n    <div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-4\">\n            <Button @click=\"confirmPosition('left')\" severity=\"secondary\" class=\"min-w-40\"> Left </Button>\n            <Button @click=\"confirmPosition('right')\" severity=\"secondary\" class=\"min-w-40\"> Right </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-4\">\n            <Button @click=\"confirmPosition('topleft')\" severity=\"secondary\" class=\"min-w-40\"> TopLeft </Button>\n            <Button @click=\"confirmPosition('top')\" severity=\"secondary\" class=\"min-w-40\"> Top </Button>\n            <Button @click=\"confirmPosition('topright')\" severity=\"secondary\" class=\"min-w-40\"> TopRight </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2\">\n            <Button @click=\"confirmPosition('bottomleft')\" severity=\"secondary\" class=\"min-w-40\"> BottomLeft </Button>\n            <Button @click=\"confirmPosition('bottom')\" severity=\"secondary\" class=\"min-w-40\"> Bottom </Button>\n            <Button @click=\"confirmPosition('bottomright')\" severity=\"secondary\" class=\"min-w-40\"> BottomRight </Button>\n        </div>\n    </div>\n</template>\n\n<script setup>\nimport InfoCircle from '@primeicons/vue/info-circle';\nimport { useConfirm } from \"primevue/useconfirm\";\nimport { useToast } from \"primevue/usetoast\";\n\nconst confirm = useConfirm();\nconst toast = useToast();\n\nconst confirmPosition = (position) => {\n    confirm.require({\n        group: 'positioned',\n        message: 'Are you sure you want to proceed?',\n        header: 'Confirmation',\n        icon: InfoCircle,\n        position: position,\n        rejectProps: {\n            label: 'Cancel',\n            severity: 'secondary',\n            text: true\n        },\n        acceptProps: {\n            label: 'Save',\n            text: true\n        },\n        accept: () => {\n            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });\n        },\n        reject: () => {\n            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });\n        }\n    });\n};\n<\\/script>"
           }
         },
         {
@@ -9558,7 +9558,7 @@
         {
           "id": "accessibility",
           "label": "Accessibility",
-          "description": "Screen Reader DataTable uses a table element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table for readers. Default role of the table is table . Header, body and footer elements use rowgroup , rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to \"ascending\" or \"descending\". Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton . The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of the locale API. The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup , aria-expanded and aria-controls to define the relation between the button and the overlay. Popop menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well. Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow , aria.cancelEdit and aria.saveEdit used for the aria-label . Paginator is a standalone component used inside the DataTable, refer to the paginator for more information about the accessibility features. Keyboard Support Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys. Sortable Headers Keyboard Support Key Function tab Moves through the headers. enter Sorts the column. space Sorts the column. Filter Menu Keyboard Support Key Function tab Moves through the elements inside the popup. escape Hides the popup. enter Opens the popup. Selection Keyboard Support Key Function tab Moves focus to the first selected row, if there is none then first row receives the focus. up arrow Moves focus to the previous row. down arrow Moves focus to the next row. enter Toggles the selected state of the focused row depending on the metaKeySelection setting. space Toggles the selected state of the focused row depending on the metaKeySelection setting. home Moves focus to the first row. end Moves focus to the last row. shift + down arrow Moves focus to the next row and toggles the selection state. shift + up arrow Moves focus to the previous row and toggles the selection state. shift + space Selects the rows between the most recently selected row and the focused row. control + shift + home Selects the focused rows and all the options up to the first one. control + shift + end Selects the focused rows and all the options down to the last one. control + a Selects all rows.",
+          "description": "Screen Reader DataTable uses a table element whose attributes can be extended with the tableProps option. This property allows passing aria roles and attributes like aria-label and aria-describedby to define the table for readers. Default role of the table is table . Header, body and footer elements use rowgroup , rows use row role, header cells have columnheader and body cells use cell roles. Sortable headers utilizer aria-sort attribute either set to \"ascending\" or \"descending\". Built-in checkbox and radiobutton components for row selection use checkbox and radiobutton . The label to describe them is retrieved from the aria.selectRow and aria.unselectRow properties of the locale API. Similarly header checkbox uses selectAll and unselectAll keys. When a row is selected, aria-selected is set to true on a row. The element to expand or collapse a row is a button with aria-expanded and aria-controls properties. Value to describe the buttons is derived from aria.expandRow and aria.collapseRow properties of the locale API. The filter menu button use aria.showFilterMenu and aria.hideFilterMenu properties as aria-label in addition to the aria-haspopup , aria-expanded and aria-controls to define the relation between the button and the overlay. Popup menu has dialog role with aria-modal as focus is kept within the overlay. The operator dropdown use aria.filterOperator and filter constraints dropdown use aria.filterConstraint properties. Buttons to add rules on the other hand utilize aria.addRule and aria.removeRule properties. The footer buttons similarly use aria.clear and aria.apply properties. filterInputProps of the Column component can be used to define aria labels for the built-in filter components, if a custom component is used with templating you also may define your own aria labels as well. Editable cells use custom templating so you need to manage aria roles and attributes manually if required. The row editor controls are button elements with aria.editRow , aria.cancelEdit and aria.saveEdit used for the aria-label . Paginator is a standalone component used inside the DataTable, refer to the paginator for more information about the accessibility features. Keyboard Support Any button element inside the DataTable used for cases like filter, row expansion, edit are tabbable and can be used with space and enter keys. Sortable Headers Keyboard Support Key Function tab Moves through the headers. enter Sorts the column. space Sorts the column. Filter Menu Keyboard Support Key Function tab Moves through the elements inside the popup. escape Hides the popup. enter Opens the popup. Selection Keyboard Support Key Function tab Moves focus to the first selected row, if there is none then first row receives the focus. up arrow Moves focus to the previous row. down arrow Moves focus to the next row. enter Toggles the selected state of the focused row depending on the metaKeySelection setting. space Toggles the selected state of the focused row depending on the metaKeySelection setting. home Moves focus to the first row. end Moves focus to the last row. shift + down arrow Moves focus to the next row and toggles the selection state. shift + up arrow Moves focus to the previous row and toggles the selection state. shift + space Selects the rows between the most recently selected row and the focused row. control + shift + home Selects the focused rows and all the options up to the first one. control + shift + end Selects the focused rows and all the options down to the last one. control + a Selects all rows.",
           "examples": null
         }
       ],
@@ -11430,7 +11430,7 @@
           "label": "Inline Template",
           "description": "Custom content can be placed inside date cells in inline mode.",
           "examples": {
-            "basic": "<template>\n    <div class=\"flex justify-center\">\n        <DatePicker v-model=\"date\" inline :numberOfMonths=\"2\" :pt=\"{ day: 'w-12! h-12! rounded-lg!', dayCell: 'p-2!' }\">\n            <template #date=\"{ date, selected }\">\n                <template v-if=\"!date.otherMonth\">\n                    <div class=\"flex flex-col items-center gap-1 min-w-12.5\">\n                        <span class=\"font-semibold text-base\">{{ date.day }}</span>\n                        <span v-if=\"isFutureOrToday(date)\" :class=\"'text-sm font-medium ' + getPriceClass(date, selected)\">{{ '$' + getPrice(date.year, date.month, date.day) }}</span>\n                    </div>\n                </template>\n                <span v-else class=\"invisible\">{{ date.day }}</span>\n            </template>\n        </DatePicker>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst date = ref();\nconst today = new Date();\nconst priceMap = new Map();\n\ntoday.setHours(0, 0, 0, 0);\n\nconst isFutureOrToday = (date) => {\n    const d = new Date(date.year, date.month, date.day);\n\n    return d >= today;\n};\n\nconst getPrice = (year, month, day) => {\n    const key = \\`\\${year}-\\${month}-\\${day}\\`;\n\n    if (!priceMap.has(key)) {\n        priceMap.set(key, Math.floor(Math.random() * 71) + 30);\n    }\n\n    return priceMap.get(key);\n};\n\nconst getPriceClass = (date, selected) => {\n    const price = getPrice(date.year, date.month, date.day);\n    const isLow = price < 50;\n\n    if (selected) {\n        return isLow ? 'text-green-200 dark:text-green-900' : 'opacity-70';\n    }\n\n    return isLow ? 'text-green-600 dark:text-green-400' : 'text-surface-600 dark:text-surface-400';\n};\n<\\/script>"
+            "basic": "<template>\n    <div class=\"flex justify-center\">\n        <DatePicker v-model=\"date\" inline :numberOfMonths=\"2\" :pt=\"{ day: 'w-12! h-12! rounded-lg!', dayCell: 'p-2!' }\">\n            <template #date=\"{ date, selected }\">\n                <template v-if=\"!date.otherMonth\">\n                    <div class=\"flex flex-col items-center gap-1 min-w-12.5\">\n                        <span class=\"font-semibold text-base\">{{ date.day }}</span>\n                        <span v-if=\"isFutureOrToday(date)\" :class=\"'text-sm font-medium ' + getPriceClass(date, selected)\">{{ '$' + getPrice(date.year, date.month, date.day) }}</span>\n                    </div>\n                </template>\n                <span v-else class=\"invisible\">{{ date.day }}</span>\n            </template>\n        </DatePicker>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst date = ref();\nconst today = new Date();\nconst priceMap = new Map();\n\ntoday.setHours(0, 0, 0, 0);\n\nconst isFutureOrToday = (date) => {\n    const d = new Date(date.year, date.month, date.day);\n\n    return d >= today;\n};\n\nconst getPrice = (year, month, day) => {\n    const key = \\`\\${year}-\\${month}-\\${day}\\`;\n\n    if (!priceMap.has(key)) {\n        const hash = Math.imul(year * 10000 + month * 100 + day, 2654435761) >>> 0;\n\n        priceMap.set(key, (hash % 71) + 30);\n    }\n\n    return priceMap.get(key);\n};\n\nconst getPriceClass = (date, selected) => {\n    const price = getPrice(date.year, date.month, date.day);\n    const isLow = price < 50;\n\n    if (selected) {\n        return isLow ? 'text-green-200 dark:text-green-900' : 'opacity-70';\n    }\n\n    return isLow ? 'text-green-600 dark:text-green-400' : 'text-surface-600 dark:text-surface-400';\n};\n<\\/script>"
           }
         },
         {
@@ -12925,7 +12925,7 @@
           "label": "Position",
           "description": "The position property is used to display a Dialog at all edges and corners of the screen.",
           "examples": {
-            "basic": "<template>\n    <div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('left')\">\n                Left\n                <ArrowLeft />\n            </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('right')\">\n                Right\n                <ArrowRight />\n            </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('topleft')\">\n                TopLeft\n                <ArrowUpLeft />\n            </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('top')\">\n                Top\n                <ArrowUp />\n            </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('topright')\">\n                TopRight\n                <ArrowUpRight />\n            </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottomleft')\">\n                BottomLeft\n                <ArrowDownLeft />\n            </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottom')\">\n                Bottom\n                <ArrowDown />\n            </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottomright')\">\n                BottomRight\n                <ArrowDownRight />\n            </Button>\n        </div>\n\n        <Dialog v-model:visible=\"visible\" :position=\"position\" modal :draggable=\"false\" header=\"Edit Profile\" :style=\"{ width: '25rem' }\">\n            <div class=\"flex flex-col gap-6\">\n                <span class=\"text-surface-500 dark:text-surface-400\">Update your information.</span>\n                <div class=\"flex flex-col gap-1\">\n                    <Label for=\"username\" class=\"font-semibold\">Username</Label>\n                    <InputText id=\"username\" v-model=\"username\"  autoFocus/>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                    <Label for=\"email\" class=\"font-semibold\">Email</Label>\n                    <InputText id=\"email\" v-model=\"email\" />\n                </div>\n                <div class=\"flex justify-end gap-2\">\n                    <Button severity=\"secondary\" @click=\"visible = false\">Cancel</Button>\n                    <Button @click=\"visible = false\">Save</Button>\n                </div>\n            </div>\n        </Dialog>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport ArrowDown from '@primeicons/vue/arrow-down';\nimport ArrowDownLeft from '@primeicons/vue/arrow-down-left';\nimport ArrowDownRight from '@primeicons/vue/arrow-down-right';\nimport ArrowLeft from '@primeicons/vue/arrow-left';\nimport ArrowRight from '@primeicons/vue/arrow-right';\nimport ArrowUp from '@primeicons/vue/arrow-up';\nimport ArrowUpLeft from '@primeicons/vue/arrow-up-left';\nimport ArrowUpRight from '@primeicons/vue/arrow-up-right';\n\nconst position = ref('center');\nconst visible = ref(false);\nconst username = ref('');\nconst email = ref('');\n\nconst openPosition = (pos) => {\n    position.value = pos;\n    visible.value = true;\n};\n<\\/script>"
+            "basic": "<template>\n    <div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('left')\"> Left </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('right')\"> Right </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2 mb-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('topleft')\"> TopLeft </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('top')\"> Top </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('topright')\"> TopRight </Button>\n        </div>\n        <div class=\"flex flex-wrap justify-center gap-2\">\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottomleft')\"> BottomLeft </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottom')\"> Bottom </Button>\n            <Button severity=\"secondary\" class=\"min-w-40\" @click=\"openPosition('bottomright')\"> BottomRight </Button>\n        </div>\n\n        <Dialog v-model:visible=\"visible\" :position=\"position\" modal :draggable=\"false\" header=\"Edit Profile\" :style=\"{ width: '25rem' }\">\n            <div class=\"flex flex-col gap-6\">\n                <span class=\"text-surface-500 dark:text-surface-400\">Update your information.</span>\n                <div class=\"flex flex-col gap-1\">\n                    <Label for=\"username\" class=\"font-semibold\">Username</Label>\n                    <InputText id=\"username\" v-model=\"username\"  autoFocus/>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                    <Label for=\"email\" class=\"font-semibold\">Email</Label>\n                    <InputText id=\"email\" v-model=\"email\" />\n                </div>\n                <div class=\"flex justify-end gap-2\">\n                    <Button severity=\"secondary\" @click=\"visible = false\">Cancel</Button>\n                    <Button @click=\"visible = false\">Save</Button>\n                </div>\n            </div>\n        </Dialog>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\n\nconst position = ref('center');\nconst visible = ref(false);\nconst username = ref('');\nconst email = ref('');\n\nconst openPosition = (pos) => {\n    position.value = pos;\n    visible.value = true;\n};\n<\\/script>"
           }
         },
         {
@@ -14420,11 +14420,6 @@
             "variable": "--p-editor-toolbar-item-active-color",
             "description": "Active color of toolbar item"
           },
-          {
-            "token": "editor.toolbar.item.padding",
-            "variable": "--p-editor-toolbar-item-padding",
-            "description": "Padding of toolbar item"
-          },
           {
             "token": "editor.overlay.background",
             "variable": "--p-editor-overlay-background",
@@ -14863,7 +14858,7 @@
           "label": "Dropzone",
           "description": "A custom dropzone can be built with the content and empty slots. Files are added by dragging them onto the area or by clicking to browse, and the selected files are managed with the removeFileCallback .",
           "examples": {
-            "basic": "<template>\n    <div class=\"max-w-md mx-auto\">\n        <FileUpload\n            ref=\"fu\"\n            name=\"demo[]\"\n            url=\"/api/upload\"\n            :multiple=\"true\"\n            accept=\"image/*\"\n            :maxFileSize=\"1000000\"\n            mode=\"advanced\"\n            :pt=\"{ root: { class: 'border-0! bg-transparent!' }, header: { class: 'hidden!' }, content: { class: 'border-2! border-dashed! border-surface-200! dark:border-surface-700! rounded-xl! p-8!' } }\"\n        >\n            <template #content=\"{ files, removeFileCallback, messages }\">\n                <div v-if=\"messages?.length\" class=\"flex flex-col gap-2\">\n                    <Message v-for=\"msg of messages\" :key=\"msg\" severity=\"error\">{{ msg }}</Message>\n                </div>\n                <div v-if=\"files.length\" class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between\">\n                        <span class=\"text-sm text-muted-color\">{{ files.length }} file(s) selected</span>\n                        <div class=\"flex items-center gap-2\">\n                            <Button variant=\"text\" size=\"small\" @click=\"onUpload\">Upload</Button>\n                            <Button variant=\"text\" size=\"small\" severity=\"danger\" @click=\"onClear\">Clear all</Button>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-col gap-2\">\n                        <div v-for=\"(file, index) of files\" :key=\"file.name + file.size\" class=\"flex items-center justify-between p-3 rounded-lg bg-surface-50 dark:bg-surface-800\">\n                            <div class=\"flex items-center gap-3\">\n                                <CloudUpload class=\"text-primary shrink-0\" />\n                                <div class=\"flex flex-col\">\n                                    <span class=\"text-sm font-medium\">{{ file.name }}</span>\n                                    <span class=\"text-xs text-muted-color\">{{ formatSize(file.size) }}</span>\n                                </div>\n                            </div>\n                            <Button type=\"button\" iconOnly variant=\"text\" severity=\"secondary\" size=\"small\" rounded @click=\"removeFileCallback(index)\">\n                                <Times />\n                            </Button>\n                        </div>\n                    </div>\n                </div>\n            </template>\n            <template #empty>\n                <div class=\"flex flex-col items-center justify-center gap-3 py-8 cursor-pointer\" @click=\"onChoose\">\n                    <CloudUpload :size=\"48\" class=\"text-muted-color\" />\n                    <div class=\"text-center\">\n                        <p class=\"text-lg font-medium mt-0 mb-1\">Drop files here</p>\n                        <p class=\"text-sm text-muted-color m-0\">or click to browse</p>\n                    </div>\n                </div>\n            </template>\n        </FileUpload>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport CloudUpload from '@primeicons/vue/cloud-upload';\nimport Times from '@primeicons/vue/times';\n\nconst fu = ref();\n\nconst onChoose = () => {\n    fu.value.choose();\n};\n\nconst onUpload = () => {\n    fu.value.upload();\n};\n\nconst onClear = () => {\n    fu.value.clear();\n};\n\nconst formatSize = (bytes) => {\n    if (bytes === 0) return '0 B';\n\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n<\\/script>"
+            "basic": "<template>\n    <div class=\"max-w-md mx-auto\">\n        <FileUpload\n            ref=\"fu\"\n            name=\"demo[]\"\n            url=\"/api/upload\"\n            :multiple=\"true\"\n            accept=\"image/*\"\n            :maxFileSize=\"1000000\"\n            mode=\"advanced\"\n            :pt=\"{\n                root: { class: 'border! border-dashed!' },\n                header: { class: 'hidden!' },\n                content: { class: 'p-8!' }\n            }\"\n        >\n            <template #content=\"{ files, removeFileCallback, messages }\">\n                <div v-if=\"messages?.length\" class=\"flex flex-col gap-2\">\n                    <Message v-for=\"msg of messages\" :key=\"msg\" severity=\"error\">{{ msg }}</Message>\n                </div>\n                <div v-if=\"files.length\" class=\"flex flex-col gap-4\">\n                    <div class=\"flex items-center justify-between\">\n                        <span class=\"text-sm text-muted-color\">{{ files.length }} file(s) selected</span>\n                        <div class=\"flex items-center gap-2\">\n                            <Button variant=\"text\" size=\"small\" @click=\"onUpload\">Upload</Button>\n                            <Button variant=\"text\" size=\"small\" severity=\"danger\" @click=\"onClear\">Clear all</Button>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-col gap-2\">\n                        <div v-for=\"(file, index) of files\" :key=\"file.name + file.size\" class=\"flex items-center justify-between p-3 rounded-lg bg-surface-50 dark:bg-surface-800\">\n                            <div class=\"flex items-center gap-3\">\n                                <CloudUpload class=\"text-primary shrink-0\" />\n                                <div class=\"flex flex-col\">\n                                    <span class=\"text-sm font-medium\">{{ file.name }}</span>\n                                    <span class=\"text-xs text-muted-color\">{{ formatSize(file.size) }}</span>\n                                </div>\n                            </div>\n                            <Button type=\"button\" iconOnly variant=\"text\" severity=\"secondary\" size=\"small\" rounded @click=\"removeFileCallback(index)\">\n                                <Times />\n                            </Button>\n                        </div>\n                    </div>\n                </div>\n            </template>\n            <template #empty>\n                <div class=\"flex flex-col items-center justify-center gap-3 py-8 cursor-pointer\" @click=\"onChoose\">\n                    <CloudUpload :size=\"48\" class=\"text-muted-color\" />\n                    <div class=\"text-center\">\n                        <p class=\"text-lg font-medium mt-0 mb-1\">Drop files here</p>\n                        <p class=\"text-sm text-muted-color m-0\">or click to browse</p>\n                    </div>\n                </div>\n            </template>\n        </FileUpload>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport CloudUpload from '@primeicons/vue/cloud-upload';\nimport Times from '@primeicons/vue/times';\n\nconst fu = ref();\n\nconst onChoose = () => {\n    fu.value.choose();\n};\n\nconst onUpload = () => {\n    fu.value.upload();\n};\n\nconst onClear = () => {\n    fu.value.clear();\n};\n\nconst formatSize = (bytes) => {\n    if (bytes === 0) return '0 B';\n\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n<\\/script>"
           }
         },
         {
@@ -14871,7 +14866,7 @@
           "label": "Image Preview",
           "description": "Grid-based image preview with thumbnails. Hover over images to reveal the remove button.",
           "examples": {
-            "basic": "<template>\n    <FileUpload ref=\"fu\" name=\"demo[]\" url=\"/api/upload\" :multiple=\"true\" accept=\"image/*\" :maxFileSize=\"1000000\" mode=\"advanced\" :pt=\"{ root: { class: 'border-0!' } }\">\n        <template #header=\"{ files, chooseCallback, uploadCallback }\">\n            <div class=\"flex items-center gap-2\">\n                <Button type=\"button\" severity=\"secondary\" variant=\"outlined\" size=\"small\" @click=\"chooseCallback()\">\n                    <Plus />\n                    Add Images\n                </Button>\n                <Button v-if=\"files?.length > 0\" type=\"button\" size=\"small\" @click=\"uploadCallback()\">\n                    <Upload />\n                    Upload All\n                </Button>\n            </div>\n        </template>\n        <template #content=\"{ files, removeFileCallback }\">\n            <div v-if=\"files?.length > 0\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n                <div v-for=\"(file, i) of files\" :key=\"file.name + file.type + file.size\" class=\"group relative rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700\">\n                    <img :src=\"file.objectURL\" :alt=\"file.name\" class=\"w-full h-32 object-cover\" />\n                    <div class=\"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n                        <button type=\"button\" class=\"text-white bg-red-500 rounded-full p-2 hover:bg-red-600 cursor-pointer border-0\" @click=\"removeFileCallback($event, i)\">\n                            <Times />\n                        </button>\n                    </div>\n                    <div class=\"p-2\">\n                        <div class=\"text-xs font-medium truncate\">{{ file.name }}</div>\n                        <div class=\"text-xs text-muted-color\">{{ formatSize(file.size) }}</div>\n                    </div>\n                </div>\n            </div>\n        </template>\n        <template #empty>\n            <div class=\"border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-xl p-12 text-center\">\n                <p class=\"text-muted-color m-0!\">No images selected. Click \"Add Images\" to get started.</p>\n            </div>\n        </template>\n    </FileUpload>\n</template>\n\n<script setup>\nimport Plus from '@primeicons/vue/plus';\nimport Times from '@primeicons/vue/times';\nimport Upload from '@primeicons/vue/upload';\n\nconst formatSize = (bytes) => {\n    if (bytes === 0) return '0 B';\n\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n<\\/script>"
+            "basic": "<template>\n    <FileUpload ref=\"fu\" name=\"demo[]\" url=\"/api/upload\" :multiple=\"true\" accept=\"image/*\" :maxFileSize=\"1000000\" mode=\"advanced\" :pt=\"{ root: { class: 'border-0!' } }\">\n        <template #header=\"{ files, chooseCallback, uploadCallback }\">\n            <div class=\"flex items-center gap-2\">\n                <Button type=\"button\" severity=\"secondary\" variant=\"outlined\" @click=\"chooseCallback()\">\n                    <Plus />\n                    Add Images\n                </Button>\n                <Button v-if=\"files?.length > 0\" type=\"button\" @click=\"uploadCallback()\">\n                    <Upload />\n                    Upload All\n                </Button>\n            </div>\n        </template>\n        <template #content=\"{ files, removeFileCallback }\">\n            <div v-if=\"files?.length > 0\" class=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4\">\n                <div v-for=\"(file, i) of files\" :key=\"file.name + file.type + file.size\" class=\"group relative rounded-lg overflow-hidden border border-surface-200 dark:border-surface-700\">\n                    <img :src=\"file.objectURL\" :alt=\"file.name\" class=\"w-full h-32 object-cover\" />\n                    <div class=\"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center\">\n                        <button type=\"button\" class=\"text-white bg-red-500 rounded-full p-2 hover:bg-red-600 cursor-pointer border-0\" @click=\"removeFileCallback($event, i)\">\n                            <Times />\n                        </button>\n                    </div>\n                    <div class=\"p-2\">\n                        <div class=\"text-xs font-medium truncate\">{{ file.name }}</div>\n                        <div class=\"text-xs text-muted-color\">{{ formatSize(file.size) }}</div>\n                    </div>\n                </div>\n            </div>\n        </template>\n        <template #empty>\n            <div class=\"border-2 border-dashed border-surface-200 dark:border-surface-700 rounded-xl p-12 text-center\">\n                <p class=\"text-muted-color m-0!\">No images selected. Click \"Add Images\" to get started.</p>\n            </div>\n        </template>\n    </FileUpload>\n</template>\n\n<script setup>\nimport Plus from '@primeicons/vue/plus';\nimport Times from '@primeicons/vue/times';\nimport Upload from '@primeicons/vue/upload';\n\nconst formatSize = (bytes) => {\n    if (bytes === 0) return '0 B';\n\n    const k = 1024;\n    const sizes = ['B', 'KB', 'MB'];\n    const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n<\\/script>"
           }
         },
         {
@@ -15833,7 +15828,7 @@
           },
           {
             "name": "initialValues",
-            "type": "Record<string, any>",
+            "type": "T",
             "default": "-",
             "description": "The initial values for the form fields."
           },
@@ -15998,7 +15993,7 @@
         {
           "id": "fullscreenwiththumbnail",
           "label": "With Thumbnails",
-          "description": "Full screen mode is enabled by adding fullScreen property and and visibility is controlled with a binding to visible property.",
+          "description": "Full screen mode is enabled by adding fullScreen property and visibility is controlled with a binding to visible property.",
           "examples": {
             "basic": "<template>\n    <div class=\"flex justify-center\">\n        <Galleria v-model:visible=\"displayBasic\" :value=\"images\" :responsiveOptions=\"responsiveOptions\" :numVisible=\"9\" containerStyle=\"max-width: 50%\" :circular=\"true\" :fullScreen=\"true\" :showItemNavigators=\"true\">\n            <template #item=\"slotProps\">\n                <img :src=\"slotProps.item.itemImageSrc\" :alt=\"slotProps.item.alt\" style=\"width: 100%; display: block\" />\n            </template>\n            <template #thumbnail=\"slotProps\">\n                <img :src=\"slotProps.item.thumbnailImageSrc\" :alt=\"slotProps.item.alt\" style=\"display: block\" />\n            </template>\n        </Galleria>\n\n        <Button @click=\"displayBasic = true\">\n            <ExternalLink />\n            Show\n        </Button>\n    </div>\n</template>\n\n<script setup>\nimport ExternalLink from '@primeicons/vue/external-link';\nimport { ref, onMounted } from \"vue\";\nimport { PhotoService } from '@/service/PhotoService';\n\nconst images = ref();\nconst responsiveOptions = ref([\n    {\n        breakpoint: '1500px',\n        numVisible: 5\n    },\n    {\n        breakpoint: '1024px',\n        numVisible: 3\n    },\n    {\n        breakpoint: '768px',\n        numVisible: 2\n    },\n    {\n        breakpoint: '560px',\n        numVisible: 1\n    }\n]);\nconst displayBasic = ref(false);\n\nonMounted(() => {\n    PhotoService.getImages().then((data) => (images.value = data));\n})\n<\\/script>"
           }
@@ -18495,14 +18490,6 @@
             "basic": "<template>\n    <div class=\"space-y-4 max-w-md mx-auto\">\n        <InputGroup>\n            <InputGroupAddon>\n                <MapMarker />\n            </InputGroupAddon>\n            <Select v-model=\"city1\" :options=\"cities\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a City\" class=\"flex-1\" />\n        </InputGroup>\n\n        <InputGroup>\n            <InputGroupAddon>www</InputGroupAddon>\n            <InputText v-model=\"website\" placeholder=\"Website\" class=\"border-r-0!\" />\n            <Select v-model=\"city2\" :options=\"cities\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a City\" class=\"flex-1\" />\n        </InputGroup>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport MapMarker from '@primeicons/vue/map-marker';\n\nconst city1 = ref(null);\nconst city2 = ref(null);\nconst website = ref(null);\nconst cities = ref([\n    { label: 'New York', value: 'ny' },\n    { label: 'Rome', value: 'rm' },\n    { label: 'London', value: 'ldn' },\n    { label: 'Istanbul', value: 'ist' },\n    { label: 'Paris', value: 'prs' }\n]);\n<\\/script>"
           }
         },
-        {
-          "id": "fileupload",
-          "label": "File Upload",
-          "description": "FileUpload can be used within an InputGroup.",
-          "examples": {
-            "basic": "<template>\n    <div class=\"flex flex-col items-center justify-center gap-4 max-w-93 mx-auto\">\n        <div class=\"flex flex-wrap items-center justify-center gap-4 w-full\">\n            <InputGroup class=\"w-fit!\">\n                <InputGroupAddon>\n                    <FileUpload mode=\"basic\" auto accept=\"image/*\" :maxFileSize=\"1000000\" :chooseLabel=\"label1\" :chooseButtonProps=\"{ severity: 'secondary', variant: 'text' }\" @select=\"onFileSelect($event, 'label1')\">\n                        <template #chooseicon>\n                            <Upload />\n                        </template>\n                    </FileUpload>\n                </InputGroupAddon>\n                <InputGroupAddon>\n                    <Button severity=\"secondary\" variant=\"text\" iconOnly>\n                        <CloudUpload />\n                    </Button>\n                </InputGroupAddon>\n            </InputGroup>\n            <InputGroup class=\"flex-1! max-w-fit!\">\n                <InputGroupAddon>Upload</InputGroupAddon>\n                <InputGroupAddon>\n                    <FileUpload mode=\"basic\" auto accept=\"image/*\" :maxFileSize=\"1000000\" :chooseLabel=\"label2\" :chooseButtonProps=\"{ severity: 'secondary', variant: 'text' }\" @select=\"onFileSelect($event, 'label2')\">\n                        <template #chooseicon>\n                            <Upload />\n                        </template>\n                    </FileUpload>\n                </InputGroupAddon>\n            </InputGroup>\n        </div>\n\n        <InputGroup>\n            <InputGroupAddon>\n                <TagIcon />\n            </InputGroupAddon>\n            <InputText placeholder=\"Label\" />\n            <InputGroupAddon>\n                <FileUpload mode=\"basic\" auto accept=\"image/*\" :maxFileSize=\"1000000\" :chooseLabel=\"label3\" :chooseButtonProps=\"{ severity: 'secondary', variant: 'text' }\" @select=\"onFileSelect($event, 'label3')\">\n                    <template #chooseicon>\n                        <Upload />\n                    </template>\n                </FileUpload>\n            </InputGroupAddon>\n        </InputGroup>\n    </div>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport CloudUpload from '@primeicons/vue/cloud-upload';\nimport TagIcon from '@primeicons/vue/tag';\nimport Upload from '@primeicons/vue/upload';\n\nconst label1 = ref('Choose file');\nconst label2 = ref('Choose file');\nconst label3 = ref('Browse');\n\nconst onFileSelect = (event, key) => {\n    const files = event.files || [];\n\n    if (files.length) {\n        const name = files.map((f) => f.name).join(', ');\n\n        if (key === 'label1') label1.value = name;\n        else if (key === 'label2') label2.value = name;\n        else if (key === 'label3') label3.value = name;\n    }\n};\n<\\/script>"
-          }
-        },
         {
           "id": "floatlabel",
           "label": "Float Label",
@@ -21803,11 +21790,6 @@
             "token": "inputtags.item.border.radius",
             "variable": "--p-inputtags-item-border-radius",
             "description": "Border radius of item"
-          },
-          {
-            "token": "inputtags.item.focus.background",
-            "variable": "--p-inputtags-item-focus-background",
-            "description": "Focus background of item"
           }
         ]
       }
@@ -32067,7 +32049,7 @@
           "label": "Checkbox",
           "description": "Combine with Checkbox and a select-all header for batch selection alongside drag-and-drop.",
           "examples": {
-            "basic": "<template>\n    <PickList v-model=\"people\" v-model:selection=\"selection\" dataKey=\"name\" breakpoint=\"1400px\">\n        <template #sourceheader>\n            <div class=\"flex flex-col -mx-2 -mb-0.5\">\n                <div class=\"px-2 pb-1.5\">\n                    <Label class=\"ml-1.5\">Available Members</Label>\n                </div>\n                <div class=\"flex items-center gap-2 px-3.5 py-1\" @click.stop>\n                    <Checkbox :modelValue=\"isAllSourceSelected\" binary :indeterminate=\"isSourceIndeterminate\" :tabindex=\"-1\" @update:modelValue=\"toggleAllSource\" />\n                </div>\n            </div>\n        </template>\n        <template #targetheader>\n            <div class=\"flex flex-col -mx-2 -mb-0.5\">\n                <div class=\"px-2 pb-1.5\">\n                    <Label class=\"ml-1.5\">Team Members</Label>\n                </div>\n                <div class=\"flex items-center gap-2 px-3.5 py-1\" @click.stop>\n                    <Checkbox :modelValue=\"isAllTargetSelected\" binary :indeterminate=\"isTargetIndeterminate\" :tabindex=\"-1\" @update:modelValue=\"toggleAllTarget\" />\n                </div>\n            </div>\n        </template>\n        <template #option=\"{ option, selected }\">\n            <div class=\"flex items-center gap-2 w-full min-w-0\">\n                <Checkbox :modelValue=\"selected\" binary readonly :tabindex=\"-1\" />\n                <span class=\"truncate\">{{ option.name }}</span>\n            </div>\n        </template>\n    </PickList>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst people = ref([\n    [\n        { name: 'Amy Elsner' },\n        { name: 'Asiya Javayant' },\n        { name: 'Onyama Limba' },\n        { name: 'Anna Fali' },\n        { name: 'Bernardo Dominic' },\n        { name: 'Elwin Sharvill' },\n        { name: 'Ioni Bowcher' },\n        { name: 'Stephen Shaw' },\n        { name: 'Ivan Magalhaes' },\n        { name: 'Xuxue Feng' }\n    ],\n    []\n]);\nconst selection = ref([[], []]);\n\nconst isAllSourceSelected = computed(() => people.value[0].length > 0 && selection.value[0].length === people.value[0].length);\nconst isSourceIndeterminate = computed(() => selection.value[0].length > 0 && selection.value[0].length < people.value[0].length);\nconst isAllTargetSelected = computed(() => people.value[1].length > 0 && selection.value[1].length === people.value[1].length);\nconst isTargetIndeterminate = computed(() => selection.value[1].length > 0 && selection.value[1].length < people.value[1].length);\n\nconst toggleAllSource = (checked) => {\n    selection.value = [checked ? [...people.value[0]] : [], selection.value[1]];\n};\nconst toggleAllTarget = (checked) => {\n    selection.value = [selection.value[0], checked ? [...people.value[1]] : []];\n};\n<\\/script>"
+            "basic": "<template>\n    <PickList v-model=\"people\" v-model:selection=\"selection\" dataKey=\"name\" breakpoint=\"1400px\">\n        <template #sourceheader>\n            <div class=\"flex flex-col -mx-2 -mb-0.5\">\n                <div class=\"px-2 pb-1.5\">\n                    <Label class=\"ml-1.5\">Available Members</Label>\n                </div>\n                <div class=\"flex items-center gap-2 px-2 py-1\" @click.stop>\n                    <Checkbox :modelValue=\"isAllSourceSelected\" binary :indeterminate=\"isSourceIndeterminate\" :tabindex=\"-1\" @update:modelValue=\"toggleAllSource\" />\n                </div>\n            </div>\n        </template>\n        <template #targetheader>\n            <div class=\"flex flex-col -mx-2 -mb-0.5\">\n                <div class=\"px-2 pb-1.5\">\n                    <Label class=\"ml-1.5\">Team Members</Label>\n                </div>\n                <div class=\"flex items-center gap-2 px-2 py-1\" @click.stop>\n                    <Checkbox :modelValue=\"isAllTargetSelected\" binary :indeterminate=\"isTargetIndeterminate\" :tabindex=\"-1\" @update:modelValue=\"toggleAllTarget\" />\n                </div>\n            </div>\n        </template>\n        <template #option=\"{ option, selected }\">\n            <div class=\"flex items-center gap-2 w-full min-w-0\">\n                <Checkbox :modelValue=\"selected\" binary readonly :tabindex=\"-1\" />\n                <span class=\"truncate\">{{ option.name }}</span>\n            </div>\n        </template>\n    </PickList>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\n\nconst people = ref([\n    [\n        { name: 'Amy Elsner' },\n        { name: 'Asiya Javayant' },\n        { name: 'Onyama Limba' },\n        { name: 'Anna Fali' },\n        { name: 'Bernardo Dominic' },\n        { name: 'Elwin Sharvill' },\n        { name: 'Ioni Bowcher' },\n        { name: 'Stephen Shaw' },\n        { name: 'Ivan Magalhaes' },\n        { name: 'Xuxue Feng' }\n    ],\n    []\n]);\nconst selection = ref([[], []]);\n\nconst isAllSourceSelected = computed(() => people.value[0].length > 0 && selection.value[0].length === people.value[0].length);\nconst isSourceIndeterminate = computed(() => selection.value[0].length > 0 && selection.value[0].length < people.value[0].length);\nconst isAllTargetSelected = computed(() => people.value[1].length > 0 && selection.value[1].length === people.value[1].length);\nconst isTargetIndeterminate = computed(() => selection.value[1].length > 0 && selection.value[1].length < people.value[1].length);\n\nconst toggleAllSource = (checked) => {\n    selection.value = [checked ? [...people.value[0]] : [], selection.value[1]];\n};\nconst toggleAllTarget = (checked) => {\n    selection.value = [selection.value[0], checked ? [...people.value[1]] : []];\n};\n<\\/script>"
           }
         },
         {
@@ -42928,7 +42910,7 @@
           "label": "Custom",
           "description": "A customized toolbar with navigation bar functionality.",
           "examples": {
-            "basic": "<template>\n    <Toolbar class=\"@container\" :style=\"{ 'border-radius': '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }\">\n        <template #start>\n            <div class=\"flex items-center gap-1\">\n                <span class=\"text-xl\" style=\"color: var(--p-primary-400)\">\n                    <Prime />\n                </span>\n                <span class=\"font-bold text-lg ml-2\" style=\"color: var(--p-surface-0)\">Brand</span>\n            </div>\n            <div class=\"ml-6 hidden @min-[620px]:flex gap-1\">\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Products</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Solutions</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Resources</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Pricing</Button>\n            </div>\n        </template>\n\n        <template #end>\n            <div class=\"flex items-center gap-2\">\n                <Button variant=\"text\" size=\"small\" iconOnly aria-label=\"Search\" class=\"text-surface-0! hover:bg-surface-700!\">\n                    <Search />\n                </Button>\n                <Button severity=\"contrast\" size=\"small\">Get Started</Button>\n                <Avatar image=\"https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png\" shape=\"circle\" />\n            </div>\n        </template>\n    </Toolbar>\n</template>\n\n<script setup>\nimport Prime from '@primeicons/vue/prime';\nimport Search from '@primeicons/vue/search';\n<\\/script>"
+            "basic": "<template>\n    <Toolbar class=\"@container\" :style=\"{ 'border-radius': '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }\">\n        <template #start>\n            <div class=\"flex items-center gap-1\">\n                <span class=\"text-xl\" style=\"color: var(--p-primary-400)\">\n                    <Prime />\n                </span>\n                <span class=\"font-bold text-lg ml-2\" style=\"color: var(--p-surface-0)\">Brand</span>\n            </div>\n            <div class=\"ml-6 hidden @min-[620px]:flex gap-1\">\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Products</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Solutions</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Resources</Button>\n                <Button variant=\"text\" size=\"small\" class=\"text-surface-0! hover:bg-surface-700!\">Pricing</Button>\n            </div>\n        </template>\n\n        <template #end>\n            <div class=\"flex items-center gap-2\">\n                <Button variant=\"text\" size=\"small\" iconOnly aria-label=\"Search\" class=\"text-surface-0! hover:bg-surface-700!\">\n                    <Search />\n                </Button>\n                <Button size=\"small\">Get Started</Button>\n                <Avatar image=\"https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png\" shape=\"circle\" />\n            </div>\n        </template>\n    </Toolbar>\n</template>\n\n<script setup>\nimport Prime from '@primeicons/vue/prime';\nimport Search from '@primeicons/vue/search';\n<\\/script>"
           }
         },
         {
@@ -44756,7 +44738,7 @@
           "label": "Headless",
           "description": "Pagination is enabled by adding paginator property and defining rows per page.",
           "examples": {
-            "basic": "<template>\n    <div>\n        <TreeTable :value=\"nodes\" :paginator=\"true\" :rows=\"5\" :rowsPerPageOptions=\"[5, 10, 25]\" tableStyle=\"min-width: 50rem\">\n            <Column field=\"name\" header=\"Name\" expander style=\"width: 34%\"></Column>\n            <Column field=\"size\" header=\"Size\" style=\"width: 33%\"></Column>\n            <Column field=\"type\" header=\"Type\" style=\"width: 33%\">\n                <template #body=\"{ node }\">\n                    <Tag :value=\"node.data.type\" :severity=\"getSeverity(node.data.type)\" />\n                </template>\n            </Column>\n            <template #paginatorcontainer=\"{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }\">\n                <div class=\"flex items-center gap-4 border border-primary bg-transparent rounded-full w-full py-1 px-2 justify-between\">\n                    <Button iconOnly rounded text @click=\"prevPageCallback\" :disabled=\"page === 0\">\n                        <ChevronLeft />\n                    </Button>\n                    <div class=\"text-color font-medium\">\n                        <span class=\"hidden sm:block\">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>\n                        <span class=\"block sm:hidden\">Page {{ page + 1 }} of {{ pageCount }}</span>\n                    </div>\n                    <Button iconOnly rounded text @click=\"nextPageCallback\" :disabled=\"page === pageCount - 1\">\n                        <ChevronRight />\n                    </Button>\n                </div>\n            </template>\n        </TreeTable>\n    </div>\n</template>\n\n<script setup>\nimport ChevronLeft from '@primeicons/vue/chevron-left';\nimport ChevronRight from '@primeicons/vue/chevron-right';\nimport { ref } from 'vue';\n\nconst nodes = ref();\n\nlet files = [];\nfor (let i = 0; i < 50; i++) {\n    let node = {\n        key: i,\n        data: {\n            name: 'Item ' + i,\n            size: Math.floor(Math.random() * 1000) + 1 + 'kb',\n            type: 'Type ' + i\n        },\n        children: [\n            {\n                key: i + ' - 0',\n                data: {\n                    name: 'Item ' + i + ' - 0',\n                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',\n                    type: 'Type ' + i\n                }\n            }\n        ]\n    };\n\n    files.push(node);\n}\n\nnodes.value = files;\n\nconst getSeverity = (type) => {\n    switch (type) {\n        case 'Folder':\n            return 'warn';\n        case 'Document':\n            return 'info';\n        case 'Picture':\n            return 'success';\n        case 'Video':\n            return 'success';\n        case 'Text':\n            return 'secondary';\n        default:\n            return 'secondary';\n    }\n};\n<\\/script>"
+            "basic": "<template>\n    <div>\n        <TreeTable :value=\"nodes\" :paginator=\"true\" :rows=\"5\" :rowsPerPageOptions=\"[5, 10, 25]\" tableStyle=\"min-width: 50rem\">\n            <Column field=\"name\" header=\"Name\" expander style=\"width: 34%\"></Column>\n            <Column field=\"size\" header=\"Size\" style=\"width: 33%\"></Column>\n            <Column field=\"type\" header=\"Type\" style=\"width: 33%\">\n                <template #body=\"{ node }\">\n                    <Tag :value=\"node.data.type\" :severity=\"getSeverity(node.data.type)\" />\n                </template>\n            </Column>\n            <template #paginatorcontainer=\"{ first, last, page, pageCount, prevPageCallback, nextPageCallback, totalRecords }\">\n                <div class=\"flex items-center gap-4 border border-surface bg-transparent rounded-full w-full py-1 px-2 justify-between\">\n                    <Button iconOnly rounded text @click=\"prevPageCallback\" :disabled=\"page === 0\">\n                        <ChevronLeft />\n                    </Button>\n                    <div class=\"text-color font-medium\">\n                        <span class=\"hidden sm:block\">Showing {{ first }} to {{ last }} of {{ totalRecords }}</span>\n                        <span class=\"block sm:hidden\">Page {{ page + 1 }} of {{ pageCount }}</span>\n                    </div>\n                    <Button iconOnly rounded text @click=\"nextPageCallback\" :disabled=\"page === pageCount - 1\">\n                        <ChevronRight />\n                    </Button>\n                </div>\n            </template>\n        </TreeTable>\n    </div>\n</template>\n\n<script setup>\nimport ChevronLeft from '@primeicons/vue/chevron-left';\nimport ChevronRight from '@primeicons/vue/chevron-right';\nimport { ref } from 'vue';\n\nconst nodes = ref();\n\nlet files = [];\nfor (let i = 0; i < 50; i++) {\n    let node = {\n        key: i,\n        data: {\n            name: 'Item ' + i,\n            size: Math.floor(Math.random() * 1000) + 1 + 'kb',\n            type: 'Type ' + i\n        },\n        children: [\n            {\n                key: i + ' - 0',\n                data: {\n                    name: 'Item ' + i + ' - 0',\n                    size: Math.floor(Math.random() * 1000) + 1 + 'kb',\n                    type: 'Type ' + i\n                }\n            }\n        ]\n    };\n\n    files.push(node);\n}\n\nnodes.value = files;\n\nconst getSeverity = (type) => {\n    switch (type) {\n        case 'Folder':\n            return 'warn';\n        case 'Document':\n            return 'info';\n        case 'Picture':\n            return 'success';\n        case 'Video':\n            return 'success';\n        case 'Text':\n            return 'secondary';\n        default:\n            return 'secondary';\n    }\n};\n<\\/script>"
           }
         },
         {
@@ -46078,7 +46060,7 @@
           "label": "Script",
           "description": "You can use PrimeVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses unpkg however other providers such as jsdeliver and cdnjs can also be used.",
           "examples": {
-            "basic": "https://unpkg.com/vue@3/dist/vue.global.js\nhttps://unpkg.com/primevue@5.0.0-rc.2/umd/primevue.min.js\nhttps://unpkg.com/@primeuix/themes@3.0.0-rc.1/umd/aura.js  // see theming for alternatives"
+            "basic": "https://unpkg.com/vue@3/dist/vue.global.js\nhttps://unpkg.com/primevue/umd/primevue.min.js\nhttps://unpkg.com/@primeuix/themes/umd/aura.js  // see theming for alternatives"
           }
         },
         {
@@ -46418,9 +46400,9 @@
         {
           "id": "spin",
           "label": "Spin",
-          "description": "Use a spin animation utility like animate-spin from Tailwind apply rotation.",
+          "description": "Use the spin property to apply a rotation animation to an icon. Alternatively, a spin animation utility such as animate-spin from Tailwind can also be used.",
           "examples": {
-            "basic": "<template>\n    <Spinner class=\"animate-spin\" :size=\"32\" />\n    <Cog class=\"animate-spin\" :size=\"32\" />\n</template>\n\n<script setup>\nimport Spinner from '@primeicons/vue/spinner';\nimport Cog from '@primeicons/vue/cog';\n<\\/script>"
+            "basic": "<template>\n    <Spinner spin :size=\"32\" />\n    <Cog spin :size=\"32\" />\n</template>\n\n<script setup>\nimport Spinner from '@primeicons/vue/spinner';\nimport Cog from '@primeicons/vue/cog';\n<\\/script>"
           }
         },
         {
@@ -46528,73 +46510,65 @@
       "name": "mcp",
       "path": "mcp",
       "title": "MCP Server",
-      "description": "Model Context Protocol (MCP) server for PrimeVue component library. Provides AI assistants with comprehensive access to PrimeVue component documentation.",
+      "description": "Give compatible AI assistants access to PrimeVue component documentation, guides, examples, and API metadata.",
       "sections": [
         {
           "id": "introduction",
           "label": "Introduction",
-          "description": "Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeVue MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , slots , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Accessibility information Installation and configuration guides",
-          "examples": null
-        },
-        {
-          "id": "installation/claudecode",
-          "label": "Claude Code",
-          "description": "Add the PrimeVue MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection.",
+          "description": "Model Context Protocol (MCP) lets AI assistants call external tools. The @primevue/mcp@5.0.0 package uses those tools to search and read the PrimeVue documentation included with the package. Find components, guides, examples, and setup instructions. Read component APIs and documentation sections. Check component usage against documented properties and events. Return links to the related PrimeVue documentation when available. The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeVue configuration.",
           "examples": null
         },
         {
-          "id": "installation/vscode",
-          "label": "VS Code",
-          "description": "Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration.",
+          "id": "cli",
+          "label": "CLI Setup",
+          "description": "The recommended setup is the PrimeVue Plugin . It installs this MCP server together with the PrimeVue skills that guide common implementation, setup, theming, migration, and troubleshooting tasks.",
           "examples": {
-            "basic": "{\n    \"servers\": {\n        \"primevue\": {\n            \"command\": \"npx\",\n            \"args\": [\"-y\", \"@primevue/mcp\"]\n        }\n    }\n}"
+            "basic": "pnpm dlx @primeui/cli@1.0.0 plugin install --tool copilot --library primevue\npnpm dlx @primeui/cli@1.0.0 doctor --tool copilot --library primevue"
           }
         },
         {
-          "id": "installation/openaicodex",
-          "label": "OpenAI Codex",
-          "description": "Add the PrimeVue MCP server using the CLI or edit ~/.codex/config.toml directly.",
+          "id": "manual/claudecode",
+          "label": "Claude Code",
+          "description": "Add the MCP server to your user configuration to use it in every project, or omit -s user to add it only to the current project. Start a new Claude Code session after registration.",
           "examples": {
-            "basic": "# Using the CLI\ncodex mcp add primevue -- npx -y @primevue/mcp\n\n# Or edit ~/.codex/config.toml\n[mcp_servers.primevue]\ncommand = \"npx\"\nargs = [\"-y\", \"@primevue/mcp\"]"
+            "basic": "# Add to user config (available in all projects)\nclaude mcp add primevue -s user -- npx -y @primevue/mcp@5.0.0\n\n# Or add to current project only\nclaude mcp add primevue -- npx -y @primevue/mcp@5.0.0"
           }
         },
         {
-          "id": "installation/cursor",
-          "label": "Cursor",
-          "description": "Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration.",
+          "id": "manual/vscode",
+          "label": "VS Code",
+          "description": "Create .vscode/mcp.json for project-level setup. To use the server across projects, add the same servers entry to your VS Code user MCP configuration.",
           "examples": {
-            "basic": "{\n    \"mcpServers\": {\n        \"primevue\": {\n            \"command\": \"npx\",\n            \"args\": [\"-y\", \"@primevue/mcp\"]\n        }\n    }\n}"
+            "basic": "{\n    \"servers\": {\n        \"primevue\": {\n            \"command\": \"npx\",\n            \"args\": [\"-y\", \"@primevue/mcp@5.0.0\"]\n        }\n    }\n}"
           }
         },
         {
-          "id": "installation/windsurf",
-          "label": "Windsurf",
-          "description": "Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeVue MCP server.",
+          "id": "manual/openaicodex",
+          "label": "OpenAI Codex",
+          "description": "Add the MCP server with the Codex CLI, or add the same configuration to ~/.codex/config.toml .",
           "examples": {
-            "basic": "{\n    \"mcpServers\": {\n        \"primevue\": {\n            \"command\": \"npx\",\n            \"args\": [\"-y\", \"@primevue/mcp\"]\n        }\n    }\n}"
+            "basic": "# Using the CLI\ncodex mcp add primevue -- npx -y @primevue/mcp@5.0.0\n\n# Or edit ~/.codex/config.toml\n[mcp_servers.primevue]\ncommand = \"npx\"\nargs = [\"-y\", \"@primevue/mcp@5.0.0\"]"
           }
         },
         {
-          "id": "installation/zed",
-          "label": "Zed",
-          "description": "Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS).",
+          "id": "manual/cursor",
+          "label": "Cursor",
+          "description": "Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration.",
           "examples": {
-            "basic": "{\n    \"context_servers\": {\n        \"primevue\": {\n            \"command\": {\n                \"path\": \"npx\",\n                \"args\": [\"-y\", \"@primevue/mcp\"]\n            }\n        }\n    }\n}"
+            "basic": "{\n    \"mcpServers\": {\n        \"primevue\": {\n            \"command\": \"npx\",\n            \"args\": [\"-y\", \"@primevue/mcp@5.0.0\"]\n        }\n    }\n}"
           }
         },
         {
           "id": "tools",
-          "label": "Available Tools",
-          "description": "Component Information Tools for exploring and understanding PrimeVue components. list_components : List all PrimeVue components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all slots for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeVue documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeVue configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components",
+          "label": "Tools",
+          "description": "The PrimeVue MCP server provides eight tools. Tool Purpose list List available components, guides, examples, resources, or modes. search Search generated component, guide, section, API, and example text. get_component Read component documentation, API metadata, and available sections. get_guide Read a generated PrimeVue guide and its source metadata. get_example Return an example from a documented component section. get_setup Return setup guidance for a supported PrimeVue environment. validate_usage Validate component usage against generated PrimeVue API metadata. version Report the server version and the status of its documentation data, tools, and resources.",
           "examples": null
         },
         {
-          "id": "examples",
-          "label": "Example Prompts",
-          "description": "Once installed, try asking your AI assistant:",
-          "examples": {
-            "basic": "\"What are all the props available for the DataTable component?\"\n\"Show me how to implement row selection in DataTable\"\n\"How do I customize Button styles using Pass Through?\"\n\"What design tokens are available for the Card component?\"\n\"Find me a component for selecting multiple items from a list\"\n\"Compare AutoComplete and Select components\""
-          }
+          "id": "data",
+          "label": "Data and Validation",
+          "description": "The MCP package includes a generated copy of the PrimeVue documentation. This keeps the server usable without a PrimeVue source checkout and makes its answers match the installed package version. Results include a primeui://primevue resource URI and, when available, a link to the public documentation. The tools do not edit files, install dependencies, or update configuration. validate_usage checks documented component metadata. If the required metadata is unavailable, it reports that limitation instead of guessing. Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them. If you installed the PrimeVue Plugin, do not register the MCP server again with a manual configuration. Run the CLI doctor command if the server is missing or appears more than once.",
+          "examples": null
         }
       ]
     },
@@ -46661,7 +46635,7 @@
           "label": "Download",
           "description": "PrimeVue is available for download on npm registry along with the official @primevue/nuxt-module .",
           "examples": {
-            "basic": "# Using npm\nnpm install primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1\nnpm install --save-dev @primevue/nuxt-module@5.0.0-rc.2\n\n# Using yarn\nyarn add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1\nyarn add --dev @primevue/nuxt-module@5.0.0-rc.2\n\n# Using pnpm\npnpm add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1\npnpm add -D @primevue/nuxt-module@5.0.0-rc.2"
+            "basic": "# Using npm\nnpm install primevue @primeuix/themes\nnpm install --save-dev @primevue/nuxt-module\n\n# Using yarn\nyarn add primevue @primeuix/themes\nyarn add --dev @primevue/nuxt-module\n\n# Using pnpm\npnpm add primevue@5.0.0 @primeuix/themes@3.0.0\npnpm add -D @primevue/nuxt-module@5.0.0"
           }
         },
         {
@@ -46826,6 +46800,102 @@
         }
       ]
     },
+    {
+      "name": "plugin",
+      "path": "plugin",
+      "title": "PrimeVue Plugin",
+      "description": "Add PrimeVue workflow skills and the PrimeVue MCP server to your AI assistant with one installation.",
+      "sections": [
+        {
+          "id": "introduction",
+          "label": "Introduction",
+          "description": "The PrimeVue Plugin adds PrimeVue skills and the PrimeVue MCP server to Claude Code, Codex, GitHub Copilot, Cursor, or Gemini CLI. Plugins installed through GitHub Copilot CLI are also available in VS Code. Install the plugin when you want the assistant to follow PrimeVue-specific workflows as well as read the current component documentation. The plugin is published from the primefaces/primeui-plugins repository. Use @primeui/cli@1.0.0 for the same installation flow across supported assistants, or follow the manual setup for your client.",
+          "examples": null
+        },
+        {
+          "id": "contents",
+          "label": "What It Installs",
+          "description": "Installing the PrimeVue Plugin adds: Seven skills for PrimeVue implementation, setup, theming, accessibility, migration, and troubleshooting. The PrimeVue MCP server, configured with @primevue/mcp@5.0.0 . The manifest required by the selected assistant. PrimeNG and PrimeReact are separate plugins. Installing this plugin does not change your application or install PrimeVue dependencies in the project.",
+          "examples": null
+        },
+        {
+          "id": "skills",
+          "label": "Skills",
+          "description": "Each skill covers one type of PrimeVue work. The skills use @primevue/mcp@5.0.0 when they need component APIs, examples, setup guides, or usage validation. Skill Use it for primevue-router Choose the PrimeVue skill that matches the task. primevue-component-implementation Choose and implement components, forms, directives, and documented examples. primevue-setup-installation Install and configure PrimeVue in Vue, Vite, or Nuxt applications. primevue-theming-customization Configure presets, tokens, styled or unstyled mode, Tailwind, pass-through, slots, and events. primevue-accessibility-icons Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons. primevue-migration Plan and apply changes using the current PrimeVue migration guides. primevue-audit-troubleshooting Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations. Skill names use the primevue- prefix because assistants may keep skills from several plugins in one shared namespace.",
+          "examples": null
+        },
+        {
+          "id": "skillworkflow",
+          "label": "How Skills Work",
+          "description": "You do not need to select a skill manually. Describe the PrimeVue task and the router chooses the relevant workflow. The router checks that the project uses Vue and PrimeVue. The selected skill reads only the component or guide information needed for the task. When component metadata is available, the skill validates the final PrimeVue usage. If the documentation does not confirm a setup or API, the skill reports the limitation instead of guessing. After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.",
+          "examples": null
+        },
+        {
+          "id": "cli",
+          "label": "CLI Setup",
+          "description": "Set --tool to the assistant you use. Keep --library primevue when you run the command outside a project or from a project that uses more than one PrimeUI library.",
+          "examples": {
+            "basic": "pnpm dlx @primeui/cli@1.0.0 plugin install --tool copilot --library primevue"
+          }
+        },
+        {
+          "id": "lifecycle",
+          "label": "Lifecycle and Doctor",
+          "description": "Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeVue in the selected assistant. Run doctor when the plugin or MCP server is not working as expected. It checks the installation, starts the MCP server, confirms the available tools, and tests documentation retrieval and component validation. Checks that an assistant does not expose are reported as unsupported.",
+          "examples": {
+            "basic": "pnpm dlx @primeui/cli@1.0.0 plugin status --tool copilot --library primevue\npnpm dlx @primeui/cli@1.0.0 plugin update --tool copilot --library primevue\npnpm dlx @primeui/cli@1.0.0 plugin remove --tool copilot --library primevue\npnpm dlx @primeui/cli@1.0.0 doctor --tool copilot --library primevue\n\n# Machine-readable diagnostics\npnpm dlx @primeui/cli@1.0.0 doctor --tool copilot --library primevue --json"
+          }
+        },
+        {
+          "id": "manual/source",
+          "label": "Source",
+          "description": "Claude Code, Codex, and GitHub Copilot can install the plugin directly from the public marketplace. For manual Cursor or Gemini CLI setup, clone the repository to a location you intend to keep because those clients use the selected plugins/primevue directory after installation.",
+          "examples": {
+            "basic": "git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins\nls ~/primeui-plugins/plugins/primevue"
+          }
+        },
+        {
+          "id": "manual/claudecode",
+          "label": "Claude Code",
+          "description": "Add the PrimeUI marketplace, then install only the PrimeVue plugin.",
+          "examples": {
+            "basic": "claude plugin marketplace add primefaces/primeui-plugins\nclaude plugin install primevue@primeui\nclaude plugin list --json"
+          }
+        },
+        {
+          "id": "manual/codex",
+          "label": "Codex",
+          "description": "Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeVue plugin. Use the interactive plugin browser to manage enablement.",
+          "examples": {
+            "basic": "codex plugin marketplace add primefaces/primeui-plugins\ncodex plugin list --available\ncodex plugin add primevue@primeui\ncodex plugin list"
+          }
+        },
+        {
+          "id": "manual/vscodecopilot",
+          "label": "VS Code Copilot",
+          "description": "Install the PrimeVue Plugin through GitHub Copilot CLI. VS Code automatically discovers plugins installed by Copilot CLI, so it does not need a separate plugin configuration.",
+          "examples": {
+            "basic": "copilot plugin marketplace add primefaces/primeui-plugins\ncopilot plugin install primevue@primeui"
+          }
+        },
+        {
+          "id": "manual/cursor",
+          "label": "Cursor",
+          "description": "For local setup, link the PrimeVue plugin directory into Cursor's local-plugin directory. Restart Cursor or run Developer: Reload Window after creating the link.",
+          "examples": {
+            "basic": "mkdir -p ~/.cursor/plugins/local\nln -s ~/primeui-plugins/plugins/primevue ~/.cursor/plugins/local/primevue"
+          }
+        },
+        {
+          "id": "manual/gemini",
+          "label": "Gemini CLI",
+          "description": "Validate the PrimeVue extension directory, then install it from the persistent checkout. Do not install from the repository root because it contains plugins for all three PrimeUI libraries.",
+          "examples": {
+            "basic": "gemini extensions validate ~/primeui-plugins/plugins/primevue\ngemini extensions install ~/primeui-plugins/plugins/primevue --consent\ngemini extensions list --output-format json"
+          }
+        }
+      ]
+    },
     {
       "name": "primeclt",
       "path": "primeclt",
@@ -47183,7 +47253,7 @@
         {
           "id": "example",
           "label": "Example",
-          "description": "Here is a sample that styles a button component with Tailwind CSS using pass through attributes. Before beginning, head over to the the pass through section at button documentation to learn more about the components internals section. We'll style the root element with pass through attributes, and apply utility classes directly to the icon and label placed in the default slot. Search",
+          "description": "Here is a sample that styles a button component with Tailwind CSS using pass through attributes. Before beginning, head over to the pass through section at button documentation to learn more about the components internals section. We'll style the root element with pass through attributes, and apply utility classes directly to the icon and label placed in the default slot. Search",
           "examples": {
             "basic": "<template>\n    <Button unstyled pt:root=\"bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex items-center gap-2\">\n        <Search class=\"text-white\" :size=\"20\" />\n        <span class=\"text-white font-bold text-lg\">Search</span>\n    </Button>\n</template>\n\n<script setup>\nimport Search from '@primeicons/vue/search';\n<\\/script>"
           }
@@ -47216,7 +47286,7 @@
           "label": "Download",
           "description": "PrimeVue is available for download on npm registry .",
           "examples": {
-            "basic": "# Using npm\nnpm install primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1\n\n# Using yarn\nyarn add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1\n\n# Using pnpm\npnpm add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1"
+            "basic": "# Using npm\nnpm install primevue @primeuix/themes\n\n# Using yarn\nyarn add primevue @primeuix/themes\n\n# Using pnpm\npnpm add primevue @primeuix/themes"
           }
         },
         {