@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/components/iconfield.md

@@ -0,0 +1,283 @@
+# IconField
+
+IconField wraps an input and an icon.
+
+## Basic
+
+An input field with an embedded leading or trailing icon.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-4">
+        <IconField>
+            <InputIcon>
+                <Search />
+            </InputIcon>
+            <InputText v-model="value1" type="text" placeholder="Search" />
+        </IconField>
+        <IconField>
+            <InputText v-model="value2" type="text" variant="filled" />
+            <InputIcon>
+                <Spinner class="animate-spin" />
+            </InputIcon>
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Search from '@primeicons/vue/search';
+import Spinner from '@primeicons/vue/spinner';
+
+const value1 = ref(null);
+const value2 = ref(null);
+<\/script>
+```
+
+## Float Label
+
+FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center items-end gap-4">
+        <FloatLabel>
+            <IconField>
+                <InputIcon>
+                    <Search />
+                </InputIcon>
+                <InputText id="over_label" v-model="value1" autocomplete="off" />
+            </IconField>
+            <label for="over_label">Over Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="in">
+            <IconField>
+                <InputIcon>
+                    <Search />
+                </InputIcon>
+                <InputText id="in_label" v-model="value2" autocomplete="off" variant="filled" />
+            </IconField>
+            <label for="in_label">In Label</label>
+        </FloatLabel>
+
+        <FloatLabel variant="on">
+            <IconField>
+                <InputIcon>
+                    <Search />
+                </InputIcon>
+                <InputText id="on_label" v-model="value3" autocomplete="off" />
+            </IconField>
+            <label for="on_label">On Label</label>
+        </FloatLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Search from '@primeicons/vue/search';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+```
+
+## Ifta Label
+
+IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <IftaLabel>
+            <IconField>
+                <InputIcon>
+                    <Envelope />
+                </InputIcon>
+                <InputText id="email" v-model="value" autocomplete="off" variant="filled" />
+                <InputIcon>
+                    <Check />
+                </InputIcon>
+            </IconField>
+            <label for="email">Email</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Check from '@primeicons/vue/check';
+import Envelope from '@primeicons/vue/envelope';
+
+const value = ref(null);
+<\/script>
+```
+
+## Clickable
+
+Icons inside InputIcon can be interactive with event handlers like click.
+
+```vue
+<template>
+    <div class="flex flex-wrap justify-center gap-4">
+        <IconField>
+            <InputIcon>
+                <Search />
+            </InputIcon>
+            <InputText v-model="value" type="text" placeholder="Search" />
+            <InputIcon>
+                <Times class="cursor-pointer" @click="value = ''" />
+            </InputIcon>
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Search from '@primeicons/vue/search';
+import Times from '@primeicons/vue/times';
+
+const value = ref('PrimeVue');
+<\/script>
+```
+
+## Sizes
+
+IconField is compatible with the size setting of the input field.
+
+```vue
+<template>
+    <div class="flex flex-col items-center gap-4">
+        <IconField>
+            <InputIcon>
+                <Search />
+            </InputIcon>
+            <InputText v-model="value1" placeholder="Small" size="small" />
+        </IconField>
+
+        <IconField>
+            <InputText v-model="value2" placeholder="Normal" />
+            <InputIcon>
+                <User />
+            </InputIcon>
+        </IconField>
+
+        <IconField>
+            <InputIcon>
+                <Lock />
+            </InputIcon>
+            <InputText v-model="value3" placeholder="Large" size="large" />
+            <InputIcon>
+                <Spinner class="animate-spin" />
+            </InputIcon>
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Lock from '@primeicons/vue/lock';
+import Search from '@primeicons/vue/search';
+import Spinner from '@primeicons/vue/spinner';
+import User from '@primeicons/vue/user';
+
+const value1 = ref(null);
+const value2 = ref(null);
+const value3 = ref(null);
+<\/script>
+```
+
+## Template
+
+Custom content inside an InputIcon is defined as children.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <IconField>
+            <InputIcon>
+                <svg width="14" height="16" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                        fill="var(--p-primary-color)"
+                    />
+                    <path
+                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                        fill="var(--p-text-color)"
+                    />
+                </svg>
+            </InputIcon>
+            <InputText v-model="value" type="text" placeholder="Search" />
+        </IconField>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader IconField and InputIcon do not require any roles and attributes. Keyboard Support Components does not include any interactive elements.
+
+## Icon Field API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<IconFieldPassThroughOptions<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 | IconFieldPassThroughOptionType<T> | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-iconfield | Class name of the root element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| iconfield.icon.color | --p-iconfield-icon-color | Color of icon |
+
+## Input Icon API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<InputIconPassThroughOptions<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 | InputIconPassThroughOptionType<T> | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-inputicon | Class name of the root element |

package/data/llms/components/iftalabel.md

@@ -0,0 +1,96 @@
+# IftaLabel
+
+IftaLabel is used to create infield top aligned labels.
+
+## Basic
+
+IftaLabel is used by wrapping the input and its label.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+```
+
+## Invalid
+
+When the form element is invalid, the label is also highlighted.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <IftaLabel>
+            <InputText id="username" v-model="value" :invalid="!value" />
+            <label for="username">Username</label>
+        </IftaLabel>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader IftaLabel does not require any roles and attributes. Keyboard Support Component does not include any interactive elements.
+
+## Ifta Label API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<IftaLabelPassThroughOptions> | - | 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 | IftaLabelPassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-iftalabel | Class name of the root element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| iftalabel.color | --p-iftalabel-color | Color of root |
+| iftalabel.focus.color | --p-iftalabel-focus-color | Focus color of root |
+| iftalabel.invalid.color | --p-iftalabel-invalid-color | Invalid color of root |
+| iftalabel.transition.duration | --p-iftalabel-transition-duration | Transition duration of root |
+| iftalabel.position.x | --p-iftalabel-position-x | Position x of root |
+| iftalabel.top | --p-iftalabel-top | Top of root |
+| iftalabel.font.size | --p-iftalabel-font-size | Font size of root |
+| iftalabel.font.weight | --p-iftalabel-font-weight | Font weight of root |
+| iftalabel.input.padding.top | --p-iftalabel-input-padding-top | Padding top of input |
+| iftalabel.input.padding.bottom | --p-iftalabel-input-padding-bottom | Padding bottom of input |

package/data/llms/components/image.md

@@ -0,0 +1,179 @@
+# Image
+
+Displays an image with preview and tranformation options.
+
+## Basic
+
+Image is used as the native img element and supports all properties that the native element has. For multiple image, see Galleria.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
+    </div>
+</template>
+
+<script setup>
+import Image from 'primevue/image';
+<\/script>
+```
+
+## Preview
+
+Preview mode displays a modal layer when the image is clicked that provides transformation options such as rotating and zooming.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+    </div>
+</template>
+
+<script setup>
+import Image from 'primevue/image';
+<\/script>
+```
+
+## Preview Image Source
+
+In case that you want to show different image on preview, you can use the original slot. It could come handy when wanted to use smaller image version at first and bigger one on preview.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="Image" width="250" preview>
+            <template #original="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.previewCallback" />
+            </template>
+        </Image>
+    </div>
+</template>
+
+<script setup>
+import Image from 'primevue/image';
+<\/script>
+```
+
+## Template
+
+An eye icon is displayed by default when the image is hovered in preview mode. Use the previewicon slot for custom content.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <Image alt="Image" preview>
+            <template #previewicon>
+                <Search />
+            </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
+            </template>
+            <template #preview="slotProps">
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.previewCallback" />
+            </template>
+        </Image>
+    </div>
+</template>
+
+<script setup>
+import Image from 'primevue/image';
+import Search from '@primeicons/vue/search';
+<\/script>
+```
+
+## Accessibility
+
+Screen Reader The preview button is a native button element with an aria-label that refers to the aria.zoomImage property of the locale API by default. When preview is active, dialog role with aria-modal is applied to the overlay image container. Button controls use aria.rotateRight , aria.rotateLeft , aria.zoomIn , aria.zoomOut and aria.close from the locale API as aria-label . ButtonBar Keyboard Support When preview is activated, close button receives the initial focus. Key Function tab Moves focus through button bar. enter Activates the button. space Activates the button. esc Closes the image preview.
+
+## Image API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| src | string | - | Image url. |
+| preview | boolean | false | Controls the preview functionality. |
+| imageStyle | any | - | Inline style of the image element. |
+| imageClass | any | - | Style class of the image element. |
+| indicatorIcon | string | - | Custom indicator icon. |
+| previewIcon | string | - | Custom indicator icon. |
+| zoomInDisabled | boolean | false | Disable the zoom-in button |
+| zoomOutDisabled | boolean | false | Disable the zoom-out button |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<ImagePassThroughOptions> | - | 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 | ImagePassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| image | ImagePassThroughOptionType | Used to pass attributes to the image's DOM element. |
+| previewMask | ImagePassThroughOptionType | Used to pass attributes to the preview mask's DOM element. |
+| previewIcon | ImagePassThroughOptionType | Used to pass attributes to the  preview icon's DOM element. |
+| mask | ImagePassThroughOptionType | Used to pass attributes to the mask's DOM element. |
+| toolbar | ImagePassThroughOptionType | Used to pass attributes to the toolbar's DOM element. |
+| rotateRightButton | ImagePassThroughOptionType | Used to pass attributes to the rotate right button's DOM element. |
+| rotateRightIcon | ImagePassThroughOptionType | Used to pass attributes to the rotate right icon's DOM element. |
+| rotateLeftButton | ImagePassThroughOptionType | Used to pass attributes to the rotate left button's DOM element. |
+| rotateLeftIcon | ImagePassThroughOptionType | Used to pass attributes to the rotate left icon's DOM element. |
+| zoomOutButton | ImagePassThroughOptionType | Used to pass attributes to the zoom out button's DOM element. |
+| zoomOutIcon | ImagePassThroughOptionType | Used to pass attributes to the zoom out icon's DOM element. |
+| zoomInButton | ImagePassThroughOptionType | Used to pass attributes to the zoom in button's DOM element. |
+| zoomInIcon | ImagePassThroughOptionType | Used to pass attributes to the zoom in icon's DOM element. |
+| closeButton | ImagePassThroughOptionType | Used to pass attributes to the close button's DOM element. |
+| closeIcon | ImagePassThroughOptionType | Used to pass attributes to the close icon's DOM element. |
+| originalContainer | ImagePassThroughOptionType | Used to pass attributes to the original container's DOM element. |
+| original | ImagePassThroughOptionType | Used to pass attributes to the original's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+| transition | ImagePassThroughTransitionType | Used to control Vue Transition API. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-image | Class name of the root element |
+| p-image-preview-mask | Class name of the preview mask element |
+| p-image-preview-icon | Class name of the preview icon element |
+| p-image-mask | Class name of the mask element |
+| p-image-toolbar | Class name of the toolbar element |
+| p-image-rotate-right-button | Class name of the rotate right button element |
+| p-image-rotate-left-button | Class name of the rotate left button element |
+| p-image-zoom-out-button | Class name of the zoom out button element |
+| p-image-zoom-in-button | Class name of the zoom in button element |
+| p-image-close-button | Class name of the close button element |
+| p-image-original | Class name of the original element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| image.transition.duration | --p-image-transition-duration | Transition duration of root |
+| image.preview.icon.size | --p-image-preview-icon-size | Icon size of preview |
+| image.preview.mask.background | --p-image-preview-mask-background | Mask background of preview |
+| image.preview.mask.color | --p-image-preview-mask-color | Mask color of preview |
+| image.toolbar.position.left | --p-image-toolbar-position-left | Position left of toolbar |
+| image.toolbar.position.right | --p-image-toolbar-position-right | Position right of toolbar |
+| image.toolbar.position.top | --p-image-toolbar-position-top | Position top of toolbar |
+| image.toolbar.position.bottom | --p-image-toolbar-position-bottom | Position bottom of toolbar |
+| image.toolbar.blur | --p-image-toolbar-blur | Blur of toolbar |
+| image.toolbar.background | --p-image-toolbar-background | Background of toolbar |
+| image.toolbar.border.color | --p-image-toolbar-border-color | Border color of toolbar |
+| image.toolbar.border.width | --p-image-toolbar-border-width | Border width of toolbar |
+| image.toolbar.border.radius | --p-image-toolbar-border-radius | Border radius of toolbar |
+| image.toolbar.padding | --p-image-toolbar-padding | Padding of toolbar |
+| image.toolbar.gap | --p-image-toolbar-gap | Gap of toolbar |
+| image.action.hover.background | --p-image-action-hover-background | Hover background of action |
+| image.action.color | --p-image-action-color | Color of action |
+| image.action.hover.color | --p-image-action-hover-color | Hover color of action |
+| image.action.size | --p-image-action-size | Size of action |
+| image.action.icon.size | --p-image-action-icon-size | Icon size of action |
+| image.action.border.radius | --p-image-action-border-radius | Border radius of action |
+| image.action.focus.ring.width | --p-image-action-focus-ring-width | Focus ring width of action |
+| image.action.focus.ring.style | --p-image-action-focus-ring-style | Focus ring style of action |
+| image.action.focus.ring.color | --p-image-action-focus-ring-color | Focus ring color of action |
+| image.action.focus.ring.offset | --p-image-action-focus-ring-offset | Focus ring offset of action |
+| image.action.focus.ring.shadow | --p-image-action-focus-ring-shadow | Focus ring shadow of action |

package/data/llms/components/imagecompare.md

@@ -0,0 +1,108 @@
+# ImageCompare
+
+Compare two images side by side with a slider.
+
+## Basic
+
+Images are defined using templating with left and right templates. Use the style or class properties to define the size of the container.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+```
+
+## Responsive
+
+Apply responsive styles to the container element to optimize display per screen size.
+
+```vue
+<template>
+    <div class="flex justify-center">
+        <ImageCompare class="sm:w-96! shadow-lg rounded-2xl">
+            <template #left>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="https://primefaces.org/cdn/primevue/images/compare/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+```
+
+## Accessibility
+
+Screen Reader ImageComponent component uses a native range slider internally. Value to describe the component can be defined using aria-labelledby and aria-label props. Keyboard Support Key Function tab Moves focus to the component. left arrow up arrow Decrements the value. right arrow down arrow Increments the value. home Set the minimum value. end Set the maximum value. page up Increments the value by 10 steps. page down Decrements the value by 10 steps.
+
+```vue
+<template>
+    <span id="image_label">Compare Images</span>
+    <ImageCompare class="shadow-lg rounded-2xl" aria-labelledby="image-label">
+        ...
+    </ImageCompare>
+
+    <ImageCompare class="shadow-lg rounded-2xl" aria-label="Compare Images">
+        ...
+    </ImageCompare>
+</template>
+```
+
+## Image Compare API
+
+### Props
+
+| Name |Type |Default |Description |
+| --- | --- | --- | --- |
+| tabindex | number | 0 | Index of the element in tabbing order. |
+| ariaLabel | string | - | Defines a string value that labels an interactive element. |
+| ariaLabelledby | string | - | Identifier of the underlying input element. |
+| dt | any | - | It generates scoped CSS variables using design tokens for the component. |
+| pt | PassThrough<ImageComparePassThroughOptions> | - | 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 | ImageComparePassThroughOptionType | Used to pass attributes to the root's DOM element. |
+| slider | ImageComparePassThroughOptionType | Used to pass attributes to the slider's DOM element. |
+| hooks | any | Used to manage all lifecycle hooks. |
+
+### Theming
+
+### CSS Classes
+
+| Class |Description |
+| --- | --- |
+| p-imagecompare | Class name of the root element |
+| p-imagecompare-slider | Class name of the slider element |
+
+### Design Tokens
+
+| Token |CSS Variable |Description |
+| --- | --- | --- |
+| imagecompare.handle.size | --p-imagecompare-handle-size | Size of handle |
+| imagecompare.handle.hover.size | --p-imagecompare-handle-hover-size | Hover size of handle |
+| imagecompare.handle.background | --p-imagecompare-handle-background | Background of handle |
+| imagecompare.handle.hover.background | --p-imagecompare-handle-hover-background | Hover background of handle |
+| imagecompare.handle.border.color | --p-imagecompare-handle-border-color | Border color of handle |
+| imagecompare.handle.hover.border.color | --p-imagecompare-handle-hover-border-color | Hover border color of handle |
+| imagecompare.handle.border.width | --p-imagecompare-handle-border-width | Border width of handle |
+| imagecompare.handle.border.radius | --p-imagecompare-handle-border-radius | Border radius of handle |
+| imagecompare.handle.transition.duration | --p-imagecompare-handle-transition-duration | Transition duration of handle |
+| imagecompare.handle.focus.ring.width | --p-imagecompare-handle-focus-ring-width | Focus ring width of handle |
+| imagecompare.handle.focus.ring.style | --p-imagecompare-handle-focus-ring-style | Focus ring style of handle |
+| imagecompare.handle.focus.ring.color | --p-imagecompare-handle-focus-ring-color | Focus ring color of handle |
+| imagecompare.handle.focus.ring.offset | --p-imagecompare-handle-focus-ring-offset | Focus ring offset of handle |
+| imagecompare.handle.focus.ring.shadow | --p-imagecompare-handle-focus-ring-shadow | Focus ring shadow of handle |