@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/virtualscroller.md

@@ -0,0 +1,265 @@
+# VirtualScroller
+
+VirtualScroller is a performant approach to render large amounts of data efficiently.
+
+## Basic
+
+VirtualScroller requires items as the data to display, itemSize for the dimensions of an item and item template are required on component. In addition, an initial array is required based on the total number of items to display. Size of the viewport is configured using scrollWidth , scrollHeight properties directly or with CSS width and height styles.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+```
+
+## Horizontal
+
+Setting orientation to horizontal enables scrolling horizontally. In this case, the itemSize should refer to the width of an item.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+```
+
+## Grid
+
+Scrolling can be enabled vertically and horizontally when orientation is set as both . In this mode, itemSize should be an array where first value is the height of an item and second is the width.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <VirtualScroller :items="items" :itemSize="[50, 100]" orientation="both" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                    <template v-for="(el, index) of item" :key="index">
+                        <div style="width: 100px">{{ el }}</div>
+                    </template>
+                </div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => \`Item #\${i}_\${j}\`)));
+<\/script>
+```
+
+## Delay
+
+The delay property adds a threshold to wait in milliseconds during scrolling for render optimization.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">No Delay</span>
+            <VirtualScroller :items="items" :itemSize="50" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">150ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="150" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">500ms</span>
+            <VirtualScroller :items="items" :itemSize="50" :delay="500" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+```
+
+## Loading
+
+Busy state is enabled by adding showLoader property which blocks the UI with a modal by default. Alternatively, loader template can be used to customize items e.g. with Skeleton .
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-8">
+        <div>
+            <span class="font-bold block mb-2">Modal</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+            </VirtualScroller>
+        </div>
+        <div>
+            <span class="font-bold block mb-2">Skeleton</span>
+            <VirtualScroller :items="items" :itemSize="50" showLoader :delay="250" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+                <template v-slot:item="{ item, options }">
+                    <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+                </template>
+                <template v-slot:loader="{ options }">
+                    <div :class="['flex items-center p-2', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">
+                        <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
+                    </div>
+                </template>
+            </VirtualScroller>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
+<\/script>
+```
+
+## Lazy
+
+Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded on demand. To implement lazy loading, enable the lazy property and implement onLazyLoad callback to return data.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad" class="border border-surface-200 dark:border-surface-700 rounded" style="width: 200px; height: 200px">
+            <template v-slot:item="{ item, options }">
+                <div :class="['flex items-center p-2 text-sm', { 'bg-surface-100 dark:bg-surface-700': options.odd }]" style="height: 50px">{{ item }}</div>
+            </template>
+        </VirtualScroller>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const lazyItems = ref(Array.from({ length: 10000 }));
+const lazyLoading = ref(false);
+const loadLazyTimeout = ref();
+const onLazyLoad = (event) => {
+    lazyLoading.value = true;
+
+    if (loadLazyTimeout.value) {
+        clearTimeout(loadLazyTimeout.value);
+    }
+
+    //imitate delay of a backend call
+    loadLazyTimeout.value = setTimeout(() => {
+        const { first, last } = event;
+        const _lazyItems = [...lazyItems.value];
+
+        for (let i = first; i < last; i++) {
+            _lazyItems[i] = \`Item #\${i}\`;
+        }
+
+        lazyItems.value = _lazyItems;
+        lazyLoading.value = false;
+
+    }, Math.random() * 1000 + 250);
+};
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader VirtualScroller has no specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the container element. Keyboard Support Component does not include any built-in interactive elements.
+
+## Virtual Scroller API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| id | string | - | Unique identifier of the element. |
+| style | any | - | Inline style of the component. |
+| class | any | - | Style class of the component. |
+| items | null \| any[] \| any[][] | - | An array of objects to display. |
+| itemSize | number \| number[] | - | The height/width of item according to orientation. |
+| scrollHeight | string | - | Height of the scroll viewport. |
+| scrollWidth | string | - | Width of the scroll viewport. |
+| orientation | HintedString<"both" \| "horizontal" \| "vertical"> | vertical | The orientation of scrollbar. |
+| numToleratedItems | number | half the number of items shown in the view. | Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. |
+| delay | number | 0 | Delay in scroll before new data is loaded. |
+| resizeDelay | number | 10 | Delay after window's resize finishes. |
+| lazy | boolean | false | Defines if data is loaded and interacted with in lazy manner. |
+| disabled | boolean | false | If disabled, the VirtualScroller feature is eliminated and the content is displayed directly. |
+| loaderDisabled | boolean | false | Used to implement a custom loader instead of using the loader feature in the VirtualScroller. |
+| showLoader | boolean | false | Whether to show loader. |
+| showSpacer | boolean | true | Used to implement a custom spacer instead of using the spacer feature in the VirtualScroller. |
+| loading | boolean | false | Whether to load items. |
+| tabindex | string \| number | 0 | Index of the element in tabbing order. |
+| inline | boolean | false | When enabled, positions the content as inline. |
+| step | number | 0 | Used to specify how many items to load in each load method in lazy mode. |
+| appendOnly | boolean | false | Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash. |
+| autoSize | boolean | false | Whether to dynamically change the height or width of scrollable container. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<VirtualScrollerPassThroughOptions> | - | Used to pass attributes to DOM elements inside the component. |
+| ptOptions | any | - | Used to configure passthrough(pt) options of the component. |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | VirtualScrollerPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| content | VirtualScrollerPassThroughOptionType | Used to pass attributes to the content's DOM element. |
+| loader | VirtualScrollerPassThroughOptionType | Used to pass attributes to the loader's DOM element. |
+| loadingIcon | VirtualScrollerPassThroughOptionType | Used to pass attributes to the loading icon's DOM element. |
+| spacer | VirtualScrollerPassThroughOptionType | Used to pass attributes to the spacer's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-virtualscroller | Class name of the root element |
+| p-virtualscroller-content | Class name of the content element |
+| p-virtualscroller-spacer | Class name of the spacer element |
+| p-virtualscroller-loader | Class name of the loader element |
+| p-virtualscroller-loading-icon | Class name of the loading icon element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| virtualscroller.loader.mask.background | --p-virtualscroller-loader-mask-background | Background of loader mask |
+| virtualscroller.loader.mask.color | --p-virtualscroller-loader-mask-color | Color of loader mask |
+| virtualscroller.loader.icon.size | --p-virtualscroller-loader-icon-size | Size of the loader icon |

package/data/llms/guides/autoimport.md

@@ -0,0 +1,28 @@
+# Auto Import
+
+On-demand PrimeVue components with auto imports and tree-shaking.
+
+## Overview
+
+PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import App from './App.vue'
+const app = createApp(App);
+
+app.use(PrimeVue);
+app.component('InputText', InputText);
+app.component('Button', Button);
+```
+
+## Unplugin
+
+The unplugin-vue-components library can automatically import and register PrimeVue components with the help of @primevue/auto-import-resolver . Begin with installing the packages as dev dependencies. Next step would be adding the PrimeVueResolver at vite.config using the Components plugin. That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the official documentation .
+
+## Example
+
+A complete example using PrimeVue with auto imports is available at the playground .

package/data/llms/guides/cdn.md

@@ -0,0 +1,72 @@
+# Install PrimeVue with CDN
+
+Setting up PrimeVue in a project using CDN.
+
+## Script
+
+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.
+
+```vue
+https://unpkg.com/vue@3/dist/vue.global.js
+https://unpkg.com/primevue@5.0.0-rc.2/umd/primevue.min.js
+https://unpkg.com/@primeuix/themes@3.0.0-rc.1/umd/aura.js  // see theming for alternatives
+```
+
+## Theming
+
+Include the theme preset via a script element after adding PrimeVue, valid options are Aura, Lara, Nora and Material.
+
+## License
+
+Get your PrimeUI license key which is required for the setup process.
+
+## CreateApp
+
+A complete example using a PrimeVue DatePicker.
+
+```vue
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>PrimeVue + CDN</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+    </head>
+    <body>
+        <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
+        <script src="https://unpkg.com/primevue/umd/primevue.min.js"><\/script>
+        <script src="https://unpkg.com/@primeuix/themes/umd/aura.js"><\/script>
+
+        <div id="app">
+            <p-datepicker v-model="date"></p-datepicker>
+            <br /><br />
+            {{ date }}
+        </div>
+
+        <script>
+            const { createApp, ref } = Vue;
+
+            const app = createApp({
+                setup() {
+                    const date = ref();
+
+                    return {
+                        date
+                    };
+                },
+            });
+
+            app.use(PrimeVue.Config, {
+                theme: {
+                    preset: PrimeUIX.Themes.Aura
+                },
+                license: 'PRIMEUI-LICENSE-KEY'
+            });
+
+            app.component('p-datepicker', PrimeVue.DatePicker);
+
+            app.mount('#app');
+        <\/script>
+    </body>
+</html>
+```

package/data/llms/guides/configuration.md

@@ -0,0 +1,158 @@
+# Configuration
+
+Application wide configuration for PrimeVue.
+
+## Import
+
+Configuration is managed by the PrimeVue instance imported from primevue/config .
+
+```vue
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, { /* options */ });
+```
+
+## License
+
+The PrimeUI license key , can be either a free community license or a commercial license.
+
+```vue
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    license: 'PRIMEUI-LICENSE-KEY'
+});
+```
+
+## Theme
+
+Style mode offers theming based on a design token based architecture. See the styled mode documentation for details such as building your own theme.
+
+```vue
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false,
+            cssVariables: true
+        }
+    }
+});
+```
+
+## Unstyled
+
+Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });
+```
+
+## Pass Through
+
+Defines the shared pass through properties per component type. Visit the Pass Through Props documentation for more information.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    pt: {
+        slider: {
+            handle: { class: 'bg-primary text-primary-contrast' }
+        }
+    }
+});
+```
+
+## Pass Through Options
+
+Used to configure the ptOptions properties of components and the usePassThrough method. The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps .
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    ptOptions: {
+        mergeSections: true,
+        mergeProps: false
+    }
+});
+```
+
+## Ripple
+
+Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { ripple: true });
+```
+
+## InputVariant
+
+Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-variant-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputVariant to filled at PrimeVue configuration as well.
+
+```vue
+import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { inputVariant: "filled" });
+```
+
+## ZIndex
+
+ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
+
+```vue
+import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    zIndex: {
+        modal: 1100,        //dialog, drawer
+        overlay: 1000,      //select, popover
+        menu: 1000,         //overlay menus
+        tooltip: 1100       //tooltip
+    }
+});
+```
+
+## Nonce
+
+The nonce value to use on dynamically generated style elements in core.
+
+## Set Locale
+
+Second parameter of the use function can be used to initiate the locale during PrimeVue installation. The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.
+
+## Repository
+
+Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community.
+
+## API
+
+Configuration is managed by the Locale API imported from primevue/config . Locale Options Key Value startsWith Starts with contains Contains notContains Not contains endsWith Ends with equals Equals notEquals Not equals noFilter No Filter lt Less than lte Less than or equal to gt Greater than gte Greater than or equal to dateIs Date is dateIsNot Date is not dateBefore Date is before dateAfter Date is after clear Clear apply Apply matchAll Match All matchAny Match Any addRule Add Rule removeRule Remove Rule accept Yes reject No choose Choose upload Upload cancel Cancel completed Completed pending Pending fileSizeTypes ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' dayNamesShort ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' dayNamesMin ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' monthNames ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' monthNamesShort ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' chooseYear Choose Year chooseMonth Choose Month chooseDate Choose Date prevDecade Previous Decade nextDecade Next Decade prevYear Previous Year nextYear Next Year prevMonth Previous Month nextMonth Next Month prevHour Previous Hour nextHour Next Hour prevMinute Previous Minute nextMinute Next Minute prevSecond Previous Second nextSecond Next Second am am pm pm today Today weekHeader Wk firstDayOfWeek 0 showMonthAfterYear false dateFormat mm/dd/yy weak Weak medium Medium strong Strong passwordPrompt Enter a password searchMessage {0} results are available selectionMessage {0} items selected emptySelectionMessage No selected item emptySearchMessage No results found fileChosenMessage {0} files noFileChosenMessage No file chosen emptyMessage No available options aria.trueLabel True aria.falseLabel False aria.nullLabel Not Selected aria.star 1 star aria.stars {star} stars aria.selectAll All items selected aria.unselectAll All items unselected aria.close Close aria.previous Previous aria.next Next aria.navigation Navigation aria.scrollTop Scroll Top aria.moveTop Move Top aria.moveUp Move Up aria.moveDown Move Down aria.moveBottom Move Bottom aria.moveToTarget Move to Target aria.moveToSource Move to Source aria.moveAllToTarget Move All to Target aria.moveAllToSource Move All to Source aria.pageLabel Page {page} aria.firstPageLabel First Page aria.lastPageLabel Last Page aria.nextPageLabel Next Page aria.prevPageLabel Previous Page aria.rowsPerPageLabel Rows per page aria.jumpToPageDropdownLabel Jump to Page Dropdown aria.jumpToPageInputLabel Jump to Page Input aria.selectRow Row Selected aria.unselectRow Row Unselected aria.expandRow Row Expanded aria.collapseRow Row Collapsed aria.showFilterMenu Show Filter Menu aria.hideFilterMenu Hide Filter Menu aria.filterOperator Filter Operator aria.filterConstraint Filter Constraint aria.editRow Row Edit aria.saveEdit Save Edit aria.cancelEdit Cancel Edit aria.listView List View aria.gridView Grid View aria.slide Slide aria.slideNumber {slideNumber} aria.zoomImage Zoom Image aria.zoomIn Zoom In aria.zoomOut Zoom Out aria.rotateRight Rotate Right aria.rotateLeft Rotate Left

package/data/llms/guides/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/guides/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