Merge branch 'master' into fix/fix-dialog-getcomputedstyle-error

api-generator/build-apidoc.js

@@ -380,9 +380,20 @@ if (project) {
 
                                                     type += ` \t <b>${childSinature.name}(${parameters})</b>: ${childSinature.type?.name}, // ${childSinature.comment?.summary[0]?.text}\n `;
                                                 } else {
-                                                    const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+                                                    if (child.type?.declaration?.signatures) {
+                                                        let functionParameters = '';
 
-                                                    type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
+                                                        child.type?.declaration?.signatures[0]?.parameters.map((param, index) => {
+                                                            if (index !== 0) functionParameters += `, `;
+                                                            functionParameters += `${param.name}: ${param.type?.name}`;
+                                                        });
+
+                                                        type += `\t <b>${child.name}</b>: (${functionParameters}) &rArr; ${child.type?.declaration?.signatures[0]?.type?.name}, // ${child.type?.declaration?.signatures[0]?.comment.summary[0]?.text}\n`;
+                                                    } else {
+                                                        const childType = child.type.elementType ? child.type.elementType.name : child.type.name;
+
+                                                        type += ` \t <b>${child.name}</b>: ${childType}, // ${child.comment?.summary[0]?.text}\n `;
+                                                    }
                                                 }
                                             });
                                         }

api-generator/components/autocomplete.js

@@ -77,6 +77,12 @@ const AutoCompleteProps = [
         default: 'null',
         description: 'Default text to display when no option is selected.'
     },
+    {
+        name: 'loading',
+        type: 'boolean',
+        default: 'false',
+        description: 'Whether the multiselect is in loading state.'
+    },
     {
         name: 'disabled',
         type: 'boolean',

assets/data/news.json

@@ -1,8 +1,8 @@
 {
-    "id": 41,
+    "id": 42,
-    "content": "Summer Sale | Up to 50% Off",
+    "content": "Introducing Tailwind CSS Support",
     "linkText": "Learn More",
-    "linkHref": "https://www.primefaces.org/store",
+    "linkHref": "https://primevue.org/tailwind",
     "backgroundStyle": "background-color:#4f8ff7",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"

assets/styles/layout/_code.scss

@@ -26,7 +26,7 @@ pre[class*="language-"] {
     position: relative;
     margin: .5em 0;
     overflow: visible;
-    padding: 1px;
+    padding: 0;
 }
 
 pre[class*="language-"] > code {
@@ -402,7 +402,8 @@ pre[class*="language-"] {
         margin: 0;
         color: var(--surface-900);
         font-size: 14px;
-        border-radius: 10px;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
     }
     }
 

assets/styles/layout/_doc.scss

@@ -205,6 +205,18 @@
     }
 }
 
+.doc-section-code-buttons {
+    gap: .75rem;
+    padding: .75rem 0 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+
+    .p-button-label {
+        font-weight: normal;
+        font-size: 0.875rem;
+    }
+}
+
 .doc-section-code-tooltip .p-tooltip-text {
     padding: 0.5rem;
     font-size: 11px;
@@ -217,19 +229,8 @@
         }
     }
 
-    .p-button-label {
-        font-weight: normal;
-        font-size: 0.875rem;
-    }
-
-    .doc-section-code-active {
-        .p-button-label {
-            font-weight: bold;
-        }
-    }
-
     pre {
-        margin: 0 0 1.5rem 0;
+        margin: 0;
     }
 }
 
@@ -275,6 +276,14 @@
                         text-decoration: underline;
                     }
                 }
+
+                .doc-option-type-options-container {
+                    display: flex;
+                    align-items: center;
+                }
+                span.doc-option-type-options {
+                    color: var(--primary-700);
+                }
             }
 
             &.doc-option-default {
@@ -289,7 +298,7 @@
             }
 
             .doc-option-name,
-            > i {
+            > i:not(.pi) {
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;

components/doc/DocApiTable.vue

@@ -19,7 +19,7 @@
             </thead>
             <tbody>
                 <tr v-for="prop in data" :key="prop">
-                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type', 'doc-option-default': k === 'defaultValue' }">
+                    <td v-for="[k, v] in Object.entries(prop)" :key="k" :class="{ 'doc-option-type': k === 'type' || k === 'options', 'doc-option-default': k === 'defaultValue' }">
                         <template v-if="k !== 'readonly' && k !== 'optional' && k !== 'deprecated'">
                             <span v-if="k === 'name'" :id="id + '.' + v" class="doc-option-name" :class="{ 'line-through cursor-pointer': !!prop.deprecated }" :title="prop.deprecated">
                                 {{ v
@@ -34,6 +34,14 @@
                                 </template>
                             </template>
 
+                            <template v-else-if="k === 'options'">
+                                <template v-for="val in v" :key="val.name">
+                                    <div class="doc-option-type-options-container">
+                                        {{ val.name }}: <span class="doc-option-type-options">{{ val.type }}</span>
+                                    </div>
+                                </template>
+                            </template>
+
                             <template v-else-if="k === 'parameters'">
                                 <span v-if="v.name" :class="{ 'parameter-bold': label === 'Slots' }"> {{ v.name }} : </span>
                                 <template v-for="(value, i) in getType(v.type)" :key="value">

components/doc/DocComponent.vue

@@ -56,7 +56,7 @@ export default {
         };
     },
     mounted() {
-        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('pt') ? 3 : 0;
+        this.tab = this.$route.hash.includes('api') ? 1 : this.$route.hash.includes('theming') ? 2 : this.$route.hash.includes('pt') ? 3 : 0;
     }
 };
 </script>

components/doc/DocSectionCode.vue

@@ -1,14 +1,14 @@
 <template>
-    <div v-if="!embedded" class="relative doc-section-code">
+    <div v-if="!embedded" class="surface-card mb-4" style="border-radius: 10px">
-        <div class="flex surface-card align-items-center justify-content-end absolute z-1" :style="{ right: '.75rem', top: '.75rem', gap: '.75rem' }">
+        <div class="flex doc-section-code-buttons surface-card align-items-center justify-content-end sticky z-1 top-0 mr-3">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
-                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
+                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'composition' }]"
                     label="Composition API"
                     @click="codeLang = 'composition'"
                 ></Button>
                 <Button
-                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'javascript' }]"
+                    :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-buttons-active text-primary': codeLang === 'options' }]"
                     label="Options API"
                     @click="codeLang = 'options'"
                 ></Button>
@@ -76,40 +76,33 @@
             ></Button>
         </div>
 
-        <template v-if="codeMode === 'basic' && importCode">
+        <div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
-            <pre v-code.script><code>
+            <template v-if="codeMode === 'basic' && importCode">
-{{ code.basic }}
+                <pre v-code.script><code>{{ code.basic }}
-
 </code></pre>
-        </template>
+            </template>
-
-        <template v-if="codeMode === 'basic' && !importCode">
-            <pre v-code><code>
-{{ code.basic }}
 
+            <template v-if="codeMode === 'basic' && !importCode">
+                <pre v-code><code>{{ code.basic }}
 </code></pre>
-        </template>
+            </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-            <pre v-code><code>
-{{ code.options }}
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'options'">
+                <pre v-code><code>{{ code.options }}
 </code></pre>
-        </template>
+            </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-            <pre v-code><code>
-{{ code.composition }}
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
+                <pre v-code><code>{{ code.composition }}
 </code></pre>
-        </template>
+            </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-            <pre v-code.json><code>
-{{ code.data }}
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'data'">
+                <pre v-code.json><code>{{ code.data }}
 </code></pre>
-        </template>
+            </template>
+        </div>
+        <div class="h-1rem"></div>
     </div>
     <div v-else id="embed"></div>
 </template>

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.31.0',
+    version: '^3.32.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
 };

components/doc/helpers/PTHelper.js

@@ -2,14 +2,24 @@ import APIDocs from '@/doc/common/apidoc/index.json';
 
 export const getPTOption = (name) => {
     const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
+    const options = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughMethodOptions`];
     let data = [];
 
     for (const [i, prop] of props.entries()) {
-        data.push({
+        if (options) {
-            value: i + 1,
+            data.push({
-            label: prop.name,
+                value: i + 1,
-            description: prop.description
+                label: prop.name,
-        });
+                options: options?.props,
+                description: prop.description
+            });
+        } else {
+            data.push({
+                value: i + 1,
+                label: prop.name,
+                description: prop.description
+            });
+        }
     }
 
     return data;

components/lib/accordion/Accordion.d.ts

@@ -10,7 +10,7 @@
 import { VNode } from 'vue';
 import { AccordionTabPassThroughOptionType } from '../accordiontab';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes | string) | string | null | undefined;
 
@@ -139,7 +139,7 @@ export interface AccordionProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {AccordionPassThroughOptions}
      */
-    pt?: AccordionPassThroughOptions;
+    pt?: PTOptions<AccordionPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/accordiontab/AccordionTab.d.ts

@@ -9,7 +9,7 @@
  */
 import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { AccordionPassThroughOptions } from '../accordion';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes | string) | string | null | undefined;
 
@@ -119,7 +119,7 @@ export interface AccordionTabProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {AccordionTabPassThroughOptions}
      */
-    pt?: AccordionTabPassThroughOptions;
+    pt?: PTOptions<AccordionTabPassThroughOptions>;
 }
 
 /**
@@ -171,8 +171,9 @@ export interface AccordionTabSlots {
         index: number;
         /**
          * Whether the tab is active
+         * @param {number} index - Index of the tab
          */
-        isTabActive(i: number): void;
+        isTabActive: (index: number) => void;
     }): VNode[];
 }
 

components/lib/autocomplete/AutoComplete.d.ts

@@ -10,7 +10,7 @@
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type AutoCompletePassThroughOptionType = AutoCompletePassThroughAttributes | ((options: AutoCompletePassThroughMethodOptions) => AutoCompletePassThroughAttributes | string) | string | null | undefined;
@@ -305,6 +305,11 @@ export interface AutoCompleteProps {
      * Default text to display when no option is selected.
      */
     placeholder?: string | undefined;
+    /**
+     * Whether the autocomplete is in loading state.
+     * @defaultValue false
+     */
+    loading?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -442,7 +447,7 @@ export interface AutoCompleteProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {AutoCompletePassThroughOptions}
      */
-    pt?: AutoCompletePassThroughOptions;
+    pt?: PTOptions<AutoCompletePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -558,13 +563,13 @@ export interface AutoCompleteSlots {
          * Referance of the content
          * @param {HTMLElement} el - Element of 'ref' property
          */
-        contentRef(el: any): void;
+        contentRef: (el: any) => void;
         /**
          * Options of the items
          * @param {number} index - Rendered index
          * @return {VirtualScrollerItemOptions}
          */
-        getItemOptions(index: number): VirtualScrollerItemOptions;
+        getItemOptions: (index: number) => VirtualScrollerItemOptions;
     }): VNode[];
     /**
      * Custom loader template.
@@ -598,14 +603,24 @@ export interface AutoCompleteSlots {
          */
         class: string;
         /**
-         * Remove token icon function.
+         * Index of the token.
          */
-        onClick: void;
+        index: number;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        onClick: (event: Event, index: number) => void;
     }): VNode[];
     /**
      * Custom loading icon template.
      */
-    loadingicon(): VNode[];
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**

components/lib/autocomplete/AutoComplete.vue

@@ -55,7 +55,7 @@
                 <slot name="chip" :value="option">
                     <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getOptionLabel(option) }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx(removeTokenIcon)" :onClick="(event) => removeOption(event, i)">
+                <slot name="removetokenicon" :class="cx(removeTokenIcon)" :index="i" :onClick="(event) => removeOption(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx(removeTokenIcon), removeTokenIcon]" @click="removeOption($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>
@@ -87,7 +87,7 @@
                 />
             </li>
         </ul>
-        <slot v-if="searching" :class="cx('loadingIcon')" name="loadingicon">
+        <slot v-if="searching || loading" :class="cx('loadingIcon')" name="loadingicon">
             <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
             <SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
@@ -477,7 +477,7 @@ export default {
             }
         },
         onContainerClick(event) {
-            if (this.disabled || this.searching || this.isInputClicked(event) || this.isDropdownClicked(event)) {
+            if (this.disabled || this.searching || this.loading || this.isInputClicked(event) || this.isDropdownClicked(event)) {
                 return;
             }
 

components/lib/autocomplete/BaseAutoComplete.vue

@@ -187,6 +187,10 @@ export default {
             type: Boolean,
             default: false
         },
+        loading: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/avatar/Avatar.d.ts

@@ -9,7 +9,7 @@
 import { VNode } from 'vue';
 import { AvatarGroupPassThroughOptions } from '../avatargroup';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type AvatarPassThroughOptionType = AvatarPassThroughAttributes | ((options: AvatarPassThroughMethodOptions) => AvatarPassThroughAttributes | string) | string | null | undefined;
 
@@ -96,7 +96,7 @@ export interface AvatarProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {AvatarPassThroughOptions}
      */
-    pt?: AvatarPassThroughOptions;
+    pt?: PTOptions<AvatarPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/avatargroup/AvatarGroup.d.ts

@@ -8,7 +8,7 @@
  *
  */
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type AvatarGroupPassThroughOptionType = AvatarGroupPassThroughAttributes | null | undefined;
 
@@ -43,7 +43,7 @@ export interface AvatarGroupProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {AvatarGroupPassThroughOptions}
      */
-    pt?: AvatarGroupPassThroughOptions;
+    pt?: PTOptions<AvatarGroupPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/badge/Badge.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | string) | string | null | undefined;
 
@@ -64,7 +64,7 @@ export interface BadgeProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {BadgePassThroughOptions}
      */
-    pt?: BadgePassThroughOptions;
+    pt?: PTOptions<BadgePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/badgedirective/BadgeDirective.d.ts

@@ -8,6 +8,7 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';
+import { PTOptions } from '../ts-helpers';
 
 export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgeDirectivePassThroughAttributes) | null | undefined;
 
@@ -26,7 +27,7 @@ export interface BadgeDirectiveOptions {
      * Used to pass attributes to DOM elements inside the component.
      * @type {BadgeDirectivePassThroughOptions}
      */
-    pt?: BadgeDirectivePassThroughOptions;
+    pt?: PTOptions<BadgeDirectivePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/basecomponent/BaseComponent.vue

@@ -52,7 +52,7 @@ const buttonStyles = `
     margin: 0;
 }
 
-.p-buttonset .p-button:not(:last-child) {
+.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
     border-right: 0 none;
 }
 
@@ -381,21 +381,30 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (!newValue) {
-                    loadStyle();
+                    loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
-                    this.$options.css && this.$css.loadStyle();
+                    this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
                 }
             }
         }
     },
     beforeCreate() {
-        this.pt?.hooks?.['onBeforeCreate']?.();
+        const _usept = this.pt?.['_usept'];
-        this.$primevue?.config?.pt?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
+        const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
+        const value = _usept ? this.pt?.value?.[this.$.type.name] : this.pt;
+
+        (value || originalValue)?.hooks?.['onBeforeCreate']?.();
+
+        const _useptInConfig = this.$config?.pt?.['_usept'];
+        const originalValueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.originalValue : undefined;
+        const valueInConfig = _useptInConfig ? this.$primevue?.config?.pt?.value : this.$primevue?.config?.pt;
+
+        (valueInConfig || originalValueInConfig)?.[this.$.type.name]?.hooks?.['onBeforeCreate']?.();
     },
     created() {
         this._hook('onCreated');
     },
     beforeMount() {
-        loadBaseStyle();
+        loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
         this._loadGlobalStyles();
         this._hook('onBeforeMount');
     },
@@ -416,11 +425,13 @@ export default {
     },
     methods: {
         _hook(hookName) {
-            const selfHook = this._getOptionValue(this.pt, `hooks.${hookName}`);
+            if (!this.$options.hostName) {
-            const defaultHook = this._getOptionValue(this.defaultPT, `hooks.${hookName}`);
+                const selfHook = this._usePT(this._getPT(this.pt, this.$.type.name), this._getOptionValue, `hooks.${hookName}`);
+                const defaultHook = this._useDefaultPT(this._getOptionValue, `hooks.${hookName}`);
 
-            selfHook?.();
+                selfHook?.();
-            defaultHook?.();
+                defaultHook?.();
+            }
         },
         _loadGlobalStyles() {
             /*
@@ -433,9 +444,9 @@ export default {
              * ObjectUtils.isNotEmpty(mergedCSS?.class) && this.$css.loadCustomStyle(mergedCSS?.class);
              */
 
-            const globalCSS = this._getOptionValue(this.globalPT, 'global.css', this.$params);
+            const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
 
-            ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS);
+            ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
         },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@@ -452,8 +463,9 @@ export default {
         },
         _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
             const datasetPrefix = 'data-pc-';
-            const self = this._getPTClassValue(obj, key, params);
+            const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
-            const globalPT = searchInDefaultPT ? (/./g.test(key) && !!params[key.split('.')[0]] ? this._getPTClassValue(this.globalPT, key, params) : this._getPTClassValue(this.defaultPT, key, params)) : undefined;
+            const self = searchOut ? undefined : this._usePT(this._getPT(obj, this.$name), this._getPTClassValue, key, params);
+            const globalPT = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
             const merged = mergeProps(
                 self,
                 globalPT,
@@ -475,6 +487,46 @@ export default {
 
             return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
         },
+        _getPT(pt, key = '', callback) {
+            const _usept = pt?.['_usept'];
+
+            const getValue = (value) => {
+                const computedValue = callback ? callback(value) : value;
+
+                return computedValue?.[ObjectUtils.toFlatCase(key)] ?? computedValue;
+            };
+
+            return ObjectUtils.isNotEmpty(_usept)
+                ? {
+                      _usept,
+                      originalValue: getValue(pt.originalValue),
+                      value: getValue(pt.value)
+                  }
+                : getValue(pt);
+        },
+        _usePT(pt, callback, key, params) {
+            const fn = (value) => callback(value, key, params);
+
+            if (pt?.hasOwnProperty('_usept')) {
+                const { merge, useMergeProps } = pt['_usept'];
+                const originalValue = fn(pt.originalValue);
+                const value = fn(pt.value);
+
+                if (originalValue === undefined && value === undefined) return undefined;
+                else if (ObjectUtils.isString(value)) return value;
+                else if (ObjectUtils.isString(originalValue)) return originalValue;
+
+                return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
+            }
+
+            return fn(pt);
+        },
+        _useGlobalPT(callback, key, params) {
+            return this._usePT(this.globalPT, callback, key, params);
+        },
+        _useDefaultPT(callback, key, params) {
+            return this._usePT(this.defaultPT, callback, key, params);
+        },
         ptm(key = '', params = {}) {
             return this._getPTValue(this.pt, key, { ...this.$params, ...params });
         },
@@ -497,19 +549,25 @@ export default {
     },
     computed: {
         globalPT() {
-            return ObjectUtils.getItemValue(this.$primevue.config.pt, { instance: this });
+            return this._getPT(this.$config?.pt, undefined, (value) => ObjectUtils.getItemValue(value, { instance: this }));
         },
         defaultPT() {
-            return this._getOptionValue(this.$primevue.config.pt, this.$options.hostName || this.$.type.name, { instance: this }) || this.globalPT;
+            return this._getPT(this.$config?.pt, undefined, (value) => this._getOptionValue(value, this.$name, { instance: this }) || ObjectUtils.getItemValue(value, { instance: this }));
         },
         isUnstyled() {
-            return this.unstyled !== undefined ? this.unstyled : this.$primevue.config.unstyled;
+            return this.unstyled !== undefined ? this.unstyled : this.$config.unstyled;
         },
         $params() {
             return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
         },
         $css() {
             return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
+        },
+        $config() {
+            return this.$primevue?.config;
+        },
+        $name() {
+            return this.$options.hostName || this.$.type.name;
         }
     }
 };

components/lib/basedirective/BaseDirective.js

@@ -22,8 +22,8 @@ const BaseDirective = {
         };
 
         const datasetPrefix = 'data-pc-';
-        const self = getValue(obj, key, params);
+        const self = BaseDirective._usePT(BaseDirective._getPT(obj, instance.$name), getValue, key, params);
-        const globalPT = searchInDefaultPT ? getValue(instance.defaultPT, key, params) : undefined;
+        const globalPT = searchInDefaultPT ? BaseDirective._useDefaultPT(instance.defaultPT, getValue, key, params) : undefined;
         const merged = mergeProps(self, globalPT, {
             ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
             [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
@@ -31,15 +31,52 @@ const BaseDirective = {
 
         return merged;
     },
+    _getPT(pt, key = '', callback) {
+        const _usept = pt?.['_usept'];
+
+        const getValue = (value) => {
+            const computedValue = callback ? callback(value) : value;
+
+            return computedValue?.[ObjectUtils.toFlatCase(key)] ?? computedValue;
+        };
+
+        return ObjectUtils.isNotEmpty(_usept)
+            ? {
+                  _usept,
+                  originalValue: getValue(pt.originalValue),
+                  value: getValue(pt.value)
+              }
+            : getValue(pt);
+    },
+    _usePT(pt, callback, key, params) {
+        const fn = (value) => callback(value, key, params);
+
+        if (pt?.hasOwnProperty('_usept')) {
+            const { merge, useMergeProps } = pt['_usept'];
+            const originalValue = fn(pt.originalValue);
+            const value = fn(pt.value);
+
+            if (originalValue === undefined && value === undefined) return undefined;
+            else if (ObjectUtils.isString(value)) return value;
+            else if (ObjectUtils.isString(originalValue)) return originalValue;
+
+            return merge ? (useMergeProps ? mergeProps(originalValue, value) : { ...originalValue, ...value }) : value;
+        }
+
+        return fn(pt);
+    },
+    _useDefaultPT(defaultPT = {}, callback, key, params) {
+        return BaseDirective._usePT(defaultPT, callback, key, params);
+    },
     _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
         const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
         const config = binding?.instance?.$primevue?.config;
-        const selfHook = binding?.value?.pt?.hooks?.[name];
+        const selfHook = BaseDirective._usePT(BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
-        const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[name];
+        const defaultHook = BaseDirective._useDefaultPT(config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
         const options = { el, binding, vnode, prevVnode };
 
         selfHook?.(el?.$instance, options);
-        globalHook?.(el?.$instance, options);
+        defaultHook?.(el?.$instance, options);
     },
     _extend: (name, options = {}) => {
         const handleHook = (hook, el, binding, vnode, prevVnode) => {
@@ -57,8 +94,9 @@ const BaseDirective = {
                 $binding: binding,
                 $el: $prevInstance['$el'] || undefined,
                 $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
+                $config: config,
                 /* computed instance variables */
-                defaultPT: config?.pt?.directives?.[name],
+                defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
                 isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
@@ -78,8 +116,10 @@ const BaseDirective = {
                 handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                loadBaseStyle();
+                const config = binding?.instance?.$primevue?.config;
-                !el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle();
+
+                loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
+                !el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {

components/lib/baseicon/BaseIcon.vue

@@ -1,38 +1,8 @@
 <script>
+import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
-export default {
+const styles = `
-    name: 'BaseIcon',
-    props: {
-        label: {
-            type: String,
-            default: undefined
-        },
-        spin: {
-            type: Boolean,
-            default: false
-        }
-    },
-    methods: {
-        pti() {
-            const isLabelEmpty = ObjectUtils.isEmpty(this.label);
-
-            return {
-                class: [
-                    'p-icon',
-                    {
-                        'p-icon-spin': this.spin
-                    }
-                ],
-                role: !isLabelEmpty ? 'img' : undefined,
-                'aria-label': !isLabelEmpty ? this.label : undefined,
-                'aria-hidden': isLabelEmpty
-            };
-        }
-    }
-};
-</script>
-<style>
 .p-icon {
     display: inline-block;
 }
@@ -63,4 +33,46 @@ export default {
         transform: rotate(359deg);
     }
 }
-</style>
+`;
+
+const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
+
+export default {
+    name: 'BaseIcon',
+    props: {
+        label: {
+            type: String,
+            default: undefined
+        },
+        spin: {
+            type: Boolean,
+            default: false
+        }
+    },
+    beforeMount() {
+        loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
+    },
+    methods: {
+        pti() {
+            const isLabelEmpty = ObjectUtils.isEmpty(this.label);
+
+            return {
+                class: [
+                    'p-icon',
+                    {
+                        'p-icon-spin': this.spin
+                    }
+                ],
+                role: !isLabelEmpty ? 'img' : undefined,
+                'aria-label': !isLabelEmpty ? this.label : undefined,
+                'aria-hidden': isLabelEmpty
+            };
+        }
+    },
+    computed: {
+        $config() {
+            return this.$primevue?.config;
+        }
+    }
+};
+</script>

components/lib/blockui/BlockUI.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type BlockUIPassThroughOptionType = BlockUIPassThroughAttributes | ((options: BlockUIPassThroughMethodOptions) => BlockUIPassThroughAttributes | string) | string | null | undefined;
 
@@ -88,7 +88,7 @@ export interface BlockUIProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {BlockUIPassThroughOptions}
      */
-    pt?: BlockUIPassThroughOptions;
+    pt?: PTOptions<BlockUIPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -10,7 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes | string) | string | null | undefined;
 
@@ -117,7 +117,7 @@ export interface BreadcrumbProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {BreadcrumbPassThroughOptions}
      */
-    pt?: BreadcrumbPassThroughOptions;
+    pt?: PTOptions<BreadcrumbPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/button/Button.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | string) | string | null | undefined;
 
@@ -150,7 +150,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ButtonPassThroughOptions}
      */
-    pt?: ButtonPassThroughOptions;
+    pt?: PTOptions<ButtonPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/button/Button.vue

@@ -5,8 +5,8 @@
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
             </slot>
-            <slot v-else name="icon" :class="cx('icon')">
+            <slot v-else name="icon" :class="[cx('icon')]">
-                <span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
+                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
             </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
             <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>

components/lib/calendar/Calendar.d.ts

@@ -10,7 +10,7 @@
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CalendarPassThroughOptionType = CalendarPassThroughAttributes | ((options: CalendarPassThroughMethodOptions) => CalendarPassThroughAttributes | string) | string | null | undefined;
 
@@ -691,7 +691,7 @@ export interface CalendarProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {CalendarPassThroughOptions}
      */
-    pt?: CalendarPassThroughOptions;
+    pt?: PTOptions<CalendarPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -735,20 +735,44 @@ export interface CalendarSlots {
     dropdownicon(): VNode[];
     /**
      * Custom previous icon template.
+     * @param {Object} scope - previous icon slot's params.
      */
-    previousicon(): VNode[];
+    previousicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom next icon template.
+     * @param {Object} scope - next icon slot's params.
      */
-    nexticon(): VNode[];
+    nexticon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom increment icon template.
+     * @param {Object} scope - increment icon slot's params.
      */
-    incrementicon(): VNode[];
+    incrementicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom decrement icon template.
+     * @param {Object} scope - decrement icon slot's params.
      */
-    decrementicon(): VNode[];
+    decrementicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/calendar/Calendar.vue

@@ -80,7 +80,7 @@
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
                                         v-bind="ptm('previousButton')"
                                     >
-                                        <slot name="previousicon">
+                                        <slot name="previousicon" :class="cx('previousIcon')">
                                             <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
                                         </slot>
                                     </button>
@@ -125,7 +125,7 @@
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
                                         v-bind="ptm('nextButton')"
                                     >
-                                        <slot name="nexticon">
+                                        <slot name="nexticon" :class="cx('nextIcon')">
                                             <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
                                         </slot>
                                     </button>
@@ -392,13 +392,13 @@
                         </div>
                         <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
                             <button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
-                                <slot name="incrementicon">
+                                <slot name="incrementicon" :class="cx('incrementIcon')">
                                     <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
                             <span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
                             <button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
-                                <slot name="decrementicon">
+                                <slot name="decrementicon" :class="cx('decrementIcon')">
                                     <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>
@@ -1416,7 +1416,7 @@ export default {
         },
         incrementHour(event) {
             let prevHour = this.currentHour;
-            let newHour = this.currentHour + this.stepHour;
+            let newHour = this.currentHour + Number(this.stepHour);
             let newPM = this.pm;
 
             if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
@@ -1458,7 +1458,7 @@ export default {
             event.preventDefault();
         },
         incrementMinute(event) {
-            let newMinute = this.currentMinute + this.stepMinute;
+            let newMinute = this.currentMinute + Number(this.stepMinute);
 
             if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
                 this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
@@ -1478,7 +1478,7 @@ export default {
             event.preventDefault();
         },
         incrementSecond(event) {
-            let newSecond = this.currentSecond + this.stepSecond;
+            let newSecond = this.currentSecond + Number(this.stepSecond);
 
             if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
                 this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
@@ -2582,13 +2582,15 @@ export default {
                 if (!this.responsiveStyleElement) {
                     this.responsiveStyleElement = document.createElement('style');
                     this.responsiveStyleElement.type = 'text/css';
+                    DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                     document.body.appendChild(this.responsiveStyleElement);
                 }
 
                 let innerHTML = '';
 
                 if (this.responsiveOptions) {
-                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
 
                     for (let i = 0; i < responsiveOptions.length; i++) {
                         let { breakpoint, numMonths } = responsiveOptions[i];

components/lib/card/Card.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
 
@@ -68,7 +68,7 @@ export interface CardProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {CardPassThroughOptions}
      */
-    pt?: CardPassThroughOptions;
+    pt?: PTOptions<CardPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/carousel/Carousel.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CarouselPassThroughOptionType = CarouselPassThroughAttributes | ((options: CarouselPassThroughMethodOptions) => CarouselPassThroughAttributes | string) | string | null | undefined;
 
@@ -274,7 +274,7 @@ export interface CarouselProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {CarouselPassThroughOptions}
      */
-    pt?: CarouselPassThroughOptions;
+    pt?: PTOptions<CarouselPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/carousel/Carousel.vue

@@ -516,6 +516,7 @@ export default {
             if (!this.carouselStyle) {
                 this.carouselStyle = document.createElement('style');
                 this.carouselStyle.type = 'text/css';
+                DomHandler.setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.body.appendChild(this.carouselStyle);
             }
 
@@ -527,6 +528,7 @@ export default {
 
             if (this.responsiveOptions && !this.isUnstyled) {
                 let _responsiveOptions = [...this.responsiveOptions];
+                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
 
                 _responsiveOptions.sort((data1, data2) => {
                     const value1 = data1.breakpoint;
@@ -536,7 +538,7 @@ export default {
                     if (value1 == null && value2 != null) result = -1;
                     else if (value1 != null && value2 == null) result = 1;
                     else if (value1 == null && value2 == null) result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
                     else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return -1 * result;

components/lib/cascadeselect/CascadeSelect.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CascadeSelectPassThroughOptionType = CascadeSelectPassThroughAttributes | ((options: CascadeSelectPassThroughMethodOptions) => CascadeSelectPassThroughAttributes | string) | string | null | undefined;
 
@@ -325,7 +325,7 @@ export interface CascadeSelectProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {CascadeSelectPassThroughOptions}
      */
-    pt?: CascadeSelectPassThroughOptions;
+    pt?: PTOptions<CascadeSelectPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/chart/Chart.d.ts

@@ -9,7 +9,7 @@
  */
 import { CanvasHTMLAttributes } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes | string) | string | null | undefined;
 
@@ -105,7 +105,7 @@ export interface ChartProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ChartPassThroughOptions}
      */
-    pt?: ChartPassThroughOptions;
+    pt?: PTOptions<ChartPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/checkbox/Checkbox.d.ts

@@ -9,7 +9,7 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type CheckboxPassThroughOptionType = CheckboxPassThroughAttributes | ((options: CheckboxPassThroughMethodOptions) => CheckboxPassThroughAttributes | string) | string | null | undefined;
 
@@ -151,7 +151,7 @@ export interface CheckboxProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {CheckboxPassThroughOptions}
      */
-    pt?: CheckboxPassThroughOptions;
+    pt?: PTOptions<CheckboxPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/chip/Chip.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes | string) | string | null | undefined;
 
@@ -103,7 +103,7 @@ export interface ChipProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ChipPassThroughOptions}
      */
-    pt?: ChipPassThroughOptions;
+    pt?: PTOptions<ChipPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -130,12 +130,14 @@ export interface ChipSlots {
     removeicon(scope: {
         /**
          * Remove icon click event
+         * @param {Event} event - Browser event
          */
-        onClick(): void;
+        onClick: (event: Event) => void;
         /**
          * Remove icon keydown event
+         * @param {Event} event - Browser event
          */
-        onKeydown(): void;
+        onKeydown: (event: Event) => void;
     }): VNode[];
 }
 

components/lib/chips/Chips.d.ts

@@ -9,7 +9,7 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ChipsPassThroughOptionType = ChipsPassThroughAttributes | ((options: ChipsPassThroughMethodOptions) => ChipsPassThroughAttributes | string) | string | null | undefined;
 
@@ -182,7 +182,7 @@ export interface ChipsProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ChipsPassThroughOptions}
      */
-    pt?: ChipsPassThroughOptions;
+    pt?: PTOptions<ChipsPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -209,9 +209,18 @@ export interface ChipsSlots {
      */
     removetokenicon(scope: {
         /**
-         * Remove icon click event
+         * Style class of the icon.
          */
-        onClick(): void;
+        class: string;
+        /**
+         * Index of the token.
+         */
+        index: number;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        onClick: (event: Event, index: number) => void;
     }): VNode[];
 }
 /**

components/lib/chips/Chips.vue

@@ -31,7 +31,7 @@
                 <slot name="chip" :class="cx('label')" :value="val">
                     <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
                 </slot>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeItem(event, i)">
+                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)">
                     <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
                 </slot>
             </li>

components/lib/colorpicker/ColorPicker.d.ts

@@ -9,7 +9,7 @@
  */
 import { TransitionProps } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ColorPickerPassThroughOptionType = ColorPickerPassThroughAttributes | ((options: ColorPickerPassThroughMethodOptions) => ColorPickerPassThroughAttributes | string) | string | null | undefined;
 
@@ -164,7 +164,7 @@ export interface ColorPickerProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ColorPickerPassThroughOptions}
      */
-    pt?: ColorPickerPassThroughOptions;
+    pt?: PTOptions<ColorPickerPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/colorpicker/ColorPicker.vue

@@ -30,45 +30,6 @@ export default {
     name: 'ColorPicker',
     extends: BaseColorPicker,
     emits: ['update:modelValue', 'change', 'show', 'hide'],
-    props: {
-        modelValue: {
-            type: null,
-            default: null
-        },
-        defaultColor: {
-            type: null,
-            default: 'ff0000'
-        },
-        inline: {
-            type: Boolean,
-            default: false
-        },
-        format: {
-            type: String,
-            default: 'hex'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        tabindex: {
-            type: String,
-            default: null
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        panelClass: null
-    },
     data() {
         return {
             overlayVisible: false
@@ -384,7 +345,7 @@ export default {
             this.bindResizeListener();
 
             if (this.autoZIndex) {
-                ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
+                ZIndexUtils.set('overlay', el, this.baseZIndex, this.$primevue.config.zIndex.overlay);
             }
 
             this.$emit('show');

components/lib/column/Column.d.ts

@@ -14,7 +14,7 @@ import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
 import { DataTablePassThroughOptions } from '../datatable';
 import { DropdownPassThroughOptionType } from '../dropdown';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
 
 export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes | string) | string | null | undefined;
@@ -567,7 +567,7 @@ export interface ColumnProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ColumnPassThroughOptions}
      */
-    pt?: ColumnPassThroughOptions;
+    pt?: PTOptions<ColumnPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -679,8 +679,9 @@ export interface ColumnSlots {
         frozenRow: boolean;
         /**
          * Callback function
+         * @param {Event} event - Browser event
          */
-        editorInitCallback(): void;
+        editorInitCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom header template.
@@ -729,12 +730,14 @@ export interface ColumnSlots {
         frozenRow: boolean;
         /**
          * Callback function
+         * @param {Event} event - Browser event
          */
-        editorSaveCallback(): void;
+        editorSaveCallback: (event: Event) => void;
         /**
          * Callback function
+         * @param {Event} event - Browser event
          */
-        editorCancelCallback(): void;
+        editorCancelCallback: (event: Event) => void;
     }): VNode[];
     /**
      * Custom filter template.
@@ -753,7 +756,7 @@ export interface ColumnSlots {
         /**
          * Callback function
          */
-        filterCallback(): void;
+        filterCallback: () => void;
     }): VNode[];
     /**
      * Custom filter header template.
@@ -772,7 +775,7 @@ export interface ColumnSlots {
         /**
          * Callback function
          */
-        filterCallback(): void;
+        filterCallback: () => void;
     }): VNode[];
     /**
      * Custom filter footer template.
@@ -791,7 +794,7 @@ export interface ColumnSlots {
         /**
          * Callback function
          */
-        filterCallback(): void;
+        filterCallback: () => void;
     }): VNode[];
     /**
      * Custom filter clear template.
@@ -810,7 +813,7 @@ export interface ColumnSlots {
         /**
          * Callback function
          */
-        filterCallback(): void;
+        filterCallback: () => void;
     }): VNode[];
     /**
      * Custom filter apply template.
@@ -829,7 +832,7 @@ export interface ColumnSlots {
         /**
          * Callback function
          */
-        filterCallback(): void;
+        filterCallback: () => void;
     }): VNode[];
     /**
      * Custom loading template.

components/lib/columngroup/ColumnGroup.d.ts

@@ -7,7 +7,7 @@
  */
 import { ComponentHooks } from '../basecomponent';
 import { DataTablePassThroughOptions } from '../datatable';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAttributes | ((options: ColumnGroupPassThroughMethodOptions) => ColumnGroupPassThroughAttributes | string) | string | null | undefined;
 
@@ -56,7 +56,7 @@ export interface ColumnGroupProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ColumnGroupPassThroughOptions}
      */
-    pt?: ColumnGroupPassThroughOptions;
+    pt?: PTOptions<ColumnGroupPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/config/PrimeVue.d.ts

@@ -92,7 +92,7 @@ import { TreePassThroughOptions } from '../tree';
 import { TreeSelectPassThroughOptions } from '../treeselect';
 import { TreeTablePassThroughOptions } from '../treetable';
 import { TriStateCheckboxPassThroughOptions } from '../tristatecheckbox';
-import { DefaultPTOptions } from '../ts-helpers';
+import { DefaultPTOptions, PTOptions } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptions } from '../virtualscroller';
 
 export interface PrimeVueConfiguration {
@@ -101,8 +101,9 @@ export interface PrimeVueConfiguration {
     locale?: PrimeVueLocaleOptions;
     filterMatchModeOptions?: any;
     zIndex?: PrimeVueZIndexOptions;
-    pt?: PrimeVuePTOptions;
+    pt?: PTOptions<PrimeVuePTOptions>;
     unstyled?: boolean;
+    csp?: PrimeVueCSPOptions;
 }
 
 export interface PrimeVueZIndexOptions {
@@ -112,6 +113,10 @@ export interface PrimeVueZIndexOptions {
     tooltip?: number;
 }
 
+export interface PrimeVueCSPOptions {
+    nonce?: string;
+}
+
 export interface PrimeVuePTOptions {
     accordion?: DefaultPTOptions<AccordionPassThroughOptions>;
     accordiontab?: DefaultPTOptions<AccordionTabPassThroughOptions>;

components/lib/config/PrimeVue.js

@@ -132,7 +132,10 @@ export const defaultOptions = {
         tooltip: 1100
     },
     pt: undefined,
-    unstyled: false
+    unstyled: false,
+    csp: {
+        nonce: undefined
+    }
 };
 
 const PrimeVueSymbol = Symbol();

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -11,7 +11,7 @@ import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ConfirmDialogPassThroughOptionType = ConfirmDialogPassThroughAttributes | ((options: ConfirmDialogPassThroughMethodOptions) => ConfirmDialogPassThroughAttributes | string) | string | null | undefined;
 
@@ -152,7 +152,7 @@ export interface ConfirmDialogProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmDialogPassThroughOptions}
      */
-    pt?: ConfirmDialogPassThroughOptions;
+    pt?: PTOptions<ConfirmDialogPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -176,6 +176,7 @@ export interface ConfirmDialogSlots {
     }): VNode[];
     /**
      * Custom icon template.
+     * @param {Object} scope - icon slot's params.
      */
     icon(scope: {
         /**

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -11,7 +11,7 @@ import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { ConfirmationOptions } from '../confirmationoptions';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ConfirmPopupPassThroughOptionType = ConfirmPopupPassThroughAttributes | ((options: ConfirmPopupPassThroughMethodOptions) => ConfirmPopupPassThroughAttributes | string) | string | null | undefined;
 
@@ -106,7 +106,7 @@ export interface ConfirmPopupProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ConfirmPopupPassThroughOptions}
      */
-    pt?: ConfirmPopupPassThroughOptions;
+    pt?: PTOptions<ConfirmPopupPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -130,6 +130,7 @@ export interface ConfirmPopupSlots {
     }): VNode[];
     /**
      * Custom icon template.
+     *  @param {Object} scope - icon slot's params.
      */
     icon(scope: {
         /**

components/lib/contextmenu/ContextMenu.d.ts

@@ -11,7 +11,7 @@
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ContextMenuPassThroughOptionType = ContextMenuPassThroughAttributes | ((options: ContextMenuPassThroughMethodOptions) => ContextMenuPassThroughAttributes | string) | string | null | undefined;
 
@@ -216,7 +216,7 @@ export interface ContextMenuProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ContextMenuPassThroughOptions}
      */
-    pt?: ContextMenuPassThroughOptions;
+    pt?: PTOptions<ContextMenuPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -254,6 +254,7 @@ export interface ContextMenuSlots {
     }): VNode[];
     /**
      * Custom submenu icon template.
+     * @param {Object} scope - submenuicon slot's params.
      */
     submenuicon(scope: {
         /**

components/lib/datatable/BaseDataTable.vue

@@ -281,7 +281,7 @@ const classes = {
     thead: 'p-datatable-thead',
     // headercell
     headerCell: ({ instance, props, column }) =>
-        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== columnProp(column, 'field'))
+        column && !instance.columnProp(column, 'hidden') && (props.rowGroupMode !== 'subheader' || props.groupRowsBy !== instance.columnProp(column, 'field'))
             ? [
                   'p-filter-column',
                   {

components/lib/datatable/BodyCell.vue

@@ -314,6 +314,7 @@ export default {
             if (this.editMode === 'cell') {
                 switch (event.code) {
                     case 'Enter':
+                    case 'NumpadEnter':
                         this.completeEdit(event, 'enter');
                         break;
 

components/lib/datatable/DataTable.d.ts

@@ -13,7 +13,7 @@ import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
 import { RowPassThroughOptionType } from '../row';
-import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type DataTablePassThroughOptionType = DataTablePassThroughAttributes | ((options: DataTablePassThroughMethodOptions) => DataTablePassThroughAttributes | string) | string | null | undefined;
@@ -1069,7 +1069,7 @@ export interface DataTableProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}
      */
-    pt?: DataTablePassThroughOptions;
+    pt?: PTOptions<DataTablePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -1103,6 +1103,7 @@ export interface DataTableSlots {
     empty(): VNode[];
     /**
      * Custom group header template.
+     * @param {Object} scope - group header slot's params.
      */
     groupheader(scope: {
         /**
@@ -1130,6 +1131,7 @@ export interface DataTableSlots {
     }): VNode[];
     /**
      * Custom loading template.
+     * @param {Object} scope - loading slot's params.
      */
     loading(): VNode[];
     /**

components/lib/datatable/DataTable.vue

@@ -466,7 +466,8 @@ export default {
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'headercontent' ||
                     DomHandler.getAttribute(targetNode, 'data-pc-section') === 'sorticon' ||
                     DomHandler.getAttribute(targetNode.parentElement, 'data-pc-section') === 'sorticon' ||
-                    DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon'
+                    DomHandler.getAttribute(targetNode.parentElement.parentElement, 'data-pc-section') === 'sorticon' ||
+                    (targetNode.closest('[data-p-sortable-column="true"]') && !targetNode.closest('[data-pc-section="filtermenubutton"]'))
                 ) {
                     DomHandler.clearSelection();
 
@@ -515,17 +516,24 @@ export default {
             }
 
             let data = [...value];
+            let resolvedFieldDatas = new Map();
+
+            for (let item of data) {
+                resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
+            }
+
+            const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
 
             data.sort((data1, data2) => {
-                let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
+                let value1 = resolvedFieldDatas.get(data1);
-                let value2 = ObjectUtils.resolveFieldData(data2, this.d_sortField);
+                let value2 = resolvedFieldDatas.get(data2);
 
                 let result = null;
 
                 if (value1 == null && value2 != null) result = -1;
                 else if (value1 != null && value2 == null) result = 1;
                 else if (value1 == null && value2 == null) result = 0;
-                else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
                 else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                 return this.d_sortOrder * result;
@@ -561,7 +569,9 @@ export default {
 
             if (typeof value1 === 'string' || value1 instanceof String) {
                 if (value1.localeCompare && value1 !== value2) {
-                    return this.d_multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
+                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+
+                    return this.d_multiSortMeta[index].order * comparer(value1, value2);
                 }
             } else {
                 result = value1 < value2 ? -1 : 1;
@@ -585,6 +595,26 @@ export default {
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
         },
+        getActiveFilters(filters) {
+            const removeEmptyFilters = ([key, value]) => {
+                if (value.constraints) {
+                    const filteredConstraints = value.constraints.filter((constraint) => constraint.value !== null);
+
+                    if (filteredConstraints.length > 0) {
+                        return [key, { ...value, constraints: filteredConstraints }];
+                    }
+                } else if (value.value !== null) {
+                    return [key, value];
+                }
+
+                return undefined;
+            };
+
+            const filterValidEntries = (entry) => entry !== undefined;
+            const entries = Object.entries(filters).map(removeEmptyFilters).filter(filterValidEntries);
+
+            return Object.fromEntries(entries);
+        },
         filter(data) {
             if (!data) {
                 return;
@@ -592,9 +622,10 @@ export default {
 
             this.clearEditingMetaData();
 
+            let activeFilters = this.getActiveFilters(this.filters);
             let globalFilterFieldsArray;
 
-            if (this.filters['global']) {
+            if (activeFilters['global']) {
                 globalFilterFieldsArray = this.globalFilterFields || this.columns.map((col) => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
             }
 
@@ -605,11 +636,11 @@ export default {
                 let globalMatch = false;
                 let localFiltered = false;
 
-                for (let prop in this.filters) {
+                for (let prop in activeFilters) {
-                    if (Object.prototype.hasOwnProperty.call(this.filters, prop) && prop !== 'global') {
+                    if (Object.prototype.hasOwnProperty.call(activeFilters, prop) && prop !== 'global') {
                         localFiltered = true;
                         let filterField = prop;
-                        let filterMeta = this.filters[filterField];
+                        let filterMeta = activeFilters[filterField];
 
                         if (filterMeta.operator) {
                             for (let filterConstraint of filterMeta.constraints) {
@@ -629,11 +660,11 @@ export default {
                     }
                 }
 
-                if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
+                if (localMatch && activeFilters['global'] && !globalMatch && globalFilterFieldsArray) {
                     for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                         let globalFilterField = globalFilterFieldsArray[j];
 
-                        globalMatch = FilterService.filters[this.filters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), this.filters['global'].value, this.filterLocale);
+                        globalMatch = FilterService.filters[activeFilters['global'].matchMode || FilterMatchMode.CONTAINS](ObjectUtils.resolveFieldData(data[i], globalFilterField), activeFilters['global'].value, this.filterLocale);
 
                         if (globalMatch) {
                             break;
@@ -643,7 +674,7 @@ export default {
 
                 let matches;
 
-                if (this.filters['global']) {
+                if (activeFilters['global']) {
                     matches = localFiltered ? localFiltered && localMatch && globalMatch : globalMatch;
                 } else {
                     matches = localFiltered && localMatch;
@@ -654,7 +685,7 @@ export default {
                 }
             }
 
-            if (filteredValue.length === this.value.length) {
+            if (filteredValue.length === this.value.length || Object.keys(activeFilters).length == 0) {
                 filteredValue = data;
             }
 
@@ -1228,6 +1259,8 @@ export default {
                         !!el && (el.style.width = el.style.minWidth = tableWidth);
                     };
 
+                    // Reasoning: resize table cells before updating the table width so that it can use existing computed cell widths and adjust only the one column.
+                    this.resizeTableCells(newColumnWidth);
                     updateTableWidth(this.$refs.table);
 
                     if (!this.virtualScrollerDisabled) {
@@ -1237,8 +1270,6 @@ export default {
                         updateTableWidth(body);
                         updateTableWidth(frozenBody);
                     }
-
-                    this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {
@@ -1851,12 +1882,14 @@ export default {
         createStyleElement() {
             this.styleElement = document.createElement('style');
             this.styleElement.type = 'text/css';
+            DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
             document.head.appendChild(this.styleElement);
         },
         createResponsiveStyle() {
             if (!this.responsiveStyleElement) {
                 this.responsiveStyleElement = document.createElement('style');
                 this.responsiveStyleElement.type = 'text/css';
+                DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.responsiveStyleElement);
 
                 let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

components/lib/datatable/TableBody.vue

@@ -349,7 +349,7 @@ export default {
         getRowIndex(index) {
             const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
 
-            return getItemOptions ? getItemOptions(index).index : this.first + index;
+            return getItemOptions ? getItemOptions(index).index : index;
         },
         getRowStyle(rowData) {
             if (this.rowStyle) {

components/lib/dataview/DataView.d.ts

@@ -10,7 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { PaginatorPassThroughOptionType } from '../paginator';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DataViewPassThroughOptionType = DataViewPassThroughAttributes | ((options: DataViewPassThroughMethodOptions) => DataViewPassThroughAttributes | string) | string | null | undefined;
 
@@ -212,7 +212,7 @@ export interface DataViewProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataViewPassThroughOptions}
      */
-    pt?: DataViewPassThroughOptions;
+    pt?: PTOptions<DataViewPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/dataview/DataView.vue

@@ -110,6 +110,7 @@ export default {
         sort() {
             if (this.value) {
                 const value = [...this.value];
+                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
 
                 value.sort((data1, data2) => {
                     let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
@@ -119,7 +120,7 @@ export default {
                     if (value1 == null && value2 != null) result = -1;
                     else if (value1 != null && value2 == null) result = 1;
                     else if (value1 == null && value2 == null) result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
                     else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return this.sortOrder * result;

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DataViewLayoutOptionsPassThroughOptionType =
     | DataViewLayoutOptionsPassThroughAttributes
@@ -94,7 +94,7 @@ export interface DataViewLayoutOptionsProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataViewLayoutOptionsPassThroughOptions}
      */
-    pt?: DataViewLayoutOptionsPassThroughOptions;
+    pt?: PTOptions<DataViewLayoutOptionsPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/deferredcontent/DeferredContent.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes | string) | string | null | undefined;
 
@@ -64,7 +64,7 @@ export interface DeferredContentProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DeferredContentPassThroughOptions}
      */
-    pt?: DeferredContentPassThroughOptions;
+    pt?: PTOptions<DeferredContentPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/dialog/Dialog.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
 
@@ -260,7 +260,7 @@ export interface DialogProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DialogPassThroughOptions}
      */
-    pt?: DialogPassThroughOptions;
+    pt?: PTOptions<DialogPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/dialog/Dialog.vue

@@ -163,7 +163,7 @@ export default {
         },
         focus() {
             const findFocusableElement = (container) => {
-                return container.querySelector('[autofocus]');
+                return container && container.querySelector('[autofocus]');
             };
 
             let focusTarget = this.$slots.footer && findFocusableElement(this.footerContainer);
@@ -259,6 +259,7 @@ export default {
             if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';
@@ -322,7 +323,7 @@ export default {
                     let leftPos = offset.left + deltaX;
                     let topPos = offset.top + deltaY;
                     let viewport = DomHandler.getViewport();
-                    let containerComputedStyle = getComputedStyle(this.container)
+                    let containerComputedStyle = getComputedStyle(this.container);
                     let marginLeft = parseFloat(containerComputedStyle.marginLeft);
                     let marginTop = parseFloat(containerComputedStyle.marginTop);
 
@@ -331,18 +332,17 @@ export default {
                     if (this.keepInViewport) {
                         if (leftPos >= this.minX && leftPos + width < viewport.width) {
                             this.lastPageX = event.pageX;
-                            this.container.style.left = (leftPos - marginLeft) + 'px';
+                            this.container.style.left = leftPos - marginLeft + 'px';
                         }
 
                         if (topPos >= this.minY && topPos + height < viewport.height) {
-                            this.lastPageY = event.pageY;
+                            this.lastPageY = event.pageY;              
-                            this.container.style.top = (topPos - marginTop) + 'px';
+                            this.container.style.top = topPos - marginTop + 'px';
-                        }
                     } else {
                         this.lastPageX = event.pageX;
-                        this.container.style.left = (leftPos - marginLeft) + 'px';
+                        this.container.style.left = leftPos - marginLeft + 'px';
                         this.lastPageY = event.pageY;
-                        this.container.style.top = (topPos - marginTop) + 'px';
+                        this.container.style.top = topPos - marginTop + 'px';
                     }
                 }
             };

components/lib/divider/BaseDivider.vue

@@ -68,8 +68,8 @@ const styles = `
 /* Position */
 const inlineStyles = {
     root: ({ props }) => ({
-        justifyContent: props.layout === 'horizontal' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
+        justifyContent: props.layout === 'horizontal' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null,
-        alignItems: props.vertical === 'vertical' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
+        alignItems: props.layout === 'vertical' ? (props.align === 'center' || props.align === null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null
     })
 };
 

components/lib/divider/Divider.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes | string) | string | null | undefined;
 
@@ -70,7 +70,7 @@ export interface DividerProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DividerPassThroughOptions}
      */
-    pt?: DividerPassThroughOptions;
+    pt?: PTOptions<DividerPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/dock/Dock.d.ts

@@ -10,7 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes | string) | string | null | undefined;
 
@@ -185,7 +185,7 @@ export interface DockProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DockPassThroughOptions}
      */
-    pt?: DockPassThroughOptions;
+    pt?: PTOptions<DockPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/dropdown/Dropdown.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | string) | string | null | undefined;
@@ -409,7 +409,7 @@ export interface DropdownProps {
     emptyFilterMessage?: string | undefined;
     /**
      * Text to display when there are no options available. Defaults to value from PrimeVue locale configuration.
-     * @defaultValue No results foun
+     * @defaultValue No results found
      */
     emptyMessage?: string | undefined;
     /**
@@ -428,7 +428,7 @@ export interface DropdownProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {DropdownPassThroughOptions}
      */
-    pt?: DropdownPassThroughOptions;
+    pt?: PTOptions<DropdownPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -540,13 +540,13 @@ export interface DropdownSlots {
          * Referance of the content
          * @param {HTMLElement} el - Element of 'ref' property
          */
-        contentRef(el: any): void;
+        contentRef: (el: any) => void;
         /**
          * Options of the items
          * @param {number} index - Rendered index
-         * @return {@link VirtualScroller.VirtualScrollerItemOptions}
+         * @return {@link VirtualScrollerItemOptions}
          */
-        getItemOptions(index: number): VirtualScrollerItemOptions;
+        getItemOptions: (index: number) => VirtualScrollerItemOptions;
     }): VNode[];
     /**
      * Custom loader template.
@@ -564,9 +564,14 @@ export interface DropdownSlots {
      */
     clearicon(scope: {
         /**
-         * Clear icon click function.
+         * Style class of the clear icon
          */
-        onClick: void;
+        class: any;
+        /**
+         * Clear icon click function.
+         * @param {Event} event - Browser event
+         */
+        onClick: (event: Event) => void;
     }): VNode[];
     /**
      * Custom dropdown icon template.
@@ -574,7 +579,7 @@ export interface DropdownSlots {
      */
     dropdownicon(scope: {
         /**
-         * Style class of the component
+         * Style class of the dropdown icon
          */
         class: any;
     }): VNode[];
@@ -584,14 +589,20 @@ export interface DropdownSlots {
      */
     loadingicon(scope: {
         /**
-         * Style class of the component
+         * Style class of the loading icon
          */
         class: any;
     }): VNode[];
     /**
      * Custom filter icon template.
+     * @param {Object} scope - filter icon slot's params.
      */
-    filtericon(): VNode[];
+    filtericon(scope: {
+        /**
+         * Style class of the filter icon
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/dropdown/Dropdown.spec.js

@@ -89,6 +89,14 @@ describe('clear checks', () => {
     it('should have correct icon', () => {
         expect(wrapper.find('.p-dropdown-clear-icon').classes()).toContain('pi-discord');
     });
+
+    it('should clear with delete key', async () => {
+        const updateModelSpy = vi.spyOn(wrapper.vm, 'updateModel');
+
+        await wrapper.find('.p-dropdown-label.p-inputtext').trigger('keydown', { code: 'Delete' });
+        expect(updateModelSpy).toHaveBeenCalledOnce();
+        expect(updateModelSpy).toHaveBeenCalledWith(expect.any(KeyboardEvent), null);
+    });
 });
 
 describe('editable checks', () => {

components/lib/dropdown/Dropdown.vue

@@ -339,6 +339,9 @@ export default {
                     this.onArrowLeftKey(event, this.editable);
                     break;
 
+                case 'Delete':
+                    this.onDeleteKey(event);
+
                 case 'Home':
                     this.onHomeKey(event, this.editable);
                     break;
@@ -405,7 +408,7 @@ export default {
                 return;
             }
 
-            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.tagName === 'path') {
+            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);
@@ -507,6 +510,12 @@ export default {
                     break;
             }
         },
+        onDeleteKey(event) {
+            if (this.showClear) {
+                this.updateModel(event, null);
+                event.preventDefault();
+            }
+        },
         onArrowDownKey(event) {
             const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();
 

components/lib/editor/BaseEditor.vue

@@ -956,7 +956,7 @@ const classes = {
     content: 'p-editor-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { name: 'editor' });
+const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
 
 export default {
     name: 'BaseEditor',

components/lib/editor/Editor.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes | string) | string | null | undefined;
 
 /**
@@ -219,7 +219,7 @@ export interface EditorProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {EditorPassThroughOptions}
      */
-    pt?: EditorPassThroughOptions;
+    pt?: PTOptions<EditorPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/fieldset/Fieldset.d.ts

@@ -9,7 +9,7 @@
  */
 import { AnchorHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes | string) | string | null | undefined;
 
@@ -128,7 +128,7 @@ export interface FieldsetProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {FieldsetPassThroughOptions}
      */
-    pt?: FieldsetPassThroughOptions;
+    pt?: PTOptions<FieldsetPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/fileupload/FileUpload.d.ts

@@ -11,7 +11,7 @@ import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { MessagePassThroughOptions } from '../message';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
 
@@ -413,7 +413,7 @@ export interface FileUploadProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {FileUploadPassThroughOptions}
      */
-    pt?: FileUploadPassThroughOptions;
+    pt?: PTOptions<FileUploadPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -427,6 +427,7 @@ export interface FileUploadProps {
 export interface FileUploadSlots {
     /**
      * Custom header content template.
+     * @param {Object} scope - header slot's params.
      */
     header(scope: {
         /**
@@ -440,18 +441,19 @@ export interface FileUploadSlots {
         /**
          * Choose function
          */
-        chooseCallback(): void;
+        chooseCallback: () => void;
         /**
          * Upload function
          */
-        uploadCallback(): void;
+        uploadCallback: () => void;
         /**
          *  Clear function
          */
-        clearCallback(): void;
+        clearCallback: () => void;
     }): VNode[];
     /**
      * Custom uploaded content template.
+     * @param {Object} scope - content slot's params.
      */
     content(scope: {
         /**
@@ -464,12 +466,14 @@ export interface FileUploadSlots {
         uploadedFiles: File[];
         /**
          * Function to remove an uploaded file.
+         * @param {number} index - Index of the uploaded file
          */
-        removeUploadedFileCallback(index: number): void;
+        removeUploadedFileCallback: (index: number) => void;
         /**
          * Function to remove a file.
+         * @param {number} index - Index of the removed file
          */
-        removeFileCallback(index: number): void;
+        removeFileCallback: (index: number) => void;
         /**
          *  Uploaded progress as number.
          */
@@ -497,6 +501,7 @@ export interface FileUploadSlots {
     cancelicon(): VNode[];
     /**
      * Custom remove icon template for each file.
+     * @param {Object} scope - fileremoveicon slot's params.
      */
     fileremoveicon(scope: {
         /**

components/lib/fileupload/FileUpload.vue

@@ -60,6 +60,7 @@ import UploadIcon from 'primevue/icons/upload';
 import Message from 'primevue/message';
 import ProgressBar from 'primevue/progressbar';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
 import BaseFileUpload from './BaseFileUpload.vue';
 import FileContent from './FileContent.vue';
 
@@ -265,6 +266,7 @@ export default {
         },
         onDragOver(event) {
             if (!this.disabled) {
+                !this.isUnstyled && (this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', true);
                 event.stopPropagation();
                 event.preventDefault();
@@ -272,11 +274,13 @@ export default {
         },
         onDragLeave() {
             if (!this.disabled) {
+                !this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', false);
             }
         },
         onDrop(event) {
             if (!this.disabled) {
+                !this.isUnstyled && DomHandler.removeClass(this.$refs.content, 'p-fileupload-highlight');
                 this.$refs.content.setAttribute('data-p-highlight', false);
                 event.stopPropagation();
                 event.preventDefault();

components/lib/focustrap/FocusTrap.d.ts

@@ -8,6 +8,7 @@
  */
 import { DirectiveBinding, ObjectDirective } from 'vue';
 import { DirectiveHooks } from '../basedirective';
+import { PTOptions } from '../ts-helpers';
 
 export declare type FocusTrapDirectivePassThroughOptionType = FocusTrapDirectivePassThroughAttributes | null | undefined;
 
@@ -29,7 +30,7 @@ export interface FocusTrapOptions {
      * Used to pass attributes to DOM elements inside the component.
      * @type {FocusTrapDirectivePassThroughOptions}
      */
-    pt?: FocusTrapDirectivePassThroughOptions;
+    pt?: PTOptions<FocusTrapDirectivePassThroughOptions>;
 }
 
 /**

components/lib/galleria/Galleria.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type GalleriaPassThroughOptionType = GalleriaPassThroughAttributes | ((options: GalleriaPassThroughMethodOptions) => GalleriaPassThroughAttributes | string) | string | null | undefined;
 
@@ -377,7 +377,7 @@ export interface GalleriaProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {GalleriaPassThroughOptions}
      */
-    pt?: GalleriaPassThroughOptions;
+    pt?: PTOptions<GalleriaPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/galleria/GalleriaItem.vue

@@ -1,13 +1,13 @@
 <template>
     <div :class="cx('itemWrapper')" v-bind="ptm('itemWrapper')">
         <div :class="cx('itemContainer')" v-bind="ptm('itemContainer')">
-            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('previousItemButton')" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" v-bind="ptm('previousItemButton')" data-pc-group-section="itemnavigator">
                 <component :is="templates.previousitemicon || 'ChevronLeftIcon'" :class="cx('previousItemIcon')" v-bind="ptm('previousItemIcon')" />
             </button>
             <div :id="id + '_item_' + activeIndex" :class="cx('item')" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel" v-bind="ptm('item')">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
-            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')">
+            <button v-if="showItemNavigators" v-ripple type="button" :class="cx('nextItemButton')" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-bind="ptm('nextItemButton')" data-pc-group-section="itemnavigator">
                 <component :is="templates.nextitemicon || 'ChevronRightIcon'" :class="cx('nextItemIcon')" v-bind="ptm('nextItemIcon')" />
             </button>
             <div v-if="templates['caption']" :class="cx('caption')" v-bind="ptm('caption')">

components/lib/galleria/GalleriaThumbnails.vue

@@ -10,6 +10,7 @@
                 :aria-label="ariaPrevButtonLabel"
                 @click="navBackward($event)"
                 v-bind="{ ...prevButtonProps, ...ptm('previousThumbnailButton') }"
+                data-pc-group-section="thumbnailnavigator"
             >
                 <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" :class="cx('previousThumbnailIcon')" v-bind="ptm('previousThumbnailIcon')" />
             </button>
@@ -52,6 +53,7 @@
                 :aria-label="ariaNextButtonLabel"
                 @click="navForward($event)"
                 v-bind="{ ...nextButtonProps, ...ptm('nextThumbnailButton') }"
+                data-pc-group-section="thumbnailnavigator"
             >
                 <component :is="templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')" :class="cx('nextThumbnailIcon')" v-bind="ptm('nextThumbnailIcon')" />
             </button>
@@ -424,6 +426,7 @@ export default {
             if (!this.thumbnailsStyle) {
                 this.thumbnailsStyle = document.createElement('style');
                 this.thumbnailsStyle.type = 'text/css';
+                DomHandler.setAttribute(this.thumbnailsStyle, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.body.appendChild(this.thumbnailsStyle);
             }
 
@@ -435,6 +438,8 @@ export default {
 
             if (this.responsiveOptions && !this.isUnstyled) {
                 this.sortedResponsiveOptions = [...this.responsiveOptions];
+                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+
                 this.sortedResponsiveOptions.sort((data1, data2) => {
                     const value1 = data1.breakpoint;
                     const value2 = data2.breakpoint;
@@ -443,7 +448,7 @@ export default {
                     if (value1 == null && value2 != null) result = -1;
                     else if (value1 != null && value2 == null) result = 1;
                     else if (value1 == null && value2 == null) result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparer(value1, value2);
                     else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return -1 * result;

components/lib/image/Image.d.ts

@@ -9,7 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type ImagePassThroughOptionType = ImagePassThroughAttributes | ((options: ImagePassThroughMethodOptions) => ImagePassThroughAttributes | string) | string | null | undefined;
 
@@ -181,7 +181,7 @@ export interface ImageProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ImagePassThroughOptions}
      */
-    pt?: ImagePassThroughOptions;
+    pt?: PTOptions<ImagePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -219,6 +219,7 @@ export interface ImageSlots {
     close(): VNode[];
     /**
      * Custom image template.
+     * @param {Object} scope - image slot's params.
      */
     image(scope: {
         /**
@@ -232,10 +233,11 @@ export interface ImageSlots {
         /**
          * Image error function.
          */
-        onError: void;
+        onError: () => void;
     }): VNode[];
     /**
      * Custom preview template.
+     * @param {Object} scope - preview slot's params.
      */
     preview(scope: {
         /**
@@ -249,7 +251,7 @@ export interface ImageSlots {
         /**
          * Preview click function.
          */
-        onClick: void;
+        onClick: () => void;
     }): VNode[];
 }
 

components/lib/image/Image.vue

@@ -3,7 +3,7 @@
         <slot name="image" :onError="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
-        <button v-if="preview" ref="previewButton" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
+        <button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
             <slot name="indicatoricon">
                 <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
             </slot>
@@ -11,31 +11,31 @@
         <Portal>
             <div v-if="maskVisible" :ref="maskRef" v-focustrap role="dialog" :class="cx('mask')" :aria-modal="maskVisible" @click="onMaskClick" @keydown="onMaskKeydown" v-bind="ptm('mask')">
                 <div class="p-image-toolbar" v-bind="ptm('toolbar')">
-                    <button :class="cx('rotateRightButton')" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')">
+                    <button :class="cx('rotateRightButton')" @click="rotateRight" type="button" :aria-label="rightAriaLabel" v-bind="ptm('rotateRightButton')" data-pc-group-section="action">
                         <slot name="refresh">
                             <RefreshIcon v-bind="ptm('rotateRightIcon')" />
                         </slot>
                     </button>
 
-                    <button :class="cx('rotateLeftButton')" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')">
+                    <button :class="cx('rotateLeftButton')" @click="rotateLeft" type="button" :aria-label="leftAriaLabel" v-bind="ptm('rotateLeftButton')" data-pc-group-section="action">
                         <slot name="undo">
                             <UndoIcon v-bind="ptm('rotateLeftIcon')" />
                         </slot>
                     </button>
 
-                    <button :class="cx('zoomOutButton')" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')">
+                    <button :class="cx('zoomOutButton')" @click="zoomOut" type="button" :disabled="isZoomOutDisabled" :aria-label="zoomOutAriaLabel" v-bind="ptm('zoomOutButton')" data-pc-group-section="action">
                         <slot name="zoomout">
                             <SearchMinusIcon v-bind="ptm('zoomOutIcon')" />
                         </slot>
                     </button>
 
-                    <button :class="cx('zoomInButton')" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')">
+                    <button :class="cx('zoomInButton')" @click="zoomIn" type="button" :disabled="isZoomInDisabled" :aria-label="zoomInAriaLabel" v-bind="ptm('zoomInButton')" data-pc-group-section="action">
                         <slot name="zoomin">
                             <SearchPlusIcon v-bind="ptm('zoomInIcon')" />
                         </slot>
                     </button>
 
-                    <button :class="cx('closeButton')" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')">
+                    <button :class="cx('closeButton')" type="button" @click="hidePreview" :aria-label="closeAriaLabel" autofocus v-bind="ptm('closeButton')" data-pc-group-section="action">
                         <slot name="close">
                             <TimesIcon v-bind="ptm('closeIcon')" />
                         </slot>
@@ -43,7 +43,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
                     <div v-if="previewVisible" v-bind="ptm('previewContainer')">
-                        <slot name="preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
+                        <slot name="preview" :class="cx('preview')" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
                             <img :src="$attrs.src" :class="cx('preview')" :style="imagePreviewStyle" @click="onPreviewImageClick" v-bind="ptm('preview')" />
                         </slot>
                     </div>
@@ -93,6 +93,7 @@ export default {
         },
         onImageClick() {
             if (this.preview) {
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
                 this.maskVisible = true;
                 setTimeout(() => {
                     this.previewVisible = true;
@@ -179,6 +180,7 @@ export default {
             this.previewVisible = false;
             this.rotate = 0;
             this.scale = 1;
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
     },
     computed: {

components/lib/inlinemessage/InlineMessage.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type InlineMessagePassThroughOptionType = InlineMessagePassThroughAttributes | ((options: InlineMessagePassThroughMethodOptions) => InlineMessagePassThroughAttributes | string) | string | null | undefined;
 
@@ -82,7 +82,7 @@ export interface InlineMessageProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InlineMessagePassThroughOptions}
      */
-    pt?: InlineMessagePassThroughOptions;
+    pt?: PTOptions<InlineMessagePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/inplace/Inplace.d.ts

@@ -11,7 +11,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes | string) | string | null | undefined;
 
@@ -107,7 +107,7 @@ export interface InplaceProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InplacePassThroughOptions}
      */
-    pt?: InplacePassThroughOptions;
+    pt?: PTOptions<InplacePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/inputmask/InputMask.d.ts

@@ -8,7 +8,7 @@
  *
  */
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type InputMaskPassThroughOptionType = InputMaskPassThroughAttributes | ((options: InputMaskPassThroughMethodOptions) => InputMaskPassThroughAttributes | string) | string | null | undefined;
 
@@ -96,7 +96,7 @@ export interface InputMaskProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputMaskPassThroughOptions}
      */
-    pt?: InputMaskPassThroughOptions;
+    pt?: PTOptions<InputMaskPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/inputnumber/InputNumber.d.ts

@@ -11,7 +11,7 @@ import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
 import { InputTextPassThroughOptionType } from '../inputtext';
-import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
 
 export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes | string) | string | null | undefined;
 
@@ -273,7 +273,7 @@ export interface InputNumberProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputNumberPassThroughOptions}
      */
-    pt?: InputNumberPassThroughOptions;
+    pt?: PTOptions<InputNumberPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/inputswitch/InputSwitch.d.ts

@@ -9,7 +9,7 @@
  */
 import { InputHTMLAttributes } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
 
@@ -115,7 +115,7 @@ export interface InputSwitchProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputSwitchPassThroughOptions}
      */
-    pt?: InputSwitchPassThroughOptions;
+    pt?: PTOptions<InputSwitchPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/inputtext/InputText.d.ts

@@ -9,7 +9,7 @@
  */
 import { InputHTMLAttributes } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, Nullable, PTOptions } from '../ts-helpers';
 
 export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions) => InputTextPassThroughAttributes | string) | string | null | undefined;
 
@@ -77,7 +77,7 @@ export interface InputTextProps extends InputHTMLAttributes {
      * Used to pass attributes to DOM elements inside the component.
      * @type {InputTextPassThroughOptions}
      */
-    pt?: InputTextPassThroughOptions;
+    pt?: PTOptions<InputTextPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/knob/Knob.d.ts

@@ -8,7 +8,7 @@
  *
  */
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type KnobPassThroughOptionType = KnobPassThroughAttributes | ((options: KnobPassThroughMethodOptions) => KnobPassThroughAttributes | string) | string | null | undefined;
 
@@ -174,7 +174,7 @@ export interface KnobProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {KnobPassThroughOptions}
      */
-    pt?: KnobPassThroughOptions;
+    pt?: PTOptions<KnobPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/listbox/Listbox.d.ts

@@ -9,7 +9,7 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type ListboxPassThroughOptionType = ListboxPassThroughAttributes | ((options: ListboxPassThroughMethodOptions) => ListboxPassThroughAttributes | string) | string | null | undefined;
@@ -322,7 +322,7 @@ export interface ListboxProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ListboxPassThroughOptions}
      */
-    pt?: ListboxPassThroughOptions;
+    pt?: PTOptions<ListboxPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -415,13 +415,13 @@ export interface ListboxSlots {
          * Referance of the content
          * @param {HTMLElement} el - Element of 'ref' property
          */
-        contentRef(el: any): void;
+        contentRef: (el: any) => void;
         /**
          * Options of the items
          * @param {number} index - Rendered index
          * @return {VirtualScrollerItemOptions}
          */
-        getItemOptions(index: number): VirtualScrollerItemOptions;
+        getItemOptions: (index: number) => VirtualScrollerItemOptions;
     }): VNode[];
     /**
      * Custom loader template.
@@ -435,8 +435,14 @@ export interface ListboxSlots {
     }): VNode[];
     /**
      * Custom filter icon template.
+     * @param {Object} scope - filter icon slot's params.
      */
-    filtericon(): VNode[];
+    filtericon(scope: {
+        /**
+         * Style class of the filter icon
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/megamenu/MegaMenu.d.ts

@@ -10,7 +10,7 @@
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type MegaMenuPassThroughOptionType = MegaMenuPassThroughAttributes | ((options: MegaMenuPassThroughMethodOptions) => MegaMenuPassThroughAttributes | string) | string | null | undefined;
 
@@ -213,7 +213,7 @@ export interface MegaMenuProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {MegaMenuPassThroughOptions}
      */
-    pt?: MegaMenuPassThroughOptions;
+    pt?: PTOptions<MegaMenuPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -245,6 +245,7 @@ export interface MegaMenuSlots {
     }): VNode[];
     /**
      * Custom submenu icon template.
+     * @param {Object} scope - submenuicon slot's params.
      */
     submenuicon(scope: {
         /**

components/lib/menu/Menu.d.ts

@@ -10,7 +10,7 @@
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type MenuPassThroughOptionType = MenuPassThroughAttributes | ((options: MenuPassThroughMethodOptions) => MenuPassThroughAttributes | string) | string | null | undefined;
 
@@ -189,7 +189,7 @@ export interface MenuProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {MenuPassThroughOptions}
      */
-    pt?: MenuPassThroughOptions;
+    pt?: PTOptions<MenuPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/menubar/Menubar.d.ts

@@ -10,7 +10,7 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type MenubarPassThroughOptionType = MenubarPassThroughAttributes | ((options: MenubarPassThroughMethodOptions) => MenubarPassThroughAttributes | string) | string | null | undefined;
 
@@ -204,7 +204,7 @@ export interface MenubarProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {MenubarPassThroughOptions}
      */
-    pt?: MenubarPassThroughOptions;
+    pt?: PTOptions<MenubarPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -240,6 +240,7 @@ export interface MenubarSlots {
     popupicon(): VNode[];
     /**
      * Custom submenu icon template.
+     * @param {Object} scope - submenuicon slot's params.
      */
     submenuicon(scope: {
         /**

components/lib/message/BaseMessage.vue

@@ -8,10 +8,15 @@ const styles = `
     align-items: center;
 }
 
+.p-message-icon {
+    flex-shrink: 0;
+}
+
 .p-message-close {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0; 
 }
 
 .p-message-close.p-link {

components/lib/message/Message.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type MessagePassThroughOptionType = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes | string) | string | null | undefined;
 
@@ -133,7 +133,7 @@ export interface MessageProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {MessagePassThroughOptions}
      */
-    pt?: MessagePassThroughOptions;
+    pt?: PTOptions<MessagePassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -151,6 +151,7 @@ export interface MessageSlots {
     default(): VNode[];
     /**
      * Custom message icon template.
+     * @param {Object} scope - messageicon slot's params.
      */
     messageicon(scope: {
         /**
@@ -160,6 +161,7 @@ export interface MessageSlots {
     }): VNode[];
     /**
      * Custom close icon template.
+     * @param {Object} scope - closeicon slot's params.
      */
     closeicon(scope: {
         /**

components/lib/multiselect/MultiSelect.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
 export declare type MultiSelectPassThroughOptionType = MultiSelectPassThroughAttributes | ((options: MultiSelectPassThroughMethodOptions) => MultiSelectPassThroughAttributes | string) | string | null | undefined;
@@ -510,7 +510,7 @@ export interface MultiSelectProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {MultiSelectPassThroughOptions}
      */
-    pt?: MultiSelectPassThroughOptions;
+    pt?: PTOptions<MultiSelectPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -632,13 +632,13 @@ export interface MultiSelectSlots {
          * Referance of the content
          * @param {HTMLElement} el - Element of 'ref' property
          */
-        contentRef(el: any): void;
+        contentRef: (el: any) => void;
         /**
          * Options of the items
          * @param {number} index - Rendered index
          * @return {VirtualScrollerItemOptions}
          */
-        getItemOptions(index: number): VirtualScrollerItemOptions;
+        getItemOptions: (index: number) => VirtualScrollerItemOptions;
     }): VNode[];
     /**
      * Custom loader template.
@@ -652,6 +652,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom remove token icon template.
+     * @param {Object} scope - removetokenicon slot's params.
      */
     removetokenicon(scope: {
         /**
@@ -659,9 +660,15 @@ export interface MultiSelectSlots {
          */
         class: string;
         /**
-         * Remove token icon function.
+         * Item of the token.
          */
-        onClick: void;
+        item: any;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         * @param {any} item - Item
+         */
+        onClick: (event: Event, item: any) => void;
     }): VNode[];
     /**
      * Custom header checkbox icon template.
@@ -679,6 +686,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom filter icon template.
+     * @param {Object} scope - filtericon slot's params.
      */
     filtericon(scope: {
         /**
@@ -688,6 +696,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom close icon template.
+     * @param {Object} scope - closeicon slot's params.
      */
     closeicon(scope: {
         /**
@@ -697,7 +706,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom item checkbox icon template.
-     * @param {Object} scope - header checkbox icon slot's params.
+     * @param {Object} scope - itemcheckboxicon slot's params.
      */
     itemcheckboxicon(scope: {
         /**
@@ -721,6 +730,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom dropdown icon template.
+     * @param {Object} scope - dropdownicon slot's params.
      */
     dropdownicon(scope: {
         /**

components/lib/multiselect/MultiSelect.vue

@@ -33,7 +33,7 @@
                             <slot name="chip" :value="item">
                                 <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :onClick="(event) => removeOption(event, item)">
+                            <slot v-if="!disabled" name="removetokenicon" :class="cx('removeTokenIcon')" :item="item" :onClick="(event) => removeOption(event, item)">
                                 <span v-if="removeTokenIcon" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                                 <TimesCircleIcon v-else :class="cx('removeTokenIcon')" @click.stop="removeOption($event, item)" v-bind="ptm('removeTokenIcon')" />
                             </slot>

components/lib/orderlist/OrderList.d.ts

@@ -10,7 +10,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptionType } from '../button';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type OrderListPassThroughOptionType = OrderListPassThroughAttributes | ((options: OrderListPassThroughMethodOptions) => OrderListPassThroughAttributes | string) | string | null | undefined;
 
@@ -240,7 +240,7 @@ export interface OrderListProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {OrderListPassThroughOptions}
      */
-    pt?: OrderListPassThroughOptions;
+    pt?: PTOptions<OrderListPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/orderlist/OrderList.vue

@@ -482,6 +482,7 @@ export default {
                 this.$el.setAttribute(this.attributeSelector, '');
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.styleElement);
 
                 let innerHTML = `

components/lib/organizationchart/OrganizationChart.d.ts

@@ -9,7 +9,7 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type OrganizationChartPassThroughOptionType = OrganizationChartPassThroughAttributes | ((options: OrganizationChartPassThroughMethodOptions) => OrganizationChartPassThroughAttributes | string) | string | null | undefined;
 
@@ -224,7 +224,7 @@ export interface OrganizationChartProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {OrganizationChartPassThroughOptions}
      */
-    pt?: OrganizationChartPassThroughOptions;
+    pt?: PTOptions<OrganizationChartPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/overlaypanel/OverlayPanel.d.ts

@@ -9,7 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type OverlayPanelPassThroughOptionType = OverlayPanelPassThroughAttributes | ((options: OverlayPanelPassThroughMethodOptions) => OverlayPanelPassThroughAttributes | string) | string | null | undefined;
 
@@ -138,7 +138,7 @@ export interface OverlayPanelProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {OverlayPanelPassThroughOptions}
      */
-    pt?: OverlayPanelPassThroughOptions;
+    pt?: PTOptions<OverlayPanelPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false

components/lib/overlaypanel/OverlayPanel.vue

@@ -246,6 +246,7 @@ export default {
             if (!this.styleElement && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';

components/lib/paginator/Paginator.d.ts

@@ -11,7 +11,7 @@ import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { DropdownPassThroughOptionType } from '../dropdown';
 import { InputNumberPassThroughOptionType } from '../inputnumber';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes | string) | string | null | undefined;
 
@@ -235,7 +235,7 @@ export interface PaginatorProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {PaginatorPassThroughOptions}
      */
-    pt?: PaginatorPassThroughOptions;
+    pt?: PTOptions<PaginatorPassThroughOptions>;
 }
 
 /**

components/lib/paginator/Paginator.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script>
-import { UniqueComponentId } from 'primevue/utils';
+import { DomHandler, UniqueComponentId } from 'primevue/utils';
 import BasePaginator from './BasePaginator.vue';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
@@ -144,6 +144,7 @@ export default {
             if (this.hasBreakpoints() && !this.isUnstyled) {
                 this.styleElement = document.createElement('style');
                 this.styleElement.type = 'text/css';
+                DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                 document.head.appendChild(this.styleElement);
 
                 let innerHTML = '';

components/lib/panel/Panel.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes | string) | string | null | undefined;
 
@@ -136,7 +136,7 @@ export interface PanelProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {PanelPassThroughOptions}
      */
-    pt?: PanelPassThroughOptions;
+    pt?: PTOptions<PanelPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -154,6 +154,7 @@ export interface PanelSlots {
     default(): VNode[];
     /**
      * Custom header template.
+     * @param {Object} scope - header slot's params.
      */
     header(scope: {
         /**

components/lib/panelmenu/PanelMenu.d.ts

@@ -10,7 +10,7 @@
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { MenuItem } from '../menuitem';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ClassComponent, GlobalComponentConstructor, PTOptions } from '../ts-helpers';
 
 export declare type PanelMenuPassThroughOptionType = PanelMenuPassThroughAttributes | ((options: PanelMenuPassThroughMethodOptions) => PanelMenuPassThroughAttributes | string) | string | null | undefined;
 
@@ -217,7 +217,7 @@ export interface PanelMenuProps {
      * Used to pass attributes to DOM elements inside the component.
      * @type {PanelMenuPassThroughOptions}
      */
-    pt?: PanelMenuPassThroughOptions;
+    pt?: PTOptions<PanelMenuPassThroughOptions>;
     /**
      * When enabled, it removes component related styles in the core.
      * @defaultValue false
@@ -241,6 +241,7 @@ export interface PanelMenuSlots {
     }): VNode[];
     /**
      * Custom submenu icon template.
+     * @param {Object} scope - submenuicon slot's params.
      */
     submenuicon(scope: {
         /**

components/lib/passthrough/index.d.ts

@@ -0,0 +1,6 @@
+export interface usePassThroughOptions {
+    merge?: boolean | undefined;
+    useMergeProps?: boolean | undefined;
+}
+
+export declare function usePassThrough(pt1: object, pt2: object, options?: usePassThroughOptions): object;