Merge branch 'master' of https://github.com/primefaces/primevue

apps/showcase/doc/common/apidoc/index.json

@@ -8517,6 +8517,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the label's DOM element."
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "CascadeSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the label's DOM element."
+                        },
                         {
                             "name": "dropdown",
                             "optional": true,
@@ -8950,6 +8958,22 @@
                             "default": "",
                             "description": "A property to uniquely identify an option."
                         },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to display in clear button."
+                        },
                         {
                             "name": "inputId",
                             "optional": true,
@@ -9298,6 +9322,19 @@
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom footer template."
+                        },
+                        {
+                            "name": "clearicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">clearCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Clear icon click function.</span>\n}",
+                                    "description": "clear icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom clear icon template."
                         }
                     ]
                 },
@@ -9545,6 +9582,13 @@
                             "value": "\"p-cascadeselect-loading-icon\"",
                             "description": "Class name of the loading icon element"
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": false,
+                            "readonly": false,
+                            "value": "\"p-cascadeselect-clear-icon\"",
+                            "description": "Class name of the dropdown icon element"
+                        },
                         {
                             "name": "dropdownIcon",
                             "optional": false,
@@ -42307,6 +42351,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the label's DOM element."
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "MultiSelectPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the label's DOM element."
+                        },
                         {
                             "name": "chipItem",
                             "optional": true,
@@ -42807,6 +42859,30 @@
                             "default": "",
                             "description": "A property to uniquely identify an option."
                         },
+                        {
+                            "name": "showClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, a clear icon is displayed to clear the value."
+                        },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Icon to display in clear button."
+                        },
+                        {
+                            "name": "resetFilterOnClear",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Clears the filter value when clicking on the clear icon."
+                        },
                         {
                             "name": "filter",
                             "optional": true,
@@ -43314,6 +43390,19 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom loading icon template."
                         },
+                        {
+                            "name": "clearicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">clearCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Clear icon click function.</span>\n}",
+                                    "description": "clear icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom clear icon template."
+                        },
                         {
                             "name": "dropdownicon",
                             "parameters": [
@@ -77210,6 +77299,14 @@
                             "default": "",
                             "description": "Used to pass tokens of the option section"
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the clear icon section"
+                        },
                         {
                             "name": "colorScheme",
                             "optional": true,
@@ -77677,6 +77774,15 @@
                             "type": "string",
                             "default": "",
                             "description": "Icon size of option"
+                        },
+                        {
+                            "name": "clearIcon.color",
+                            "token": "cascadeselect.clear.icon.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color of clear icon"
                         }
                     ]
                 }
@@ -89066,6 +89172,14 @@
                             "default": "",
                             "description": "Used to pass tokens of the option group section"
                         },
+                        {
+                            "name": "clearIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Object",
+                            "default": "",
+                            "description": "Used to pass tokens of the clear icon section"
+                        },
                         {
                             "name": "chip",
                             "optional": true,
@@ -89561,6 +89675,15 @@
                             "default": "",
                             "description": "Padding of option group"
                         },
+                        {
+                            "name": "clearIcon.color",
+                            "token": "multiselect.clear.icon.color",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Color of clear icon"
+                        },
                         {
                             "name": "chip.borderRadius",
                             "token": "multiselect.chip.border.radius",

packages/primevue/src/cascadeselect/BaseCascadeSelect.vue

@@ -18,6 +18,14 @@ export default {
             default: '960px'
         },
         dataKey: null,
+        showClear: {
+            type: Boolean,
+            default: false
+        },
+        clearIcon: {
+            type: String,
+            default: undefined
+        },
         inputId: {
             type: String,
             default: null

packages/primevue/src/cascadeselect/CascadeSelect.d.ts

@@ -88,6 +88,10 @@ export interface CascadeSelectPassThroughOptions {
      * Used to pass attributes to the label's DOM element.
      */
     label?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    clearIcon?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the dropdown button's DOM element.
      */
@@ -327,6 +331,15 @@ export interface CascadeSelectProps {
      * A property to uniquely identify an option.
      */
     dataKey?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Icon to display in clear button.
+     */
+    clearIcon?: string | undefined;
     /**
      * Identifier of the underlying input element.
      */
@@ -553,6 +566,17 @@ export interface CascadeSelectSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
 }
 
 /**

packages/primevue/src/cascadeselect/CascadeSelect.vue

@@ -30,6 +30,9 @@
                 {{ label }}
             </slot>
         </span>
+        <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
+        </slot>
         <div :class="cx('dropdown')" role="button" tabindex="-1" v-bind="ptm('dropdown')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
@@ -101,6 +104,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import BaseCascadeSelect from './BaseCascadeSelect.vue';
 import CascadeSelectSub from './CascadeSelectSub.vue';
+import TimesIcon from '@primevue/icons/times';
 
 export default {
     name: 'CascadeSelect',
@@ -383,7 +387,9 @@ export default {
                 return;
             }
 
-            if (!this.overlay || !this.overlay.contains(event.target)) {
+            if (event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+                return;
+            } else if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide() : this.show();
                 focus(this.$refs.focusInput);
             }
@@ -391,6 +397,9 @@ export default {
             this.clicked = true;
             this.$emit('click', event);
         },
+        onClearClick(event) {
+            this.updateModel(event, null);
+        },
         onOverlayClick(event) {
             OverlayEventBus.emit('overlay-click', {
                 originalEvent: event,
@@ -841,14 +850,18 @@ export default {
         },
         focusedOptionId() {
             return this.focusedOptionInfo.index !== -1 ? `${this.id}${isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
+        },
+        isClearIconVisible() {
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         }
     },
     components: {
-        CascadeSelectSub: CascadeSelectSub,
+        CascadeSelectSub,
-        Portal: Portal,
+        Portal,
-        ChevronDownIcon: ChevronDownIcon,
+        ChevronDownIcon,
-        SpinnerIcon: SpinnerIcon,
+        SpinnerIcon,
-        AngleRightIcon: AngleRightIcon
+        AngleRightIcon,
+        TimesIcon
     }
 };
 </script>

packages/primevue/src/cascadeselect/style/CascadeSelectStyle.d.ts

@@ -26,6 +26,10 @@ export enum CascadeSelectClasses {
      * Class name of the loading icon element
      */
     loadingIcon = 'p-cascadeselect-loading-icon',
+    /**
+     * Class name of the dropdown icon element
+     */
+    clearIcon = 'p-cascadeselect-clear-icon',
     /**
      * Class name of the dropdown icon element
      */

packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js

@@ -60,6 +60,14 @@ const theme = ({ dt }) => `
     border-end-end-radius: ${dt('border.radius.md')};
 }
 
+.p-cascadeselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+    color: ${dt('cascadeselect.clear.icon.color')};
+    inset-inline-end: ${dt('cascadeselect.dropdown.width')};
+}
+
 .p-cascadeselect-label {
     display: block;
     white-space: nowrap;
@@ -262,6 +270,7 @@ const classes = {
             'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
         }
     ],
+    clearIcon: 'p-cascadeselect-clear-icon',
     dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',

packages/primevue/src/multiselect/BaseMultiSelect.vue

@@ -38,6 +38,18 @@ export default {
             default: null
         },
         dataKey: null,
+        showClear: {
+            type: Boolean,
+            default: false
+        },
+        clearIcon: {
+            type: String,
+            default: undefined
+        },
+        resetFilterOnClear: {
+            type: Boolean,
+            default: false
+        },
         filter: Boolean,
         filterPlaceholder: String,
         filterLocale: String,

packages/primevue/src/multiselect/MultiSelect.d.ts

@@ -131,6 +131,10 @@ export interface MultiSelectPassThroughOptions {
      * Used to pass attributes to the label's DOM element.
      */
     label?: MultiSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the label's DOM element.
+     */
+    clearIcon?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the chip's DOM element.
      */
@@ -407,6 +411,20 @@ export interface MultiSelectProps {
      * A property to uniquely identify an option.
      */
     dataKey?: string | undefined;
+    /**
+     * When enabled, a clear icon is displayed to clear the value.
+     * @defaultValue false
+     */
+    showClear?: boolean | undefined;
+    /**
+     * Icon to display in clear button.
+     */
+    clearIcon?: string | undefined;
+    /**
+     * Clears the filter value when clicking on the clear icon.
+     * @defaultValue false
+     */
+    resetFilterOnClear?: boolean;
     /**
      * When specified, displays a filter input at header.
      * @defaultValue false
@@ -803,6 +821,17 @@ export interface MultiSelectSlots {
          */
         class: string;
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        clearCallback: (event: Event) => void;
+    }): VNode[];
     /**
      * Custom dropdown icon template.
      * @param {Object} scope - dropdownicon slot's params.

packages/primevue/src/multiselect/MultiSelect.vue

@@ -50,6 +50,9 @@
                 </slot>
             </div>
         </div>
+        <slot v-if="isClearIconVisible" name="clearicon" :class="cx('clearIcon')" :clearCallback="onClearClick">
+            <component :is="clearIcon ? 'i' : 'TimesIcon'" ref="clearIcon" :class="[cx('clearIcon'), clearIcon]" @click="onClearClick" v-bind="ptm('clearIcon')" data-pc-section="clearicon" />
+        </slot>
         <div :class="cx('dropdown')" v-bind="ptm('dropdown')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
@@ -458,12 +461,18 @@ export default {
                 return;
             }
 
-            if (!this.overlay || !this.overlay.contains(event.target)) {
+            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+                return;
+            } else if (!this.overlay || !this.overlay.contains(event.target)) {
                 this.overlayVisible ? this.hide(true) : this.show(true);
             }
 
             this.clicked = true;
         },
+        onClearClick(event) {
+            this.updateModel(event, null);
+            this.resetFilterOnClear && (this.filterValue = null);
+        },
         onFirstHiddenFocus(event) {
             const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable="true"])') : this.$refs.focusInput;
 
@@ -1121,6 +1130,9 @@ export default {
         },
         hasFluid() {
             return isEmpty(this.fluid) ? !!this.$pcFluid : this.fluid;
+        },
+        isClearIconVisible() {
+            return this.showClear && this.d_value != null && isNotEmpty(this.options);
         }
     },
     directives: {

packages/primevue/src/multiselect/style/MultiSelectStyle.js

@@ -60,6 +60,14 @@ const theme = ({ dt }) => `
     border-end-end-radius: ${dt('multiselect.border.radius')};
 }
 
+.p-multiselect-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -0.5rem;
+    color: ${dt('multiselect.clear.icon.color')};
+    inset-inline-end: ${dt('multiselect.dropdown.width')};
+}
+
 .p-multiselect-label-container {
     overflow: hidden;
     flex: 1 1 auto;
@@ -253,6 +261,7 @@ const classes = {
             'p-multiselect-label-empty': !props.placeholder && (!props.modelValue || props.modelValue.length === 0)
         }
     ],
+    clearIcon: 'p-multiselect-clear-icon',
     chipItem: 'p-multiselect-chip-item',
     pcChip: 'p-multiselect-chip',
     chipIcon: 'p-multiselect-chip-icon',

packages/primevue/src/scrollpanel/ScrollPanel.vue

@@ -40,8 +40,8 @@
 </template>
 
 <script>
+import { addClass, getHeight, removeClass } from '@primeuix/utils/dom';
 import { UniqueComponentId } from '@primevue/core/utils';
-import { getHeight, addClass, removeClass } from '@primeuix/utils/dom';
 import BaseScrollPanel from './BaseScrollPanel.vue';
 
 export default {
@@ -61,12 +61,14 @@ export default {
     lastPageY: null,
     timer: null,
     outsideClickListener: null,
+    mutationObserver: null,
     data() {
         return {
             id: this.$attrs.id,
             orientation: 'vertical',
             lastScrollTop: 0,
-            lastScrollLeft: 0
+            lastScrollLeft: 0,
+            isRTL: false
         };
     },
     watch: {
@@ -80,6 +82,9 @@ export default {
         if (this.$el.offsetParent) {
             this.initialize();
         }
+
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     updated() {
         if (!this.initialized && this.$el.offsetParent) {
@@ -92,8 +97,25 @@ export default {
         if (this.frame) {
             window.cancelAnimationFrame(this.frame);
         }
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     },
     methods: {
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
+        },
         initialize() {
             this.moveBar();
             this.bindDocumentResizeListener();
@@ -137,7 +159,12 @@ export default {
                         } else {
                             this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+
+                            if (this.isRTL) {
+                                this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; right:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                            } else {
+                                this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                            }
                         }
                     }
 
@@ -148,8 +175,14 @@ export default {
                         } else {
                             this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                            this.$refs.yBar.style.cssText =
+
-                                'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                            if (this.isRTL) {
+                                this.$refs.yBar.style.cssText =
+                                    'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);left:' + right + 'px;';
+                            } else {
+                                this.$refs.yBar.style.cssText =
+                                    'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                            }
                         }
                     }
                 });

packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js

@@ -31,7 +31,6 @@ const theme = ({ dt }) => `
     cursor: pointer;
     opacity: 0;
     outline-color: transparent;
-    transition: outline-color ${dt('scrollpanel.transition.duration')};
     background: ${dt('scrollpanel.bar.background')};
     border: 0 none;
     transition: outline-color ${dt('scrollpanel.transition.duration')}, opacity ${dt('scrollpanel.transition.duration')};
@@ -45,12 +44,12 @@ const theme = ({ dt }) => `
 
 .p-scrollpanel-bar-y {
     width: ${dt('scrollpanel.bar.size')};
-    top: 0;
+    inset-block-start: 0;
 }
 
 .p-scrollpanel-bar-x {
     height: ${dt('scrollpanel.bar.size')};
-    bottom: 0;
+    inset-block-end: 0;
 }
 
 .p-scrollpanel-hidden {

packages/primevue/src/splitter/Splitter.vue

@@ -47,19 +47,40 @@ export default {
     panelSizes: null,
     prevPanelIndex: null,
     timer: null,
+    mutationObserver: null,
     data() {
         return {
-            prevSize: null
+            prevSize: null,
+            isRTL: false
         };
     },
     mounted() {
         this.initializePanels();
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     beforeUnmount() {
         this.clear();
         this.unbindMouseListeners();
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
     },
     methods: {
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
+        },
         isSplitterPanel(child) {
             return child.type.name === 'SplitterPanel';
         },
@@ -125,8 +146,15 @@ export default {
                     newNextPanelSize = (100 * (this.nextPanelSize + step)) / this.size;
                 }
             } else {
-                if (this.horizontal) newPos = (event.pageX * 100) / this.size - (this.startPos * 100) / this.size;
+                if (this.horizontal) {
-                else newPos = (event.pageY * 100) / this.size - (this.startPos * 100) / this.size;
+                    if (this.isRTL) {
+                        newPos = ((this.startPos - event.pageX) * 100) / this.size;
+                    } else {
+                        newPos = ((event.pageX - this.startPos) * 100) / this.size;
+                    }
+                } else {
+                    newPos = ((event.pageY - this.startPos) * 100) / this.size;
+                }
 
                 newPrevPanelSize = this.prevPanelSize + newPos;
                 newNextPanelSize = this.nextPanelSize - newPos;

packages/primevue/src/stepper/style/StepperStyle.js

@@ -170,6 +170,10 @@ const theme = ({ dt }) => `
     left: calc(-1 * ${dt('stepper.separator.size')});
 }
 
+.p-stepitem .p-stepper-separator:dir(rtl) {
+    left: calc(-9 * ${dt('stepper.separator.size')});
+}
+
 .p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
     background: ${dt('stepper.separator.active.background')};
 }

packages/themes/src/presets/aura/cascadeselect/index.js

@@ -66,5 +66,8 @@ export default {
             focusColor: '{list.option.icon.focus.color}',
             size: '0.875rem'
         }
+    },
+    clearIcon: {
+        color: '{form.field.icon.color}'
     }
 };

packages/themes/src/presets/aura/multiselect/index.js

@@ -71,6 +71,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     chip: {
         borderRadius: '{border.radius.sm}'
     },

packages/themes/src/presets/material/cascadeselect/index.js

@@ -67,6 +67,9 @@ export default {
             size: '0.875rem'
         }
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     css: ({ dt }) => `
 .p-cascadeselect.p-variant-filled {
     border-bottom-left-radius: 0;

packages/themes/src/presets/material/multiselect/index.js

@@ -74,6 +74,9 @@ export default {
     chip: {
         borderRadius: '{border.radius.sm}'
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     emptyMessage: {
         padding: '{list.option.padding}'
     },

packages/themes/src/presets/nora/cascadeselect/index.js

@@ -66,5 +66,8 @@ export default {
             focusColor: '{list.option.icon.focus.color}',
             size: '0.875rem'
         }
+    },
+    clearIcon: {
+        color: '{form.field.icon.color}'
     }
 };

packages/themes/src/presets/nora/multiselect/index.js

@@ -71,6 +71,9 @@ export default {
         fontWeight: '{list.option.group.font.weight}',
         padding: '{list.option.group.padding}'
     },
+    clearIcon: {
+        color: '{form.field.icon.color}'
+    },
     chip: {
         borderRadius: '{border.radius.xs}'
     },

packages/themes/types/cascadeselect/index.d.ts

@@ -356,4 +356,15 @@ export interface CascadeSelectDesignTokens extends ColorSchemeDesignToken<Cascad
             size?: string;
         };
     };
+    /**
+     * Used to pass tokens of the clear icon section
+     */
+    clearIcon?: {
+        /**
+         * Color of clear icon
+         *
+         * @designToken cascadeselect.clear.icon.color
+         */
+        color?: string;
+    };
 }

packages/themes/types/multiselect/index.d.ts

@@ -373,6 +373,17 @@ export interface MultiSelectDesignTokens extends ColorSchemeDesignToken<MultiSel
          */
         padding?: string;
     };
+    /**
+     * Used to pass tokens of the clear icon section
+     */
+    clearIcon?: {
+        /**
+         * Color of clear icon
+         *
+         * @designToken multiselect.clear.icon.color
+         */
+        color?: string;
+    };
     /**
      * Used to pass tokens of the chip section
      */

pnpm-lock.yaml

@@ -52,7 +52,7 @@ importers:
         version: 4.2.1(eslint-config-prettier@8.10.0(eslint@8.57.1))(eslint@8.57.1)(prettier@2.7.1)
       eslint-plugin-vue:
         specifier: ^9.4.0
-        version: 9.29.1(eslint@8.57.1)
+        version: 9.30.0(eslint@8.57.1)
       pnpm:
         specifier: ^9.6.0
         version: 9.12.3
@@ -234,7 +234,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^0.8.5
-        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
+        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.57.1)
@@ -246,7 +246,7 @@ importers:
         version: 3.13.2(rollup@4.24.2)
       '@nuxt/test-utils':
         specifier: ^3.7.3
-        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
       '@primevue/themes':
         specifier: workspace:*
         version: link:../themes
@@ -3580,8 +3580,8 @@ packages:
       eslint-config-prettier:
         optional: true
 
-  eslint-plugin-vue@9.29.1:
+  eslint-plugin-vue@9.30.0:
-    resolution: {integrity: sha512-MH/MbVae4HV/tM8gKAVWMPJbYgW04CK7SuzYRrlNERpxbO0P3+Zdsa2oAcFBW6xNu7W6lIkGOsFAMCRTYmrlWQ==}
+    resolution: {integrity: sha512-CyqlRgShvljFkOeYK8wN5frh/OGTvkj1S7wlr2Q2pUvwq+X5VYiLd6ZjujpgSgLnys2W8qrBLkXQ41SUYaoPIQ==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
@@ -8315,12 +8315,13 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
+  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/schema': 3.13.2(rollup@4.24.2)
       execa: 7.2.0
       nuxt: 3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3)
+      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -8340,10 +8341,10 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)':
+  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)
+      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.59)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.24.2)(terser@5.36.0)(typescript@5.6.3))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))
       '@nuxt/devtools-wizard': 0.8.5
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       birpc: 0.2.19
@@ -8374,8 +8375,9 @@ snapshots:
       simple-git: 3.27.0
       sirv: 2.0.4
       unimport: 3.13.1(rollup@4.24.2)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.2))(rollup@4.24.2)
+      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
-      vite-plugin-vue-inspector: 3.7.2
+      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.2))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))
+      vite-plugin-vue-inspector: 3.7.2(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))
       wait-on: 7.2.0
       which: 3.0.1
       ws: 8.18.0
@@ -8394,7 +8396,7 @@ snapshots:
       '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1)(typescript@5.6.3)
       '@typescript-eslint/parser': 6.21.0(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
-      eslint-plugin-vue: 9.29.1(eslint@8.57.1)
+      eslint-plugin-vue: 9.30.0(eslint@8.57.1)
       typescript: 5.6.3
     transitivePeerDependencies:
       - supports-color
@@ -8685,7 +8687,7 @@ snapshots:
       - supports-color
       - webpack-sources
 
-  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
+  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
       '@nuxt/schema': 3.13.2(rollup@4.24.2)
@@ -8711,7 +8713,8 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 1.14.1(webpack-sources@3.2.3)
-      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
       vue: 3.5.12(typescript@5.6.3)
       vue-router: 4.4.5(vue@3.5.12(typescript@5.6.3))
     optionalDependencies:
@@ -10764,7 +10767,7 @@ snapshots:
 
   eslint-plugin-nuxt@4.0.0(eslint@8.57.1):
     dependencies:
-      eslint-plugin-vue: 9.29.1(eslint@8.57.1)
+      eslint-plugin-vue: 9.30.0(eslint@8.57.1)
       semver: 7.6.3
       vue-eslint-parser: 9.4.3(eslint@8.57.1)
     transitivePeerDependencies:
@@ -10779,7 +10782,7 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 8.10.0(eslint@8.57.1)
 
-  eslint-plugin-vue@9.29.1(eslint@8.57.1):
+  eslint-plugin-vue@9.30.0(eslint@8.57.1):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
       eslint: 8.57.1
@@ -14231,7 +14234,7 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.6.3
 
-  vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.2))(rollup@4.24.2):
+  vite-plugin-inspect@0.7.42(@nuxt/kit@3.13.2(magicast@0.3.5)(rollup@4.24.2))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.24.2)
@@ -14241,13 +14244,14 @@ snapshots:
       open: 9.1.0
       picocolors: 1.1.1
       sirv: 2.0.4
+      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
     optionalDependencies:
       '@nuxt/kit': 3.13.2(magicast@0.3.5)(rollup@4.24.2)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@3.7.2:
+  vite-plugin-vue-inspector@3.7.2(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0)):
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@@ -14258,6 +14262,7 @@ snapshots:
       '@vue/compiler-dom': 3.5.12
       kolorist: 1.8.0
       magic-string: 0.30.12
+      vite: 5.4.10(@types/node@18.19.59)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -14294,9 +14299,9 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.36.0
 
-  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
+      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.9.7(encoding@0.1.13)(magicast@0.3.5))(rollup@4.24.2)(vite@5.4.10(@types/node@18.19.59)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.59)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.12(typescript@5.6.3)))(vue@3.5.12(typescript@5.6.3))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'