Merge branch 'master' into master

.github/workflows/generate_api_doc.yml

@@ -34,6 +34,9 @@ jobs:
             - name: Generate api doc
               run: npm run apidoc
 
+            - name: Code Format
+              run: npm run format
+
             - name: Commit doc
               run: |
                   git config user.name "GitHub Actions Bot"

CHANGELOG.md

@@ -1,5 +1,53 @@
 # Changelog
 
+## [3.36.0](https://github.com/primefaces/primevue/tree/3.36.0) (2023-10-11)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.35.0...3.36.0)
+
+**Implemented New Features and Enhancements:**
+
+-   Improve block/unblockScroll architecture [\#4589](https://github.com/primefaces/primevue/issues/4589)
+-   Splitter: Add Resize event to Splitter component [\#4561](https://github.com/primefaces/primevue/issues/4561)
+-   Datatable: Sort mode multiple - undefined breaks order [\#4555](https://github.com/primefaces/primevue/issues/4555)
+-   InlineMessage: Icon shrinks as text grows larger [\#4550](https://github.com/primefaces/primevue/issues/4550)
+-   Export styles of all components [\#4530](https://github.com/primefaces/primevue/issues/4530)
+-   Add `modules` property to Editor [\#4450](https://github.com/primefaces/primevue/issues/4450)
+-   No styles injected on SSR resulting in Large Layout Shifts on load [\#4210](https://github.com/primefaces/primevue/issues/4210)
+-   MultiSelect: Filter does not work when options is an array of strings [\#4071](https://github.com/primefaces/primevue/issues/4071)
+-   Add `allowEmpty` property to SelectButton [\#3973](https://github.com/primefaces/primevue/issues/3973)
+-   Ability to close a specific toast message [\#1763](https://github.com/primefaces/primevue/issues/1763)
+
+**Fixed bugs:**
+
+-   Dock Component MenuBar z-index issue [\#4584](https://github.com/primefaces/primevue/issues/4584)
+-   OrderList: Missing moveUpButtonProps [\#4581](https://github.com/primefaces/primevue/issues/4581)
+-   Config: Missing export definition in types [\#4579](https://github.com/primefaces/primevue/issues/4579)
+-   Cannot click to select min or max value when using slider with step property [\#4577](https://github.com/primefaces/primevue/issues/4577)
+-   Editor layer defect [\#4576](https://github.com/primefaces/primevue/issues/4576)
+-   Tailwind Datatable: Uncaught \(in promise\) TypeError: Cannot read properties of undefined \(reading 'frozen'\) [\#4566](https://github.com/primefaces/primevue/issues/4566)
+-   Using Tailwind setup - the Ripple data attributes get added automatically [\#4564](https://github.com/primefaces/primevue/issues/4564)
+-   Splitter: In the tailwind theme, double-clicking on a split line causes the element to move. [\#4562](https://github.com/primefaces/primevue/issues/4562)
+-   InputNumber: Buttons are not sorted correctly in TW theme if buttonLayout is horizontal [\#4560](https://github.com/primefaces/primevue/issues/4560)
+-   The `appearance` style is not working in Tailwind preset [\#4559](https://github.com/primefaces/primevue/issues/4559)
+-   Image: preview mode button spacing fixes [\#4554](https://github.com/primefaces/primevue/issues/4554)
+-   Image: toolbar unstyled mode fixes [\#4553](https://github.com/primefaces/primevue/issues/4553)
+-   Galleria: indicator list z-index defect [\#4545](https://github.com/primefaces/primevue/issues/4545)
+-   Column: headercheckboxicon slot not working [\#4543](https://github.com/primefaces/primevue/issues/4543)
+-   ContextMenu: global property is not working [\#4536](https://github.com/primefaces/primevue/issues/4536)
+-   InputText: Float labels bug out when page loads with form auto-filled \(webkit\) [\#4533](https://github.com/primefaces/primevue/issues/4533)
+-   Sidebar: autofocus cannot with other components [\#4532](https://github.com/primefaces/primevue/issues/4532)
+-   PanelMenu | Separator is not ignored when navigating with the arrow keys. [\#4522](https://github.com/primefaces/primevue/issues/4522)
+-   V-Tooltip, TailwindCSS: Styling not working when using pinia store [\#4505](https://github.com/primefaces/primevue/issues/4505)
+-   Calendar: Timepicker changes from `12 am` to `12 pm` automatically [\#4449](https://github.com/primefaces/primevue/issues/4449)
+-   Calendar: Multiple Month/Year selection mode not highlighting selected month [\#4418](https://github.com/primefaces/primevue/issues/4418)
+-   File Upload - Chrome/Windows input is triggered during any mouse click, not just left click [\#4144](https://github.com/primefaces/primevue/issues/4144)
+-   InputSwitch: Type Definition doesn't expose `disabled` [\#3985](https://github.com/primefaces/primevue/issues/3985)
+-   DataGrid: Invalid typing of slot props [\#3395](https://github.com/primefaces/primevue/issues/3395)
+
+**Deprecated:**
+
+-   Remove FullCalendar theme support [\#4575](https://github.com/primefaces/primevue/issues/4575)
+
 ## [3.35.0](https://github.com/primefaces/primevue/tree/3.35.0) (2023-09-26)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.34.1...3.35.0)

api-generator/build-apidoc.js

@@ -352,7 +352,17 @@ if (project) {
                                 readonly: prop.flags.isReadonly,
                                 type: prop.type.toString(),
                                 default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0].text : '', // TODO: Check
-                                description: prop.comment && prop.comment.summary.map((s) => s.text || '').join(' '),
+                                description:
+                                    prop.comment &&
+                                    prop.comment.summary
+                                        .map((s) => {
+                                            if (s.text.indexOf('[here]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            }
+
+                                            return s.text || '';
+                                        })
+                                        .join(' '),
                                 deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0].text) : undefined
                             });
                         });

api-generator/components/selectbutton.js

@@ -51,6 +51,12 @@ const SelectButtonProps = [
         name: 'unselectable',
         type: 'boolean',
         default: 'false',
+        description: 'Whether selection can not be cleared.'
+    },
+    {
+        name: 'allowEmpty',
+        type: 'boolean',
+        default: 'true',
         description: 'Whether selection can be cleared.'
     },
     {

components/doc/DocApiTable.vue

@@ -59,8 +59,11 @@
                                 {{ v }}
                             </div>
 
+                            <template v-else>
+                                <span v-if="v?.includes('<a')" :id="id + '.' + k" class="doc-option-description" v-html="v"> </span>
                                 <span v-else :id="id + '.' + k" class="doc-option-description">{{ v }} </span>
                             </template>
+                        </template>
                     </td>
                 </tr>
             </tbody>

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.35.0',
+    version: '^3.36.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/lib/api/FilterService.js

@@ -4,10 +4,19 @@ const FilterService = {
     filter(value, fields, filterValue, filterMatchMode, filterLocale) {
         let filteredItems = [];
 
-        if (value) {
+        if (!value) {
-            for (let item of value) {
+            return filteredItems;
-                for (let field of fields) {
+        }
-                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+
+        for (const item of value) {
+            if (typeof item === 'string') {
+                if (this.filters[filterMatchMode](item, filterValue, filterLocale)) {
+                    filteredItems.push(item);
+                    continue;
+                }
+            } else {
+                for (const field of fields) {
+                    const fieldValue = ObjectUtils.resolveFieldData(item, field);
 
                     if (this.filters[filterMatchMode](fieldValue, filterValue, filterLocale)) {
                         filteredItems.push(item);

components/lib/badgedirective/BadgeDirective.js

@@ -5,11 +5,9 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
     mounted(el, binding) {
         const id = UniqueComponentId() + '_badge';
 
-        el.unstyled = binding.instance.$primevue?.config?.unstyled || binding.value?.unstyled || false;
-
         const badge = DomHandler.createElement('span', {
             id,
-            class: !el.unstyled && this.cx('root'),
+            class: !this.isUnstyled() && this.cx('root'),
             'p-bind': this.ptm('root', {
                 context: {
                     ...binding.modifiers,
@@ -22,7 +20,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
         el.$_pbadgeId = badge.getAttribute('id');
 
         for (let modifier in binding.modifiers) {
-            !el.unstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
+            !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-' + modifier);
         }
 
         if (binding.value != null) {
@@ -30,22 +28,22 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
             else el.$_badgeValue = binding.value;
             badge.appendChild(document.createTextNode(el.$_badgeValue));
 
-            if (String(el.$_badgeValue).length === 1 && !el.unstyled) {
+            if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
-                !el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter');
+                !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-no-gutter');
             }
         } else {
-            !el.unstyled && DomHandler.addClass(badge, 'p-badge-dot');
+            !this.isUnstyled() && DomHandler.addClass(badge, 'p-badge-dot');
         }
 
         el.setAttribute('data-pd-badge', true);
-        !el.unstyled && DomHandler.addClass(el, 'p-overlay-badge');
+        !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
 
         this.$el = badge;
     },
     updated(el, binding) {
-        !el.unstyled && DomHandler.addClass(el, 'p-overlay-badge');
+        !this.isUnstyled() && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
 
         if (binding.oldValue !== binding.value) {
@@ -54,7 +52,7 @@ const BadgeDirective = BaseBadgeDirective.extend('badge', {
             if (typeof binding.value === 'object') el.$_badgeValue = binding.value.value;
             else el.$_badgeValue = binding.value;
 
-            if (!el.unstyled) {
+            if (!this.isUnstyled()) {
                 if (el.$_badgeValue) {
                     if (DomHandler.hasClass(badge, 'p-badge-dot')) DomHandler.removeClass(badge, 'p-badge-dot');
 

components/lib/basedirective/BaseDirective.js

@@ -4,6 +4,7 @@ import { mergeProps } from 'vue';
 
 const BaseDirective = {
     _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
+    _getConfig: (binding, vnode) => (binding?.instance?.$primevue || vnode?.ctx?.appContext?.config?.globalProperties?.$primevue)?.config,
     _getOptionValue: (options, key = '', params = {}) => {
         const fKeys = ObjectUtils.toFlatCase(key).split('.');
         const fKey = fKeys.shift();
@@ -23,7 +24,7 @@ const BaseDirective = {
 
         const datasetPrefix = 'data-pc-';
         const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
-        const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT, getValue, key, params) : undefined;
+        const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
         const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
         const datasets = {
             ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
@@ -70,7 +71,7 @@ const BaseDirective = {
     },
     _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
         const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
-        const config = binding?.instance?.$primevue?.config;
+        const config = BaseDirective._getConfig(binding, vnode);
         const instance = el?.$instance;
         const selfHook = BaseDirective._usePT(instance, BaseDirective._getPT(binding?.value?.pt, directiveName), BaseDirective._getOptionValue, `hooks.${name}`);
         const defaultHook = BaseDirective._useDefaultPT(instance, config?.pt?.directives?.[directiveName], BaseDirective._getOptionValue, `hooks.${name}`);
@@ -83,7 +84,7 @@ const BaseDirective = {
         const handleHook = (hook, el, binding, vnode, prevVnode) => {
             el._$instances = el._$instances || {};
 
-            const config = binding?.instance?.$primevue?.config;
+            const config = BaseDirective._getConfig(binding, vnode);
             const $prevInstance = el._$instances[name] || {};
             const $options = ObjectUtils.isEmpty($prevInstance) ? { ...options, ...options?.methods } : {};
 
@@ -97,12 +98,12 @@ const BaseDirective = {
                 $style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
                 $config: config,
                 /* computed instance variables */
-                defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
+                defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
-                isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
+                isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
                 ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
-                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
+                cx: (key = '', params = {}) => (!el.$instance?.isUnstyled() ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
                 sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
                 ...$options
             };
@@ -117,10 +118,10 @@ const BaseDirective = {
                 handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                const config = binding?.instance?.$primevue?.config;
+                const config = BaseDirective._getConfig(binding, vnode);
 
                 BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
-                !el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
+                !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {

components/lib/blockui/BlockUI.vue

@@ -50,8 +50,7 @@ export default {
                 });
 
                 document.body.appendChild(this.mask);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.blockBodyScroll();
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
                 document.activeElement.blur();
             } else {
                 this.mask = DomHandler.createElement('div', {
@@ -92,8 +91,7 @@ export default {
 
             if (this.fullScreen) {
                 document.body.removeChild(this.mask);
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.unblockBodyScroll();
-                document.body.style.removeProperty('--scrollbar-width');
             } else {
                 this.$refs.container.removeChild(this.mask);
             }

components/lib/calendar/Calendar.vue

@@ -1656,8 +1656,7 @@ export default {
                 this.mask.addEventListener('click', this.maskClickListener);
 
                 document.body.appendChild(this.mask);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.blockBodyScroll();
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         disableModality() {
@@ -1691,8 +1690,7 @@ export default {
             }
 
             if (!hasBlockerMasks) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.unblockBodyScroll();
-                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         updateCurrentMetaData() {
@@ -2671,7 +2669,7 @@ export default {
                 let innerHTML = '';
 
                 if (this.responsiveOptions) {
-                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                    const comparer = ObjectUtils.localeComparator();
                     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++) {

components/lib/calendar/style/CalendarStyle.js

@@ -210,8 +210,6 @@ const classes = {
     decrementButton: 'p-link',
     separatorContainer: 'p-separator',
     minutePicker: 'p-minute-picker',
-    incrementButton: 'p-link',
-    decrementButton: 'p-link',
     secondPicker: 'p-second-picker',
     ampmPicker: 'p-ampm-picker',
     buttonbar: 'p-datepicker-buttonbar',

components/lib/carousel/Carousel.vue

@@ -101,7 +101,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
 import BaseCarousel from './BaseCarousel.vue';
 
 export default {
@@ -548,20 +548,13 @@ export default {
 
             if (this.responsiveOptions && !this.isUnstyled) {
                 let _responsiveOptions = [...this.responsiveOptions];
-                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                const comparer = ObjectUtils.localeComparator();
 
                 _responsiveOptions.sort((data1, data2) => {
                     const value1 = data1.breakpoint;
                     const value2 = data2.breakpoint;
-                    let result = null;
 
-                    if (value1 == null && value2 != null) result = -1;
+                    return ObjectUtils.sort(value1, value2, -1, comparer);
-                    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 = comparer(value1, value2);
-                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                    return -1 * result;
                 });
 
                 for (let i = 0; i < _responsiveOptions.length; i++) {

components/lib/config/PrimeVue.d.ts

@@ -108,6 +108,8 @@ export interface PrimeVueConfiguration {
     csp?: PrimeVueCSPOptions;
 }
 
+export declare const defaultOptions: PrimeVueConfiguration;
+
 export interface PrimeVueZIndexOptions {
     modal?: number;
     overlay?: number;

components/lib/datatable/BaseDataTable.vue

@@ -78,6 +78,10 @@ export default {
             type: Number,
             default: 1
         },
+        nullSortOrder: {
+            type: Number,
+            default: 1
+        },
         multiSortMeta: {
             type: Array,
             default: null

components/lib/datatable/DataTable.d.ts

@@ -887,6 +887,11 @@ export interface DataTableProps {
      * Order to sort the data by default.
      */
     sortOrder?: number | undefined;
+    /**
+     * Determines how null values are sorted.
+     * @defaultValue 1
+     */
+    nullSortOrder?: number;
     /**
      * Default sort order of an unsorted column.
      * @defaultValue 1

components/lib/datatable/DataTable.vue

@@ -341,6 +341,7 @@ export default {
             d_rows: this.rows,
             d_sortField: this.sortField,
             d_sortOrder: this.sortOrder,
+            d_nullSortOrder: this.nullSortOrder,
             d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
             d_groupRowsSortMeta: null,
             d_selectionKeys: null,
@@ -381,6 +382,9 @@ export default {
         sortOrder(newValue) {
             this.d_sortOrder = newValue;
         },
+        nullSortOrder(newValue) {
+            this.d_nullSortOrder = newValue;
+        },
         multiSortMeta(newValue) {
             this.d_multiSortMeta = newValue;
         },
@@ -530,27 +534,19 @@ export default {
             }
 
             let data = [...value];
-            let resolvedFieldDatas = new Map();
+            let resolvedFieldData = new Map();
 
             for (let item of data) {
-                resolvedFieldDatas.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
+                resolvedFieldData.set(item, ObjectUtils.resolveFieldData(item, this.d_sortField));
             }
 
-            const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+            const comparer = ObjectUtils.localeComparator();
 
             data.sort((data1, data2) => {
-                let value1 = resolvedFieldDatas.get(data1);
+                let value1 = resolvedFieldData.get(data1);
-                let value2 = resolvedFieldDatas.get(data2);
+                let value2 = resolvedFieldData.get(data2);
 
-                let result = null;
+                return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer, this.d_nullSortOrder);
-
-                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 = comparer(value1, value2);
-                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                return this.d_sortOrder * result;
             });
 
             return data;
@@ -579,23 +575,13 @@ export default {
         multisortField(data1, data2, index) {
             const value1 = ObjectUtils.resolveFieldData(data1, this.d_multiSortMeta[index].field);
             const value2 = ObjectUtils.resolveFieldData(data2, this.d_multiSortMeta[index].field);
-            let result = null;
+            const comparer = ObjectUtils.localeComparator();
-
-            if (typeof value1 === 'string' || value1 instanceof String) {
-                if (value1.localeCompare && value1 !== value2) {
-                    const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
-
-                    return this.d_multiSortMeta[index].order * comparer(value1, value2);
-                }
-            } else {
-                result = value1 < value2 ? -1 : 1;
-            }
 
             if (value1 === value2) {
                 return this.d_multiSortMeta.length - 1 > index ? this.multisortField(data1, data2, index + 1) : 0;
             }
 
-            return this.d_multiSortMeta[index].order * result;
+            return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer, this.d_nullSortOrder);
         },
         addMultiSortField(field) {
             let index = this.d_multiSortMeta.findIndex((meta) => meta.field === field);

components/lib/dataview/DataView.vue

@@ -110,20 +110,13 @@ export default {
         sort() {
             if (this.value) {
                 const value = [...this.value];
-                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                const comparer = ObjectUtils.localeComparator();
 
                 value.sort((data1, data2) => {
                     let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
                     let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
-                    let result = null;
 
-                    if (value1 == null && value2 != null) result = -1;
+                    return ObjectUtils.sort(value1, value2, this.sortOrder, comparer);
-                    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 = comparer(value1, value2);
-                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                    return this.sortOrder * result;
                 });
 
                 return value;

components/lib/dialog/Dialog.vue

@@ -203,25 +203,17 @@ export default {
             }
 
             if (!this.modal) {
-                if (this.maximized) {
+                this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
-                    DomHandler.addClass(document.body, 'p-overflow-hidden');
-                    document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
-                } else {
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                    document.body.style.removeProperty('--scrollbar-width');
-                }
             }
         },
         enableDocumentSettings() {
             if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.blockBodyScroll();
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         unbindDocumentState() {
             if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.unblockBodyScroll();
-                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeyDown(event) {

components/lib/fieldset/style/FieldsetStyle.js

@@ -33,7 +33,6 @@ const classes = {
     legend: 'p-fieldset-legend',
     legendtitle: 'p-fieldset-legend-text',
     togglericon: 'p-fieldset-toggler',
-    legendtitle: 'p-fieldset-legend-text',
     toggleablecontent: 'p-toggleable-content',
     content: 'p-fieldset-content'
 };

components/lib/galleria/Galleria.vue

@@ -35,8 +35,7 @@ export default {
     },
     beforeUnmount() {
         if (this.fullScreen) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.unblockBodyScroll();
-            document.body.style.removeProperty('--scrollbar-width');
         }
 
         this.mask = null;
@@ -52,8 +51,7 @@ export default {
         },
         onEnter(el) {
             this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
+            DomHandler.blockBodyScroll();
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             this.focus();
         },
         onBeforeLeave() {
@@ -62,8 +60,7 @@ export default {
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
             this.containerVisible = false;
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.unblockBodyScroll();
-            document.body.style.removeProperty('--scrollbar-width');
         },
         onActiveItemChange(index) {
             if (this.activeIndex !== index) {

components/lib/galleria/GalleriaThumbnails.vue

@@ -68,7 +68,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
-import { DomHandler } from 'primevue/utils';
+import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'GalleriaThumbnails',
@@ -438,20 +438,13 @@ export default {
 
             if (this.responsiveOptions && !this.isUnstyled) {
                 this.sortedResponsiveOptions = [...this.responsiveOptions];
-                const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+                const comparer = ObjectUtils.localeComparator();
 
                 this.sortedResponsiveOptions.sort((data1, data2) => {
                     const value1 = data1.breakpoint;
                     const value2 = data2.breakpoint;
-                    let result = null;
 
-                    if (value1 == null && value2 != null) result = -1;
+                    return ObjectUtils.sort(value1, value2, -1, comparer);
-                    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 = comparer(value1, value2);
-                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                    return -1 * result;
                 });
 
                 for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {

components/lib/image/Image.vue

@@ -93,8 +93,7 @@ export default {
         },
         onImageClick() {
             if (this.preview) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.blockBodyScroll();
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
                 this.maskVisible = true;
                 setTimeout(() => {
                     this.previewVisible = true;
@@ -164,8 +163,7 @@ export default {
             !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
         },
         onLeave() {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.unblockBodyScroll();
-            document.body.style.removeProperty('--scrollbar-width');
             this.$emit('hide');
         },
         onAfterLeave(el) {
@@ -183,8 +181,7 @@ export default {
             this.previewVisible = false;
             this.rotate = 0;
             this.scale = 1;
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.unblockBodyScroll();
-            document.body.style.removeProperty('--scrollbar-width');
         }
     },
     computed: {

components/lib/orderlist/OrderList.vue

@@ -2,28 +2,28 @@
     <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" :unstyled="unstyled">
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" data-pc-section="moveupbutton" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="ptm('moveTopButton')" :unstyled="unstyled">
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="moveTopButtonProps" data-pc-section="movetopbutton" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" :unstyled="unstyled">
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" data-pc-section="movedownbutton" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" :unstyled="unstyled">
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" data-pc-section="movebottombutton" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

components/lib/organizationchart/OrganizationChart.d.ts

@@ -261,7 +261,12 @@ export interface OrganizationChartSlots {
     /**
      * Custom content template.
      */
-    default(node: any): VNode[];
+    default(scope: {
+        /**
+         * Current node
+         */
+        node: any;
+    }): VNode[];
     /**
      * Dynamic content template.
      * @todo

components/lib/organizationchart/style/OrganizationChartStyle.js

@@ -65,7 +65,6 @@ const classes = {
     nodeTogglerIcon: 'p-node-toggler-icon',
     lines: 'p-organizationchart-lines',
     lineDown: 'p-organizationchart-line-down',
-    lines: 'p-organizationchart-lines',
     lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
     lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
     nodes: 'p-organizationchart-nodes'

components/lib/passthrough/tailwind/index.js

@@ -369,11 +369,6 @@ export default {
                 }
             ]
         }),
-        splitterpanel: {
-            root: {
-                class: 'flex grow'
-            }
-        },
         gutter: ({ props }) => ({
             class: [
                 'flex items-center justify-center shrink-0',
@@ -394,6 +389,11 @@ export default {
             ]
         })
     },
+    splitterpanel: {
+        root: {
+            class: 'flex grow'
+        }
+    },
     dialog: {
         root: ({ state }) => ({
             class: [
@@ -901,7 +901,14 @@ export default {
             class: 'w-full inline-flex'
         },
         input: ({ props }) => ({
-            class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
+            class: [
+                {
+                    'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
+                },
+                {
+                    'order-2': props.buttonLayout == 'horizontal'
+                }
+            ]
         }),
         buttongroup: ({ props }) => ({
             class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
@@ -911,6 +918,9 @@ export default {
                 'flex !items-center !justify-center',
                 {
                     'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                },
+                {
+                    'order-3': props.buttonLayout == 'horizontal'
                 }
             ]
         }),
@@ -922,6 +932,9 @@ export default {
                 'flex !items-center !justify-center',
                 {
                     'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                },
+                {
+                    'order-1': props.buttonLayout == 'horizontal'
                 }
             ]
         })
@@ -3734,7 +3747,7 @@ export default {
                     context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
                     context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
                     {
-                        'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
+                        'sticky z-[1]': context.frozen || context.frozen === '', // Frozen Columns
                         'border-x border-y': context?.showGridlines,
                         'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
                     }

components/lib/ripple/Ripple.js

@@ -2,17 +2,15 @@ import { DomHandler } from 'primevue/utils';
 import BaseRipple from './BaseRipple';
 
 const Ripple = BaseRipple.extend('ripple', {
-    mounted(el, binding) {
+    mounted(el) {
-        const primevue = binding.instance.$primevue;
+        const config = el?.$instance?.$config;
-
-        if (primevue && primevue.config && primevue.config.ripple) {
-            el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false;
 
+        if (config && config.ripple) {
             this.create(el);
             this.bindEvents(el);
-        }
 
             el.setAttribute('data-pd-ripple', true);
+        }
     },
     unmounted(el) {
         this.remove(el);
@@ -31,8 +29,8 @@ const Ripple = BaseRipple.extend('ripple', {
                 'aria-hidden': true,
                 'data-p-ink': true,
                 'data-p-ink-active': false,
-                class: !el.unstyled && this.cx('root'),
+                class: !this.isUnstyled() && this.cx('root'),
-                onAnimationEnd: this.onAnimationEnd,
+                onAnimationEnd: this.onAnimationEnd.bind(this),
                 'p-bind': this.ptm('root')
             });
 
@@ -57,7 +55,7 @@ const Ripple = BaseRipple.extend('ripple', {
                 return;
             }
 
-            !target.unstyled && DomHandler.removeClass(ink, 'p-ink-active');
+            !this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
             ink.setAttribute('data-p-ink-active', 'false');
 
             if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
@@ -74,12 +72,12 @@ const Ripple = BaseRipple.extend('ripple', {
             ink.style.top = y + 'px';
             ink.style.left = x + 'px';
 
-            !target.unstyled && DomHandler.addClass(ink, 'p-ink-active');
+            !this.isUnstyled() && DomHandler.addClass(ink, 'p-ink-active');
             ink.setAttribute('data-p-ink-active', 'true');
 
             this.timeout = setTimeout(() => {
                 if (ink) {
-                    !target.unstyled && DomHandler.removeClass(ink, 'p-ink-active');
+                    !this.isUnstyled() && DomHandler.removeClass(ink, 'p-ink-active');
                     ink.setAttribute('data-p-ink-active', 'false');
                 }
             }, 401);
@@ -89,7 +87,7 @@ const Ripple = BaseRipple.extend('ripple', {
                 clearTimeout(this.timeout);
             }
 
-            !event.currentTarget.unstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
+            !this.isUnstyled() && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
             event.currentTarget.setAttribute('data-p-ink-active', 'false');
         },
         getInk(el) {

components/lib/selectbutton/BaseSelectButton.vue

@@ -16,6 +16,10 @@ export default {
             type: Boolean,
             default: false
         },
+        allowEmpty: {
+            type: Boolean,
+            default: true
+        },
         disabled: Boolean,
         dataKey: null,
         'aria-labelledby': {

components/lib/selectbutton/SelectButton.d.ts

@@ -155,10 +155,16 @@ export interface SelectButtonProps {
      */
     dataKey?: string | undefined;
     /**
-     * Whether selection can be cleared.
+     * Whether selection can not be cleared.
      * @defaultValue false
+     * @deprecated Use 'allowEmpty' property instead.
      */
     unselectable?: boolean | undefined;
+    /**
+     * Whether selection can be cleared.
+     * @defaultValue true
+     */
+    allowEmpty?: boolean | undefined;
     /**
      * Identifier of the underlying element.
      */

components/lib/selectbutton/SelectButton.vue

@@ -81,7 +81,7 @@ export default {
 
             let selected = this.isSelected(option);
 
-            if (selected && this.unselectable) {
+            if (selected && (this.unselectable || !this.allowEmpty)) {
                 return;
             }
 

components/lib/sidebar/Sidebar.vue

@@ -124,16 +124,14 @@ export default {
             }
 
             if (this.blockScroll) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.blockBodyScroll();
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         disableDocumentSettings() {
             this.unbindOutsideClickListener();
 
             if (this.blockScroll) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.unblockBodyScroll();
-                document.body.style.removeProperty('--scrollbar-width');
             }
         },
         onKeydown(event) {

components/lib/slider/Slider.vue

@@ -102,8 +102,8 @@ export default {
                 const oldValue = this.range ? this.modelValue[this.handleIndex] : this.modelValue;
                 const diff = newValue - oldValue;
 
-                if (diff < 0) newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
+                if (diff < 0) newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
-                else if (diff > 0) newValue = oldValue + Math.floor(newValue / this.step - oldValue / this.step) * this.step;
+                else if (diff > 0) newValue = oldValue + Math.ceil(newValue / this.step - oldValue / this.step) * this.step;
             } else {
                 newValue = Math.floor(newValue);
             }

components/lib/toast/Toast.d.ts

@@ -238,6 +238,11 @@ export interface ToastProps {
      * @deprecated since v3.26.0. Use 'pt' property.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Used to access message options.
+     * @type {ToastMessageOptions}
+     */
+    message?: ToastMessageOptions;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {ToastPassThroughOptions}

components/lib/tooltip/Tooltip.js

@@ -32,7 +32,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
         }
 
         target.$_ptooltipZIndex = options.instance.$primevue?.config?.zIndex?.tooltip;
-        target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
 
         this.bindEvents(target, options);
 
@@ -76,8 +75,6 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                 this.bindEvents(target, options);
             }
         }
-
-        target.unstyled = options.instance.$primevue?.config?.unstyled || options.value?.unstyled || false;
     },
     unmounted(el, options) {
         let target = this.getTarget(el);
@@ -186,7 +183,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             let tooltipElement = this.create(el, options);
 
             this.align(el);
-            !el.unstyled && DomHandler.fadeIn(tooltipElement, 250);
+            !this.isUnstyled() && DomHandler.fadeIn(tooltipElement, 250);
 
             const $this = this;
 
@@ -228,7 +225,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             const modifiers = el.$_ptooltipModifiers;
 
             const tooltipArrow = DomHandler.createElement('div', {
-                class: !el.unstyled && this.cx('arrow'),
+                class: !this.isUnstyled() && this.cx('arrow'),
                 style: {
                     top: modifiers?.bottom ? '0' : modifiers?.right || modifiers?.left || (!modifiers?.right && !modifiers?.left && !modifiers?.top && !modifiers?.bottom) ? '50%' : null,
                     bottom: modifiers?.top ? '0' : null,
@@ -241,7 +238,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             });
 
             const tooltipText = DomHandler.createElement('div', {
-                class: !el.unstyled && this.cx('text'),
+                class: !this.isUnstyled() && this.cx('text'),
                 'p-bind': this.ptm('text', {
                     context: modifiers
                 })
@@ -263,7 +260,7 @@ const Tooltip = BaseTooltip.extend('tooltip', {
                         display: 'inline-block',
                         width: el.$_ptooltipFitContent ? 'fit-content' : undefined
                     },
-                    class: [!el.unstyled && this.cx('root'), el.$_ptooltipClass],
+                    class: [!this.isUnstyled() && this.cx('root'), el.$_ptooltipClass],
                     'p-bind': this.ptm('root', {
                         context: modifiers
                     })
@@ -405,8 +402,9 @@ const Tooltip = BaseTooltip.extend('tooltip', {
             tooltipElement.style.left = -999 + 'px';
             tooltipElement.style.top = -999 + 'px';
             DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`);
-            DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
+            !this.isUnstyled() && DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
             tooltipElement.$_ptooltipPosition = position;
+            tooltipElement.setAttribute('data-p-position', position);
         },
         isOutOfBounds(el) {
             let tooltipElement = this.getTooltipElement(el);

components/lib/tree/Tree.d.ts

@@ -347,6 +347,10 @@ export interface TreeProps {
  * Defines valid slots in Tree component.
  */
 export interface TreeSlots {
+    /**
+     * Default content slot.
+     */
+    default(): VNode[];
     /**
      * Custom loading icon template.
      * @param {Object} scope - loadingicon slot's params.
@@ -399,12 +403,11 @@ export interface TreeSlots {
      * Optional slots.
      * @todo
      */
-
     [key: string]: (node: any) => VNode[];
 }
 
 /**
- * Defines valid slots in Tree component.
+ * Defines valid emits in Tree component.
  */
 export interface TreeEmits {
     /**

components/lib/treetable/TreeTable.vue

@@ -429,20 +429,13 @@ export default {
         },
         sortNodesSingle(nodes) {
             let _nodes = [...nodes];
-            const comparer = new Intl.Collator(undefined, { numeric: true }).compare;
+            const comparer = ObjectUtils.localeComparator();
 
             _nodes.sort((node1, node2) => {
                 const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_sortField);
                 const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_sortField);
-                let result = null;
 
-                if (value1 == null && value2 != null) result = -1;
+                return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer);
-                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 = comparer(value1, value2);
-                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                return this.d_sortOrder * result;
             });
 
             return _nodes;
@@ -462,22 +455,13 @@ export default {
         multisortField(node1, node2, index) {
             const value1 = ObjectUtils.resolveFieldData(node1.data, this.d_multiSortMeta[index].field);
             const value2 = ObjectUtils.resolveFieldData(node2.data, this.d_multiSortMeta[index].field);
-            let result = null;
+            const comparer = ObjectUtils.localeComparator();
 
-            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 (value1 === value2) {
                 return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
-                } else {
-                    if ((typeof value1 === 'string' || value1 instanceof String) && (typeof value2 === 'string' || value2 instanceof String))
-                        return this.d_multiSortMeta[index].order * new Intl.Collator(undefined, { numeric: true }).compare(value1, value2);
-                    else result = value1 < value2 ? -1 : 1;
-                }
             }
 
-            return this.d_multiSortMeta[index].order * result;
+            return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer);
         },
         filter(value) {
             let filteredNodes = [];

components/lib/utils/DomHandler.js

@@ -564,6 +564,10 @@ export default {
         return scrollbarWidth;
     },
 
+    calculateBodyScrollbarWidth() {
+        return window.innerWidth - document.documentElement.offsetWidth;
+    },
+
     getBrowser() {
         if (!this.browser) {
             let matched = this.resolveUserAgent();
@@ -755,5 +759,15 @@ export default {
                 window.open(encodeURI(csv));
             }
         }
+    },
+
+    blockBodyScroll(className = 'p-overflow-hidden') {
+        document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
+        this.addClass(document.body, className);
+    },
+
+    unblockBodyScroll(className = 'p-overflow-hidden') {
+        document.body.style.removeProperty('--scrollbar-width');
+        this.removeClass(document.body, className);
     }
 };

components/lib/utils/ObjectUtils.js

@@ -302,6 +302,37 @@ export default {
         return index;
     },
 
+    sort(value1, value2, order = 1, comparator, nullSortOrder = 1) {
+        const result = this.compare(value1, value2, comparator, order);
+        let finalSortOrder = order;
+
+        // nullSortOrder == 1 means Excel like sort nulls at bottom
+        if (this.isEmpty(value1) || this.isEmpty(value2)) {
+            finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
+        }
+
+        return finalSortOrder * result;
+    },
+
+    compare(value1, value2, comparator, order = 1) {
+        let result = -1;
+        const emptyValue1 = this.isEmpty(value1);
+        const emptyValue2 = this.isEmpty(value2);
+
+        if (emptyValue1 && emptyValue2) result = 0;
+        else if (emptyValue1) result = order;
+        else if (emptyValue2) result = -order;
+        else if (typeof value1 === 'string' && typeof value2 === 'string') result = comparator(value1, value2);
+        else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
+
+        return result;
+    },
+
+    localeComparator() {
+        //performance gain using Int.Collator. It is not recommended to use localeCompare against large arrays.
+        return new Intl.Collator(undefined, { numeric: true }).compare;
+    },
+
     nestedKeys(obj = {}, parentKey = '') {
         return Object.entries(obj).reduce((o, [key, value]) => {
             const currentKey = parentKey ? `${parentKey}.${key}` : key;

components/lib/utils/Utils.d.ts

@@ -46,6 +46,7 @@ export declare class DomHandler {
     static clearSelection(): void;
     static getSelection(): string | null;
     static calculateScrollbarWidth(): number;
+    static calculateBodyScrollbarWidth(): number;
     static getBrowser(): object;
     static resolveUserAgent(): { browser: string; version: string };
     static isVisible(el: HTMLElement): boolean;
@@ -64,6 +65,8 @@ export declare class DomHandler {
     static hasCSSAnimation(el: HTMLElement): boolean;
     static hasCSSTransition(el: HTMLElement): boolean;
     static exportCSV(csv: any, filename: string): void;
+    static blockBodyScroll(className?: string): void;
+    static unblockBodyScroll(className?: string): void;
 }
 
 export declare class ObjectUtils {
@@ -89,6 +92,8 @@ export declare class ObjectUtils {
     static isPrintableCharacter(char: string): boolean;
     static findLast(value: any[], callback: () => any): any;
     static findLastIndex(value: any[], callback: () => any): number;
+    static sort(value1: any, value2: any, order: number, comparator: (a: any, b: any) => any, nullSortOrder: number): number;
+    static compare(value1: any, value2: any, comparator: (a: any, b: any) => any, order: number): number;
     static nestedKeys(obj: object, parentKey?: string): string[];
 }
 

doc/common/apidoc/index.json

@@ -18854,6 +18854,14 @@
                             "default": "",
                             "description": "Order to sort the data by default."
                         },
+                        {
+                            "name": "nullSortOrder",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "1",
+                            "description": "Determines how null values are sorted."
+                        },
                         {
                             "name": "defaultSortOrder",
                             "optional": true,
@@ -24332,7 +24340,7 @@
                             "readonly": false,
                             "type": "any[]",
                             "default": "",
-                            "description": "Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options."
+                            "description": "Whitelist of formats to display, see  <a target=\"_blank\" href=\"https://quilljs.com/docs/formats/\">here</a>  for available options."
                         },
                         {
                             "name": "editorStyle",
@@ -24348,7 +24356,7 @@
                             "readonly": false,
                             "type": "any",
                             "default": "",
-                            "description": "Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options."
+                            "description": "Modules configuration, see  <a target=\"_blank\" href=\"https://quilljs.com/docs/modules/\">here</a>  for available options."
                         },
                         {
                             "name": "pt",
@@ -35969,9 +35977,9 @@
                             "name": "default",
                             "parameters": [
                                 {
-                                    "name": "node",
+                                    "name": "scope",
                                     "optional": false,
-                                    "type": "any"
+                                    "type": "{\n  \t <span class=\"ml-3 text-primary-700\">node</span>: <span class=\"text-primary-500\">any</span>, <span class=\"text-primary-300\">// Current node</span>\n }"
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
@@ -42662,6 +42670,15 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
+                            "description": "Whether selection can not be cleared.",
+                            "deprecated": "Use 'allowEmpty' property instead."
+                        },
+                        {
+                            "name": "allowEmpty",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
                             "description": "Whether selection can be cleared."
                         },
                         {
@@ -49714,6 +49731,14 @@
                             "description": "Used to pass all properties of the HTMLButtonElement to the close button.",
                             "deprecated": "since v3.26.0. Use 'pt' property."
                         },
+                        {
+                            "name": "message",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToastMessageOptions",
+                            "default": "",
+                            "description": "Used to access message options."
+                        },
                         {
                             "name": "pt",
                             "optional": true,
@@ -51650,6 +51675,12 @@
                         }
                     ],
                     "methods": [
+                        {
+                            "name": "default",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Default content slot."
+                        },
                         {
                             "name": "loadingicon",
                             "parameters": [
@@ -51705,7 +51736,7 @@
                     ]
                 },
                 "TreeEmits": {
-                    "description": "Defines valid slots in Tree component.",
+                    "description": "Defines valid emits in Tree component.",
                     "relatedProp": "",
                     "props": [],
                     "methods": [

doc/dock/AdvancedDoc.vue

@@ -6,15 +6,15 @@
         <Toast position="top-center" group="tc" />
         <Menubar :model="menubarItems">
             <template #start>
-                <i class="pi pi-apple px-3"></i>
+                <i class="pi pi-apple px-2"></i>
             </template>
             <template #end>
-                <i class="pi pi-video px-3" />
+                <i class="pi pi-video px-2" />
-                <i class="pi pi-wifi px-3" />
+                <i class="pi pi-wifi px-2" />
-                <i class="pi pi-volume-up px-3" />
+                <i class="pi pi-volume-up px-2" />
-                <span class="px-3">Fri 13:07</span>
+                <span class="px-2">Fri 13:07</span>
-                <i class="pi pi-search px-3" />
+                <i class="pi pi-search px-2" />
-                <i class="pi pi-bars px-3" />
+                <i class="pi pi-bars px-2" />
             </template>
         </Menubar>
 
@@ -257,15 +257,15 @@ export default {
         <Toast position="top-center" group="tc" />
         <Menubar :model="menubarItems">
             <template #start>
-                <i class="pi pi-apple px-3"></i>
+                <i class="pi pi-apple px-2"></i>
             </template>
             <template #end>
-                <i class="pi pi-video px-3" />
+                <i class="pi pi-video px-2" />
-                <i class="pi pi-wifi px-3" />
+                <i class="pi pi-wifi px-2" />
-                <i class="pi pi-volume-up px-3" />
+                <i class="pi pi-volume-up px-2" />
-                <span class="px-3">Fri 13:07</span>
+                <span class="px-2">Fri 13:07</span>
-                <i class="pi pi-search px-3" />
+                <i class="pi pi-search px-2" />
-                <i class="pi pi-bars px-3" />
+                <i class="pi pi-bars px-2" />
             </template>
         </Menubar>
     
@@ -546,11 +546,6 @@ export default {
     background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
     background-repeat: no-repeat;
     background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
 }
 
 .dock-demo .p-menubar {
@@ -564,10 +559,24 @@ export default {
         <div class="card dock-demo">
             <Toast position="top-center" group="tc" />
             
+            <Menubar :model="menubarItems">
+                <template #start>
+                    <i class="pi pi-apple px-2"></i>
+                </template>
+                <template #end>
+                    <i class="pi pi-video px-2" />
+                    <i class="pi pi-wifi px-2" />
+                    <i class="pi pi-volume-up px-2" />
+                    <span class="px-2">Fri 13:07</span>
+                    <i class="pi pi-search px-2" />
+                    <i class="pi pi-bars px-2" />
+                </template>
+            </Menubar>
+
             <div class="dock-window dock-advanced">
                 <Dock :model="items">
                     <template #item="{ item }">
-                        <a href="#" class="p-dock-link" v-tooltip.top="item.label" @click="onDockItemClick($event, item)">
+                        <a v-tooltip.top="item.label" href="#" class="p-dock-link" @click="onDockItemClick($event, item)">
                             <img :alt="item.label" :src="item.icon" style="width: 100%" />
                         </a>
                     </template>
@@ -581,8 +590,7 @@ export default {
                     <Tree :value="nodes" />
                 </Dialog>
 
-                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px"
+                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
-                    :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
                     <template #item="slotProps">
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                     </template>
@@ -845,11 +853,7 @@ const commandHandler = (text) => {
     background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
     background-repeat: no-repeat;
     background-size: cover;
-    z-index: 1;
-}
     
-.dock-demo > .p-dock {
-    z-index: 1000;
 }
 
 .dock-demo .p-menubar {
@@ -912,11 +916,6 @@ const commandHandler = (text) => {
     background-image: url('https://primefaces.org/cdn/primevue/images/dock/window.jpg');
     background-repeat: no-repeat;
     background-size: cover;
-    z-index: 1;
-}
-
-.dock-demo > .p-dock {
-    z-index: 1000;
 }
 
 .dock-demo .p-menubar {

doc/tailwind/SetupDoc.vue

@@ -55,7 +55,6 @@ export default {
                 basic: `
 import {createApp} from "vue";
 import PrimeVue from "primevue/config";
-import Tailwind from "primevue/passthrough/tailwind";
 
 const app = createApp(App);
 
@@ -66,7 +65,6 @@ app.use(PrimeVue, { unstyled: true, pt: {} });
                 basic: `
 import {createApp} from "vue";
 import PrimeVue from "primevue/config";
-import Tailwind from "primevue/passthrough/tailwind";
 
 const app = createApp(App);
 

layouts/default.vue

@@ -42,8 +42,7 @@ export default {
                 }
 
                 this.sidebarActive = false;
-                DomHandler.removeClass(document.body, 'blocked-scroll');
+                DomHandler.unblockBodyScroll('blocked-scroll');
-                document.body.style.removeProperty('--scrollbar-width');
                 this.$toast.removeAllGroups();
             }
         }
@@ -61,18 +60,15 @@ export default {
         onMenuButtonClick() {
             if (this.sidebarActive) {
                 this.sidebarActive = false;
-                DomHandler.removeClass(document.body, 'blocked-scroll');
+                DomHandler.unblockBodyScroll('blocked-scroll');
-                document.body.style.removeProperty('--scrollbar-width');
             } else {
                 this.sidebarActive = true;
-                DomHandler.addClass(document.body, 'blocked-scroll');
+                DomHandler.blockBodyScroll('blocked-scroll');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
             }
         },
         onMaskClick() {
             this.sidebarActive = false;
-            DomHandler.removeClass(document.body, 'blocked-scroll');
+            DomHandler.unblockBodyScroll('blocked-scroll');
-            document.body.style.removeProperty('--scrollbar-width');
         },
         hideNews(event) {
             this.$appState.newsActive = false;

package-build.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.35.1-SNAPSHOT",
+    "version": "3.36.1-SNAPSHOT",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "primevue",
-    "version": "3.35.1",
+    "version": "3.36.1-SNAPSHOT",
     "homepage": "https://primevue.org/",
     "repository": {
         "type": "git",
@@ -17,8 +17,8 @@
         "build:package": "NODE_ENV=production rollup -c && node build-meta && node api-generator/build-api && gulp build-styles",
         "build:check": "npm run format:check && npm run security:check",
         "security:check": "npm audit --production --audit-level high",
-        "format": "prettier --write \"**/*.{js,vue,d.ts,json}\" --cache",
+        "format": "prettier --write \"**/*.{js,vue,d.ts}\" --cache",
-        "format:check": "prettier --check \"**/*.{js,vue,d.ts,json}\"",
+        "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
         "test:unit": "vitest run",
         "test:unit:watch": "vitest watch",
         "test:coverage": "vitest run --coverage",

public/themes/lara-dark-blue/theme.css

@@ -191,12 +191,12 @@
 }
 
 .p-editor-container .p-editor-toolbar {
-  background: #1f2937;
+  background: #071426;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
 .p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
   stroke: rgba(255, 255, 255, 0.6);
@@ -227,8 +227,8 @@
   fill: rgba(255, 255, 255, 0.87);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #1f2937;
+  background: #071426;
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 6px;
   padding: 0.75rem 0;
@@ -248,10 +248,10 @@
   border-bottom-left-radius: 6px;
 }
 .p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
 }
 .p-editor-container .p-editor-content .ql-editor {
-  background: #111827;
+  background: #040d19;
   color: rgba(255, 255, 255, 0.87);
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;

public/themes/lara-dark-indigo/theme.css

@@ -191,12 +191,12 @@
 }
 
 .p-editor-container .p-editor-toolbar {
-  background: #1f2937;
+  background: #071426;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
 .p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
   stroke: rgba(255, 255, 255, 0.6);
@@ -227,8 +227,8 @@
   fill: rgba(255, 255, 255, 0.87);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #1f2937;
+  background: #071426;
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 6px;
   padding: 0.75rem 0;
@@ -248,10 +248,10 @@
   border-bottom-left-radius: 6px;
 }
 .p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
 }
 .p-editor-container .p-editor-content .ql-editor {
-  background: #111827;
+  background: #040d19;
   color: rgba(255, 255, 255, 0.87);
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;

public/themes/lara-dark-purple/theme.css

@@ -191,12 +191,12 @@
 }
 
 .p-editor-container .p-editor-toolbar {
-  background: #1f2937;
+  background: #071426;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
 .p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
   stroke: rgba(255, 255, 255, 0.6);
@@ -227,8 +227,8 @@
   fill: rgba(255, 255, 255, 0.87);
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #1f2937;
+  background: #071426;
-  border: 1px solid #424b57;
+  border: 1px solid #0b213f;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   border-radius: 6px;
   padding: 0.75rem 0;
@@ -251,7 +251,10 @@
   border: 1px solid #424b57;
 }
 .p-editor-container .p-editor-content .ql-editor {
-  background: #111827;
+  border: 1px solid #0b213f;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #040d19;
   color: rgba(255, 255, 255, 0.87);
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;

public/themes/lara-dark-teal/theme.css

@@ -289,6 +289,105 @@
   color: #10b981;
 }
 
+.p-editor-container .p-editor-toolbar {
+  background: #071426;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #0b213f;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #071426;
+  border: 1px solid #0b213f;
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #0b213f;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #040d19;
+  color: rgba(255, 255, 255, 0.87);
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: rgba(255, 255, 255, 0.87);
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+  color: #5EEAD4;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
+  stroke: #5EEAD4;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
+  fill: #5EEAD4;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
+  color: #5EEAD4;
+}
+
 @layer primevue {
   * {
     box-sizing: border-box;

public/themes/lara-light-blue/theme.css

@@ -191,40 +191,12 @@
 }
 
 .p-editor-container .p-editor-toolbar {
-  background: #f9fafb;
+
+  background: #f8f9fa;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
 }
 .p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #4b5563;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
   background: #ffffff;
@@ -233,12 +205,6 @@
   border-radius: 6px;
   padding: 0.75rem 0;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: #4b5563;
-  background: #f3f4f6;
 }
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 0.75rem 1.25rem;
@@ -247,27 +213,8 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: #ffffff;
-  color: #4b5563;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
 .p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
+.p-editor-container .ql-snow.ql-toolbar button:focus,
-  color: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: #4b5563;
-}
 .p-editor-container .ql-snow.ql-toolbar button.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

public/themes/lara-light-indigo/theme.css

@@ -190,56 +190,6 @@
   --primary-900:#282960;
 }
 
-.p-editor-container .p-editor-toolbar {
-  background: #f9fafb;
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-}
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
-  background: #ffffff;
-  border: 0 none;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-  padding: 0.75rem 0;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: #4b5563;
-  background: #f3f4f6;
-}
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 0.75rem 1.25rem;
 }
@@ -247,27 +197,6 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
-.p-editor-container .p-editor-content.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: #ffffff;
-  color: #4b5563;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: #4b5563;
-}
 .p-editor-container .ql-snow.ql-toolbar button.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

public/themes/lara-light-purple/theme.css

@@ -190,42 +190,6 @@
   --primary-900:#382562;
 }
 
-.p-editor-container .p-editor-toolbar {
-  background: #f9fafb;
-  border-top-right-radius: 6px;
-  border-top-left-radius: 6px;
-}
-.p-editor-container .p-editor-toolbar.ql-snow {
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
-  stroke: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
-  fill: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
-  border: 0 none;
-  color: #6b7280;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
-  fill: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
-  fill: #4b5563;
-}
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
   background: #ffffff;
   border: 0 none;
@@ -233,13 +197,7 @@
   border-radius: 6px;
   padding: 0.75rem 0;
 }
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+
-  color: #4b5563;
-}
-.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
-  color: #4b5563;
-  background: #f3f4f6;
-}
 .p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
   padding: 0.75rem 1.25rem;
 }
@@ -247,27 +205,7 @@
   border-bottom-right-radius: 6px;
   border-bottom-left-radius: 6px;
 }
-.p-editor-container .p-editor-content.ql-snow {
+
-  border: 1px solid #e5e7eb;
-}
-.p-editor-container .p-editor-content .ql-editor {
-  background: #ffffff;
-  color: #4b5563;
-  border-bottom-right-radius: 6px;
-  border-bottom-left-radius: 6px;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover,
-.p-editor-container .ql-snow.ql-toolbar button:focus {
-  color: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
-  stroke: #4b5563;
-}
-.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
-.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
-  fill: #4b5563;
-}
 .p-editor-container .ql-snow.ql-toolbar button.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
 .p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {

public/themes/lara-light-teal/theme.css

@@ -289,6 +289,105 @@
   color: #10b981;
 }
 
+.p-editor-container .p-editor-toolbar {
+  background: #f8f9fa;
+  border-top-right-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.p-editor-container .p-editor-toolbar.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-stroke {
+  stroke: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-fill {
+  fill: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label {
+  border: 0 none;
+  color: #6c757d;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker .ql-picker-label:hover .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  background: #ffffff;
+  border: 0 none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  padding: 0.75rem 0;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item {
+  color: #495057;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options .ql-picker-item:hover {
+  color: #495057;
+  background: #e9ecef;
+}
+.p-editor-container .p-editor-toolbar.ql-snow .ql-picker.ql-expanded:not(.ql-icon-picker) .ql-picker-item {
+  padding: 0.75rem 1.25rem;
+}
+.p-editor-container .p-editor-content {
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .p-editor-content.ql-snow {
+  border: 1px solid #dee2e6;
+}
+.p-editor-container .p-editor-content .ql-editor {
+  background: #ffffff;
+  color: #495057;
+  border-bottom-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover,
+.p-editor-container .ql-snow.ql-toolbar button:focus {
+  color: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-stroke {
+  stroke: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button:hover .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar button:focus .ql-fill {
+  fill: #495057;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
+  color: #14B8A6;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke {
+  stroke: #14B8A6;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill {
+  fill: #14B8A6;
+}
+.p-editor-container .ql-snow.ql-toolbar button.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-picker-label,
+.p-editor-container .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-picker-label {
+  color: #14B8A6;
+}
+
 @layer primevue {
   * {
     box-sizing: border-box;