@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/pages/customicons.md

@@ -0,0 +1,67 @@
+# Custom Icons
+
+PrimeVue components can be used with any icon library using the templating features.
+
+## Material
+
+Material icons is the official icon library based on Google Material Design.
+
+```vue
+<template>
+    <Select>
+        <template #dropdownicon>
+            <span class="material-icons">arrow_drop_down</span>
+        </template>
+    </Select>
+</template>
+```
+
+## FontAwesome
+
+Font Awesome is a popular icon library with a wide range of icons.
+
+```vue
+<template>
+    <Select>
+        <template #dropdownicon>
+            <i class="fa-light fa-chevron-down"></i>
+        </template>
+    </Select>
+</template>
+```
+
+## SVG
+
+Inline SVGs are embedded inside the dom.
+
+```vue
+<template>
+    <Select>
+        <template #dropdownicon>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <g id="chevron-down">
+                    <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
+                </g>
+            </svg>
+        </template>
+    </Select>
+</template>
+```
+
+## Image
+
+Any type of image can be used as an icon.
+
+```vue
+<template>
+    <Select>
+        <template #dropdownicon>
+            <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
+        </template>
+    </Select>
+</template>
+```
+
+## Video Tutorial
+
+A video tutorial to demonstrate how to customize icons.

package/data/llms/pages/designer.md

@@ -0,0 +1,79 @@
+# Terms and Conditions
+
+Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, Figma to theme code, cloud storage, and migration assistant.
+
+## Dashboard
+
+Dashboard is the entry point of the designer. The license key can be configured at this view before getting started with the full set of features. In the My Themes section, you're able to create a theme, and manage existing themes. A theme can be renamed, duplicated and downloaded using the button.
+
+## License
+
+A license key is required to be able to use all the services provided by the designer. Without a license, the visual editor is still available for trial purposes with various options such as downloads, and cloud storage disabled. The license key can be purchased at PrimeStore , it is valid for 1 year and needs to be renewed manually after a year.
+
+## Limitations
+
+Current known technical limitations are listed at this section. The border width token in Figma does not support multiple values, related issue .
+
+## Migration Assistant
+
+Prime UI libraries continue to evolve with each version. New tokens are likely to be added with each major release, in order to keep your themes up to date the migration assistant is available featuring automated migration. The Check for Updates option initially scans a theme for any missing tokens. This tool does not override the values of existing tokens, and only adds missing tokens if necessary. Still, it is recommended to duplicate your theme as a backup and run a preview before the migration. Depending on the result, you may choose to proceed with the migration process. In case there are missing tokens, your theme would receive them with placeholder values so it is recommended to take a note of them before migration and then visit the components to replace the placeholder values with actual values of your choice. These types of newly added tokens would be highlighed in Editor.
+
+## Overview
+
+The theming api is open and source freely available with an extensive documentation. Theme Designer is a tool build on top of this theming api with important features to make theming easier. Designer consists of 4 key features; The visual editor provides a UI to edit the complete set of tokens. The Figma to theme code generator is extremely useful to automate the design to code process and integrates seamlessly with the Figma UI Kit. The themes are saved in the cloud storage to be accessible from anywhere and any device and finally the migration assistant automatically updates your themes to the latest library version.
+
+## Designer Api
+
+Theme Designer public endpoint is hosted at PrimeUI Store. Get a Secret Key Visit the PrimeUI Store . Purchase an Extended License of Theme Designer. Navigate to your account settings . Generate a secret key for CI/CD integration. Authentication Define a Authentication: Bearer request header to configure your secret key. Parameters The request type must be POST . Name Type Required Description name string yes Name of the theme to be generated. tokens json yes Content of the json file exported from Figma. project string yes Name of the project, possible values are "primeng" or "primevue". config.font_size string no Font size for theme preview in visual editor at website, defaults to "14px". config.font_family string no Font family for theme preview in visual editor at website, defaults to "Inter Var" Example Response A successful response returns a zip file containing the source code of the generated theme preset. The content-type header of this type of response is application/zip . Error Handling When theme generation fails, a json response is returned with application/json content-type header. The response contains an error object with code and message .
+
+## Figma
+
+Tokens Studio in Figma is the starting point of a continuous integration pipeline. You can connect a remote repository to sync your tokens data so that changes are saved remotely instead of locally. Tokens Studio offers various remote storage options such as GitHub , GitLab and Bitbucket . Refer to these documentations based on your environment before proceeding to the integrations in the next section.
+
+## Live Preview
+
+After your CI pipeline completes successfully, your theme also becomes available in the Prime UI Theme Designer. Navigate to the Prime UI library website. Click the ⚙️ icon at topbar to open up Designer Editor. Sign in with your license key and pass key credentials. Then select your theme from the available options to apply it across all demos and website content. Note that CI-generated themes are provided in read-only mode for preview purposes only and cannot be edited within the Theme Designer. The Migration Assistant is available to identify any missing tokens in your preset; however, if tokens are missing, they must be added manually in Figma as needed.
+
+## Overview
+
+The Figma UI Kit and the theming api is fully synchorized, meaning the design tokens in Figma map to the corresponding properties in a theme preset. The Theme Designer offers a feature to create a theme by uploading a tokens.json file that is exported from the Tokens Studio plugin in Figma. Once the theme is converted, it can either be edited further in the visual editor or downloaded as a zip file to access the full code. Visit the Figma section at the designer documentation for more information. Manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer provides a remote API that can be integrated into your CI pipeline.
+
+## Video Tutorial
+
+Before diving into the implementation details, if you would like to understand the final outcome and see how the solution operates, please refer to the video tutorial for a comprehensive walkthrough and demonstration.
+
+## Bitbucket
+
+The BitBucket integration is implemented by executing a custom pipe whenever the tokens file changes. 1. Add Secret Key to Repository Secrets Go to your BitBucket repository. Navigate to Repository Settings > Repository Variables . Give a name such as: THEME_DESIGNER_SECRET_KEY . Value: Your API key from Prime Theme Designer. Click Add . 2. Add the pipe configuration to your bitbucket-pipelines.yml Define the configuration parameters for the Designer API and add the pipe as a runnable script to the action. Notice that, the referenced pipe is executed as a script rather than a pipe from the BitBucket pipe registry as PrimeTek currently has no intentions to maintain an official pipe for BitBucket. You may further improve this example by building a dockerized pipe that is accessible in the BitBucket Registry to refer it with the pipe config in yml. 3. Test Integration Edit a token in Tokens Studio in Figma and click Push to BitBucket button to update the tokens file in your Git repository, triggering the configured BitBucket Pipe. The pipe then sends the updated file content to the Theme Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An example repository is available at BitBucket that you may use as a starter.
+
+## Git Hub
+
+The prime-figma-to-theme-code-generator is a GitHub Action that is available on the marketplace. 1. Add Secret Key to Repository Secrets Go to your GitHub repository. Navigate to Settings > Secrets and variables > Actions . Click New repository secret . Give a name such as: THEME_DESIGNER_SECRET_KEY . Value: Your API key from Prime Theme Designer. Click Add secret . 2. Add the action to your .github/worklows Visit the inputs documentation for more details about the parameters such as the theme-name . 3. Test Integration Edit a token in Tokens Studio in Figma and click Push to GitHub button to update the tokens file in your Git repository, triggering the configured GitHub Action. The GitHub Action then sends the updated file content to the Theme Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An example repository is available at GitHub that you may use as a starter.
+
+## Git Lab
+
+The GitLab integration is implemented by executing a script whenever the tokens file changes. 1. Add Secret Key to Repository Secrets Go to your GitLab repository. Navigate to Settings > CI/CD > Variables . Click Add variable . Give a name such as: THEME_DESIGNER_SECRET_KEY . Value: Your API key from Prime Theme Designer. Click Add variable . 2. Add the script to your project A sample script named figma-to-theme-converter.sh is available as a starter, copy and paste this script to your project. You may alter the script further per your requirements. 3. Add the script to your .gitlab-ci.yml Define the configuration parameters for the Designer API and add the script to the action. 4. Test Integration Edit a token in Tokens Studio in Figma and click Push to GitLab button to update the tokens file in your Git repository, triggering the configured GitLab Action. The GitLab Action then sends the updated file content to the Theme Designer API, receives the generated theme code, and commits the resulting changes back to your repository. An example repository is available at GitLab that you may use as a starter.
+
+## Base
+
+In the new theme section, all of the built-in themes are available to use as the base. These are; Aura , Material , Lara and Nora . Each have their own characteristics, and it is recommended to choose the one that best suits your requirements.
+
+## Figma
+
+For teams with UI designers, we recommend using PrimeOne Figma UI Kit for the design phase and utilizing the Theme Designer service to automate code generation during handoff. This workflow eliminates manual design-to-code translation, reducing implementation time and ensuring consistency between design and production. UI Kit v4 Automated Flow Recommended approach is using the PrimeUI Theme Generator Figma plugin which provides built-in synchronization capabilities that automate the theme generation process. Visit the plugin website to learn more about this workflow. Manual Flow Instead of generating themes directly from Figma using the plugin, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the Theme Designer. Note that, this flow would get tedious and repetitive in active development cycles when compared to an automated flow. Open the PrimeOne UI Kit in which you've modified tokens. In the PrimeUI Theme Generator plugin, click the Export option to export all variable collections. When creating a new theme at Theme Designer, choose the Import Figma Variables option and import the json file. UI Kit v3 (Deprecated) CI Pipeline Recommended approach is setting up the CI Pipeline flow as manually exporting the tokens file from Figma and uploading it to the online designer tool may quickly become tedious in active development cycles. As a solution, theme designer provides a remote API that can be integrated into your flow. Visit the CI Pipeline documentation for comprehensive information and examples for GitHub, GitLab and BitBucket. Manual Flow Instead of setting a CI pipeline, for quick prototyping purposes, you may also choose to use to manually export a tokens json file and then upload it to the designer. Note that, this flow would get tedious and repetitive in active development cycles when compared to an automated CI pipeline. Open the PrimeOne UI Kit in which you've modified tokens. In the Tokens Studio plugin, navigate to the Tools menu and select Export to file/folder. When the Export tokens modal appears, make sure the Single file tab is selected. Check the All tokens sets option, then click Export . In case you utilize custom tokens, create a new token set named custom and define your tokens under this set to make sure they are also exported to the theme code. When creating a new theme at Theme Designer, choose the Import Figma Variables option and import the json file.
+
+## Custom Tokens
+
+Custom tokens allow bringing in your own design tokens to the theme to go beyond the built-in ones. A design token requires a name and a value where the value can be a static value like a color or another token. The name of the token should be a dot seperated lowercase value e.g. accent.color . For example, a custom token name can be defined as accent.color and the value can either be a value like #eab308 or another token such as {yellow.50} . Custom tokens can also refer to each other, e.g. selection.background custom token can define {accent.color} as a value. If you have created a theme from Figma, use the name custom as the name of your token set group. This keyword is special since the import tool will populate the custom tokens using this set in tokens json file.
+
+## Intelligent Completion
+
+The editor is packed with features for improved user experience. The input fields in the editor are capable of displaying a color preview when the value is a color, and beginning the value with a curly brace opens up the autocompletion feature to list the available tokens to choose from. The pi-sort-alt symbol over the input, transfers the token between the common tokens and color scheme specific tokens so that you are able to define tokens based on light and dark mode as well.
+
+## Token Collections
+
+The theming architecture is based on primitive, semantic and components tokens. The visual editor, displays a dedicated section for each collection. For basic purposes such as customizing the primary and surface colors, primitive and semantic sections would be more than enough. The component tokens are displayed per route so navigate to the component page first to view the tokens of the specific component.
+
+## Typography
+
+The components are not opinionated about the typography. Important properties such as the font family, font size, and line-height do not have design tokens since they can be inherited from the document. For preview purposes, the settings tab displays options to customize the base font and the font family of the document. These values are not available in the generated theme and need to be applied to your application at the document level.

package/data/llms/pages/dynamicimports.md

@@ -0,0 +1,7 @@
+# Dynamic Imports
+
+Dynamic imports enable the loading of multiple items as needed, streamlining the import process.
+
+## Overview
+
+With @primeicons/vue for icons and primevue for components (except Editor and Chart), multiple items can be imported together.

package/data/llms/pages/forms.md

@@ -0,0 +1,63 @@
+# Forms
+
+The PrimeVue Forms library provides comprehensive form state management with built-in validation support.
+
+## Accessibility
+
+Screen Reader Form does not require any roles and attributes. Keyboard Support Component does not include any interactive elements.
+
+## Basic
+
+All PrimeVue form components are designed for seamless integration with the forms library. Instead of using the standard v-model , the name property is used to link a state object that tracks values, errors, and actions. The form component provides four key properties for state management.
+
+## Download
+
+Forms add-on is available for download on the npm registry.
+
+## Dynamic
+
+This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures. The components named Dynamic* shown in this example are not built-in, and only available for sampling purposes. First form uses a declarative approach whereas second form goes for a programmatic approach. We suggest running this sample in StackBlitz to view the comprehensive implementation.
+
+## Import
+
+The form component is responsible for managing the form state and must encapsulate the form fields.
+
+## Resolvers
+
+Validations are implemented with the resolver property. A custom resolver is responsible for handling the validation and returning an errors object with key-value pairs where key is the form field name and value is an array of error object data. For productivity, we recommend using a schema validation library instead of building your own custom validation logic. The forms library provide built-in resolvers for popular options including Zod , Yup , Joi , Valibot , and Superstruct that can be imported from @primevue/forms/resolvers path.
+
+## States
+
+The $form object tracks the state management of the fields. Each field is linked with the name property. View the FormFieldState type in the API documentation for details about each property.
+
+## Submit
+
+The submit callback returns an object that encapsulates the form's validity, any existing errors, and its current state. This enables access to the form values, validation status, and any errors present at the time of submission. View the FormSubmitEvent in the API documentation for more information about the available event data.
+
+## ValidateOn
+
+Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission. These behaviors can be configured at form level or on specific fields via the validateOnValueUpdate , validateOnBlur , validateOnMount , and validateOnSubmit options of the formControl property. In this example, form disables validateOnValueUpdate and enables validateOnBlur at form level, and validates firstName on mount. The firstName field, overrides the form level setting locally.
+
+## Built In
+
+Although PrimeVue components have built-in support for the Form API, you may still prefer to utilize the components as wrapped with the FormField. This is a matter of preference, for example in case you are also using FormField for other 3rd party components, your own custom components, and native elements, for consistency it may be an option.
+
+## FormField
+
+The FormField is a helper component that provides validation and tracking for input elements, offering a more flexible structure to bind PrimeVue, non-PrimeVue components or native HTML elements to Form API. Additionally, with props like validateOn* , initialValue , resolver , and name , behaviors can be controlled directly from this component.
+
+## Non Prime Vue
+
+Form API is not strictly tied to PrimeVue components, providing a flexible way to manage validation and state for any native HTML elements, your own custom components or third-party libraries.
+
+## Resolver
+
+Each FormField can have its own dedicated resolver, allowing you to define custom validation logic for individual fields. This flexibility enables tailored validation rules, ensuring that each form field meets specific criteria.
+
+## Template
+
+It renders as a HTML div element, but this behavior can be modified using the as and asChild props to render different HTML elements or to pass a custom component, allowing for greater flexibility in form structure.
+
+## Styled
+
+Component does not apply any styling.

package/data/llms/pages/guides/accessibility.md

@@ -0,0 +1,27 @@
+# Accessibility
+
+PrimeVue has WCAG level compliance, refer to the accessibility documentation of each component for detailed information.
+
+## Introduction
+
+According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to ensure content can be consumed by anyone. Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories; Visual Impairments Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers are required to make sure content is readable by the readers. Popular readers are NVDA , JAWS and ChromeVox . Hearing Impairments Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing textual alternatives, transcripts and captions for content with audio. Mobility Impairments People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad remain as solutions for people who are not able to utilize a mouse. Cognitive Impairments Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive impairments result in better design for any user.
+
+## WCAG
+
+Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is easier to be processed by a screen reader. WCAG refers to Web Content Accessibility Guideline , a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeVue components aim high level of WCAG compliancy in the near future. Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and Web Accessibility Directive of the European Union.
+
+## Form Controls
+
+Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with space key as well to trigger.
+
+## Semantic HTML
+
+HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular div elements with classes are used. Consider the following example that do not mean too much for readers.
+
+## WAI ARIA
+
+ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeVue. These types of components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized. ARIA consists of roles, properties and attributes. Roles define what the element is mainly used for e.g. checkbox , dialog , tablist whereas States and Properties define the metadata of the element like aria-checked , aria-disabled . Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.
+
+## Colors
+
+Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration. Good Contrast Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples. GOOD BAD Vibration Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration. VIBRATE Dark Mode Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred. Indigo 500 Indigo 200

package/data/llms/pages/guides/animations.md

@@ -0,0 +1,119 @@
+# Animations
+
+Various PrimeVue Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations.
+
+## Introduction
+
+Various PrimeVue Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations. Animations are defined using a combination of style classes and keyframes. The ⁠ .{classname}-enter-active and ⁠ .{classname}-leave-active classes specify the animation name, duration, and easing function. You can customize animations globally by overriding the default animation classes, affecting all components. Alternatively, you can apply scoped classes to individual components to modify their animations independently. For demo purposes, this second approach is used throughout the next sections.
+
+## Anchored Overlays
+
+Anchored overlays are the components that have a floating ui positioned relatively to another element such as Select, Popover. The enter and leave animations are defined with the .p-anchored-overlay-enter-active and .p-anchored-overlay-leave-active classes.
+
+```vue
+.p-anchored-overlay-enter-active {
+    animation: demo-overlay-in 300ms ease-out;
+}
+
+.p-anchored-overlay-leave-active {
+    animation: demo-overlay-out 250ms ease-in;
+}
+
+@keyframes demo-overlay-in {
+    from {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+}
+
+@keyframes demo-overlay-out {
+    to {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+}
+```
+
+## Collapsibles
+
+Collapsible components have a content that is toggleable including Accordion, Panel, Fieldset, Stepper and PanelMenu. The enter and leave animations are defined with the .p-collapsible-enter-active and .p-collapsible-leave-active classes.
+
+```vue
+.p-collapsible-enter-active {
+    animation: demo-collapsible-expand 500ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.p-collapsible-leave-active {
+    animation: demo-collapsible-collapse 500ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+@keyframes demo-collapsible-expand {
+    from {
+        opacity: 0;
+        grid-template-rows: 0fr;
+        transform: scale(0.93);
+    }
+    to {
+        opacity: 1;
+        grid-template-rows: 1fr;
+    }
+}
+
+@keyframes demo-collapsible-collapse {
+    from {
+        opacity: 1;
+        grid-template-rows: 1fr;
+    }
+    to {
+        opacity: 0;
+        grid-template-rows: 0fr;
+        transform: scale(0.93);
+    }
+}
+```
+
+## Dialog
+
+Overlays such as Dialog and Drawer are positioned relative to the viewport and have their own animations.
+
+```vue
+.p-dialog-enter-active {
+    animation: demo-dialog-in 500ms ease-out;
+}
+
+.p-dialog-leave-active {
+    animation: demo-dialog-out 500ms ease-in;
+}
+
+@keyframes demo-dialog-in {
+    from {
+        opacity: 0;
+        transform: translateY(-10%) scale(1.1);
+        filter: blur(10px);
+    }
+}
+
+@keyframes demo-dialog-out {
+    to {
+        opacity: 0;
+        transform: translateY(200%) rotate(-90deg);
+    }
+}
+```
+
+## Disable
+
+Individual animations can be reduced and even disabled completely using the animation duration.
+
+```vue
+@media (prefers-reduced-motion: reduce) {
+    .p-anchored-overlay-enter-active,
+    .p-anchored-overlay-leave-active {
+        animation-duration: 0s !important;
+    }
+}
+```
+
+## Reference
+
+List of class names of the CSS animations used by the components. Component Enter Class Leave Class Accordion .p-collapsible-enter-active .p-collapsible-leave-active AutoComplete .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active CascadeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ColorPicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ConfirmPopup .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ContextMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active DatePicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Dialog .p-dialog-enter-active .p-dialog-leave-active Drawer .p-drawer-enter-active .p-drawer-leave-active Fieldset .p-collapsible-enter-active .p-collapsible-leave-active Galleria .p-galleria-enter-active .p-galleria-leave-active Image .p-image-original-enter-active .p-image-original-leave-active Menu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Message .p-message-enter-active .p-message-leave-active Modal Masks .p-overlay-mask-enter-active .p-overlay-mask-leave-active MultiSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Panel .p-collapsible-enter-active .p-collapsible-leave-active PanelMenu .p-collapsible-enter-active .p-collapsible-leave-active Password .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Select .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Stepper .p-collapsible-enter-active .p-collapsible-leave-active TieredMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active TreeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active

package/data/llms/pages/guides/rtl.md

@@ -0,0 +1,7 @@
+# RTL Support
+
+Right-to-left direction support of PrimeVue.
+
+## Configuration
+
+The PrimeVue components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like *-inline-start and *-block-end . Consequently, no JavaScript configuration is necessary; setting the document's text direction to RTL is sufficient to enable this feature. The RTL setting can either be set using the dir attribute or with the direction style property.

package/data/llms/pages/icons.md

@@ -0,0 +1,136 @@
+# Icons
+
+@primeicons/vue is the default icon library of PrimeVue with over 300 icons as standalone Vue components developed by PrimeTek. The library is optional as PrimeVue components can use any icon with templating.
+
+## Download
+
+@primeicons/vue is available at npm, run the following command to download it to your project.
+
+```vue
+npm install @primeicons/vue
+```
+
+## Import
+
+Each icon is a standalone Vue component. Import them individually for optimal tree-shaking, or use the named exports from the package root.
+
+```vue
+// Tree-shakeable, per-icon imports (recommended)
+import Search from '@primeicons/vue/search';
+import User from '@primeicons/vue/user';
+
+// Named imports from the package root
+import { Search, User, Check } from '@primeicons/vue';
+```
+
+## Figma
+
+PrimeIcons library is now available on Figma Community . By adding them as a library, you can easily use these icons in your designs.
+
+## Basic
+
+Each icon is a standalone Vue component rendered as an inline SVG, displayed by importing it from @primeicons/vue and using it as a tag.
+
+```vue
+<template>
+    <Check />
+    <Times />
+    <Search />
+    <User />
+</template>
+
+<script setup>
+import Check from '@primeicons/vue/check';
+import Times from '@primeicons/vue/times';
+import Search from '@primeicons/vue/search';
+import User from '@primeicons/vue/user';
+<\/script>
+```
+
+## Size
+
+Size of an icon is controlled with the size property that accepts a number in pixels or any CSS length value.
+
+```vue
+<template>
+    <Check :size="16" />
+    <Times :size="24" />
+    <Search :size="32" />
+    <User :size="40" />
+</template>
+
+<script setup>
+import Check from '@primeicons/vue/check';
+import Times from '@primeicons/vue/times';
+import Search from '@primeicons/vue/search';
+import User from '@primeicons/vue/user';
+<\/script>
+```
+
+## Color
+
+Icon color is defined with the color property which is inherited from the parent with currentColor by default.
+
+```vue
+<template>
+    <Check color="slateblue" />
+    <Times color="green" />
+    <Search color="var(--p-primary-color)" />
+    <User color="#708090" />
+</template>
+
+<script setup>
+import Check from '@primeicons/vue/check';
+import Times from '@primeicons/vue/times';
+import Search from '@primeicons/vue/search';
+import User from '@primeicons/vue/user';
+<\/script>
+```
+
+## Spin
+
+Use a spin animation utility like animate-spin from Tailwind apply rotation.
+
+```vue
+<template>
+    <Spinner class="animate-spin" :size="32" />
+    <Cog class="animate-spin" :size="32" />
+</template>
+
+<script setup>
+import Spinner from '@primeicons/vue/spinner';
+import Cog from '@primeicons/vue/cog';
+<\/script>
+```
+
+## Programmatic
+
+Icon components can be referenced programmatically by passing the component itself to APIs that accept an icon , such as the model of a Menu.
+
+```vue
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Plus from '@primeicons/vue/plus';
+import Download from '@primeicons/vue/download';
+
+const items = ref([
+    {
+        label: 'File',
+        items: [
+            { label: 'New', icon: Plus },
+            { label: 'Open', icon: Download }
+        ]
+    }
+]);
+<\/script>
+```
+
+## List
+
+Here is the full list of icons available as Vue components. Click any icon to copy its import statement.

package/data/llms/pages/installation.md

@@ -0,0 +1,3 @@
+# Installation
+
+How to set up PrimeVue in your project. Select your framework to get started.

package/data/llms/pages/introduction.md

@@ -0,0 +1,23 @@
+# Introduction
+
+Next-generation UI Component suite for Vue.
+
+## Accessibility
+
+PrimeVue has WCAG level compliance; each component has a dedicated accessibility section to document several aspects, including keyboard and screen reader support. Through communication channels such as GitHub or Discord, numerous accessibility experts worldwide continue to provide constant feedback to improve the accessibility features further. View the accessibility guide to learn more.
+
+## Add Ons
+
+PrimeVue does not require financial sponsorships from its community; instead, to be backed by a solid financial foundation, optional add-ons are offered. These include a Figma UI Kit, premium application templates, and reusable UI blocks called PrimeBlocks. The add-ons are optional and there is no paywall when using PrimeVue.
+
+## Overview
+
+PrimeVue is a complete UI suite for Vue.js consisting of a rich set of UI components, icons, blocks, and application templates. The project's primary goal is to boost developer productivity by offering reusable solutions that are easy to tune and customize as an in-house library. The project has been created by PrimeTek a world-renowned vendor of popular UI Component suites, including PrimeFaces , PrimeNG , and PrimeReact. All the members in our team are full time employees of PrimeTek who share the same passion and vision for open source to create awesome UI libraries. Depending on a 3rd party library may introduce risks if the library maintainers decide not to work on the project, however, this is not the case with PrimeVue as the track record of PrimeTek shows. For example, PrimeFaces has been maintained actively since 2008.
+
+## Pass Through
+
+PassThrough is an innovative API to provide access to the internal DOM elements to add arbitrary attributes. In general, traditional UI component libraries encapsulate UI and logic with limited APIs that makes the developers dependant on the library maintainer to extend this API by adding new props or events. With Pass Through this limitation has been eliminated since, you'll be able to access the internal of the components to add events and attributes. Some common use-cases are adding test attributes, additional aria attributes, custom events and styling.
+
+## Theming
+
+PrimeVue can be styled in two modes; styled or unstyled. Styled mode is based on pre-skinned components with opinionated theme variants of PrimeOne design like Aura, Lara or Nora presets. Unstyled mode on the other hand, leaves the styling to you while implementing the functionality and accessibility. Unstyled mode provides full control over the styling with no boundaries by implementing a pluggable architecture to utilize CSS libraries like Tailwind CSS, Bootstrap, Bulma or your own custom CSS. We've even further built the Volt UI library that styles the components with utility classes of Tailwind. This design is future proof as PrimeVue can be styled with any CSS library without actually depending on it in its core.

package/data/llms/pages/laravel.md

@@ -0,0 +1,66 @@
+# Install PrimeVue with Laravel
+
+Setting up PrimeVue in a Laravel project.
+
+## Download
+
+PrimeVue is available for download on npm registry .
+
+```vue
+# Using npm
+npm install primevue @primeuix/themes
+
+# Using yarn
+yarn add primevue @primeuix/themes
+
+# Using pnpm
+pnpm add primevue @primeuix/themes
+```
+
+## Plugin
+
+PrimeVue plugin is required to be installed as an application plugin to set up the default configuration . The plugin is lightweight, and only utilized for configuration purposes.
+
+```vue
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+
+const app = createApp(App);
+app.use(PrimeVue);
+```
+
+## Theme
+
+Configure PrimeVue to use a theme like Aura.
+
+```vue
+import { createApp } from 'vue';
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura
+    }
+});
+```
+
+## Verify
+
+Verify your setup by adding a component such as Button . Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
+
+```vue
+import Button from "primevue/button"
+
+const app = createApp(App);
+app.component('Button', Button);
+```
+
+## Examples
+
+We've created various samples for the popular options in the Vue ecosystem. Visit the primevue-examples repository for more samples including laravel-quickstart and inertia-quickstart .
+
+## Next Steps
+
+Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library. Global configuration Auto imports with tree-shaking Customization of styles Pass through attributes Getting support

package/data/llms/pages/llms.md

@@ -0,0 +1,15 @@
+# LLMs.txt
+
+LLM-optimized documentation endpoints for PrimeVue components.
+
+## /llms.txt
+
+The llms.txt file is an industry standard that helps AI models better understand and navigate the PrimeVue documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information. Open llms.txt
+
+## /llms-full.txt
+
+The llms-full.txt file is a complete list of all the pages in the PrimeVue documentation. It is used to help AI models understand the entire documentation set. Open llms-full.txt
+
+## .md extension
+
+Add a .md to a page's URL to display a Markdown version of that page. Open /button.md