@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/dynamicdialog.md

@@ -0,0 +1,214 @@
+# Dynamic Dialog
+
+Dialogs can be created dynamically with any component as the content using a DialogService.
+
+## Dialog Service
+
+A single shared dialog instance is required in the application, ideal location would be defining it once at the main application template. A dynamic dialog is controlled via the DialogService that needs to be installed as an application plugin. The service is available with the useDialog function for Composition API or using the $dialog property of the application for Options API.
+
+## Opening a Dialog
+
+The open function of the DialogService is used to open a Dialog. First parameter is the component to load and second one is the configuration object to customize the Dialog. The component can also be loaded asynchronously, this approach is useful in conditional cases and to improve initial load times as well.
+
+## Customization
+
+DynamicDialog uses the Dialog component internally, visit dialog for more information about the available props.
+
+```vue
+import ProductListDemo from './ProductListDemo';
+import { useDialog } from 'primevue/usedialog';
+
+const dialog = useDialog();
+
+const showProducts = () => {
+    dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        }
+    });
+}
+```
+
+## Passing Data
+
+Use the data property to pass parameters when opening a Dialog, the internal component can later access this data using dialogRef . Similarly when hiding a Dialog, any parameter passed to the close function is received from the onClose callback.
+
+## Closing a Dialog
+
+Most of the time, the requirement is returning a value from the dialog. The close function of the dialogRef is used for this purpose where the parameter passed will be available through the onClose callback at the caller. The dialogRef is injected to the component loaded by the dialog.
+
+## Events
+
+The emits object defines callbacks to handle events emitted by the component within the Dialog.
+
+## Example
+
+A sample implementation to demonstrate loading components asynchronously, nested content and passing data.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Button @click="showProducts">
+            <Search />
+            Select a Product
+        </Button>
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script setup>
+import Search from '@primeicons/vue/search';
+import { markRaw, defineAsyncComponent } from 'vue';
+import { useDialog } from 'primevue/usedialog';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
+
+const dialog = useDialog();
+const toast = useToast();
+
+const showProducts = () => {
+    const dialogRef = dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        },
+        templates: {
+            footer: markRaw(FooterDemo)
+        },
+        onClose: (options) => {
+            const data = options.data;
+            if (data) {
+                const buttonType = data.buttonType;
+                const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
+
+                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
+            }
+        }
+    });
+}
+<\/script>
+```
+
+## Accessibility
+
+Visit accessibility section of dialog component for more information.
+
+## Dynamic Dialog API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| unstyled | boolean | false | When enabled, it removes component related styles in the core. |
+
+### Theming
+
+## Dialog API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| header | string | - | Title content of the dialog. |
+| footer | string | - | Footer content of the dialog. |
+| visible | boolean | false | Specifies the visibility of the dialog. |
+| modal | boolean | false | Defines if background should be blocked when dialog is displayed. |
+| contentStyle | any | - | Style of the content section. |
+| contentClass | any | - | Style class of the content section. |
+| contentProps | HTMLAttributes | - | Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component. |
+| closable | boolean | true | Adds a close icon to the header to hide the dialog. |
+| dismissableMask | boolean | false | Specifies if clicking the modal background should hide the dialog. |
+| closeOnEscape | boolean | true | Specifies if pressing escape key should hide the dialog. |
+| showHeader | boolean | true | Whether to show the header or not. |
+| blockScroll | boolean | false | Whether background scroll should be blocked when dialog is visible. |
+| baseZIndex | number | 0 | Base zIndex value to use in layering. |
+| autoZIndex | boolean | true | Whether to automatically manage layering. |
+| position | HintedString<"left" \| "right" \| "top" \| "bottom" \| "center" \| "topleft" \| "topright" \| "bottomleft" \| "bottomright"> | center | Position of the dialog. |
+| maximizable | boolean | false | Whether the dialog can be displayed full screen. |
+| breakpoints | DialogBreakpoints | - | Object literal to define widths per screen size. |
+| draggable | boolean | true | Enables dragging to change the position using header. |
+| keepInViewport | boolean | true | Keeps dialog in the viewport when dragging. |
+| minX | number | 0. | Minimum value for the left coordinate of dialog in dragging. |
+| minY | number | 0 | Minimum value for the top coordinate of dialog in dragging. |
+| appendTo | HTMLElement \| HintedString<"body" \| "self"> | body | A valid query selector or an HTMLElement to specify where the dialog gets attached. |
+| style | any | - | Style of the dynamic dialog. |
+| closeIcon | string | - | Icon to display in the dialog close button. |
+| maximizeIcon | string | - | Icon to display in the dialog maximize button when dialog is not maximized. |
+| minimizeIcon | string | - | Icon to display in the dialog maximize button when dialog is minimized. |
+| closeButtonProps | object | - | Used to pass all properties of the ButtonProps to the Button component. |
+| maximizeButtonProps | object | - | Used to pass all properties of the ButtonProps to the Button component. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<DialogPassThroughOptions<any>> | - | 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 | DialogPassThroughOptionType<T> | Used to pass attributes to the root's DOM element. |
+| header | DialogPassThroughOptionType<T> | Used to pass attributes to the header's DOM element. |
+| title | DialogPassThroughOptionType<T> | Used to pass attributes to the header title's DOM element. |
+| headerActions | DialogPassThroughOptionType<T> | Used to pass attributes to the header actions' DOM element. |
+| pcMaximizeButton | any | Used to pass attributes to the maximize Button component. |
+| pcCloseButton | any | Used to pass attributes to the close Button component. |
+| content | DialogPassThroughOptionType<T> | Used to pass attributes to the content's DOM element. |
+| footer | DialogPassThroughOptionType<T> | Used to pass attributes to the footer's DOM element. |
+| mask | DialogPassThroughOptionType<T> | Used to pass attributes to the mask's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+| transition | DialogPassThroughTransitionType<T> | Used to control Vue Transition API. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-dialog-mask | Class name of the mask element |
+| p-dialog | Class name of the root element |
+| p-dialog-header | Class name of the header element |
+| p-dialog-title | Class name of the title element |
+| p-dialog-header-actions | Class name of the header actions element |
+| p-dialog-maximize-button | Class name of the maximize button element |
+| p-dialog-close-button | Class name of the close button element |
+| p-dialog-content | Class name of the content element |
+| p-dialog-footer | Class name of the footer element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| dialog.background | --p-dialog-background | Background of root |
+| dialog.border.color | --p-dialog-border-color | Border color of root |
+| dialog.color | --p-dialog-color | Color of root |
+| dialog.border.radius | --p-dialog-border-radius | Border radius of root |
+| dialog.shadow | --p-dialog-shadow | Shadow of root |
+| dialog.header.padding | --p-dialog-header-padding | Padding of header |
+| dialog.header.gap | --p-dialog-header-gap | Gap of header |
+| dialog.title.font.size | --p-dialog-title-font-size | Font size of title |
+| dialog.title.font.weight | --p-dialog-title-font-weight | Font weight of title |
+| dialog.content.padding | --p-dialog-content-padding | Padding of content |
+| dialog.footer.padding | --p-dialog-footer-padding | Padding of footer |
+| dialog.footer.gap | --p-dialog-footer-gap | Gap of footer |
+
+## Dialog Service Use Dialog API
+
+## Dynamic Dialog Options API

package/data/llms/components/editor.md

@@ -0,0 +1,205 @@
+# Editor
+
+Editor is rich text editor component based on Quill.
+
+## Quill
+
+Editor uses Quill editor underneath so it needs to be installed as a dependency.
+
+```vue
+npm install quill
+```
+
+## Basic
+
+A model can be bound using the standard v-model directive.
+
+```vue
+<template>
+    <div>
+        <Editor v-model="value" editorStyle="height: 320px" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref('');
+<\/script>
+```
+
+## ReadOnly
+
+When readonly is present, the value cannot be edited.
+
+```vue
+<template>
+    <div>
+        <Editor v-model="value" editorStyle="height: 320px" readonly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref('Always bet on Prime!');
+<\/script>
+```
+
+## Template
+
+Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.
+
+```vue
+<template>
+    <div>
+        <Editor v-model="value" editorStyle="height: 320px">
+            <template v-slot:toolbar>
+                <span class="ql-formats">
+                    <button type="button" class="ql-bold" aria-label="Bold"></button>
+                    <button type="button" class="ql-italic" aria-label="Italic"></button>
+                    <button type="button" class="ql-underline" aria-label="Underline"></button>
+                </span>
+            </template>
+        </Editor>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref('<div>Hello World!</div><div>PrimeVue <b>Editor</b> Rocks</div><div><br></div>');
+<\/script>
+```
+
+## Forms
+
+Editor integrates seamlessly with the PrimeVue Forms library.
+
+```vue
+<template>
+    <div>
+        <Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+                <Editor name="content" editorStyle="height: 320px" />
+                <Message v-if="$form.content?.invalid" severity="error" size="small" variant="simple">{{ $form.content.error?.message }}</Message>
+            </div>
+            <Button type="submit" severity="secondary">Submit</Button>
+        </Form>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { zodResolver } from '@primevue/forms/resolvers/zod';
+import { useToast } from "primevue/usetoast";
+import { z } from 'zod';
+
+const toast = useToast();
+const initialValues = ref({
+    content: ''
+});
+const resolver = ref(zodResolver(
+    z.object({
+        content: z.string().min(1, { message: 'Content is required.' })
+    })
+));
+
+const onFormSubmit = ({ valid }) => {
+    if (valid) {
+        toast.add({ severity: 'success', summary: 'Form is submitted.', life: 3000 });
+    }
+};
+<\/script>
+```
+
+## Accessibility
+
+Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support for dropdowns in the toolbar that may be overcome with a custom toolbar.
+
+## Editor API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| modelValue | string | - | Value of the content. |
+| defaultValue | any | - | The default value for the input when not controlled by  `modelValue` . |
+| name | string | - | The name attribute for the element, typically used in form submissions. |
+| placeholder | string | - | Placeholder text to show when editor is empty. |
+| readonly | boolean | false | Whether to instantiate the editor to readonly mode. |
+| invalid | boolean | false | When present, it specifies that the component should have invalid state style. |
+| formats | any[] | - | Whitelist of formats to display, see  <a target="_blank" href="https://quilljs.com/docs/formats/">here</a>  for available options. |
+| editorStyle | any | - | Inline style of the container. |
+| modules | any | - | Modules configuration, see  <a target="_blank" href="https://quilljs.com/docs/modules/">here</a>  for available options. |
+| formControl | Record<string, any> | - | Form control object, typically used for handling validation and form state. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<EditorPassThroughOptions> | - | 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. |
+
+### Slots
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| toolbar | Function |  |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | EditorPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| toolbar | EditorPassThroughOptionType | Used to pass attributes to the toolbar's DOM element. |
+| formats | EditorPassThroughOptionType | Used to pass attributes to the formats' DOM element. |
+| header | EditorPassThroughOptionType | Used to pass attributes to the header's DOM element. |
+| option | EditorPassThroughOptionType | Used to pass attributes to the option's DOM element. |
+| bold | EditorPassThroughOptionType | Used to pass attributes to the bold's DOM element. |
+| italic | EditorPassThroughOptionType | Used to pass attributes to the italic's DOM element. |
+| underline | EditorPassThroughOptionType | Used to pass attributes to the underline's DOM element. |
+| color | EditorPassThroughOptionType | Used to pass attributes to the color's DOM element. |
+| background | EditorPassThroughOptionType | Used to pass attributes to the background's DOM element. |
+| list | EditorPassThroughOptionType | Used to pass attributes to the list's DOM element. |
+| select | EditorPassThroughOptionType | Used to pass attributes to the select's DOM element. |
+| link | EditorPassThroughOptionType | Used to pass attributes to the link's DOM element. |
+| image | EditorPassThroughOptionType | Used to pass attributes to the image's DOM element. |
+| codeBlock | EditorPassThroughOptionType | Used to pass attributes to the code block's DOM element. |
+| clean | EditorPassThroughOptionType | Used to pass attributes to the clean's DOM element. |
+| content | EditorPassThroughOptionType | Used to pass attributes to the content's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-editor | Class name of the root element |
+| p-editor-toolbar | Class name of the toolbar element |
+| p-editor-content | Class name of the content element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| editor.toolbar.background | --p-editor-toolbar-background | Background of toolbar |
+| editor.toolbar.border.color | --p-editor-toolbar-border-color | Border color of toolbar |
+| editor.toolbar.border.radius | --p-editor-toolbar-border-radius | Border radius of toolbar |
+| editor.toolbar.item.color | --p-editor-toolbar-item-color | Color of toolbar item |
+| editor.toolbar.item.hover.color | --p-editor-toolbar-item-hover-color | Hover color of toolbar item |
+| editor.toolbar.item.active.color | --p-editor-toolbar-item-active-color | Active color of toolbar item |
+| editor.toolbar.item.padding | --p-editor-toolbar-item-padding | Padding of toolbar item |
+| editor.overlay.background | --p-editor-overlay-background | Background of overlay |
+| editor.overlay.border.color | --p-editor-overlay-border-color | Border color of overlay |
+| editor.overlay.border.radius | --p-editor-overlay-border-radius | Border radius of overlay |
+| editor.overlay.color | --p-editor-overlay-color | Color of overlay |
+| editor.overlay.shadow | --p-editor-overlay-shadow | Shadow of overlay |
+| editor.overlay.padding | --p-editor-overlay-padding | Padding of overlay |
+| editor.overlay.option.focus.background | --p-editor-overlay-option-focus-background | Focus background of overlay option |
+| editor.overlay.option.color | --p-editor-overlay-option-color | Color of overlay option |
+| editor.overlay.option.focus.color | --p-editor-overlay-option-focus-color | Focus color of overlay option |
+| editor.overlay.option.padding | --p-editor-overlay-option-padding | Padding of overlay option |
+| editor.overlay.option.border.radius | --p-editor-overlay-option-border-radius | Border radius of overlay option |
+| editor.content.background | --p-editor-content-background | Background of content |
+| editor.content.border.color | --p-editor-content-border-color | Border color of content |
+| editor.content.color | --p-editor-content-color | Color of content |
+| editor.content.border.radius | --p-editor-content-border-radius | Border radius of content |

package/data/llms/components/fieldset.md

@@ -0,0 +1,253 @@
+# Fieldset
+
+Fieldset is a grouping component with a content toggle feature.
+
+## Basic
+
+A simple Fieldset is created with a legend property along with the content as children.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Fieldset legend="Invoice #1024" class="max-w-xs w-full">
+            <div class="flex flex-col text-sm p-2">
+                <div class="flex justify-between">
+                    <span class="text-color">Design Service</span>
+                    <span class="text-muted-color">$120.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-color">Hosting</span>
+                    <span class="text-muted-color">$30.00</span>
+                </div>
+                <Divider />
+                <div class="flex justify-between">
+                    <span class="text-color font-medium">Total</span>
+                    <span class="text-color font-medium">$150.00</span>
+                </div>
+            </div>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+```
+
+## Toggleable
+
+Content of the fieldset can be expanded and collapsed using the toggleable property.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Fieldset legend="Invoice #1024" :toggleable="true" class="max-w-xs w-full">
+            <div class="flex flex-col text-sm p-2">
+                <div class="flex justify-between">
+                    <span class="text-color">Design Service</span>
+                    <span class="text-muted-color">$120.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-color">Hosting</span>
+                    <span class="text-muted-color">$30.00</span>
+                </div>
+                <Divider />
+                <div class="flex justify-between">
+                    <span class="text-color font-medium">Total</span>
+                    <span class="text-color font-medium">$150.00</span>
+                </div>
+            </div>
+        </Fieldset>
+    </div>
+</template>
+
+<script setup>
+<\/script>
+```
+
+## Controlled
+
+The collapsed property with two-way binding controls the open state programmatically.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <div class="space-y-4 max-w-xs w-full">
+            <div class="flex gap-2 justify-center">
+                <Button :severity="!collapsed ? 'primary' : 'secondary'" @click="collapsed = false">Open</Button>
+                <Button :severity="collapsed ? 'primary' : 'secondary'" @click="collapsed = true">Close</Button>
+            </div>
+            <Fieldset legend="Invoice #1024" :toggleable="true" v-model:collapsed="collapsed">
+                <div class="flex flex-col text-sm p-2">
+                    <div class="flex justify-between">
+                        <span class="text-color">Design Service</span>
+                        <span class="text-muted-color">$120.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-color">Hosting</span>
+                        <span class="text-muted-color">$30.00</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-medium">Total</span>
+                        <span class="text-color font-medium">$150.00</span>
+                    </div>
+                </div>
+            </Fieldset>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const collapsed = ref(false);
+<\/script>
+```
+
+## Indicator
+
+The toggleicon slot customizes the indicator. It can switch between two icons using the collapsed context variable, or render a single icon that animates purely with CSS by targeting the toggle button's aria-expanded state.
+
+```vue
+<template>
+    <div class="flex flex-col gap-8 max-w-xs mx-auto">
+        <div>
+            <h3 class="text-sm! font-medium! text-surface-500! mb-2">Match open / closed</h3>
+            <Fieldset legend="Invoice #1024" :toggleable="true" class="w-full">
+                <template #toggleicon="{ collapsed }">
+                    <Plus v-if="collapsed" />
+                    <Minus v-else />
+                </template>
+                <div class="flex flex-col text-sm p-2">
+                    <div class="flex justify-between">
+                        <span class="text-color">Design Service</span>
+                        <span class="text-muted-color">$120.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-color">Hosting</span>
+                        <span class="text-muted-color">$30.00</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-medium">Total</span>
+                        <span class="text-color font-medium">$150.00</span>
+                    </div>
+                </div>
+            </Fieldset>
+        </div>
+
+        <div>
+            <h3 class="text-sm! font-medium! text-surface-500! mb-2">CSS-only with data attributes</h3>
+            <Fieldset legend="Invoice #1024" :toggleable="true" class="w-full">
+                <template #toggleicon>
+                    <ChevronDown class="transition-transform duration-200 in-aria-expanded:rotate-180" />
+                </template>
+                <div class="flex flex-col text-sm p-2">
+                    <div class="flex justify-between">
+                        <span class="text-color">Design Service</span>
+                        <span class="text-muted-color">$120.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-color">Hosting</span>
+                        <span class="text-muted-color">$30.00</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-medium">Total</span>
+                        <span class="text-color font-medium">$150.00</span>
+                    </div>
+                </div>
+            </Fieldset>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import ChevronDown from '@primeicons/vue/chevron-down';
+import Minus from '@primeicons/vue/minus';
+import Plus from '@primeicons/vue/plus';
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader Fieldset component uses the semantic fieldset element. When toggleable option is enabled, a clickable element with button role is included inside the legend element, this button has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the legend property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property. The content uses region , defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header. Content Toggle Button Keyboard Support Key Function tab Moves focus to the next the focusable element in the page tab sequence. shift + tab Moves focus to the previous the focusable element in the page tab sequence. enter Toggles the visibility of the content. space Toggles the visibility of the content.
+
+## Fieldset API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| legend | string | - | Header text of the fieldset. |
+| toggleable | boolean | false | When specified, content can toggled by clicking the legend. |
+| collapsed | boolean | false | Defines the default visibility state of the content. |
+| toggleButtonProps | AnchorHTMLAttributes | - | Used to pass the custom value to read for the AnchorHTMLAttributes inside the component. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<FieldsetPassThroughOptions> | - | 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. |
+
+### Slots
+
+| Name |Parameters |Description |
+| --- | --- | --- |
+| default | Function |  |
+
+### Pass Through Options
+
+| Name |Type |Description |
+| --- | --- | --- |
+| root | FieldsetPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| legend | FieldsetPassThroughOptionType | Used to pass attributes to the legend's DOM element. |
+| toggleButton | FieldsetPassThroughOptionType | Used to pass attributes to the toggle button's DOM element. |
+| toggleIcon | FieldsetPassThroughOptionType | Used to pass attributes to the toggle icon's DOM element. |
+| legendLabel | FieldsetPassThroughOptionType | Used to pass attributes to the legend label's DOM element. |
+| contentContainer | FieldsetPassThroughOptionType | Used to pass attributes to the content container's DOM element. |
+| contentWrapper | FieldsetPassThroughOptionType | Used to pass attributes to the content wrapper DOM element. |
+| content | FieldsetPassThroughOptionType | Used to pass attributes to the content's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+| transition | FieldsetPassThroughTransitionType | Used to control Vue Transition API. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-fieldset | Class name of the root element |
+| p-fieldset-legend | Class name of the legend element |
+| p-fieldset-legend-label | Class name of the legend label element |
+| p-fieldset-toggle-icon | Class name of the toggle icon element |
+| p-fieldset-content-container | Class name of the content container element |
+| p-fieldset-content | Class name of the content element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| fieldset.background | --p-fieldset-background | Background of root |
+| fieldset.border.color | --p-fieldset-border-color | Border color of root |
+| fieldset.border.radius | --p-fieldset-border-radius | Border radius of root |
+| fieldset.color | --p-fieldset-color | Color of root |
+| fieldset.padding | --p-fieldset-padding | Padding of root |
+| fieldset.transition.duration | --p-fieldset-transition-duration | Transition duration of root |
+| fieldset.legend.background | --p-fieldset-legend-background | Background of legend |
+| fieldset.legend.hover.background | --p-fieldset-legend-hover-background | Hover background of legend |
+| fieldset.legend.color | --p-fieldset-legend-color | Color of legend |
+| fieldset.legend.hover.color | --p-fieldset-legend-hover-color | Hover color of legend |
+| fieldset.legend.border.radius | --p-fieldset-legend-border-radius | Border radius of legend |
+| fieldset.legend.border.width | --p-fieldset-legend-border-width | Border width of legend |
+| fieldset.legend.border.color | --p-fieldset-legend-border-color | Border color of legend |
+| fieldset.legend.padding | --p-fieldset-legend-padding | Padding of legend |
+| fieldset.legend.gap | --p-fieldset-legend-gap | Gap of legend |
+| fieldset.legend.font.weight | --p-fieldset-legend-font-weight | Font weight of legend |
+| fieldset.legend.font.size | --p-fieldset-legend-font-size | Font size of legend |
+| fieldset.legend.focus.ring.width | --p-fieldset-legend-focus-ring-width | Focus ring width of legend |
+| fieldset.legend.focus.ring.style | --p-fieldset-legend-focus-ring-style | Focus ring style of legend |
+| fieldset.legend.focus.ring.color | --p-fieldset-legend-focus-ring-color | Focus ring color of legend |
+| fieldset.legend.focus.ring.offset | --p-fieldset-legend-focus-ring-offset | Focus ring offset of legend |
+| fieldset.legend.focus.ring.shadow | --p-fieldset-legend-focus-ring-shadow | Focus ring shadow of legend |
+| fieldset.toggle.icon.color | --p-fieldset-toggle-icon-color | Color of toggle icon |
+| fieldset.toggle.icon.hover.color | --p-fieldset-toggle-icon-hover-color | Hover color of toggle icon |
+| fieldset.content.padding | --p-fieldset-content-padding | Padding of content |