Refactor #4504

components/lib/accordion/BaseAccordion.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-accordion-header-action {
         cursor: pointer;
         display: flex;

components/lib/autocomplete/BaseAutoComplete.vue

@@ -4,7 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-autocomplete {
         display: inline-flex;
     }

components/lib/avatar/BaseAvatar.vue

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

components/lib/avatargroup/BaseAvatarGroup.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-avatar-group .p-avatar + .p-avatar {
         margin-left: -1rem;
     }

components/lib/badge/BaseBadge.vue

@@ -4,7 +4,7 @@ import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-badge {
         display: inline-block;
         border-radius: 10px;

components/lib/badgedirective/BaseBadgeDirective.js

@@ -2,7 +2,7 @@ import BaseDirective from 'primevue/basedirective';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-badge {
         display: inline-block;
         border-radius: 10px;

components/lib/basecomponent/BaseComponent.vue

@@ -231,7 +231,7 @@ const radioButtonStyles = `
 }
 `;
 const styles = `
-@layer primevue.core {
+@layer primevue {
 .p-component, .p-component * {
     box-sizing: border-box;
 }

components/lib/blockui/BaseBlockUI.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-blockui-container {
         position: relative;
     }

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-breadcrumb {
         overflow-x: auto;
     }

components/lib/calendar/BaseCalendar.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-calendar {
         display: inline-flex;
         max-width: 100%;

components/lib/carousel/BaseCarousel.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-carousel {
         display: flex;
         flex-direction: column;

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-cascadeselect {
         display: inline-flex;
         cursor: pointer;

components/lib/chart/BaseChart.vue

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

components/lib/chip/BaseChip.vue

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

components/lib/chips/BaseChips.vue

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

components/lib/colorpicker/BaseColorPicker.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@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%)
     }

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-confirm-popup {
         position: absolute;
         margin-top: 10px;

components/lib/contextmenu/BaseContextMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-contextmenu ul {
         margin: 0;
         padding: 0;

components/lib/datatable/BaseDataTable.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-datatable {
         position: relative;
     }

components/lib/dialog/BaseDialog.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-dialog-mask.p-component-overlay {
         pointer-events: auto;
     }

components/lib/divider/BaseDivider.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-divider-horizontal {
         display: flex;
         width: 100%;

components/lib/dock/BaseDock.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-dock {
         position: absolute;
         z-index: 1;

components/lib/dropdown/BaseDropdown.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-dropdown {
         display: inline-flex;
         cursor: pointer;

components/lib/fieldset/BaseFieldset.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-fieldset-legend > a,
     .p-fieldset-legend > span {
         display: flex;

components/lib/fileupload/BaseFileUpload.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-fileupload-content {
         position: relative;
     }

components/lib/galleria/BaseGalleria.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-galleria-content {
         display: flex;
         flex-direction: column;

components/lib/image/BaseImage.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-image-mask {
         display: flex;
         align-items: center;

components/lib/inlinemessage/BaseInlineMessage.vue

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

components/lib/inplace/BaseInplace.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-inplace .p-inplace-display {
         display: inline;
         cursor: pointer;

components/lib/inputnumber/BaseInputNumber.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-inputnumber {
         display: inline-flex;
     }

components/lib/inputswitch/BaseInputSwitch.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-inputswitch {
         display: inline-block;
     }

components/lib/knob/BaseKnob.vue

@@ -8,7 +8,7 @@ const styles = `
         stroke-dashoffset: 0;
     }
 }
-@layer primevue.core {
+@layer primevue {
     .p-knob-range {
         fill: none;
         transition: stroke 0.1s ease-in;

components/lib/listbox/BaseListbox.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-listbox-list-wrapper {
         overflow: auto;
     }

components/lib/megamenu/BaseMegaMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-megamenu {
         display: flex;
     }

components/lib/menu/BaseMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-menu ul {
         margin: 0;
         padding: 0;

components/lib/menubar/BaseMenubar.vue

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

components/lib/message/BaseMessage.vue

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

components/lib/multiselect/BaseMultiSelect.vue

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

components/lib/orderlist/BaseOrderList.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-orderlist {
         display: flex;
     }

components/lib/organizationchart/BaseOrganizationChart.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-organizationchart-table {
         border-spacing: 0;
         border-collapse: separate;

components/lib/overlaypanel/BaseOverlayPanel.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-overlaypanel {
         margin-top: 10px;
     }

components/lib/paginator/BasePaginator.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-paginator-default {
         display: flex;
     }

components/lib/panel/BasePanel.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-panel-header {
         display: flex;
         justify-content: space-between;

components/lib/panelmenu/BasePanelMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-panelmenu .p-panelmenu-header-action {
         display: flex;
         align-items: center;

components/lib/password/BasePassword.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-password {
         display: inline-flex;
     }

components/lib/picklist/BasePickList.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-picklist {
         display: flex;
     }

components/lib/progressbar/BaseProgressBar.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-progressbar {
         position: relative;
         overflow: hidden;

components/lib/progressspinner/BaseProgressSpinner.vue

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

components/lib/rating/BaseRating.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-rating {
         position: relative;
         display: flex;

components/lib/ripple/BaseRipple.js

@@ -9,7 +9,7 @@ const styles = `
     }
 }
 
-@layer primevue.core {
+@layer primevue {
     .p-ripple {
         overflow: hidden;
         position: relative;

components/lib/scrollpanel/BaseScrollPanel.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-scrollpanel-wrapper {
         overflow: hidden;
         width: 100%;

components/lib/scrolltop/BaseScrollTop.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-scrolltop {
         position: fixed;
         bottom: 20px;

components/lib/sidebar/BaseSidebar.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-sidebar-mask {
         display: none;
         pointer-events: none;

components/lib/skeleton/BaseSkeleton.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-skeleton {
         overflow: hidden;
     }

components/lib/slider/BaseSlider.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-slider {
         position: relative;
     }

components/lib/speeddial/BaseSpeedDial.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-speeddial {
         position: absolute;
         display: flex;

components/lib/splitbutton/BaseSplitButton.vue

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

components/lib/splitter/BaseSplitter.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-splitter {
         display: flex;
         flex-wrap: nowrap;

components/lib/splitterpanel/BaseSplitterPanel.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-splitter-panel {
         flex-grow: 1;
     }

components/lib/steps/BaseSteps.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-steps {
         position: relative;
     }

components/lib/tabmenu/BaseTabMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-tabmenu {
         overflow-x: auto;
     }

components/lib/tabview/BaseTabView.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-tabview-nav-container {
         position: relative;
     }

components/lib/tag/BaseTag.vue

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

components/lib/terminal/BaseTerminal.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-terminal {
         height: 18rem;
         overflow: auto;

components/lib/textarea/BaseTextarea.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-inputtextarea-resizable {
         overflow: hidden;
         resize: none;

components/lib/tieredmenu/BaseTieredMenu.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-tieredmenu ul {
         margin: 0;
         padding: 0;

components/lib/timeline/BaseTimeline.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-timeline {
         display: flex;
         flex-grow: 1;

components/lib/toast/BaseToast.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-toast {
         width: 25rem;
         white-space: pre-line;

components/lib/toolbar/BaseToolbar.vue

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

components/lib/tooltip/BaseTooltip.js

@@ -2,7 +2,7 @@ import BaseDirective from 'primevue/basedirective';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-tooltip {
         position:absolute;
         display:none;

components/lib/tree/BaseTree.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-tree-container {
         margin: 0;
         padding: 0;

components/lib/treeselect/BaseTreeSelect.vue

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

components/lib/treetable/BaseTreeTable.vue

@@ -3,7 +3,7 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 
 const styles = `
-@layer primevue.core {
+@layer primevue {
     .p-treetable {
         position: relative;
     }