Merge branch 'master' into master

2023-10-11 20:45:31 +03:00 · 2023-10-11 20:45:31 +03:00 · 781ff3c259
parent 7142c4d264 da2038e248
commit 781ff3c259
56 changed files with 871 additions and 807 deletions
--- a/.github/workflows/generate_api_doc.yml
+++ b/.github/workflows/generate_api_doc.yml
@ -1,42 +1,45 @@
 name: Generate API DOC

 on:
-  push:
-    branches: [ master ]
-    paths:
-      - '**/**/*.d.ts'
-      - '/api-generator/build-apidoc.js'
+    push:
+        branches: [master]
+        paths:
+            - '**/**/*.d.ts'
+            - '/api-generator/build-apidoc.js'

 permissions:
-  contents: write
+    contents: write

 jobs:
-  build:
-    if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
-    runs-on: ubuntu-latest
+    build:
+        if: github.repository == 'primefaces/primevue' && github.ref == 'refs/heads/master'
+        runs-on: ubuntu-latest

-    strategy:
-      matrix:
-        node-version: [16.x]
+        strategy:
+            matrix:
+                node-version: [16.x]

-    steps:
-    - uses: actions/checkout@v3
+        steps:
+            - uses: actions/checkout@v3

-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v3
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: 'npm'

-    - name: Install node packages
-      run: npm install
+            - name: Install node packages
+              run: npm install

-    - name: Generate api doc
-      run: npm run apidoc
+            - name: Generate api doc
+              run: npm run apidoc

-    - name: Commit doc
-      run: |
-        git config user.name "GitHub Actions Bot"
-        git config user.email "<>"
-        git commit -a -m "Update API doc"
-        git push
+            - name: Code Format
+              run: npm run format
+
+            - name: Commit doc
+              run: |
+                  git config user.name "GitHub Actions Bot"
+                  git config user.email "<>"
+                  git commit -a -m "Update API doc"
+                  git push
--- a/CHANGELOG.md
+++ b/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)
--- a/api-generator/build-apidoc.js
+++ b/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
                            });
                        });
--- a/api-generator/components/selectbutton.js
+++ b/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.'
    },
    {
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@ -59,7 +59,10 @@
                                {{ v }}
                            </div>

-                            <span v-else :id="id + '.' + k" class="doc-option-description"> {{ v }} </span>
+                            <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>
--- a/components/doc/codeeditor/templates.js
+++ b/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.'
 };
--- a/components/lib/api/FilterService.js
+++ b/components/lib/api/FilterService.js
@ -4,10 +4,19 @@ const FilterService = {
    filter(value, fields, filterValue, filterMatchMode, filterLocale) {
        let filteredItems = [];

-        if (value) {
-            for (let item of value) {
-                for (let field of fields) {
-                    let fieldValue = ObjectUtils.resolveFieldData(item, field);
+        if (!value) {
+            return filteredItems;
+        }
+
+        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);
--- a/components/lib/badgedirective/BadgeDirective.js
+++ b/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) {
-                !el.unstyled && DomHandler.addClass(badge, 'p-badge-no-gutter');
+            if (String(el.$_badgeValue).length === 1 && !this.isUnstyled()) {
+                !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');

--- a/components/lib/basedirective/BaseDirective.js
+++ b/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]),
-                isUnstyled: el.unstyled !== undefined ? el.unstyled : config?.unstyled,
+                defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
+                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) => {
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@ -50,8 +50,7 @@ export default {
                });

                document.body.appendChild(this.mask);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
                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');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
            } else {
                this.$refs.container.removeChild(this.mask);
            }
--- a/components/lib/calendar/Calendar.vue
+++ b/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');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
            }
        },
        disableModality() {
@ -1691,8 +1690,7 @@ export default {
            }

            if (!hasBlockerMasks) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
            }
        },
        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++) {
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/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',
--- a/components/lib/carousel/Carousel.vue
+++ b/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;
-                    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;
+                    return ObjectUtils.sort(value1, value2, -1, comparer);
                });

                for (let i = 0; i < _responsiveOptions.length; i++) {
--- a/components/lib/config/PrimeVue.d.ts
+++ b/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;
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/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
--- a/components/lib/datatable/DataTable.d.ts
+++ b/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
--- a/components/lib/datatable/DataTable.vue
+++ b/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 value2 = resolvedFieldDatas.get(data2);
+                let value1 = resolvedFieldData.get(data1);
+                let value2 = resolvedFieldData.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 = comparer(value1, value2);
-                else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
-
-                return this.d_sortOrder * result;
+                return ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer, this.d_nullSortOrder);
            });

            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;
-
-            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;
-            }
+            const comparer = ObjectUtils.localeComparator();

            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);
--- a/components/lib/dataview/DataView.vue
+++ b/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;
-                    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 ObjectUtils.sort(value1, value2, this.sortOrder, comparer);
                });

                return value;
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@ -203,25 +203,17 @@ export default {
            }

            if (!this.modal) {
-                if (this.maximized) {
-                    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');
-                }
+                this.maximized ? DomHandler.blockBodyScroll() : DomHandler.unblockBodyScroll();
            }
        },
        enableDocumentSettings() {
            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
            }
        },
        unbindDocumentState() {
            if (this.modal || (!this.modal && this.blockScroll) || (this.maximizable && this.maximized)) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
            }
        },
        onKeyDown(event) {
--- a/components/lib/editor/style/EditorStyle.js
+++ b/components/lib/editor/style/EditorStyle.js
@ -2,11 +2,11 @@ import BaseStyle from 'primevue/base/style';

 const quillCSS = `
 /*!
- * Quill Editor v1.3.3
- * https://quilljs.com/
- * Copyright (c) 2014, Jason Chen
- * Copyright (c) 2013, salesforce.com
- */
+* Quill Editor v1.3.3
+* https://quilljs.com/
+* Copyright (c) 2014, Jason Chen
+* Copyright (c) 2013, salesforce.com
+*/
 .ql-container {
    box-sizing: border-box;
    font-family: Helvetica, Arial, sans-serif;
--- a/components/lib/fieldset/style/FieldsetStyle.js
+++ b/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'
 };
--- a/components/lib/galleria/Galleria.vue
+++ b/components/lib/galleria/Galleria.vue
@ -35,8 +35,7 @@ export default {
    },
    beforeUnmount() {
        if (this.fullScreen) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
        }

        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');
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+            DomHandler.blockBodyScroll();
            this.focus();
        },
        onBeforeLeave() {
@ -62,8 +60,7 @@ export default {
        onAfterLeave(el) {
            ZIndexUtils.clear(el);
            this.containerVisible = false;
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
        },
        onActiveItemChange(index) {
            if (this.activeIndex !== index) {
--- a/components/lib/galleria/GalleriaThumbnails.vue
+++ b/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;
-                    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;
+                    return ObjectUtils.sort(value1, value2, -1, comparer);
                });

                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@ -93,8 +93,7 @@ export default {
        },
        onImageClick() {
            if (this.preview) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
                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');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
            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');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
        }
    },
    computed: {
--- a/components/lib/orderlist/OrderList.vue
+++ b/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" />
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/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
--- a/components/lib/organizationchart/style/OrganizationChartStyle.js
+++ b/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'
--- a/components/lib/passthrough/tailwind/index.js
+++ b/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
                    }
--- a/components/lib/ripple/Ripple.js
+++ b/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) {
-        const primevue = binding.instance.$primevue;
-
-        if (primevue && primevue.config && primevue.config.ripple) {
-            el.unstyled = primevue.config.unstyled || binding.value?.unstyled || false;
+    mounted(el) {
+        const config = el?.$instance?.$config;

+        if (config && config.ripple) {
            this.create(el);
            this.bindEvents(el);
-        }

-        el.setAttribute('data-pd-ripple', true);
+            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'),
-                onAnimationEnd: this.onAnimationEnd,
+                class: !this.isUnstyled() && this.cx('root'),
+                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) {
--- a/components/lib/selectbutton/BaseSelectButton.vue
+++ b/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': {
--- a/components/lib/selectbutton/SelectButton.d.ts
+++ b/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.
     */
--- a/components/lib/selectbutton/SelectButton.vue
+++ b/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;
            }

--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@ -124,16 +124,14 @@ export default {
            }

            if (this.blockScroll) {
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
            }
        },
        disableDocumentSettings() {
            this.unbindOutsideClickListener();

            if (this.blockScroll) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
            }
        },
        onKeydown(event) {
--- a/components/lib/slider/Slider.vue
+++ b/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;
-                else if (diff > 0) newValue = oldValue + Math.floor(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.ceil(newValue / this.step - oldValue / this.step) * this.step;
            } else {
                newValue = Math.floor(newValue);
            }
--- a/components/lib/toast/Toast.d.ts
+++ b/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}
--- a/components/lib/tooltip/Tooltip.js
+++ b/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);
--- a/components/lib/tree/Tree.d.ts
+++ b/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 {
    /**
--- a/components/lib/treetable/TreeTable.vue
+++ b/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;
-                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 ObjectUtils.sort(value1, value2, this.d_sortOrder, comparer);
            });

            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;
-                }
+            if (value1 === value2) {
+                return this.d_multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, index + 1) : 0;
            }

-            return this.d_multiSortMeta[index].order * result;
+            return ObjectUtils.sort(value1, value2, this.d_multiSortMeta[index].order, comparer);
        },
        filter(value) {
            let filteredNodes = [];
--- a/components/lib/utils/DomHandler.js
+++ b/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);
    }
 };
--- a/components/lib/utils/ObjectUtils.js
+++ b/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;
--- a/components/lib/utils/Utils.d.ts
+++ b/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[];
 }

--- a/doc/common/apidoc/index.json
+++ b/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": [
--- a/doc/dock/AdvancedDoc.vue
+++ b/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-wifi px-3" />
-                <i class="pi pi-volume-up px-3" />
-                <span class="px-3">Fri 13:07</span>
-                <i class="pi pi-search px-3" />
-                <i class="pi pi-bars px-3" />
+                <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>

@ -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-wifi px-3" />
-                <i class="pi pi-volume-up px-3" />
-                <span class="px-3">Fri 13:07</span>
-                <i class="pi pi-search px-3" />
-                <i class="pi pi-bars px-3" />
+                <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>
    
@ -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"
-                    :circular="true" :fullScreen="true" :showThumbnails="false" :showItemNavigators="true">
+                <Galleria v-model:visible="displayPhotos" :value="images" :responsiveOptions="responsiveOptions" :numVisible="2" containerStyle="width: 400px" :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 {
--- a/doc/tailwind/SetupDoc.vue
+++ b/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);

--- a/layouts/default.vue
+++ b/layouts/default.vue
@ -42,8 +42,7 @@ export default {
                }

                this.sidebarActive = false;
-                DomHandler.removeClass(document.body, 'blocked-scroll');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll('blocked-scroll');
                this.$toast.removeAllGroups();
            }
        }
@ -61,18 +60,15 @@ export default {
        onMenuButtonClick() {
            if (this.sidebarActive) {
                this.sidebarActive = false;
-                DomHandler.removeClass(document.body, 'blocked-scroll');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll('blocked-scroll');
            } else {
                this.sidebarActive = true;
-                DomHandler.addClass(document.body, 'blocked-scroll');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll('blocked-scroll');
            }
        },
        onMaskClick() {
            this.sidebarActive = false;
-            DomHandler.removeClass(document.body, 'blocked-scroll');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll('blocked-scroll');
        },
        hideNews(event) {
            this.$appState.newsActive = false;
--- a/package-build.json
+++ b/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",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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:check": "prettier --check \"**/*.{js,vue,d.ts,json}\"",
+        "format": "prettier --write \"**/*.{js,vue,d.ts}\" --cache",
+        "format:check": "prettier --check \"**/*.{js,vue,d.ts}\"",
        "test:unit": "vitest run",
        "test:unit:watch": "vitest watch",
        "test:coverage": "vitest run --coverage",
--- a/public/themes/lara-dark-blue/theme.css
+++ b/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;
-  border: 1px solid #424b57;
+  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;
@ -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;
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/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;
-  border: 1px solid #424b57;
+  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;
@ -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;
--- a/public/themes/lara-dark-purple/theme.css
+++ b/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;
-  border: 1px solid #424b57;
+  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;
@ -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;
--- a/public/themes/lara-dark-teal/theme.css
+++ b/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;
--- a/public/themes/lara-light-blue/theme.css
+++ b/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 {
-  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:focus,
 .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 {
--- a/public/themes/lara-light-indigo/theme.css
+++ b/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 {
--- a/public/themes/lara-light-purple/theme.css
+++ b/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 {
--- a/public/themes/lara-light-teal/theme.css
+++ b/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;