Refactor #4504

components/lib/accordion/BaseAccordion.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-accordion-header-action {
         cursor: pointer;
         display: flex;
@@ -19,6 +20,7 @@ const styles = `
     .p-accordion-header-text {
         line-height: 1;
     }
+}
 `;
 
 const classes = {

components/lib/autocomplete/BaseAutoComplete.vue

@@ -4,6 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
 const styles = `
+@layer primevue {
     .p-autocomplete {
         display: inline-flex;
     }
@@ -99,6 +100,7 @@ const styles = `
     .p-fluid .p-autocomplete-dd .p-autocomplete-input {
         width: 1%;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/avatar/BaseAvatar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-avatar {
         display: inline-flex;
         align-items: center;
@@ -32,6 +33,7 @@ const styles = `
         width: 100%;
         height: 100%;
     }
+}
 `;
 
 const classes = {

components/lib/avatargroup/BaseAvatarGroup.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-avatar-group .p-avatar + .p-avatar {
         margin-left: -1rem;
     }
@@ -11,6 +12,7 @@ const styles = `
         display: flex;
         align-items: center;
     }
+}
 `;
 
 const classes = {

components/lib/badge/BaseBadge.vue

@@ -4,6 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
 const styles = `
+@layer primevue {
     .p-badge {
         display: inline-block;
         border-radius: 10px;
@@ -36,6 +37,7 @@ const styles = `
         padding: 0;
         border-radius: 50%;
     }
+}
 `;
 
 const classes = {

components/lib/badgedirective/BaseBadgeDirective.js

@@ -2,6 +2,7 @@ import BaseDirective from 'primevue/basedirective';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-badge {
         display: inline-block;
         border-radius: 10px;
@@ -34,6 +35,7 @@ const styles = `
         padding: 0;
         border-radius: 50%;
     }
+}
 `;
 
 const classes = {

components/lib/basecomponent/BaseComponent.vue

@@ -231,6 +231,7 @@ const radioButtonStyles = `
 }
 `;
 const styles = `
+@layer primevue {
 .p-component, .p-component * {
     box-sizing: border-box;
 }
@@ -354,6 +355,7 @@ ${buttonStyles}
 ${checkboxStyles}
 ${inputTextStyles}
 ${radioButtonStyles}
+}
 `;
 
 const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });

components/lib/blockui/BaseBlockUI.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-blockui-container {
         position: relative;
     }
@@ -14,6 +15,7 @@ const styles = `
     .p-blockui-document.p-component-overlay {
         position: fixed;
     }
+}
 `;
 
 const classes = {

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-breadcrumb {
         overflow-x: auto;
     }
@@ -34,6 +35,7 @@ const styles = `
     .p-breadcrumb::-webkit-scrollbar {
         display: none;
     }
+}
 `;
 
 const classes = {

components/lib/calendar/BaseCalendar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-calendar {
         display: inline-flex;
         max-width: 100%;
@@ -148,6 +149,7 @@ const styles = `
     .p-calendar .p-datepicker-touch-ui {
         min-width: 80vw;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/carousel/BaseCarousel.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-carousel {
         display: flex;
         flex-direction: column;
@@ -72,6 +73,7 @@ const styles = `
     .p-items-hidden .p-carousel-item.p-carousel-item-active {
         visibility: visible;
     }
+}
 `;
 
 const classes = {

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-cascadeselect {
         display: inline-flex;
         cursor: pointer;
@@ -83,6 +84,7 @@ const styles = `
         left: 100%;
         top: 0;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/chart/BaseChart.vue

@@ -3,9 +3,11 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-chart {
         position: relative;
     }
+}
 `;
 
 const classes = {

components/lib/chip/BaseChip.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-chip {
         display: inline-flex;
         align-items: center;
@@ -24,6 +25,7 @@ const styles = `
     .p-chip img {
         border-radius: 50%;
     }
+}
 `;
 
 const classes = {

components/lib/chips/BaseChips.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-chips {
         display: inline-flex;
     }
@@ -48,6 +49,7 @@ const styles = `
     .p-fluid .p-chips {
         display: flex;
     }
+}
 `;
 
 const classes = {

components/lib/colorpicker/BaseColorPicker.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-colorpicker-panel .p-colorpicker-color {
         background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
     }
@@ -10,6 +11,7 @@ const styles = `
     .p-colorpicker-panel .p-colorpicker-hue {
         background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
     }
+}
 `;
 
 const classes = {

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-confirm-popup {
         position: absolute;
         margin-top: 10px;
@@ -72,6 +73,7 @@ const styles = `
         display: flex;
         align-items: center;
     }
+}
 `;
 
 const classes = {

components/lib/contextmenu/BaseContextMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-contextmenu ul {
         margin: 0;
         padding: 0;
@@ -43,6 +44,7 @@ const styles = `
     .p-contextmenu-enter-active {
         transition: opacity 250ms;
     }
+}
 `;
 
 const classes = {

components/lib/datatable/BaseDataTable.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-datatable {
         position: relative;
     }
@@ -237,6 +238,7 @@ const styles = `
         top: 0;
         left: 0;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/dialog/BaseDialog.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-dialog-mask.p-component-overlay {
         pointer-events: auto;
     }
@@ -134,6 +135,7 @@ const styles = `
         display: flex;
         align-items: center;
     }
+}
 `;
 
 /* Position */

components/lib/divider/BaseDivider.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-divider-horizontal {
         display: flex;
         width: 100%;
@@ -63,6 +64,7 @@ const styles = `
     .p-divider-dotted.p-divider-vertical:before {
         border-left-style: dotted;
     }
+}
 `;
 
 /* Position */

components/lib/dock/BaseDock.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-dock {
         position: absolute;
         z-index: 1;
@@ -108,6 +109,7 @@ const styles = `
     .p-dock-left .p-dock-list {
         flex-direction: column;
     }
+}
 `;
 
 const classes = {

components/lib/dropdown/BaseDropdown.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-dropdown {
         display: inline-flex;
         cursor: pointer;
@@ -95,6 +96,7 @@ input.p-dropdown-label {
     .p-fluid .p-dropdown .p-dropdown-label {
         width: 1%;
     }
+}
 `;
 
 const classes = {

components/lib/fieldset/BaseFieldset.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-fieldset-legend > a,
     .p-fieldset-legend > span {
         display: flex;
@@ -21,6 +22,7 @@ const styles = `
     .p-fieldset-legend-text {
         line-height: 1;
     }
+}
 `;
 
 const classes = {

components/lib/fileupload/BaseFileUpload.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-fileupload-content {
         position: relative;
     }
@@ -46,6 +47,7 @@ const styles = `
     .p-fileupload-file-actions {
         margin-left: auto;
     }
+}
 `;
 
 const classes = {

components/lib/galleria/BaseGalleria.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-galleria-content {
         display: flex;
         flex-direction: column;
@@ -285,6 +286,7 @@ const styles = `
     .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
         visibility: visible;
     }
+}
 `;
 
 const classes = {

components/lib/image/BaseImage.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-image-mask {
         display: flex;
         align-items: center;
@@ -66,6 +67,7 @@ const styles = `
         opacity: 0;
         transform: scale(0.7);
     }
+}
 `;
 
 const classes = {

components/lib/inlinemessage/BaseInlineMessage.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-inline-message {
         display: inline-flex;
         align-items: center;
@@ -18,6 +19,7 @@ const styles = `
     .p-fluid .p-inline-message {
         display: flex;
     }
+}
 `;
 
 const classes = {

components/lib/inplace/BaseInplace.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-inplace .p-inplace-display {
         display: inline;
         cursor: pointer;
@@ -20,6 +21,7 @@ const styles = `
         flex: 1 1 auto;
         width: 1%;
     }
+}
 `;
 
 const classes = {

components/lib/inputnumber/BaseInputNumber.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-inputnumber {
         display: inline-flex;
     }
@@ -103,6 +104,7 @@ const styles = `
     .p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
         width: 100%;
     }
+}
 `;
 
 const classes = {

components/lib/inputswitch/BaseInputSwitch.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-inputswitch {
         display: inline-block;
     }
@@ -22,6 +23,7 @@ const styles = `
         content: '';
         top: 50%;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/knob/BaseKnob.vue

@@ -8,6 +8,7 @@ const styles = `
         stroke-dashoffset: 0;
     }
 }
+@layer primevue {
     .p-knob-range {
         fill: none;
         transition: stroke 0.1s ease-in;
@@ -21,6 +22,7 @@ const styles = `
         font-size: 1.3rem;
         text-align: center;
     }
+}
 `;
 
 const classes = {

components/lib/listbox/BaseListbox.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-listbox-list-wrapper {
         overflow: auto;
     }
@@ -36,6 +37,7 @@ const styles = `
     .p-listbox-filter {
         width: 100%;
     }
+}
 `;
 
 const classes = {

components/lib/megamenu/BaseMegaMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-megamenu {
         display: flex;
     }
@@ -113,6 +114,7 @@ const styles = `
     .p-megamenu-col-12 {
         width: 100%;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/menu/BaseMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-menu ul {
         margin: 0;
         padding: 0;
@@ -21,6 +22,7 @@ const styles = `
     .p-menu .p-menuitem-text {
         line-height: 1;
     }
+}
 `;
 
 const classes = {

components/lib/menubar/BaseMenubar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-menubar {
         display: flex;
         align-items: center;
@@ -74,6 +75,7 @@ const styles = `
         justify-content: center;
         text-decoration: none;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/message/BaseMessage.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-message-wrapper {
         display: flex;
         align-items: center;
@@ -51,6 +52,7 @@ const styles = `
     .p-message-leave-active .p-message-close {
         display: none;
     }
+}
 `;
 
 const classes = {

components/lib/multiselect/BaseMultiSelect.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-multiselect {
         display: inline-flex;
         cursor: pointer;
@@ -108,6 +109,7 @@ const styles = `
     .p-fluid .p-multiselect {
         display: flex;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/orderlist/BaseOrderList.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-orderlist {
         display: flex;
     }
@@ -40,6 +41,7 @@ const styles = `
     .p-orderlist.p-state-disabled .p-orderlist-list {
         overflow: hidden;
     }
+}
 `;
 
 const classes = {

components/lib/organizationchart/BaseOrganizationChart.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-organizationchart-table {
         border-spacing: 0;
         border-collapse: separate;
@@ -55,6 +56,7 @@ const styles = `
     .p-organizationchart-selectable-node {
         cursor: pointer;
     }
+}
 `;
 
 const classes = {

components/lib/overlaypanel/BaseOverlayPanel.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-overlaypanel {
         margin-top: 10px;
     }
@@ -72,6 +73,7 @@ const styles = `
     .p-overlaypanel.p-overlaypanel-flipped:before {
         border-bottom-color: transparent;
     }
+}
 `;
 
 const classes = {

components/lib/paginator/BasePaginator.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-paginator-default {
         display: flex;
     }
@@ -42,6 +43,7 @@ const styles = `
         z-index: 1;
         position: relative;
     }
+}
 `;
 
 const classes = {

components/lib/panel/BasePanel.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-panel-header {
         display: flex;
         justify-content: space-between;
@@ -22,6 +23,7 @@ const styles = `
         overflow: hidden;
         position: relative;
     }
+}
 `;
 
 const classes = {

components/lib/panelmenu/BasePanelMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-panelmenu .p-panelmenu-header-action {
         display: flex;
         align-items: center;
@@ -35,6 +36,7 @@ const styles = `
     .p-panelmenu .p-menuitem-text {
         line-height: 1;
     }
+}
 `;
 
 const classes = {

components/lib/password/BasePassword.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-password {
         display: inline-flex;
     }
@@ -29,6 +30,7 @@ const styles = `
     .p-password-input::-ms-clear {
         display: none;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/picklist/BasePickList.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-picklist {
         display: flex;
     }
@@ -36,6 +37,7 @@ const styles = `
     .p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
         transition: none !important;
     }
+}
 `;
 
 const classes = {

components/lib/progressbar/BaseProgressBar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-progressbar {
         position: relative;
         overflow: hidden;
@@ -111,6 +112,7 @@ const styles = `
             right: -8%;
         }
     }
+}
 `;
 
 const classes = {

components/lib/progressspinner/BaseProgressSpinner.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-progress-spinner {
         position: relative;
         margin: 0 auto;
@@ -28,6 +29,7 @@ const styles = `
         right: 0;
         margin: auto;
     }
+}
 `;
 
 const classes = {

components/lib/rating/BaseRating.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-rating {
         position: relative;
         display: flex;
@@ -18,6 +19,7 @@ const styles = `
     .p-rating.p-readonly .p-rating-item {
         cursor: default;
     }
+}
 `;
 
 const classes = {

components/lib/ripple/BaseRipple.js

@@ -2,6 +2,14 @@ import BaseDirective from 'primevue/basedirective';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@keyframes ripple {
+    100% {
+        opacity: 0;
+        transform: scale(2.5);
+    }
+}
+
+@layer primevue {
     .p-ripple {
         overflow: hidden;
         position: relative;
@@ -23,12 +31,6 @@ const styles = `
     .p-ripple-disabled .p-ink {
         display: none !important;
     }
-
-@keyframes ripple {
-    100% {
-        opacity: 0;
-        transform: scale(2.5);
-    }
 }
 `;
 

components/lib/scrollpanel/BaseScrollPanel.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-scrollpanel-wrapper {
         overflow: hidden;
         width: 100%;
@@ -58,6 +59,7 @@ const styles = `
     .p-scrollpanel-grabbed {
         user-select: none;
     }
+}
 `;
 
 const classes = {

components/lib/scrolltop/BaseScrollTop.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-scrolltop {
         position: fixed;
         bottom: 20px;
@@ -35,6 +36,7 @@ const styles = `
     .p-scrolltop-leave-active {
         transition: opacity 0.15s;
     }
+}
 `;
 
 const classes = {

components/lib/sidebar/BaseSidebar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-sidebar-mask {
         display: none;
         pointer-events: none;
@@ -151,6 +152,7 @@ const styles = `
             width: 20rem;
         }
     }
+}
 `;
 
 /* Position */

components/lib/skeleton/BaseSkeleton.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-skeleton {
         overflow: hidden;
     }
@@ -35,6 +36,7 @@ const styles = `
             transform: translateX(100%);
         }
     }
+}
 `;
 
 const inlineStyles = {

components/lib/slider/BaseSlider.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-slider {
         position: relative;
     }
@@ -40,6 +41,7 @@ const styles = `
         left: 0;
         width: 100%;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/speeddial/BaseSpeedDial.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-speeddial {
         position: absolute;
         display: flex;
@@ -79,6 +80,7 @@ const styles = `
     .p-speeddial-opened .p-speeddial-rotate {
         transform: rotate(45deg);
     }
+}
 `;
 
 /* Direction */

components/lib/splitbutton/BaseSplitButton.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-splitbutton {
         display: inline-flex;
         position: relative;
@@ -34,6 +35,7 @@ const styles = `
     .p-fluid .p-splitbutton {
         display: flex;
     }
+}
 `;
 
 const classes = {

components/lib/splitter/BaseSplitter.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-splitter {
         display: flex;
         flex-wrap: nowrap;
@@ -48,6 +49,7 @@ const styles = `
         width: 24px;
         height: 100%;
     }
+}
 `;
 
 const classes = {

components/lib/splitterpanel/BaseSplitterPanel.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-splitter-panel {
         flex-grow: 1;
     }
@@ -15,6 +16,7 @@ const styles = `
         flex-grow: 1;
         border: 0 none;
     }
+}
 `;
 
 const classes = {

components/lib/steps/BaseSteps.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-steps {
         position: relative;
     }
@@ -54,6 +55,7 @@ const styles = `
     .p-steps-title {
         display: block;
     }
+}
 `;
 
 const classes = {

components/lib/tabmenu/BaseTabMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tabmenu {
         overflow-x: auto;
     }
@@ -42,6 +43,7 @@ const styles = `
     .p-tabmenu::-webkit-scrollbar {
         display: none;
     }
+}
 `;
 
 const classes = {

components/lib/tabview/BaseTabView.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tabview-nav-container {
         position: relative;
     }
@@ -72,6 +73,7 @@ const styles = `
     .p-tabview-nav-content::-webkit-scrollbar {
         display: none;
     }
+}
 `;
 
 const classes = {

components/lib/tag/BaseTag.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tag {
         display: inline-flex;
         align-items: center;
@@ -18,6 +19,7 @@ const styles = `
     .p-tag.p-tag-rounded {
         border-radius: 10rem;
     }
+}
 `;
 
 const classes = {

components/lib/terminal/BaseTerminal.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-terminal {
         height: 18rem;
         overflow: auto;
@@ -25,6 +26,7 @@ const styles = `
     .p-terminal-input::-ms-clear {
         display: none;
     }
+}
 `;
 
 const classes = {

components/lib/textarea/BaseTextarea.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-inputtextarea-resizable {
         overflow: hidden;
         resize: none;
@@ -11,6 +12,7 @@ const styles = `
     .p-fluid .p-inputtextarea {
         width: 100%;
     }
+}
 `;
 
 const classes = {

components/lib/tieredmenu/BaseTieredMenu.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tieredmenu ul {
         margin: 0;
         padding: 0;
@@ -42,6 +43,7 @@ const styles = `
         left: 100%;
         top: 0;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/timeline/BaseTimeline.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-timeline {
         display: flex;
         flex-grow: 1;
@@ -113,6 +114,7 @@ const styles = `
     .p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
         flex-direction: column-reverse;
     }
+}
 `;
 
 const classes = {

components/lib/toast/BaseToast.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-toast {
         width: 25rem;
         white-space: pre-line;
@@ -75,6 +76,7 @@ const styles = `
         -webkit-transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
         transition: max-height 0.45s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin-bottom 0.3s;
     }
+}
 `;
 
 // Position

components/lib/toolbar/BaseToolbar.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-toolbar {
         display: flex;
         align-items: center;
@@ -22,6 +23,7 @@ const styles = `
         display: flex;
         align-items: center;
     }
+}
 `;
 
 const classes = {

components/lib/tooltip/BaseTooltip.js

@@ -2,6 +2,7 @@ import BaseDirective from 'primevue/basedirective';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tooltip {
         position:absolute;
         display:none;
@@ -56,6 +57,7 @@ const styles = `
         margin-left: -.25rem;
         border-width: 0 .25em .25rem;
     }
+}
 `;
 
 const classes = {

components/lib/tree/BaseTree.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-tree-container {
         margin: 0;
         padding: 0;
@@ -84,6 +85,7 @@ const styles = `
     .p-tree-flex-scrollable .p-tree-wrapper {
         flex: 1;
     }
+}
 `;
 
 const classes = {

components/lib/treeselect/BaseTreeSelect.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-treeselect {
         display: inline-flex;
         cursor: pointer;
@@ -53,6 +54,7 @@ const styles = `
     .p-fluid .p-treeselect {
         display: flex;
     }
+}
 `;
 
 const inlineStyles = {

components/lib/treetable/BaseTreeTable.vue

@@ -3,6 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
+@layer primevue {
     .p-treetable {
         position: relative;
     }
@@ -171,6 +172,7 @@ const styles = `
         flex: 1;
         height: 100%;
     }
+}
 `;
 
 const classes = {