@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/pages/theming/styled.md

@@ -0,0 +1,497 @@
+# Styled Mode
+
+Choose from a variety of pre-styled themes or develop your own.
+
+## Architecture
+
+PrimeVue is a design agnostic library so unlike some other UI libraries it does not enforce a certain styling such as material design. Styling is decoupled from the components using the themes instead. A theme consists of two parts; base and preset . The base is the style rules with CSS variables as placeholders whereas the preset is a set of design tokens to feed a base by mapping the tokens to CSS variables. A base may be configured with different presets, currently Aura, Material, Lara and Nora are the available built-in options. The core of the styled mode architecture is based on a concept named design token , a preset defines the token configuration in 3 tiers; primitive , semantic and component . Learn more about design tokens at the Design Tokens Format Module specification. Primitive Tokens Primitive tokens have no context, a color palette is a good example for a primitive token such as blue-50 to blue-900 . A token named blue-500 may be used as the primary color, the background of a message however on its own, the name of the token does not indicate context. Usually they are utilized by the semantic tokens. Semantic Tokens Semantic tokens define content and their names indicate where they are utilized, a well known example of a semantic token is the primary.color . Semantic tokens map to primitive tokens or other semantic tokens. The colorScheme token group is a special variable to define tokens based on the color scheme active in the application, this allows defining different tokens based on the color scheme like dark mode. Component Tokens Component tokens are isolated tokens per component such as inputtext.background or button.color that map to the semantic tokens. As an example, button.background component token maps to the primary.color semantic token which maps to the green.500 primitive token. Best Practices Use primitive tokens when defining the core color palette and semantic tokens to specify the common design elements such as focus ring, primary colors and surfaces. Components tokens should only be used when customizing a specific component. By defining your own design tokens as a custom preset, you'll be able to define your own style without touching CSS. Overriding the PrimeVue components using style classes is not a best practice and should be the last resort, design tokens are the suggested approach.
+
+## Theme
+
+The theme property is used to customize the initial theme.
+
+```vue
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+
+    theme: {
+        preset: Aura,
+        // Default options
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false,
+            cssVariables: true
+        }
+    }
+ });
+```
+
+## Options
+
+The options property defines the how the CSS would be generated from the design tokens of the preset. prefix The prefix of the CSS variables, defaults to p . For instance, the primary.color design token would be var(--p-primary-color) . darkModeSelector The CSS rule to encapsulate the CSS variables of the dark mode, the default is the system to generate @media (prefers-color-scheme: dark) . If you need to make the dark mode toggleable based on the user selection define a class selector such as .app-dark and toggle this class at the document root. See the dark mode toggle section for an example. cssLayer Defines whether the styles should be defined inside a CSS layer by default or not. A CSS layer would be handy to declare a custom cascade layer for easier customization if necessary. The default is false . cssVariables Controls whether component design tokens are generated as CSS variables or inlined as static values. Primitive and semantic tokens are always generated as CSS variables.
+
+## Presets
+
+Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and Nora is inspired by enterprise applications. Visit the source code to learn more about the structure of presets. You may use them out of the box with modifications or utilize them as reference in case you need to build your own presets from scratch.
+
+## Base Font Size
+
+PrimeVue sizes its components in rem units relative to the document root font size, which it assumes to be 16px , the browser default. Earlier versions assumed 14px for historical reasons, so to avoid disrupting existing layouts every preset also ships a compat variant calibrated for a 14px root. The compat variants are maintained until June 2027 . When migrating an existing application that uses 14px base font to PrimeVue v5 or newer, the recommended path is to switch to the compat preset first to preserve the current appearance, then set the document root size to 16px and move to the standard (non-compat) preset once the rest of the application has been migrated to the 16px baseline. If your application already uses a 16px document root, no change is required and you can use the standard presets directly. Preset 16px 14px (Legacy) Aura @primeuix/themes/aura @primeuix/themes/aura-compat Lara @primeuix/themes/lara @primeuix/themes/lara-compat Material @primeuix/themes/material @primeuix/themes/material-compat Nora @primeuix/themes/nora @primeuix/themes/nora-compat
+
+## Reserved Keys
+
+Following keys are reserved in the preset scheme and cannot be used as a token name; primitive , semantic , components , directives , colorscheme , light , dark , common , root , states , and extend .
+
+## Colors
+
+Color palette of a preset is defined by the primitive design token group. You can access colors using CSS variables or the $dt utility.
+
+## Dark Mode
+
+PrimeVue uses the system as the default darkModeSelector in theme configuration. If you have a dark mode switch in your application, set the darkModeSelector to the selector you utilize such as .my-app-dark so that PrimeVue can fit in seamlessly with your color scheme. Following is a very basic example implementation of a dark mode switch, you may extend it further by involving prefers-color-scheme to retrieve it from the system initially and use localStorage to make it stateful. See this article for more information. In case you prefer to use dark mode all the time, apply the darkModeSelector initially and never change it. It is also possible to disable dark mode completely using false or none as the value of the selector.
+
+## definePreset
+
+The definePreset utility is used to customize an existing preset during the PrimeVue setup. The first parameter is the preset to customize and the second is the design tokens to override.
+
+```vue
+import PrimeVue from 'primevue/config';
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+
+const MyPreset = definePreset(Aura, {
+    //Your customizations, see the following sections for examples
+});
+
+app.use(PrimeVue, {
+    theme: {
+        preset: MyPreset
+    }
+});
+```
+
+## Color Scheme
+
+Tokens can be defined per color scheme using the ⁠ light-dark keyword, allowing each token to hold scheme-specific values.
+
+```vue
+import PrimeVue from 'primevue/config';
+import { definePreset } from '@primeuix/themes';
+import Aura from '@primeuix/themes/aura';
+
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            color: 'light-dark({primary.500}, {primary.400})',
+            contrastColor: 'light-dark(#ffffff, {surface.900})'
+        }
+    }
+});
+
+app.use(PrimeVue, {
+    theme: {
+        preset: MyPreset
+    }
+ });
+```
+
+## Primary
+
+The primary defines the main color palette, default value maps to the emerald primitive token. Let's setup to use indigo instead.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{indigo.50}',
+            100: '{indigo.100}',
+            200: '{indigo.200}',
+            300: '{indigo.300}',
+            400: '{indigo.400}',
+            500: '{indigo.500}',
+            600: '{indigo.600}',
+            700: '{indigo.700}',
+            800: '{indigo.800}',
+            900: '{indigo.900}',
+            950: '{indigo.950}'
+        }
+    }
+});
+```
+
+## Surface
+
+The color scheme palette that varies between light and dark modes is specified with the surface tokens. Example below uses stone for light mode and zinc for dark mode. With this setting, light mode, would have a grayscale tone and dark mode would include bluish tone.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        surface: {
+            0: '#ffffff',
+            50: 'light-dark({stone.50}, {zinc.50})',
+            100: 'light-dark({stone.100}, {zinc.100})',
+            200: 'light-dark({stone.200}, {zinc.200})',
+            300: 'light-dark({stone.300}, {zinc.300})',
+            400: 'light-dark({stone.400}, {zinc.400})',
+            500: 'light-dark({stone.500}, {zinc.500})',
+            600: 'light-dark({stone.600}, {zinc.600})',
+            700: 'light-dark({stone.700}, {zinc.700})',
+            800: 'light-dark({stone.800}, {zinc.800})',
+            900: 'light-dark({stone.900}, {zinc.900})',
+            950: 'light-dark({stone.950}, {zinc.950})'
+        }
+    }
+});
+```
+
+## Noir
+
+The noir mode is a sleek, monochrome variant where the primary color is derived from the neutral surface palette instead of a distinct accent color. The example below maps the primary palette to surface tones and uses the light-dark function to define the light and dark values of the primary and highlight tokens in a single place;
+
+```vue
+const Noir = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: '{surface.50}',
+            100: '{surface.100}',
+            200: '{surface.200}',
+            300: '{surface.300}',
+            400: '{surface.400}',
+            500: '{surface.500}',
+            600: '{surface.600}',
+            700: '{surface.700}',
+            800: '{surface.800}',
+            900: '{surface.900}',
+            950: '{surface.950}',
+            color: 'light-dark({primary.950}, {primary.50})',
+            contrastColor: 'light-dark(#ffffff, {primary.950})',
+            hoverColor: 'light-dark({primary.800}, {primary.200})',
+            activeColor: 'light-dark({primary.700}, {primary.300})'
+        },
+        highlight: {
+            background: 'light-dark({primary.950}, {primary.50})',
+            focusBackground: 'light-dark({primary.700}, {primary.300})',
+            color: 'light-dark(#ffffff, {primary.950})',
+            focusColor: 'light-dark(#ffffff, {primary.950})'
+        }
+    }
+});
+```
+
+## Forms
+
+The design tokens of the form input components are derived from the form.field token group. This customization example changes border color to primary on hover. Any component that depends on this semantic token such as dropdown.hover.border.color and textarea.hover.border.color would receive the change.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        formField: {
+            hoverBorderColor: '{primary.color}'
+        }
+    }
+});
+```
+
+## Focus Ring
+
+Focus ring defines the outline width, style, color and offset. Let's use a thicker ring with the primary color for the outline.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        focusRing: {
+            width: '2px',
+            style: 'dashed',
+            color: '{primary.color}',
+            offset: '1px'
+        }
+    }
+});
+```
+
+## Component
+
+The design tokens of a specific component is defined at components layer. This configuration is global and applies to all card components, in case you need to customize a particular component on a page locally, view the Scoped CSS section for an example. Tip : Overriding component tokens is best suited for small adjustments. For heavy customization, building your own preset is the recommended approach.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    components: {
+        card: {
+            root: {
+                background: 'light-dark({surface.0}, {surface.900})',
+                color: 'light-dark({surface.700}, {surface.0})'
+            },
+            subtitle: {
+                color: 'light-dark({surface.500}, {surface.400})'
+            }
+        }
+    }
+});
+```
+
+## Typography
+
+Typography tokens are defined at the semantic level for consistency and at the component level for specialization.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        typography: {
+            lineHeight: '1.5',
+            fontFamily: 'inherit',
+            fontWeight: 'normal',
+            fontSize: '0.875rem'
+        },
+        formField: {
+            fontWeight: '{typography.font.weight}',
+            fontSize: '{typography.font.size}'
+        }
+    },
+    components: {
+        select: {
+            fontSize: '{form.field.font.size}',
+            fontWeight: '{form.field.font.weight}'
+        }
+    }
+});
+```
+
+## Extend
+
+The theming system can be extended by adding custom design tokens and additional styles. This feature provides a high degree of customization, allowing you to adjust styles according to your needs, as you are not limited to the default tokens. The example preset configuration adds a new accent button with custom button.accent.color and button.accent.inverse.color tokens. It is also possible to add tokens globally to share them within the components.
+
+```vue
+const MyPreset = definePreset(Aura, {
+    components: {
+        // custom button tokens and additional style
+        button: {
+            extend: {
+                accent: {
+                    color: '#f59e0b',
+                    inverseColor: '#ffffff'
+                }
+            }
+        css: ({ dt }) => \`
+.p-button-accent {
+    background: \${dt('button.accent.color')};
+    color: \${dt('button.accent.inverse.color')};
+    transition-duration: \${dt('my.transition.fast')};
+}
+\`
+        }
+    },
+    // common tokens and styles
+    extend: {
+        my: {
+            transition: {
+                slow: '0.75s'
+                normal: '0.5s'
+                fast: '0.25s'
+            },
+            imageDisplay: 'block'
+        }
+    },
+    css: ({ dt }) => \`
+        /* Global CSS */
+        img {
+            display: \${dt('my.image.display')};
+        }
+    \`
+});
+```
+
+## Scoped Tokens
+
+Design tokens can be scoped to a certain component using the dt property. In this example, first switch uses the global tokens whereas second one overrides the global with its own tokens. This approach is recommended over the :deep() as it offers a cleaner API while avoiding the hassle of CSS rule overrides.
+
+## usePreset
+
+Replaces the current presets entirely, common use case is changing the preset dynamically at runtime.
+
+```vue
+import { usePreset } from '@primeuix/themes';
+
+const onButtonClick() {
+    usePreset(MyPreset);
+}
+```
+
+## updatePreset
+
+Merges the provided tokens to the current preset, an example would be changing the primary color palette dynamically.
+
+```vue
+import { updatePreset } from '@primeuix/themes';
+
+const changePrimaryColor() {
+    updatePreset({
+        semantic: {
+            primary: {
+                50: '{indigo.50}',
+                100: '{indigo.100}',
+                200: '{indigo.200}',
+                300: '{indigo.300}',
+                400: '{indigo.400}',
+                500: '{indigo.500}',
+                600: '{indigo.600}',
+                700: '{indigo.700}',
+                800: '{indigo.800}',
+                900: '{indigo.900}',
+                950: '{indigo.950}'
+            }
+        }
+    })
+}
+```
+
+## updatePrimaryPalette
+
+Updates the primary colors, this is a shorthand to do the same update using updatePreset .
+
+```vue
+import { updatePrimaryPalette } from '@primeuix/themes';
+
+const changePrimaryColor() {
+    updatePrimaryPalette({
+        50: '{indigo.50}',
+        100: '{indigo.100}',
+        200: '{indigo.200}',
+        300: '{indigo.300}',
+        400: '{indigo.400}',
+        500: '{indigo.500}',
+        600: '{indigo.600}',
+        700: '{indigo.700}',
+        800: '{indigo.800}',
+        900: '{indigo.900}',
+        950: '{indigo.950}'
+    });
+}
+```
+
+## updateSurfacePalette
+
+Updates the surface colors, this is a shorthand to do the same update using updatePreset .
+
+```vue
+import { updateSurfacePalette } from '@primeuix/themes';
+
+const changeSurfaces() {
+    //changes surfaces both in light and dark mode
+    updateSurfacePalette({
+        50: '{zinc.50}',
+        // ...
+        950: '{zinc.950}'
+    });
+}
+
+const changeLightSurfaces() {
+    //changes surfaces only in light
+    updateSurfacePalette({
+        light: {
+            50: '{zinc.50}',
+            // ...
+            950: '{zinc.950}'
+        }
+    });
+}
+
+const changeDarkSurfaces() {
+    //changes surfaces only in dark mode
+    updateSurfacePalette({
+        dark: {
+            50: '{zinc.50}',
+            // ...
+            950: '{zinc.950}'
+        }
+    });
+}
+```
+
+## $dt
+
+The $dt function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.
+
+```vue
+import { $dt } from '@primeuix/themes';
+
+const duration = $dt('transition.duration');
+/*
+    duration: {
+        name: '--transition-duration',
+        variable: 'var(--p-transition-duration)',
+        value: '0.2s'
+    }
+*/
+
+const primaryColor = $dt('primary.color');
+/*
+    primaryColor: {
+        name: '--primary-color',
+        variable: 'var(--p-primary-color)',
+        value: {
+        light: {
+            value: '#10b981',
+            paths: {
+                name: 'semantic.primary.color',
+                binding: {
+                    name: 'primitive.emerald.500'
+                }
+            }
+        },
+        dark: {
+            value: '#34d399',
+            paths: {
+                name: 'semantic.primary.color',
+                binding: {
+                    name: 'primitive.emerald.400'
+                }
+            }
+        }
+    }
+}
+*/
+```
+
+## palette
+
+Returns shades and tints of a given color from 50 to 950 as an object.
+
+```vue
+import { palette } from '@primeuix/themes';
+
+// custom color
+const values1 = palette('#10b981');
+
+// copy an existing token set
+const primaryColor = palette('{blue}');
+```
+
+## Specificity
+
+The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. The cssLayer is disabled by default, when it is enabled at theme configuration, PrimeVue wraps the built-in style classes under the primevue cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written. Layers also make it easier to use CSS Modules, view the CSS Modules guide for examples.
+
+## Reset
+
+In case PrimeVue components have visual issues in your application, a Reset CSS may be the culprit. CSS layers would be an efficient solution that involves enabling the PrimeVue layer, wrapping the Reset CSS in another layer and defining the layer order. This way, your Reset CSS does not get in the way of PrimeVue components.
+
+```vue
+/* Order */
+@layer reset, primevue;
+
+/* Reset CSS */
+@layer reset {
+    button,
+    input {
+        /* CSS to Reset */
+    }
+}
+```
+
+## CSS Modules
+
+CSS modules are supported by enabling the module property on a style element within your SFC. Use the $style keyword to apply classes to a PrimeVue component. It is recommend to enable cssLayer when using CSS modules so that the PrimeVue styles have low CSS specificity.

package/data/llms/pages/theming/unstyled.md

@@ -0,0 +1,57 @@
+# Unstyled Mode
+
+Theming PrimeVue with alternative styling approaches.
+
+## Architecture
+
+The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. In unstyled mode the css variables of the design tokens and the css rule sets that utilize them are not included. Here is an example of an Unstyled Select, the core functionality and accessibility is provided whereas styling is not included. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
+
+## Setup
+
+Unstyled mode is enabled for the whole suite by enabling unstyled option during PrimeVue installation. Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component. Check
+
+## Example
+
+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
+
+```vue
+<template>
+    <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">
+        <Search class="text-white" :size="20" />
+        <span class="text-white font-bold text-lg">Search</span>
+    </Button>
+</template>
+
+<script setup>
+import Search from '@primeicons/vue/search';
+<\/script>
+```
+
+## Global
+
+A global configuration can be created at application level to avoid repetition via the global pt option so that the styles can be shared from a single location. A particular component can still override a global configuration with its own pt property.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    unstyled: true,
+    pt: {
+        button: {
+            root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
+            label: 'text-white font-bold text-lg',
+            icon: 'text-white text-xl'
+        },
+        panel: {
+            header: 'bg-primary text-primary-contrast border-primary',
+            content: 'border-primary text-lg text-primary-700',
+            title: 'bg-primary text-primary-contrast text-xl',
+            pcToggleButton: {
+                root: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
+            }
+        }
+    }
+});
+```

package/data/llms/pages/uikit.md

@@ -0,0 +1,3 @@
+# UI Kit
+
+Design files for PrimeVue Components.

package/data/llms/pages/unstyled.md

@@ -0,0 +1,57 @@
+# Unstyled Mode
+
+Theming PrimeVue with alternative styling approaches.
+
+## Architecture
+
+The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. In unstyled mode the css variables of the design tokens and the css rule sets that utilize them are not included. Here is an example of an Unstyled Select, the core functionality and accessibility is provided whereas styling is not included. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.
+
+## Setup
+
+Unstyled mode is enabled for the whole suite by enabling unstyled option during PrimeVue installation. Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component. Check
+
+## Example
+
+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
+
+```vue
+<template>
+    <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">
+        <Search class="text-white" :size="20" />
+        <span class="text-white font-bold text-lg">Search</span>
+    </Button>
+</template>
+
+<script setup>
+import Search from '@primeicons/vue/search';
+<\/script>
+```
+
+## Global
+
+A global configuration can be created at application level to avoid repetition via the global pt option so that the styles can be shared from a single location. A particular component can still override a global configuration with its own pt property.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    unstyled: true,
+    pt: {
+        button: {
+            root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
+            label: 'text-white font-bold text-lg',
+            icon: 'text-white text-xl'
+        },
+        panel: {
+            header: 'bg-primary text-primary-contrast border-primary',
+            content: 'border-primary text-lg text-primary-700',
+            title: 'bg-primary text-primary-contrast text-xl',
+            pcToggleButton: {
+                root: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
+            }
+        }
+    }
+});
+```

package/data/llms/pages/v4.md

@@ -0,0 +1,15 @@
+# Migration
+
+Migration guide to PrimeVue v4.
+
+## Overview
+
+At PrimeTek, we have been developing UI component libraries since 2008. The web continues to undergo technological advancements, and as a result, we have to modernize and update our libraries to stay relevant. PrimeVue v4 is the next-generation version that fully embraces modern Web APIs and removes technical debt like the legacy-styled mode. Every component has been reviewed and enhanced. As part of our commitment to our products and the community, PrimeVue v3 will continue to be maintained until the end of 2024. The most notable feature is the new styled mode implementation. Previous iterations use SASS at an external repo called primevue-sass-theme which requires compilation of a theme.css a file. This file had to be included in the application and need to be swapped at runtime for basic tasks like dark mode or primary color changes. In v4, styled mode is now part of the core, SASS is not used at all, and a new design token based architecture that fully utilizes CSS variables has been created. The new API is modern and superior to the legacy styled mode. Names of some of the components have been changed to more common alternatives for example, Popover replaced OverlayPanel and InputSwitch is now called ToggleSwitch . Each component has been reviewed for a consistent naming between CSS class names and PT sections. An example would be the option element of a Select component that uses p-select-option for the class name. Components have been utilized more within other components, for instance Dialog close button is not actually a PrimeVue button so that closeButtonProps can be used to enable the features of button like outlined, raised and more. Whenever a component is using another component, in v3 the pt sections were causing confusion, to prevent this pc prefix is added to indicate that the PT section is actually a PrimeVue component, not a simple DOM element. This is especially useful because PT allows passing arbitrary attributes to DOM elements whereas if the element is actually a PrimeVue component, props can also be passed.
+
+## Compatible
+
+Renamed Components Old names are deprecated but still functional, migrate to new import paths instead e.g. primevue/calendar becomes primevue/datepicker . Calendar -> DatePicker . Dropdown -> Select . InputSwitch -> ToggleSwitch . OverlayPanel -> Popover . Sidebar -> Drawer . Deprecated Components Components that are deprecated since their functionality is provided by other components. Chips | Use AutoComplete with multiple enabled and typeahead disabled. TabMenu | Use Tabs without panels. Steps | Use Stepper without panels. InlineMessage | Use Message component. BadgeDirective | Use OverlayBadge instead. TabView | Use the new Tabs components. Accordion | Use with the new AccordionHeader and AccordionContent components. Important Tickets Issue tickets with detailed information about component internal changes. #5426 #5437
+
+## Breaking
+
+SASS Themes The styled mode theming has been reimplemented from scratch based on an all-new architecture. The theme.css and the primevue/resources do not exist anymore, so any imports of these assets needs to be removed. If you had a custom theme for v3, the theme needs to be recreated using the new APIs. See the customization section at styled mode for details. Removed Components TriStateCheckbox | Use Checkbox with indeterminate option. DataViewLayoutOptions | Use SelectButton instead. Removed APIs switchTheme function, use the new APIs like usePreset instead to dynamic theme switching. Relocated APIs Imports from primevue/api have been relocated to @primevue/core/api . Removed Files Themes under the primevue/resources path, migration to new styled mode is necessary. The legacy Tailwind preset at primevue/passthrough/tailwind . Message and InlineMessage InlineMessage is deprecated due to overlap with the Message . The spacing, closable and life properties of the Message have breaking changes to provide InlineMessage functionality. Default margin is removed, closable is false by default and messages do not disappear automatically. PT Section Names The experimental PassThrough feature is not production ready, there are changes on the PT section names due to alignment with CSS classes for certain components. If when component element is another PrimeVue component pc prefix is added for indication. Review the Pass Through section of a component for the new API. The Tailwind CSS presets for the unstyled mode are not updated to v4 yet. Removed Features Sidebar/Drawer size property is removed, use a responsive class utilty as replacement, demos have new examples. Rating cancel prop is removed as toggling the selected star value clears it. Inplace closable is removed in favor of templating and closeCallback prop. Removed Style Classes .p-link , use a button in link mode. .p-highlight , each component have its own class such as .p-select-option-selected . .p-fluid , use the new built-in fluid property of the supported components or the Fluid component. Nuxt Module The nuxt-primevue module has been replaced with the new @primevue/nuxt-module . The old module is still maintained for v3 users. PrimeFlex CSS In case you are using PrimeFlex CSS library, upgrade to PrimeFlex v4 since PrimeFlex v3 is not compatible with PrimeVue v4+.

package/data/llms/pages/v5.md

@@ -0,0 +1,15 @@
+# Migration to v5
+
+Migration guide to PrimeVue v5.
+
+## Overview
+
+PrimeVue v5 is the first release under the PrimeUI umbrella. Licensing moves to a dual Community/Commercial model. Read the full story for the background and road ahead. Breaking Changes PrimeVue follows semantic versioning , and this release introduces no breaking changes to the public component APIs. Existing applications should upgrade without code edits. If you encounter a regression that looks like a breaking change, please open an issue so we can address it. PRO Suite PrimeUI PRO is the new enterprise tier from PrimeTek, expanding the suite with production-ready components. Scheduler . Charts . Text Editor . Task Board . Diagram, on the roadmap DataGrid, on the roadmap Gantt Chart, on the roadmap PDF Viewer, on the roadmap New Components v5 introduces a fresh set of components: CommandMenu Compare Gallery InputTags InputPassword InputColor Sidebar ScrollArea Enhancements Several existing components have also been reworked: Carousel rebuilt around a compound API. Menu now supports multi-level navigation. Toast ships with new entry and exit animations. InputMask is now a directive rather than a component. Wide-ranging defect fixes across the suite. New documentation and demos. 16px Base PrimeVue sizes its components in rem units relative to the document root font size, now assumed to be 16px to match the browser default. Earlier versions assumed 14px, so every preset also ships a compat variant calibrated for a 14px root to keep existing layouts intact. See Base Font Size for technical details.
+
+## Deprecations
+
+The following APIs are marked as deprecated in v5 and will be removed in a future major version. They continue to function in v5 so you can migrate gradually. API Deprecated Since Replacement Removal Status MultiSelect v5 Select component with multiple property v6 Galleria v5 Gallery component v6 Image v5 Gallery component v6 ColorPicker v5 InputColor component v6 ImageCompare v5 Compare component v6 ScrollPanel v5 ScrollArea component v6 Password v5 InputPassword component v6 InputMask v5 Mask directive v6 PanelMenu v5 Menu component with toggleable option v6 Chart v5 PrimeUI PRO Charts v6 Editor v5 PrimeUI PRO Editor v6 @primevue/icons package v5 SVG icons via @primeicons/vue v6 AutoComplete multiple property v5 InputTags component with typeahead v6 Button label , icon , iconPos , iconClass properties v5 Place the icon and label directly inside the default slot, ordering them as needed v6 Button badge , badgeClass , badgeSeverity properties v5 Compose a Badge component inside the default slot v6 Button loading and loadingIcon properties v5 Render your own spinner inside the default slot and toggle disabled v6 Tabs scrollable property v5 Scrolling is now the default behavior if necessary v6 Carousel data-driven ( value ) usage v5 Compound API with CarouselContent , CarouselItem and CarouselIndicators helpers. v6
+
+## Removals
+
+The list of items that were deprecated in previous releases and removed in this iteration. API Deprecated In Replacement Status Calendar v4 DatePicker component Dropdown v4 Select component Chips v4 InputTags component InputChips v4 InputTags component InputSwitch v4 ToggleSwitch component OverlayPanel v4 Popover component TabView v4 Tabs component AccordionTab v4 Accordion with AccordionPanel / AccordionHeader / AccordionContent BadgeDirective ( v-badge ) v4 OverlayBadge component InlineMessage v4 Message component TabMenu v4 Tabs component (without panels) AutoComplete removeTokenIcon property and removetokenicon slot v4 chipIcon property and chipicon slot AutoComplete item-select / item-unselect events v4 option-select / option-unselect events AutoComplete loadingIcon property and loadingicon slot v4 loader property and loader slot AutoComplete dropdownbutton slot v4 dropdown slot Accordion activeIndex property and update:activeIndex / tab-open / tab-close / tab-click events v4 value property and update:value event Button plain property v4 contrast severity PrimeVue config inputStyle option v4 inputVariant option CascadeSelect panelStyle / panelClass / panelProps properties v4 overlayStyle / overlayClass / overlayProps properties Select panelStyle / panelClass properties v4 overlayStyle / overlayClass properties InputNumber incrementButtonIcon / decrementButtonIcon properties and incrementbuttonicon / decrementbuttonicon slots v4 incrementIcon / decrementIcon properties and incrementicon / decrementicon slots Column rowtogglericon / nodetogglericon slots v4 rowtoggleicon / nodetoggleicon slots DataTable reorderindicatorupicon / reorderindicatordownicon slots v4 rowreorderindicatorupicon / rowreorderindicatordownicon slots Tree searchicon / togglericon / nodetogglericon slots v4 filtericon / nodetoggleicon slots TreeSelect itemtogglericon slot v4 itemtoggleicon slot TreeSelect triggericon slot v4 dropdownicon slot Dock icon slot v4 itemicon slot Menu submenuheader slot v4 submenulabel slot Menubar menubutton / menubuttonicon slots v4 button / buttonicon slots MegaMenu menubutton / menubuttonicon slots v4 button / buttonicon slots Message sticky property v4 life property to control auto-close UniqueComponentId utility ( @primevue/core/utils ) v4 uuid from @primeuix/utils Component instance hasFluid getter (BaseInput) v4 $fluid Component instance filled getter (BaseEditableHolder) v4 $filled Root element $pc marker (set on each component's root DOM element) v4 No replacement (internal) Paginator firstpagelinkicon / prevpagelinkicon / nextpagelinkicon / lastpagelinkicon slots v4 firsticon / previcon / nexticon / lasticon slots Panel / Fieldset togglericon slot v4 toggleicon slot SplitButton menubuttonicon slot v4 dropdownicon slot Toast icon slot v4 messageicon slot OrderList / PickList item slot v4 option slot TabPanel header / headerStyle / headerClass / headerProps / headerActionProps / contentStyle / contentClass / contentProps / disabled properties and header slot (TabView-only) v4 Tabs structure ( Tab / TabList / TabPanels ) switchTheme function v4 usePreset and related theme APIs primevue/themes presets v4 @primeuix/themes nuxt-primevue module v4 @primevue/nuxt-module