@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/paginator.md

@@ -0,0 +1,221 @@
+# Paginator
+
+Paginator displays data in paged format and provides navigation between pages.
+
+## Basic
+
+Paginator is used as a controlled component with first and rows properties to manage the first index and number of records to display per page. Total number of records need to be with totalRecords property. Default template includes a dropdown to change the rows so rowsPerPageOptions is also necessary for the dropdown options.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Paginator v-model:first="first" v-model:rows="rows" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const first = ref(0);
+const rows = ref(10);
+<\/script>
+```
+
+## Template
+
+Templating allows overriding the default content of the UI elements by defining callbacks using the element name.
+
+```vue
+<template>
+    <div class="flex flex-col gap-4">
+        <div class="flex items-center justify-center">
+            <div>
+                <Button type="button" iconOnly variant="outlined"><Star /></Button>
+            </div>
+            <div class="flex-1">
+                <Paginator v-model:first="first1" v-model:rows="rows1" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]" template="PrevPageLink PageLinks NextPageLink RowsPerPageDropdown" />
+            </div>
+            <div class="justify-end">
+                <Button type="button" iconOnly><Search /></Button>
+            </div>
+        </div>
+        <Divider />
+        <div class="flex items-center justify-end">
+            <span class="mx-1 text-color">Items per page: </span>
+            <Select v-model="rows2" :options="options" optionLabel="label" optionValue="value" @change="first2 = 0" />
+            <Paginator v-model:first="first2" v-model:rows="rows2" :totalRecords="120" template="PrevPageLink CurrentPageReport NextPageLink" currentPageReportTemplate="{first} - {last} of {totalRecords}" />
+        </div>
+        <Divider />
+        <div class="flex items-center justify-start">
+            <div class="flex justify-center items-center gap-4">
+                <span>Items per page: </span>
+                <Slider v-model="rows3" @change="first3 = 0" :style="{ width: '10rem' }" :min="10" :max="120" :step="30" />
+            </div>
+            <Paginator v-model:first="first3" v-model:rows="rows3" :totalRecords="totalRecords" template="PrevPageLink PageLinks NextPageLink CurrentPageReport" currentPageReportTemplate="{first} - {last} of {totalRecords}" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Search from '@primeicons/vue/search';
+import Star from '@primeicons/vue/star';
+
+const first1 = ref(0);
+const rows1 = ref(10);
+const first2 = ref(0);
+const rows2 = ref(10);
+const first3 = ref(0);
+const rows3 = ref(10);
+const totalRecords = ref(120);
+const options = ref([
+    { label: 5, value: 5 },
+    { label: 10, value: 10 },
+    { label: 20, value: 20 },
+    { label: 120, value: 120 }
+]);
+<\/script>
+```
+
+## Current Page Report
+
+Current page report item in the template displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following; {currentPage} {totalPages} {rows} {first} {last} {totalRecords}
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Paginator v-model:first="first" v-model:rows="rows" :totalRecords="120" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+            currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const first = ref(0);
+const rows = ref(10);
+<\/script>
+```
+
+## Images
+
+Sample image gallery implementation using paginator.
+
+```vue
+<template>
+    <div class="flex flex-col gap-4 justify-center items-center">
+        <Paginator v-model:first="first" v-model:rows="rows" :totalRecords="12" template="FirstPageLink PrevPageLink JumpToPageDropdown NextPageLink LastPageLink" />
+        <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" class="max-w-full rounded-xl" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const first = ref(0);
+const rows = ref(1);
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader Paginator is placed inside a nav element to indicate a navigation section. All of the paginator elements can be customized using templating however the default behavious is listed below. First, previous, next and last page navigators elements with aria-label attributes referring to the aria.firstPageLabel , aria.prevPageLabel , aria.nextPageLabel and aria.lastPageLabel properties of the locale API respectively. Page links are also button elements with an aria-label attribute derived from the aria.pageLabel of the locale API. Current page is marked with aria-current set to "page" as well. Current page report uses aria-live="polite" to instruct screen reader about the changes to the pagination state. Rows per page dropdown internally uses a dropdown component, refer to the select documentation for accessibility details. Additionally, the dropdown uses an aria-label from the aria.rowsPerPageLabel property of the locale API. Jump to page input is an input element with an aria-label that refers to the aria.jumpToPageInputLabel property and jump to page dropdown internally uses a dropdown component, with an aria-label that refers to the aria.jumpToPageDropdownLabel property of the locale API. Keyboard Support Key Function tab Moves focus through the paginator elements. enter Executes the paginator element action. space Executes the paginator element action. Rows Per Page Dropdown Keyboard Support Refer to the select documentation for more details about keyboard support.
+
+## Paginator API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| totalRecords | number | 0 | Number of total records. |
+| rows | number | 0 | Data count to display per page. |
+| first | number | 0 | Zero-relative number of the first row to be displayed. |
+| pageLinkSize | number | 5 | Number of page links to display. |
+| rowsPerPageOptions | number[] | - | Array of integer values to display inside rows per page dropdown. |
+| template | any | - | Template of the paginator, can either be a string or an object with key-value pairs to define templates per breakpoint. Available templates are the following;  - FirstPageLink - PrevPageLink - PageLinks - NextPageLink - LastPageLink - RowsPerPageDropdown - JumpToPageDropdown - JumpToPageInput - CurrentPageReport |
+| currentPageReportTemplate | string | '({currentPage} of {totalPages})' | Template of the current page report element. It displays information about the pagination state. Available placeholders are the following;  - {currentPage} - {totalPages} - {rows} - {first} - {last} - {totalRecords} |
+| alwaysShow | boolean | true | Whether to show the paginator even there is only one page. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<PaginatorPassThroughOptions<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 |
+| --- | --- | --- |
+| paginatorContainer | any | Used to pass attributes to the paginator container's DOM element. |
+| root | PaginatorPassThroughOptionType<T> | Used to pass attributes to the root's DOM element. |
+| content | PaginatorPassThroughOptionType<T> | Used to pass attributes to the content DOM element. |
+| contentStart | PaginatorPassThroughOptionType<T> | Used to pass attributes to the content start's DOM element. |
+| first | PaginatorPassThroughOptionType<T> | Used to pass attributes to the first page button's DOM element. |
+| firstIcon | PaginatorPassThroughOptionType<T> | Used to pass attributes to the first icon's DOM element. |
+| prev | PaginatorPassThroughOptionType<T> | Used to pass attributes to the prev page button's DOM element. |
+| prevIcon | PaginatorPassThroughOptionType<T> | Used to pass attributes to the prev page icon's DOM element. |
+| next | PaginatorPassThroughOptionType<T> | Used to pass attributes to the next page button's DOM element. |
+| nextIcon | PaginatorPassThroughOptionType<T> | Used to pass attributes to the next page icon's DOM element. |
+| last | PaginatorPassThroughOptionType<T> | Used to pass attributes to the last page button's DOM element. |
+| lastIcon | PaginatorPassThroughOptionType<T> | Used to pass attributes to the last page icon's DOM element. |
+| pages | PaginatorPassThroughOptionType<T> | Used to pass attributes to the pages's DOM element. |
+| page | PaginatorPassThroughOptionType<T> | Used to pass attributes to the page button's DOM element. |
+| current | PaginatorPassThroughOptionType<T> | Used to pass attributes to the current's DOM element. |
+| pcRowPerPageDropdown | any | Used to pass attributes to the Select component. |
+| pcJumpToPageDropdown | any | Used to pass attributes to the Select component. |
+| pcJumpToPageInputText | any | Used to pass attributes to the Dropdown component. |
+| contentEnd | PaginatorPassThroughOptionType<T> | Used to pass attributes to the content end's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-paginator | Class name of the paginator element |
+| p-paginator-content-start | Class name of the content start element |
+| p-paginator-content-end | Class name of the content end element |
+| p-paginator-first | Class name of the first element |
+| p-paginator-first-icon | Class name of the first icon element |
+| p-paginator-prev | Class name of the prev element |
+| p-paginator-prev-icon | Class name of the prev icon element |
+| p-paginator-next | Class name of the next element |
+| p-paginator-next-icon | Class name of the next icon element |
+| p-paginator-last | Class name of the last element |
+| p-paginator-last-icon | Class name of the last icon element |
+| p-paginator-pages | Class name of the pages element |
+| p-paginator-page | Class name of the page element |
+| p-paginator-current | Class name of the current element |
+| p-paginator-rpp-dropdown | Class name of the row per page dropdown element |
+| p-paginator-jtp-dropdown | Class name of the jump to page dropdown element |
+| p-paginator-jtp-input | Class name of the jump to page input element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| paginator.padding | --p-paginator-padding | Padding of root |
+| paginator.gap | --p-paginator-gap | Gap of root |
+| paginator.border.radius | --p-paginator-border-radius | Border radius of root |
+| paginator.background | --p-paginator-background | Background of root |
+| paginator.color | --p-paginator-color | Color of root |
+| paginator.transition.duration | --p-paginator-transition-duration | Transition duration of root |
+| paginator.nav.button.background | --p-paginator-nav-button-background | Background of nav button |
+| paginator.nav.button.hover.background | --p-paginator-nav-button-hover-background | Hover background of nav button |
+| paginator.nav.button.selected.background | --p-paginator-nav-button-selected-background | Selected background of nav button |
+| paginator.nav.button.color | --p-paginator-nav-button-color | Color of nav button |
+| paginator.nav.button.hover.color | --p-paginator-nav-button-hover-color | Hover color of nav button |
+| paginator.nav.button.selected.color | --p-paginator-nav-button-selected-color | Selected color of nav button |
+| paginator.nav.button.width | --p-paginator-nav-button-width | Width of nav button |
+| paginator.nav.button.height | --p-paginator-nav-button-height | Height of nav button |
+| paginator.nav.button.border.radius | --p-paginator-nav-button-border-radius | Border radius of nav button |
+| paginator.nav.button.font.weight | --p-paginator-nav-button-font-weight | Font weight of nav button |
+| paginator.nav.button.font.size | --p-paginator-nav-button-font-size | Font size of nav button |
+| paginator.nav.button.focus.ring.width | --p-paginator-nav-button-focus-ring-width | Focus ring width of nav button |
+| paginator.nav.button.focus.ring.style | --p-paginator-nav-button-focus-ring-style | Focus ring style of nav button |
+| paginator.nav.button.focus.ring.color | --p-paginator-nav-button-focus-ring-color | Focus ring color of nav button |
+| paginator.nav.button.focus.ring.offset | --p-paginator-nav-button-focus-ring-offset | Focus ring offset of nav button |
+| paginator.nav.button.focus.ring.shadow | --p-paginator-nav-button-focus-ring-shadow | Focus ring shadow of nav button |
+| paginator.current.page.report.color | --p-paginator-current-page-report-color | Color of current page report |
+| paginator.current.page.report.font.weight | --p-paginator-current-page-report-font-weight | Font weight of current page report |
+| paginator.current.page.report.font.size | --p-paginator-current-page-report-font-size | Font size of current page report |
+| paginator.jump.to.page.input.max.width | --p-paginator-jump-to-page-input-max-width | Max width of jump to page input |

package/data/llms/components/panel.md

@@ -0,0 +1,321 @@
+# Panel
+
+Panel is a container component with an optional content toggle feature.
+
+## Basic
+
+A simple Panel is created with a header property along with the content as children.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Panel header="Order Summary" class="max-w-xs w-full">
+            <div class="flex flex-col text-sm">
+                <div class="flex justify-between">
+                    <span class="text-muted-color">Wireless Headphones</span>
+                    <span class="text-color font-medium">$79.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-muted-color">Phone Case</span>
+                    <span class="text-color font-medium">$15.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-muted-color">Shipping</span>
+                    <span class="text-color font-medium">$5.99</span>
+                </div>
+                <Divider />
+                <div class="flex justify-between">
+                    <span class="text-color font-semibold">Total</span>
+                    <span class="text-color font-semibold">$99.99</span>
+                </div>
+            </div>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+import Divider from 'primevue/divider';
+import Panel from 'primevue/panel';
+<\/script>
+```
+
+## Toggleable
+
+Content of the panel can be expanded and collapsed using the toggleable property.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Panel header="Order Summary" toggleable class="max-w-xs w-full">
+            <div class="flex flex-col text-sm">
+                <div class="flex justify-between">
+                    <span class="text-muted-color">Wireless Headphones</span>
+                    <span class="text-color font-medium">$79.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-muted-color">Phone Case</span>
+                    <span class="text-color font-medium">$15.00</span>
+                </div>
+                <div class="flex justify-between mt-3">
+                    <span class="text-muted-color">Shipping</span>
+                    <span class="text-color font-medium">$5.99</span>
+                </div>
+                <Divider />
+                <div class="flex justify-between">
+                    <span class="text-color font-semibold">Total</span>
+                    <span class="text-color font-semibold">$99.99</span>
+                </div>
+            </div>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+import Divider from 'primevue/divider';
+import Panel from 'primevue/panel';
+<\/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>
+            <Panel header="Order Summary" toggleable v-model:collapsed="collapsed">
+                <div class="flex flex-col text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-muted-color">Wireless Headphones</span>
+                        <span class="text-color font-medium">$79.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Phone Case</span>
+                        <span class="text-color font-medium">$15.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Shipping</span>
+                        <span class="text-color font-medium">$5.99</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-semibold">Total</span>
+                        <span class="text-color font-semibold">$99.99</span>
+                    </div>
+                </div>
+            </Panel>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Button from 'primevue/button';
+import Divider from 'primevue/divider';
+import Panel from 'primevue/panel';
+
+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>
+            <Panel header="Order Summary" toggleable class="w-full">
+                <template #toggleicon="{ collapsed }">
+                    <Plus v-if="collapsed" />
+                    <Minus v-else />
+                </template>
+                <div class="flex flex-col text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-muted-color">Wireless Headphones</span>
+                        <span class="text-color font-medium">$79.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Phone Case</span>
+                        <span class="text-color font-medium">$15.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Shipping</span>
+                        <span class="text-color font-medium">$5.99</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-semibold">Total</span>
+                        <span class="text-color font-semibold">$99.99</span>
+                    </div>
+                </div>
+            </Panel>
+        </div>
+
+        <div>
+            <h3 class="text-sm! font-medium! text-surface-500! mb-2">CSS-only with data attributes</h3>
+            <Panel header="Order Summary" toggleable class="w-full">
+                <template #toggleicon>
+                    <ChevronDown class="transition-transform duration-200 in-aria-expanded:rotate-180" />
+                </template>
+                <div class="flex flex-col text-sm">
+                    <div class="flex justify-between">
+                        <span class="text-muted-color">Wireless Headphones</span>
+                        <span class="text-color font-medium">$79.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Phone Case</span>
+                        <span class="text-color font-medium">$15.00</span>
+                    </div>
+                    <div class="flex justify-between mt-3">
+                        <span class="text-muted-color">Shipping</span>
+                        <span class="text-color font-medium">$5.99</span>
+                    </div>
+                    <Divider />
+                    <div class="flex justify-between">
+                        <span class="text-color font-semibold">Total</span>
+                        <span class="text-color font-semibold">$99.99</span>
+                    </div>
+                </div>
+            </Panel>
+        </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>
+```
+
+## Template
+
+Header and footer sections can be customized using header and footer templates.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Panel toggleable class="max-w-xs w-full" :pt="{ header: 'p-4!' }">
+            <template #header>
+                <div class="flex items-center gap-2">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </div>
+            </template>
+            <template #icons>
+                <Button severity="secondary" rounded text>
+                    <Cog />
+                </Button>
+            </template>
+            <template #toggleicon="{ collapsed }">
+                <ChevronDown :class="collapsed ? 'transition-transform duration-200' : 'transition-transform duration-200 rotate-180'" />
+            </template>
+            <template #footer>
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center gap-2">
+                        <Button rounded text>
+                            <User />
+                        </Button>
+                        <Button severity="secondary" rounded text>
+                            <Bookmark />
+                        </Button>
+                    </div>
+                    <span class="text-surface-500 dark:text-surface-400 text-sm">Updated 2 hours ago</span>
+                </div>
+            </template>
+            <p class="m-0 text-sm">
+                Product designer focused on accessible interfaces, scalable design systems and modern frontend workflows. Passionate about creating intuitive user experiences that balance usability, consistency and performance across platforms.
+                Currently exploring AI-assisted UI tooling, component architecture and developer experience improvements to streamline design-to-development collaboration and build more maintainable products.
+            </p>
+        </Panel>
+    </div>
+</template>
+
+<script setup>
+import Bookmark from '@primeicons/vue/bookmark';
+import ChevronDown from '@primeicons/vue/chevron-down';
+import Cog from '@primeicons/vue/cog';
+import User from '@primeicons/vue/user';
+import Avatar from 'primevue/avatar';
+import Button from 'primevue/button';
+import Panel from 'primevue/panel';
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader Toggleable panels use a content toggle button at the header that 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 header 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.
+
+## Panel API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| header | string | - | Header text of the panel. |
+| toggleable | boolean | false | Defines if content of panel can be expanded and collapsed. |
+| collapsed | boolean | false | Defines the initial state of panel content. |
+| toggleButtonProps | object | - | Used to pass the custom value to read for the button inside the component. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<PanelPassThroughOptions> | - | 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 | PanelPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| header | PanelPassThroughOptionType | Used to pass attributes to the header's DOM element. |
+| title | PanelPassThroughOptionType | Used to pass attributes to the title's DOM element. |
+| headerActions | PanelPassThroughOptionType | Used to pass attributes to the header actions' DOM element. |
+| pcToggleButton | any | Used to pass attributes to the toggle button button's DOM element. |
+| contentContainer | PanelPassThroughOptionType | Used to pass attributes to the content container's DOM element. |
+| contentWrapper | PanelPassThroughOptionType | Used to pass attributes to the content wrapper DOM element. |
+| content | PanelPassThroughOptionType | Used to pass attributes to the content's DOM element. |
+| footer | PanelPassThroughOptionType | Used to pass attributes to the footer's DOM element. |
+| transition | PanelPassThroughTransitionType | Used to control Vue Transition API. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-panel | Class name of the root element |
+| p-panel-header | Class name of the header element |
+| p-panel-title | Class name of the title element |
+| p-panel-header-actions | Class name of the header actions element |
+| p-panel-toggle-button | Class name of the toggle button element |
+| p-panel-content-container | Class name of the content container element |
+| p-panel-content | Class name of the content element |
+| p-panel-footer | Class name of the footer element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| panel.background | --p-panel-background | Background of root |
+| panel.border.color | --p-panel-border-color | Border color of root |
+| panel.color | --p-panel-color | Color of root |
+| panel.border.radius | --p-panel-border-radius | Border radius of root |
+| panel.header.background | --p-panel-header-background | Background of header |
+| panel.header.color | --p-panel-header-color | Color of header |
+| panel.header.padding | --p-panel-header-padding | Padding of header |
+| panel.header.border.color | --p-panel-header-border-color | Border color of header |
+| panel.header.border.width | --p-panel-header-border-width | Border width of header |
+| panel.header.border.radius | --p-panel-header-border-radius | Border radius of header |
+| panel.toggleable.header.padding | --p-panel-toggleable-header-padding | Padding of toggleable header |
+| panel.title.font.weight | --p-panel-title-font-weight | Font weight of title |
+| panel.title.font.size | --p-panel-title-font-size | Font size of title |
+| panel.content.padding | --p-panel-content-padding | Padding of content |
+| panel.footer.padding | --p-panel-footer-padding | Padding of footer |