From c9640bb54ba3a79024de199d6dac456723649d05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Mon, 20 Nov 2023 21:16:55 +0300
Subject: [PATCH 1/4] Fixed #14155 - PickList | Accessibility Enhancements

---
 src/app/components/picklist/picklist.ts | 358 ++++++++++++++++++++++--
 1 file changed, 333 insertions(+), 25 deletions(-)

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index eab44fed7be..23e7133756d 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -20,7 +20,7 @@ import {
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
-import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
+import { FilterService, PrimeNGConfig, PrimeTemplate, SharedModule } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { DomHandler } from 'primeng/dom';
 import { AngleDoubleDownIcon } from 'primeng/icons/angledoubledown';
@@ -60,7 +60,7 @@ import {
             <div class="p-picklist-buttons p-picklist-source-controls" *ngIf="showSourceControls" [attr.data-pc-section]="'sourceControls'" [attr.data-pc-group-section]="'controls'">
                 <button
                     type="button"
-                    [attr.aria-label]="upButtonAriaLabel"
+                    [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -73,7 +73,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="topButtonAriaLabel"
+                    [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -86,7 +86,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="downButtonAriaLabel"
+                    [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -99,7 +99,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="bottomButtonAriaLabel"
+                    [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -144,12 +144,18 @@ import {
                 <ul
                     #sourcelist
                     class="p-picklist-list p-picklist-source"
+                    [id]="idSource + '_list'"
+                    (keydown)="onItemKeyDown($event, selectedItemsSource, onSourceSelect, SOURCE_LIST)"
+                    (focus)="onListFocus($event, SOURCE_LIST)"
+                    (blur)="onListBlur($event, SOURCE_LIST)"
                     cdkDropList
                     [cdkDropListData]="source"
                     (cdkDropListDropped)="onDrop($event, SOURCE_LIST)"
                     [ngStyle]="sourceStyle"
                     role="listbox"
-                    aria-multiselectable="multiple"
+                    aria-multiselectable="true"
+                    [attr.aria-activedescendant]="focused['sourceList'] ? focusedOptionId : undefined"
+                    [attr.tabindex]="source && source.length > 0 ? tabindex : -1"
                     [attr.data-pc-section]="'sourceList'"
                     [attr.data-pc-group-section]="'list'"
                 >
@@ -158,16 +164,18 @@ import {
                             [ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsSource), 'p-disabled': disabled }"
                             pRipple
                             cdkDrag
+                            [id]="idSource + '_' + i"
+                            [ngClass]="itemClass(item, idSource + '_' + i, selectedItemsSource)"
                             [cdkDragData]="item"
                             [cdkDragDisabled]="!dragdrop"
-                            (click)="onItemClick($event, item, selectedItemsSource, onSourceSelect)"
+                            (click)="onItemClick($event, item, selectedItemsSource, onSourceSelect, idSource + '_' + i)"
+                            (mousedown)="onOptionMouseDown(i, SOURCE_LIST)"
                             (dblclick)="onSourceItemDblClick()"
                             (touchend)="onItemTouchEnd()"
                             (keydown)="onItemKeydown($event, item, selectedItemsSource, onSourceSelect)"
                             *ngIf="isItemVisible(item, SOURCE_LIST)"
                             role="option"
                             [attr.data-pc-section]="'item'"
-                            tabindex="0"
                             [attr.aria-selected]="isSelected(item, selectedItemsSource)"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"></ng-container>
@@ -184,28 +192,28 @@ import {
                 </ul>
             </div>
             <div class="p-picklist-buttons p-picklist-transfer-buttons" [attr.data-pc-section]="'buttons'" [attr.data-pc-group-section]="'controls'">
-                <button type="button" [attr.aria-label]="rightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()" [attr.data-pc-section]="'moveToTargetButton'">
+                <button type="button" [attr.aria-label]="moveToTargetAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveRightDisabled()" (click)="moveRight()" [attr.data-pc-section]="'moveToTargetButton'">
                     <ng-container *ngIf="!moveToTargetIconTemplate">
                         <AngleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movetotargeticon'" />
                         <AngleDownIcon *ngIf="viewChanged" [attr.data-pc-section]="'movetotargeticon'" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="moveToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
                 </button>
-                <button type="button" [attr.aria-label]="allRightButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()" [attr.data-pc-section]="'moveAllToTargetButton'">
+                <button type="button" [attr.aria-label]="moveAllToTargetAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllRightDisabled()" (click)="moveAllRight()" [attr.data-pc-section]="'moveAllToTargetButton'">
                     <ng-container *ngIf="!moveAllToTargetIconTemplate">
                         <AngleDoubleRightIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltotargeticon'" />
                         <AngleDoubleDownIcon *ngIf="viewChanged" [attr.data-pc-section]="'movealltotargeticon'" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="moveAllToTargetIconTemplate; context: { $implicit: viewChanged }"></ng-template>
                 </button>
-                <button type="button" [attr.aria-label]="leftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()" [attr.data-pc-section]="'moveToSourceButton'">
+                <button type="button" [attr.aria-label]="moveToSourceAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveLeftDisabled()" (click)="moveLeft()" [attr.data-pc-section]="'moveToSourceButton'">
                     <ng-container *ngIf="!moveToSourceIconTemplate">
                         <AngleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movedownsourceticon'" />
                         <AngleUpIcon *ngIf="viewChanged" [attr.data-pc-section]="'movedownsourceticon'" />
                     </ng-container>
                     <ng-template *ngTemplateOutlet="moveToSourceIconTemplate; context: { $implicit: viewChanged }"></ng-template>
                 </button>
-                <button type="button" [attr.aria-label]="allLeftButtonAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()" [attr.data-pc-section]="'moveAllToSourceButton'">
+                <button type="button" [attr.aria-label]="moveAllToSourceAriaLabel" pButton pRipple class="p-button-icon-only" [disabled]="moveAllLeftDisabled()" (click)="moveAllLeft()" [attr.data-pc-section]="'moveAllToSourceButton'">
                     <ng-container *ngIf="!moveAllToSourceIconTemplate">
                         <AngleDoubleLeftIcon *ngIf="!viewChanged" [attr.data-pc-section]="'movealltosourceticon'" />
                         <AngleDoubleUpIcon *ngIf="viewChanged" [attr.data-pc-section]="'movealltosourceticon'" />
@@ -287,7 +295,7 @@ import {
             <div class="p-picklist-buttons p-picklist-target-controls" *ngIf="showTargetControls" [attr.data-pc-section]="'targetControls'" [attr.data-pc-group-section]="'controls'">
                 <button
                     type="button"
-                    [attr.aria-label]="upButtonAriaLabel"
+                    [attr.aria-label]="moveUpAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -300,7 +308,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="topButtonAriaLabel"
+                    [attr.aria-label]="moveTopAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -313,7 +321,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="downButtonAriaLabel"
+                    [attr.aria-label]="moveDownAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -326,7 +334,7 @@ import {
                 </button>
                 <button
                     type="button"
-                    [attr.aria-label]="bottomButtonAriaLabel"
+                    [attr.aria-label]="moveBottomAriaLabel"
                     pButton
                     pRipple
                     class="p-button-icon-only"
@@ -367,7 +375,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
      * Index of the element in tabbing order.
      * @group Props
      */
-    @Input() tabindex: number | undefined;
+    @Input() tabindex: number | undefined = 0;
     /**
      * Defines a string that labels the move to right button for accessibility.
      * @group Props
@@ -610,6 +618,20 @@ export class PickList implements AfterViewChecked, AfterContentInit {
      */
     @Output() onTargetFilter: EventEmitter<PickListTargetFilterEvent> = new EventEmitter<PickListTargetFilterEvent>();
 
+    /**
+     * Callback to invoke when the list is focused
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();
+
+    /**
+     * Callback to invoke when the list is blurred
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();
+
     @ViewChild('sourcelist') listViewSourceChild: Nullable<ElementRef>;
 
     @ViewChild('targetlist') listViewTargetChild: Nullable<ElementRef>;
@@ -620,6 +642,50 @@ export class PickList implements AfterViewChecked, AfterContentInit {
 
     @ContentChildren(PrimeTemplate) templates: Nullable<QueryList<PrimeTemplate>>;
 
+    get moveUpAriaLabel() {
+        return this.upButtonAriaLabel ? this.upButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveUp : undefined;
+    }
+
+    get moveTopAriaLabel() {
+        return this.topButtonAriaLabel ? this.topButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveTop : undefined;
+    }
+
+    get moveDownAriaLabel() {
+        return this.downButtonAriaLabel ? this.downButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
+    }
+
+    get moveBottomAriaLabel() {
+        return this.bottomButtonAriaLabel ? this.bottomButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveDown : undefined;
+    }
+
+    get moveToTargetAriaLabel() {
+        return this.rightButtonAriaLabel ? this.rightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToTarget : undefined;
+    }
+
+    get moveAllToTargetAriaLabel() {
+        return this.allRightButtonAriaLabel ? this.allRightButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToTarget : undefined;
+    }
+
+    get moveToSourceAriaLabel() {
+        return this.allLeftButtonAriaLabel ? this.allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveToSource : undefined;
+    }
+
+    get moveAllToSourceAriaLabel() {
+        return this.allLeftButtonAriaLabel ? this.allLeftButtonAriaLabel : this.config.translation.aria ? this.config.translation.aria.moveAllToSource : undefined;
+    }
+
+    get idSource() {
+        return this.id + '_source';
+    }
+
+    get idTarget() {
+        return this.id + '_target';
+    }
+
+    get focusedOptionId() {
+        return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
+    }
+
     _breakpoint: string = '960px';
 
     public itemTemplate: TemplateRef<any> | undefined;
@@ -700,9 +766,26 @@ export class PickList implements AfterViewChecked, AfterContentInit {
 
     viewChanged: boolean | undefined;
 
+    focusedOptionIndex: any = -1;
+
+    focusedOption: any | undefined;
+
+    focused: any = {
+        sourceList: false,
+        targetList: false
+    };
+
     mediaChangeListener: VoidListener;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private renderer: Renderer2, public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private renderer: Renderer2,
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public filterService: FilterService,
+        public config: PrimeNGConfig
+    ) {
         this.window = this.document.defaultView as Window;
     }
 
@@ -826,12 +909,13 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         }
     }
 
-    onItemClick(event: Event | any, item: any, selectedItems: any[], callback: EventEmitter<any>) {
+    onItemClick(event: Event | any, item: any, selectedItems: any[], callback: EventEmitter<any>, itemId?: string) {
         if (this.disabled) {
             return;
         }
 
-        let index = this.findIndexInSelection(item, selectedItems);
+        let index = this.findIndexInList(item, selectedItems);
+        if (itemId) this.focusedOptionIndex = itemId;
         let selected = index != -1;
         let metaSelection = this.itemTouched ? false : this.metaKeySelection;
 
@@ -856,6 +940,11 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         this.itemTouched = false;
     }
 
+    onOptionMouseDown(index, listType: number) {
+        this.focused[listType] = true;
+        this.focusedOptionIndex = index;
+    }
+
     onSourceItemDblClick() {
         if (this.disabled) {
             return;
@@ -1145,10 +1234,18 @@ export class PickList implements AfterViewChecked, AfterContentInit {
     }
 
     isSelected(item: any, selectedItems: any[]) {
-        return this.findIndexInSelection(item, selectedItems) != -1;
+        return this.findIndexInList(item, selectedItems) != -1;
+    }
+
+    itemClass(item, id, selectedItems) {
+        return {
+            'p-picklist-item': true,
+            'p-highlight': this.isSelected(item, selectedItems),
+            'p-focus': id === this.focusedOptionId
+        };
     }
 
-    findIndexInSelection(item: any, selectedItems: any[]): number {
+    findIndexInList(item: any, selectedItems: any[]): number {
         return ObjectUtils.findIndexInList(item, selectedItems);
     }
 
@@ -1208,6 +1305,217 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         }
     }
 
+    onListFocus(event, listType) {
+        let listElement = this.getListElement(listType);
+        const selectedFirstItem = DomHandler.findSingle(listElement, 'li.p-picklist-item.p-highlight') || DomHandler.findSingle(listElement, 'li.p-picklist-item');
+        const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, listElement.children);
+
+        this.focused[listType === this.SOURCE_LIST ? 'sourcelist' : 'targetlist'] = true;
+
+        const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+
+        this.changeFocusedOptionIndex(index, listType);
+        this.onFocus.emit(event);
+    }
+
+    onListBlur(event, listType) {
+        this.focused[listType] = false;
+        this.focusedOptionIndex = -1;
+        this.focusedOption = null;
+        this.onBlur.emit(event);
+    }
+
+    getListElement(listType: number) {
+        return listType === this.SOURCE_LIST ? this.listViewSourceChild?.nativeElement : this.listViewTargetChild?.nativeElement;
+    }
+
+    getListItems(listType: number) {
+        let listElemet = this.getListElement(listType);
+
+        return DomHandler.find(listElemet, 'li.p-picklist-item');
+    }
+
+    getLatestSelectedVisibleOptionIndex(visibleList: any[], selectedItems: any[]): number | null {
+        const latestSelectedItem = [...selectedItems].reverse().find((item) => visibleList.includes(item));
+        return latestSelectedItem !== undefined ? visibleList.indexOf(latestSelectedItem) : null;
+    }
+
+    getVisibleList(listType: number) {
+        if (listType === this.SOURCE_LIST) {
+            return this.visibleOptionsSource && this.visibleOptionsSource.length > 0 ? this.visibleOptionsSource : this.source && this.source.length > 0 ? this.source : null;
+        }
+
+        return this.visibleOptionsTarget && this.visibleOptionsTarget.length > 0 ? this.visibleOptionsTarget : this.target && this.target.length > 0 ? this.target : null;
+    }
+
+    setSelectionList(listType: number, selectedItems: any[]) {
+        if (listType === this.SOURCE_LIST) {
+            this.selectedItemsSource = selectedItems;
+        } else {
+            this.selectedItemsTarget = selectedItems;
+        }
+    }
+
+    findNextOptionIndex(index: number, listType: number) {
+        const items = this.getListItems(listType);
+
+        const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+        return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+    }
+
+    findPrevOptionIndex(index: number, listType: number) {
+        const items = this.getListItems(listType);
+        const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
+
+        return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+    }
+
+    onItemKeyDown(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event, selectedItems, callback, listType);
+                break;
+
+            case 'ArrowUp':
+                this.onArrowUpKey(event, selectedItems, callback, listType);
+                break;
+
+            case 'Home':
+                this.onHomeKey(event, selectedItems, callback, listType);
+                break;
+
+            case 'End':
+                this.onEndKey(event, selectedItems, callback, listType);
+                break;
+
+            case 'Enter':
+                this.onEnterKey(event, selectedItems, callback);
+                break;
+
+            case 'Space':
+                this.onSpaceKey(event, selectedItems, callback, listType);
+                break;
+
+            case 'KeyA':
+                if (event.ctrlKey) {
+                    this.setSelectionList(listType, this.getVisibleList(listType));
+                    callback.emit({ items: selectedItems });
+                    event.preventDefault();
+                }
+
+            default:
+                break;
+        }
+    }
+
+    getFocusedOption(index: number, listType: number) {
+        if (index === -1) return null;
+
+        if (listType === this.SOURCE_LIST) {
+            return this.visibleOptionsSource && this.visibleOptionsSource.length ? this.visibleOptionsSource[index] : this.source && this.source.length ? this.source[index] : null;
+        }
+
+        return this.visibleOptionsTarget && this.visibleOptionsTarget.length ? this.visibleOptionsTarget[index] : this.target && this.target.length ? this.target[index] : null;
+    }
+
+    changeFocusedOptionIndex(index, listType) {
+        const items = this.getListItems(listType);
+
+        let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
+
+        this.focusedOptionIndex = items[order].getAttribute('id');
+        this.focusedOption = this.getFocusedOption(order, listType);
+        this.scrollInView(items[order].getAttribute('id'), listType);
+    }
+
+    scrollInView(id, listType) {
+        const element = DomHandler.findSingle(this.getListElement(listType), `li[id="${id}"]`);
+
+        if (element) {
+            element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+        }
+    }
+
+    onArrowDownKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType);
+
+        this.changeFocusedOptionIndex(optionIndex, listType);
+
+        if (event.shiftKey) {
+            this.onEnterKey(event, selectedItems, callback);
+        }
+
+        event.preventDefault();
+    }
+
+    onArrowUpKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType);
+
+        this.changeFocusedOptionIndex(optionIndex, listType);
+
+        if (event.shiftKey) {
+            this.onEnterKey(event, selectedItems, callback);
+        }
+
+        event.preventDefault();
+    }
+
+    onEnterKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>) {
+        this.onItemClick(event, this.focusedOption, selectedItems, callback);
+        event.preventDefault();
+    }
+
+    onSpaceKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        event.preventDefault();
+
+        if (event.shiftKey && selectedItems && selectedItems.length > 0) {
+            let visibleList = this.getVisibleList(listType);
+            let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleList, selectedItems);
+            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList);
+
+            selectedItems = [...visibleList.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)];
+            this.setSelectionList(listType, selectedItems);
+
+            callback.emit({ items: selectedItems });
+        } else {
+            this.onEnterKey(event, selectedItems, callback);
+        }
+    }
+
+    onHomeKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        if (event.ctrlKey && event.shiftKey) {
+            let visibleList = this.getVisibleList(listType);
+            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList);
+
+            selectedItems = [...visibleList.slice(0, focusedIndex + 1)];
+            this.setSelectionList(listType, selectedItems);
+            callback.emit({ items: selectedItems });
+        } else {
+            this.changeFocusedOptionIndex(0, listType);
+        }
+
+        event.preventDefault();
+    }
+
+    onEndKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {
+        let visibleList = this.getVisibleList(listType);
+        let lastIndex = visibleList && visibleList.length > 0 ? visibleList.length - 1 : null;
+        if (lastIndex === null) return;
+
+        if (event.ctrlKey && event.shiftKey) {
+            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList);
+            selectedItems = [...visibleList.slice(focusedIndex, lastIndex)];
+
+            this.setSelectionList(listType, selectedItems);
+            callback.emit({ items: selectedItems });
+        } else {
+            this.changeFocusedOptionIndex(lastIndex, listType);
+        }
+
+        event.preventDefault();
+    }
+
     getDropIndexes(fromIndex: number, toIndex: number, droppedList: number, isTransfer: boolean, data: any[] | any) {
         let previousIndex, currentIndex;
 
@@ -1336,17 +1644,17 @@ export class PickList implements AfterViewChecked, AfterContentInit {
                     .p-picklist[${this.id}] {
                         flex-direction: column;
                     }
-    
+
                     .p-picklist[${this.id}] .p-picklist-buttons {
                         padding: var(--content-padding);
                         flex-direction: row;
                     }
-    
+
                     .p-picklist[${this.id}] .p-picklist-buttons .p-button {
                         margin-right: var(--inline-spacing);
                         margin-bottom: 0;
                     }
-    
+
                     .p-picklist[${this.id}] .p-picklist-buttons .p-button:last-child {
                         margin-right: 0;
                     }

From acd1d04382876f5ccc3c5da69e9927d8459409cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 21 Nov 2023 01:22:04 +0300
Subject: [PATCH 2/4] Refactor #14155

---
 src/app/components/picklist/picklist.ts | 43 +++++++++++++++----------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
index 23e7133756d..f5b40f05d0f 100755
--- a/src/app/components/picklist/picklist.ts
+++ b/src/app/components/picklist/picklist.ts
@@ -172,7 +172,6 @@ import {
                             (mousedown)="onOptionMouseDown(i, SOURCE_LIST)"
                             (dblclick)="onSourceItemDblClick()"
                             (touchend)="onItemTouchEnd()"
-                            (keydown)="onItemKeydown($event, item, selectedItemsSource, onSourceSelect)"
                             *ngIf="isItemVisible(item, SOURCE_LIST)"
                             role="option"
                             [attr.data-pc-section]="'item'"
@@ -253,12 +252,18 @@ import {
                 <ul
                     #targetlist
                     class="p-picklist-list p-picklist-target"
+                    [id]="idTarget + '_list'"
+                    (keydown)="onItemKeyDown($event, selectedItemsTarget, onTargetSelect, TARGET_LIST)"
+                    (focus)="onListFocus($event, TARGET_LIST)"
+                    (blur)="onListBlur($event, TARGET_LIST)"
                     cdkDropList
                     [cdkDropListData]="target"
                     (cdkDropListDropped)="onDrop($event, TARGET_LIST)"
                     [ngStyle]="targetStyle"
                     role="listbox"
-                    aria-multiselectable="multiple"
+                    aria-multiselectable="true"
+                    [attr.aria-activedescendant]="focused['targetList'] ? focusedOptionId : undefined"
+                    [attr.tabindex]="target && target.length > 0 ? tabindex : -1"
                     [attr.data-pc-section]="'targetList'"
                     [attr.data-pc-group-section]="'list'"
                 >
@@ -267,15 +272,16 @@ import {
                             [ngClass]="{ 'p-picklist-item': true, 'p-highlight': isSelected(item, selectedItemsTarget), 'p-disabled': disabled }"
                             pRipple
                             cdkDrag
+                            [id]="idTarget + '_' + i"
+                            [ngClass]="itemClass(item, idTarget + '_' + i, selectedItemsTarget)"
                             [cdkDragData]="item"
                             [cdkDragDisabled]="!dragdrop"
-                            (click)="onItemClick($event, item, selectedItemsTarget, onTargetSelect)"
+                            (click)="onItemClick($event, item, selectedItemsTarget, onTargetSelect, idTarget + '_' + i)"
+                            (mousedown)="onOptionMouseDown(i, TARGET_LIST)"
                             (dblclick)="onTargetItemDblClick()"
                             (touchend)="onItemTouchEnd()"
-                            (keydown)="onItemKeydown($event, item, selectedItemsTarget, onTargetSelect)"
                             *ngIf="isItemVisible(item, TARGET_LIST)"
                             role="option"
-                            tabindex="0"
                             [attr.data-pc-section]="'item'"
                             [attr.aria-selected]="isSelected(item, selectedItemsTarget)"
                         >
@@ -941,7 +947,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
     }
 
     onOptionMouseDown(index, listType: number) {
-        this.focused[listType] = true;
+        this.focused[listType === this.SOURCE_LIST ? 'sourceList' : 'targetList'] = true;
         this.focusedOptionIndex = index;
     }
 
@@ -1310,8 +1316,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         const selectedFirstItem = DomHandler.findSingle(listElement, 'li.p-picklist-item.p-highlight') || DomHandler.findSingle(listElement, 'li.p-picklist-item');
         const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, listElement.children);
 
-        this.focused[listType === this.SOURCE_LIST ? 'sourcelist' : 'targetlist'] = true;
-
+        this.focused[listType === this.SOURCE_LIST ? 'sourceList' : 'targetList'] = true;
         const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
 
         this.changeFocusedOptionIndex(index, listType);
@@ -1319,7 +1324,7 @@ export class PickList implements AfterViewChecked, AfterContentInit {
     }
 
     onListBlur(event, listType) {
-        this.focused[listType] = false;
+        this.focused[listType === this.SOURCE_LIST ? 'sourceList' : 'targetList'] = false;
         this.focusedOptionIndex = -1;
         this.focusedOption = null;
         this.onBlur.emit(event);
@@ -1335,9 +1340,9 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         return DomHandler.find(listElemet, 'li.p-picklist-item');
     }
 
-    getLatestSelectedVisibleOptionIndex(visibleList: any[], selectedItems: any[]): number | null {
+    getLatestSelectedVisibleOptionIndex(visibleList: any[], selectedItems: any[]): number {
         const latestSelectedItem = [...selectedItems].reverse().find((item) => visibleList.includes(item));
-        return latestSelectedItem !== undefined ? visibleList.indexOf(latestSelectedItem) : null;
+        return latestSelectedItem !== undefined ? visibleList.indexOf(latestSelectedItem) : -1;
     }
 
     getVisibleList(listType: number) {
@@ -1472,15 +1477,19 @@ export class PickList implements AfterViewChecked, AfterContentInit {
         if (event.shiftKey && selectedItems && selectedItems.length > 0) {
             let visibleList = this.getVisibleList(listType);
             let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleList, selectedItems);
-            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList);
 
-            selectedItems = [...visibleList.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)];
-            this.setSelectionList(listType, selectedItems);
+            if (lastSelectedIndex !== -1) {
+                let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleList);
 
-            callback.emit({ items: selectedItems });
-        } else {
-            this.onEnterKey(event, selectedItems, callback);
+                selectedItems = [...visibleList.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)];
+                this.setSelectionList(listType, selectedItems);
+
+                callback.emit({ items: selectedItems });
+                return;
+            }
         }
+
+        this.onEnterKey(event, selectedItems, callback);
     }
 
     onHomeKey(event: Event | any, selectedItems: any[], callback: EventEmitter<any>, listType: number) {

From 9ae4a3436a71377bcb0a8dbc03874b8de1e7957e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 21 Nov 2023 16:28:50 +0300
Subject: [PATCH 3/4] Refactor #14123 for OrderList

---
 src/app/components/orderlist/orderlist.ts | 132 ++++++++++++++++------
 1 file changed, 97 insertions(+), 35 deletions(-)

diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts
index e2c5a5d068f..93f2cf3598b 100755
--- a/src/app/components/orderlist/orderlist.ts
+++ b/src/app/components/orderlist/orderlist.ts
@@ -119,7 +119,7 @@ import { OrderListFilterEvent, OrderListFilterOptions, OrderListSelectionChangeE
                             [ngClass]="{ 'p-highlight': isSelected(item), 'p-disabled': disabled, 'p-focus': id + '_' + i === focusedOptionId() }"
                             [cdkDragData]="item"
                             [cdkDragDisabled]="!dragdrop"
-                            (click)="onItemClick($event, item, i)"
+                            (click)="onItemClick($event, item, i, id + '_' + i)"
                             (touchend)="onItemTouchEnd()"
                             (mousedown)="onOptionMouseDown(i)"
                             *ngIf="isItemVisible(item)"
@@ -156,101 +156,121 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
      * @group Props
      */
     @Input() header: string | undefined;
+
     /**
      * Inline style of the component.
      * @group Props
      */
     @Input() style: { [klass: string]: any } | null | undefined;
+
     /**
      * Style class of the component.
      * @group Props
      */
     @Input() styleClass: string | undefined;
+
     /**
      * Index of the element in tabbing order.
      * @group Props
      */
     @Input() tabindex: number | undefined;
+
     /**
      * Defines a string that labels the input for accessibility.
      * @group Props
      */
     @Input() ariaLabel: string | undefined;
+
     /**
      * Specifies one or more IDs in the DOM that labels the input field.
      * @group Props
      */
     @Input() ariaLabelledBy: string | undefined;
+
     /**
      * Inline style of the list element.
      * @group Props
      */
     @Input() listStyle: { [klass: string]: any } | null | undefined;
+
     /**
      * A boolean value that indicates whether the component should be responsive.
      * @group Props
      */
     @Input() responsive: boolean | undefined;
+
     /**
      * When specified displays an input field to filter the items on keyup and decides which fields to search against.
      * @group Props
      */
     @Input() filterBy: string | undefined;
+
     /**
      * Placeholder of the filter input.
      * @group Props
      */
     @Input() filterPlaceholder: string | undefined;
+
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      * @group Props
      */
     @Input() filterLocale: string | undefined;
+
     /**
      * When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.
      * @group Props
      */
     @Input() metaKeySelection: boolean = true;
+
     /**
      * Whether to enable dragdrop based reordering.
      * @group Props
      */
     @Input() dragdrop: boolean = false;
+
     /**
      * Defines the location of the buttons with respect to the list.
      * @group Props
      */
     @Input() controlsPosition: 'left' | 'right' = 'left';
+
     /**
      * Defines a string that labels the filter input.
      * @group Props
      */
     @Input() ariaFilterLabel: string | undefined;
+
     /**
      * Defines how the items are filtered.
      * @group Props
      */
     @Input() filterMatchMode: 'contains' | 'startsWith' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' = 'contains';
+
     /**
      * Indicates the width of the screen at which the component should change its behavior.
      * @group Props
      */
     @Input() breakpoint: string = '960px';
+
     /**
      * Whether to displays rows with alternating colors.
      * @group Props
      */
     @Input() stripedRows: boolean | undefined;
+
     /**
      * When present, it specifies that the component should be disabled.
      * @group Props
      */
     @Input() disabled: boolean = false;
+
     /**
      * Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
      * @group Props
      */
     @Input() trackBy: Function = (index: number, item: any) => item;
+
     /**
      * A list of values that are currently selected.
      * @group Props
@@ -261,6 +281,7 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
     get selection(): any[] {
         return this.d_selection;
     }
+
     /**
      * Array of values to be displayed in the component.
      * It represents the data source for the list of items.
@@ -275,24 +296,28 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
     get value(): any[] | undefined {
         return this._value;
     }
+
     /**
      * Callback to invoke on selection change.
      * @param {*} any - selection instance.
      * @group Emits
      */
     @Output() selectionChange: EventEmitter<any> = new EventEmitter();
+
     /**
      * Callback to invoke when list is reordered.
      * @param {*} any - list instance.
      * @group Emits
      */
     @Output() onReorder: EventEmitter<any> = new EventEmitter();
+
     /**
      * Callback to invoke when selection changes.
      * @param {OrderListSelectionChangeEvent} event - Custom change event.
      * @group Emits
      */
     @Output() onSelectionChange: EventEmitter<OrderListSelectionChangeEvent> = new EventEmitter<OrderListSelectionChangeEvent>();
+
     /**
      * Callback to invoke when filtering occurs.
      * @param {OrderListFilterEvent} event - Custom filter event.
@@ -300,6 +325,20 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
      */
     @Output() onFilterEvent: EventEmitter<OrderListFilterEvent> = new EventEmitter<OrderListFilterEvent>();
 
+    /**
+     * Callback to invoke when the list is focused
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onFocus: EventEmitter<Event> = new EventEmitter<Event>();
+
+    /**
+     * Callback to invoke when the list is blurred
+     * @param {Event} event - Browser event.
+     * @group Emits
+     */
+    @Output() onBlur: EventEmitter<Event> = new EventEmitter<Event>();
+
     @ViewChild('listelement') listViewChild: Nullable<ElementRef>;
 
     @ViewChild('filter') filterViewChild: Nullable<ElementRef>;
@@ -358,7 +397,9 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
 
     focused: boolean = false;
 
-    focusedOptionIndex: number = -1;
+    focusedOptionIndex: any = -1;
+
+    focusedOption: any | undefined;
 
     public filterValue: Nullable<string>;
 
@@ -455,31 +496,32 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
         }
     }
 
-    onItemClick(event, item: any, index: number) {
+    onItemClick(event, item: any, index?: number, selectedId?: string) {
         this.itemTouched = false;
+        let focusedIndex = index ? index : ObjectUtils.findIndexInList(this.focusedOption, this.value);
         let selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
         let selected = selectedIndex !== -1;
         let metaSelection = this.itemTouched ? false : this.metaKeySelection;
 
-        const selectedId = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]')[index].getAttribute('id');
-
-        this.focusedOptionIndex = selectedId;
+        if (selectedId) {
+            this.focusedOptionIndex = selectedId;
+        }
 
         if (metaSelection) {
             let metaKey = event.metaKey || event.ctrlKey;
 
             if (selected && metaKey) {
-                this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
+                this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex);
             } else {
                 this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
-                ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+                ObjectUtils.insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value);
             }
         } else {
             if (selected) {
-                this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
+                this.d_selection = this.d_selection.filter((val, focusedIndex) => focusedIndex !== selectedIndex);
             } else {
                 this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.value);
+                ObjectUtils.insertIntoOrderedArray(item, focusedIndex, this.d_selection, this.value);
             }
         }
 
@@ -647,7 +689,8 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
     }
 
     onListFocus(event) {
-        const focusableEl = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="item"]')
+        const focusableEl = DomHandler.findSingle(this.listViewChild.nativeElement, '[data-p-highlight="true"]') || DomHandler.findSingle(this.listViewChild.nativeElement, '[data-pc-section="item"]');
+
         if (focusableEl) {
             const findIndex = ObjectUtils.findIndexInList(focusableEl, this.listViewChild.nativeElement.children);
             this.focused = true;
@@ -655,11 +698,15 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
 
             this.changeFocusedOptionIndex(index);
         }
+
+        this.onFocus.emit(event);
     }
 
     onListBlur(event) {
         this.focused = false;
+        this.focusedOption = null;
         this.focusedOptionIndex = -1;
+        this.onBlur.emit(event);
     }
 
     onItemKeydown(event: KeyboardEvent) {
@@ -729,11 +776,9 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
 
     onHomeKey(event) {
         if (event.ctrlKey && event.shiftKey) {
-            const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]');
-            const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
-            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-            this.d_selection = [...this.value].slice(0, matchedOptionIndex + 1);
+            let visibleOptions = this.getVisibleOptions();
+            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions);
+            this.d_selection = [...this.value].slice(0, focusedIndex + 1);
             this.selectionChange.emit(this.d_selection);
         } else {
             this.changeFocusedOptionIndex(0);
@@ -744,11 +789,9 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
 
     onEndKey(event) {
         if (event.ctrlKey && event.shiftKey) {
-            const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]');
-            const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
-            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-            this.d_selection = [...this.value].slice(matchedOptionIndex, items.length);
+            let visibleOptions = this.getVisibleOptions();
+            let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions);
+            this.d_selection = [...this.value].slice(focusedIndex, visibleOptions.length - 1);
             this.selectionChange.emit(this.d_selection);
         } else {
             this.changeFocusedOptionIndex(DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]').length - 1);
@@ -758,27 +801,29 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
     }
 
     onEnterKey(event) {
-        const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]');
-        const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
-        const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-        this.onItemClick(event, this.value[matchedOptionIndex], matchedOptionIndex);
+        this.onItemClick(event, this.focusedOption);
 
         event.preventDefault();
     }
 
     onSpaceKey(event) {
-        if (event.shiftKey) {
-            const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]');
-            const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.value]);
-            const focusedItem = DomHandler.findSingle(this.listViewChild.nativeElement, `[data-pc-section="item"][id=${this.focusedOptionIndex}]`);
-            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
+        event.preventDefault();
 
-            this.d_selection = [...this.value].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
-            this.selectionChange.emit(this.d_selection);
-        } else {
-            this.onEnterKey(event);
+        if (event.shiftKey && this.selection && this.selection.length > 0) {
+            let visibleOptions = this.getVisibleOptions();
+            let lastSelectedIndex = this.getLatestSelectedVisibleOptionIndex(visibleOptions);
+
+            if (lastSelectedIndex !== -1) {
+                let focusedIndex = ObjectUtils.findIndexInList(this.focusedOption, visibleOptions);
+                this.d_selection = [...visibleOptions.slice(Math.min(lastSelectedIndex, focusedIndex), Math.max(lastSelectedIndex, focusedIndex) + 1)];
+                this.selectionChange.emit(this.d_selection);
+                this.onSelectionChange.emit({ originalEvent: event, value: this.d_selection });
+
+                return;
+            }
         }
+
+        this.onEnterKey(event);
     }
 
     findNextOptionIndex(index) {
@@ -795,12 +840,29 @@ export class OrderList implements AfterViewChecked, AfterContentInit {
         return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
     }
 
+    getLatestSelectedVisibleOptionIndex(visibleOptions: any[]): number {
+        const latestSelectedItem = [...this.d_selection].reverse().find((item) => visibleOptions.includes(item));
+
+        return latestSelectedItem !== undefined ? visibleOptions.indexOf(latestSelectedItem) : -1;
+    }
+
+    getVisibleOptions() {
+        return this.visibleOptions && this.visibleOptions.length > 0 ? this.visibleOptions : this.value && this.value.length > 0 ? this.value : null;
+    }
+
+    getFocusedOption(index: number) {
+        if (index === -1) return null;
+
+        return this.visibleOptions && this.visibleOptions.length ? this.visibleOptions[index] : this.value && this.value.length ? this.value[index] : null;
+    }
+
     changeFocusedOptionIndex(index) {
         const items = DomHandler.find(this.listViewChild.nativeElement, '[data-pc-section="item"]');
 
         let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
 
         this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
+        this.focusedOption = this.getFocusedOption(order);
 
         this.scrollInView(this.focusedOptionIndex);
     }

From be94c39f5bc2133883891109934a49f1dc299bff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 22 Nov 2023 16:19:58 +0300
Subject: [PATCH 4/4] Update css

---
 src/assets/components/themes/arya-blue/theme.css       | 10 +++++++---
 src/assets/components/themes/arya-green/theme.css      | 10 +++++++---
 src/assets/components/themes/arya-orange/theme.css     | 10 +++++++---
 src/assets/components/themes/arya-purple/theme.css     | 10 +++++++---
 .../components/themes/bootstrap4-dark-blue/theme.css   | 10 +++++++---
 .../components/themes/bootstrap4-dark-purple/theme.css | 10 +++++++---
 .../components/themes/bootstrap4-light-blue/theme.css  | 10 +++++++---
 .../themes/bootstrap4-light-purple/theme.css           | 10 +++++++---
 src/assets/components/themes/fluent-light/theme.css    | 10 +++++++---
 src/assets/components/themes/lara-dark-blue/theme.css  | 10 +++++++---
 .../components/themes/lara-dark-indigo/theme.css       | 10 +++++++---
 .../components/themes/lara-dark-purple/theme.css       | 10 +++++++---
 src/assets/components/themes/lara-dark-teal/theme.css  | 10 +++++++---
 src/assets/components/themes/lara-light-blue/theme.css | 10 +++++++---
 .../components/themes/lara-light-indigo/theme.css      | 10 +++++++---
 .../components/themes/lara-light-purple/theme.css      | 10 +++++++---
 src/assets/components/themes/lara-light-teal/theme.css | 10 +++++++---
 src/assets/components/themes/luna-amber/theme.css      | 10 +++++++---
 src/assets/components/themes/luna-blue/theme.css       | 10 +++++++---
 src/assets/components/themes/luna-green/theme.css      | 10 +++++++---
 src/assets/components/themes/luna-pink/theme.css       | 10 +++++++---
 .../components/themes/md-dark-deeppurple/theme.css     | 10 +++++++---
 src/assets/components/themes/md-dark-indigo/theme.css  | 10 +++++++---
 .../components/themes/md-light-deeppurple/theme.css    | 10 +++++++---
 src/assets/components/themes/md-light-indigo/theme.css | 10 +++++++---
 .../components/themes/mdc-dark-deeppurple/theme.css    | 10 +++++++---
 src/assets/components/themes/mdc-dark-indigo/theme.css | 10 +++++++---
 .../components/themes/mdc-light-deeppurple/theme.css   | 10 +++++++---
 .../components/themes/mdc-light-indigo/theme.css       | 10 +++++++---
 src/assets/components/themes/mira/theme.css            | 10 +++++++---
 src/assets/components/themes/nano/theme.css            | 10 +++++++---
 src/assets/components/themes/nova-accent/theme.css     | 10 +++++++---
 src/assets/components/themes/nova-alt/theme.css        | 10 +++++++---
 src/assets/components/themes/nova/theme.css            | 10 +++++++---
 src/assets/components/themes/rhea/theme.css            | 10 +++++++---
 src/assets/components/themes/saga-blue/theme.css       | 10 +++++++---
 src/assets/components/themes/saga-green/theme.css      | 10 +++++++---
 src/assets/components/themes/saga-orange/theme.css     | 10 +++++++---
 src/assets/components/themes/saga-purple/theme.css     | 10 +++++++---
 src/assets/components/themes/soho-dark/theme.css       | 10 +++++++---
 src/assets/components/themes/soho-light/theme.css      | 10 +++++++---
 src/assets/components/themes/tailwind-light/theme.css  | 10 +++++++---
 src/assets/components/themes/vela-blue/theme.css       | 10 +++++++---
 src/assets/components/themes/vela-green/theme.css      | 10 +++++++---
 src/assets/components/themes/vela-orange/theme.css     | 10 +++++++---
 src/assets/components/themes/vela-purple/theme.css     | 10 +++++++---
 src/assets/components/themes/viva-dark/theme.css       | 10 +++++++---
 src/assets/components/themes/viva-light/theme.css      | 10 +++++++---
 48 files changed, 336 insertions(+), 144 deletions(-)

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index 632ab49a734..b11e17d92ac 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index a7855e1675a..72220990068 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index 1453c5e7579..1ac6e9ed96e 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index a02c8365bd4..68c0c751700 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #383838;
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index 78ad51e2f61..0c002ac9030 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4082,15 +4082,19 @@
     border: 1px solid #3f4b5b;
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1.25rem;
     border: 1px solid #3f4b5b;
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index da55cf3171c..9efa25f782a 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4082,15 +4082,19 @@
     border: 1px solid #3f4b5b;
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1.25rem;
     border: 1px solid #3f4b5b;
     background: #2a323d;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index a4ad1badda8..33eded098df 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #212529;
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #212529;
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4082,15 +4082,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #212529;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index 3c86a06a777..98850294654 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #212529;
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #212529;
     background: transparent;
-    transition: transform 0.15s, box-shadow 0.15s;
+    transition: box-shadow 0.15s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4082,15 +4082,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #212529;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #212529;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index b8d0ce6f98c..135d9025e8a 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -3234,7 +3234,7 @@
     border: 1px solid transparent;
     color: #323130;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #f3f2f1;
@@ -3442,7 +3442,7 @@
     border: 1px solid transparent;
     color: #323130;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #f3f2f1;
@@ -4046,15 +4046,19 @@
     border: 1px solid #a19f9d;
     background: #ffffff;
     color: #323130;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #a19f9d;
     background: #ffffff;
     color: #323130;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index 1b3861bf3b6..ab52cedfc45 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4065,15 +4065,19 @@
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index 5dd14b42586..47bbfc8bd4f 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4065,15 +4065,19 @@
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index 983034a9a13..000eed0de42 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4065,15 +4065,19 @@
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index 27d803f209c..f9d5d5568f5 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4065,15 +4065,19 @@
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #0b213f;
     background: #071426;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index e55a34cef84..2f62dbed494 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4065,15 +4065,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index f8c773bf04b..2a541b0e77b 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4065,15 +4065,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 737323094a9..fc1e4d44668 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4065,15 +4065,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index dad9158908d..990c7839b4d 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -3253,7 +3253,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3461,7 +3461,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4065,15 +4065,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 3186ae5a41c..e2abf4ae34e 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -4058,15 +4058,19 @@
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index 73237e36653..323182b70ad 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -4058,15 +4058,19 @@
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index 6fc51852e9b..fb8227c21a3 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -4058,15 +4058,19 @@
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index ea7c2f106bf..ec7e7359422 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #dedede;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #4c4c4c;
@@ -4058,15 +4058,19 @@
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #191919;
     background: #323232;
     color: #dedede;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 0a2e70b440a..0c2d7ae7528 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 1rem 1rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 6c2027dd33f..33ceb5a94e8 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 1rem 1rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index 960cdad56f4..b78505d0798 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 1rem 1rem;
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index 401b116fef9..7ebeff68824 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 1rem 1rem;
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 93cffbd44d4..44251ce2722 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 0.75rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index 3c32f903194..363920e426c 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 0.75rem;
     border: 1px solid rgba(255, 255, 255, 0.12);
     background: #1e1e1e;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index 82b3cc92195..cc2fe0e27eb 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 0.75rem;
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index 745cab67da6..33bc0cf91de 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(0, 0, 0, 0.87);
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(0, 0, 0, 0.04);
@@ -4094,15 +4094,19 @@
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 0.75rem;
     border: 1px solid #e0e0e0;
     background: #ffffff;
     color: rgba(0, 0, 0, 0.87);
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css
index 2733e54b703..fe0f5bfd3c0 100644
--- a/src/assets/components/themes/mira/theme.css
+++ b/src/assets/components/themes/mira/theme.css
@@ -3262,7 +3262,7 @@
     border: 0 none;
     color: #4C566A;
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: transparent;
@@ -3470,7 +3470,7 @@
     border: 0 none;
     color: #4C566A;
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: transparent;
@@ -4098,15 +4098,19 @@
     border: 1px solid #E5E9F0;
     background: #ffffff;
     color: #4C566A;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #E5E9F0;
     background: #ffffff;
     color: #4C566A;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css
index a6eab1771af..de902bd7658 100644
--- a/src/assets/components/themes/nano/theme.css
+++ b/src/assets/components/themes/nano/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #343a3f;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #dde1e6;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #343a3f;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #dde1e6;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #343a3f;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 1px;
     border-bottom-left-radius: 1px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #343a3f;
+    border-bottom-right-radius: 1px;
+    border-bottom-left-radius: 1px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 0bac662bbcf..ab981e97e25 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -4046,15 +4046,19 @@
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 9511169bfad..f26d66fefdf 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -4058,15 +4058,19 @@
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index efa0fc6e8f1..9167f1babf7 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -3246,7 +3246,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -3454,7 +3454,7 @@
     border: 0 none;
     color: #333333;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #eaeaea;
@@ -4058,15 +4058,19 @@
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #c8c8c8;
     background: #ffffff;
     color: #333333;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index 1c9182da257..8222a4dd455 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #666666;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #f4f4f4;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #666666;
     background: transparent;
-    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #f4f4f4;
@@ -4046,15 +4046,19 @@
     border: 1px solid #dadada;
     background: #ffffff;
     color: #666666;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.571rem 1rem;
     border: 1px solid #dadada;
     background: #ffffff;
     color: #666666;
+    border-bottom-right-radius: 2px;
+    border-bottom-left-radius: 2px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index 8265d37efd5..d9d31fbcc33 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index 320fed29459..5ed4efd9ac6 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index 4d15d7d0f15..d740c5ed1eb 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 9740877953c..6f577a87bdb 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: #495057;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #e9ecef;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #dee2e6;
     background: #ffffff;
     color: #495057;
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css
index 2c28f5928e6..1064057d808 100644
--- a/src/assets/components/themes/soho-dark/theme.css
+++ b/src/assets/components/themes/soho-dark/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #3e4053;
     background: #282936;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #3e4053;
     background: #282936;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css
index ee95c5171b8..23faa6b271e 100644
--- a/src/assets/components/themes/soho-light/theme.css
+++ b/src/assets/components/themes/soho-light/theme.css
@@ -3258,7 +3258,7 @@
     border: 0 none;
     color: #043d75;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #f6f9fc;
@@ -3466,7 +3466,7 @@
     border: 0 none;
     color: #043d75;
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #f6f9fc;
@@ -4070,15 +4070,19 @@
     border: 1px solid #dfe7ef;
     background: #ffffff;
     color: #043d75;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #dfe7ef;
     background: #ffffff;
     color: #043d75;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index dc11bdd685c..932a15be771 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -3269,7 +3269,7 @@
     border: 0 none;
     color: #3f3f46;
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #f4f4f5;
@@ -3477,7 +3477,7 @@
     border: 0 none;
     color: #3f3f46;
     background: transparent;
-    transition: transform 0.2s, none;
+    transition: none;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #f4f4f5;
@@ -4105,15 +4105,19 @@
     border: 1px solid #e5e7eb;
     background: #ffffff;
     color: #3f3f46;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 0.375rem;
     border-bottom-left-radius: 0.375rem;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.75rem 1.25rem;
     border: 1px solid #e5e7eb;
     background: #ffffff;
     color: #3f3f46;
+    border-bottom-right-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index 456b1625aa1..3ccd0ad803d 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index 3bd31d72954..2568243bf59 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index 655e64cf92e..c7842ae0770 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index bba406277e2..a26eb6acf08 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -3234,7 +3234,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -3442,7 +3442,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: box-shadow 0.2s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(255, 255, 255, 0.03);
@@ -4070,15 +4070,19 @@
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 3px;
     border-bottom-left-radius: 3px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 1px solid #304562;
     background: #1f2d40;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 3px;
+    border-bottom-left-radius: 3px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css
index e10f862a774..a669d49460c 100644
--- a/src/assets/components/themes/viva-dark/theme.css
+++ b/src/assets/components/themes/viva-dark/theme.css
@@ -3266,7 +3266,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition: box-shadow 0.3s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: rgba(158, 173, 230, 0.08);
@@ -3474,7 +3474,7 @@
     border: 0 none;
     color: rgba(255, 255, 255, 0.87);
     background: transparent;
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition: box-shadow 0.3s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: rgba(158, 173, 230, 0.08);
@@ -4102,15 +4102,19 @@
     border: 2px solid #263238;
     background: #161d21;
     color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 2px solid #263238;
     background: #161d21;
     color: rgba(255, 255, 255, 0.87);
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {
diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css
index 92e1ad9c07d..357fcd78167 100644
--- a/src/assets/components/themes/viva-light/theme.css
+++ b/src/assets/components/themes/viva-light/theme.css
@@ -3267,7 +3267,7 @@
     border: 0 none;
     color: #6c6c6c;
     background: transparent;
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition: box-shadow 0.3s;
   }
   .p-orderlist .p-orderlist-list .p-orderlist-item:not(.p-highlight):hover {
     background: #edf0fA;
@@ -3475,7 +3475,7 @@
     border: 0 none;
     color: #6c6c6c;
     background: transparent;
-    transition: transform 0.3s, box-shadow 0.3s;
+    transition: box-shadow 0.3s;
   }
   .p-picklist .p-picklist-list .p-picklist-item:not(.p-highlight):hover {
     background: #edf0fA;
@@ -4103,15 +4103,19 @@
     border: 2px solid #ebebeb;
     background: #ffffff;
     color: #6c6c6c;
+    border-top: 0 none;
+  }
+  .p-panel .p-panel-content:last-child {
     border-bottom-right-radius: 6px;
     border-bottom-left-radius: 6px;
-    border-top: 0 none;
   }
   .p-panel .p-panel-footer {
     padding: 0.5rem 1rem;
     border: 2px solid #ebebeb;
     background: #ffffff;
     color: #6c6c6c;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
     border-top: 0 none;
   }
   .p-panel .p-panel-icons-end {