Merge branch 'primefaces:master' into improve-datatable-performance

components/lib/accordion/BaseAccordion.vue

@@ -45,7 +45,7 @@ const classes = {
     }
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
 
 export default {
     name: 'BaseAccordion',
@@ -81,15 +81,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/accordiontab/BaseAccordionTab.vue

@@ -14,6 +14,11 @@ export default {
         contentClass: null,
         contentProps: null,
         disabled: Boolean
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>

components/lib/autocomplete/AutoComplete.vue

@@ -146,7 +146,7 @@
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                         :data-p-highlight="isSelected(option)"
-                                        :data-p-focus="focusedOptionIndex === getOptionIndex(index, getItemOptions)"
+                                        :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                         :data-p-disabled="isOptionDisabled(option)"
                                         v-bind="getPTOptions(option, getItemOptions, i, 'item')"
                                     >

components/lib/autocomplete/BaseAutoComplete.vue

@@ -148,7 +148,7 @@ const classes = {
     hiddenSelectedMessage: 'p-hidden-accessible'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
 
 export default {
     name: 'BaseAutoComplete',
@@ -312,15 +312,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/avatar/BaseAvatar.vue

@@ -84,15 +84,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/badge/BaseBadge.vue

@@ -39,11 +39,11 @@ const styles = `
 `;
 
 const classes = {
-    root: ({ props }) => [
+    root: ({ props, instance }) => [
         'p-badge p-component',
         {
             'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
-            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !props.$slots.default,
+            'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
             'p-badge-lg': props.size === 'large',
             'p-badge-xl': props.size === 'xlarge',
             'p-badge-info': props.severity === 'info',
@@ -74,15 +74,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/blockui/BaseBlockUI.vue

@@ -52,15 +52,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -42,11 +42,11 @@ const classes = {
     home: 'p-breadcrumb-home',
     separator: 'p-menuitem-separator',
     menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
-    action: ({ instance, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': instance.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',

components/lib/button/BaseButton.vue

@@ -0,0 +1,196 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-button {
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-buttonset .p-button {
+    margin: 0;
+}
+
+.p-buttonset .p-button:not(:last-child) {
+    border-right: 0 none;
+}
+
+.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-buttonset .p-button:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-buttonset .p-button:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-buttonset .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        'p-button p-component',
+        {
+            'p-button-icon-only': instance.hasIcon && !props.label,
+            'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
+            'p-disabled': instance.$attrs.disabled || props.loading,
+            'p-button-loading': props.loading,
+            'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
+            'p-button-link': props.link,
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            'p-button-sm': props.size === 'small',
+            'p-button-lg': props.size === 'large',
+            'p-button-plain': props.plain
+        }
+    ],
+    loadingIcon: 'p-button-loading-icon pi-spin',
+    icon: ({ props }) => [
+        'p-button-icon',
+        {
+            'p-button-icon-left': props.iconPos === 'left' && props.label,
+            'p-button-icon-right': props.iconPos === 'right' && props.label,
+            'p-button-icon-top': props.iconPos === 'top' && props.label,
+            'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
+        }
+    ],
+    label: 'p-button-label',
+    badge: ({ props }) => [
+        'p-badge p-component',
+        {
+            'p-badge-no-gutter': props.badge && String(props.badge).length === 1
+        }
+    ]
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_button_style', manual: true });
+
+export default {
+    name: 'BaseButton',
+    extends: BaseComponent,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        iconPos: {
+            type: String,
+            default: 'left'
+        },
+        iconClass: {
+            type: String,
+            default: null
+        },
+        badge: {
+            type: String,
+            default: null
+        },
+        badgeClass: {
+            type: String,
+            default: null
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: undefined
+        },
+        link: {
+            type: Boolean,
+            default: false
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        raised: {
+            type: Boolean,
+            default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: Boolean,
+            default: false
+        },
+        outlined: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        plain: {
+            type: Boolean,
+            default: false
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/button/Button.d.ts

@@ -142,6 +142,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @type {ButtonPassThroughOptions}
      */
     pt?: ButtonPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/button/Button.vue

@@ -1,139 +1,28 @@
 <template>
-    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="ptm('root')">
+    <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="ptm('root')" data-pc-name="button" :data-pc-severity="severity">
         <slot>
-            <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
+            <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
-                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
-                <SpinnerIcon v-else :class="loadingIconStyleClass" spin v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
             </slot>
-            <slot v-else name="icon" :class="iconStyleClass">
+            <slot v-else name="icon" :class="cx('icon')">
-                <span v-if="icon" :class="[iconStyleClass, icon]" v-bind="ptm('icon')"></span>
+                <span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
             </slot>
-            <span class="p-button-label" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="badgeStyleClass" v-bind="ptm('badge')">{{ badge }}</span>
+            <span v-if="badge" :class="[cx('badge'), badgeClass]" v-bind="ptm('badge')">{{ badge }}</span>
         </slot>
     </button>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
+import BaseButton from './BaseButton.vue';
 
 export default {
     name: 'Button',
-    extends: BaseComponent,
+    extends: BaseButton,
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        icon: {
-            type: String,
-            default: null
-        },
-        iconPos: {
-            type: String,
-            default: 'left'
-        },
-        iconClass: {
-            type: String,
-            default: null
-        },
-        badge: {
-            type: String,
-            default: null
-        },
-        badgeClass: {
-            type: String,
-            default: null
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        },
-        loadingIcon: {
-            type: String,
-            default: undefined
-        },
-        link: {
-            type: Boolean,
-            default: false
-        },
-        severity: {
-            type: String,
-            default: null
-        },
-        raised: {
-            type: Boolean,
-            default: false
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        },
-        text: {
-            type: Boolean,
-            default: false
-        },
-        outlined: {
-            type: Boolean,
-            default: false
-        },
-        size: {
-            type: String,
-            default: null
-        },
-        plain: {
-            type: Boolean,
-            default: false
-        }
-    },
     computed: {
-        buttonClass() {
-            return [
-                'p-button p-component',
-                {
-                    'p-button-icon-only': this.hasIcon && !this.label,
-                    'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
-                    'p-disabled': this.$attrs.disabled || this.loading,
-                    'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.hasIcon && this.label,
-                    'p-button-link': this.link,
-                    [`p-button-${this.severity}`]: this.severity,
-                    'p-button-raised': this.raised,
-                    'p-button-rounded': this.rounded,
-                    'p-button-text': this.text,
-                    'p-button-outlined': this.outlined,
-                    'p-button-sm': this.size === 'small',
-                    'p-button-lg': this.size === 'large',
-                    'p-button-plain': this.plain
-                }
-            ];
-        },
-        iconStyleClass() {
-            return [
-                'p-button-icon',
-                this.iconClass,
-                {
-                    'p-button-icon-left': this.iconPos === 'left' && this.label,
-                    'p-button-icon-right': this.iconPos === 'right' && this.label,
-                    'p-button-icon-top': this.iconPos === 'top' && this.label,
-                    'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
-                }
-            ];
-        },
-        loadingIconStyleClass() {
-            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
-        },
-        badgeStyleClass() {
-            return [
-                'p-badge p-component',
-                this.badgeClass,
-                {
-                    'p-badge-no-gutter': this.badge && String(this.badge).length === 1
-                }
-            ];
-        },
         disabled() {
             return this.$attrs.disabled || this.loading;
         },

components/lib/calendar/BaseCalendar.vue

@@ -222,7 +222,7 @@ const classes = {
     clearButton: 'p-button-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
 
 export default {
     name: 'BaseCalendar',
@@ -445,15 +445,13 @@ export default {
     },
     css: {
         inlineStyles,
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/checkbox/BaseCheckbox.vue

@@ -43,7 +43,7 @@ const classes = {
     icon: 'p-checkbox-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
 
 export default {
     name: 'BaseCheckbox',
@@ -106,15 +106,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/chip/BaseChip.vue

@@ -66,15 +66,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/chips/BaseChips.vue

@@ -67,7 +67,7 @@ const classes = {
     inputToken: 'p-chips-input-token'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
 
 export default {
     name: 'BaseChips',
@@ -131,15 +131,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/colorpicker/BaseColorPicker.vue

@@ -32,7 +32,7 @@ const classes = {
     hueHandle: 'p-colorpicker-hue-handle'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
 
 export default {
     name: 'BaseColorPicker',
@@ -77,15 +77,13 @@ export default {
         panelClass: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/confirmdialog/BaseConfirmDialog.vue

@@ -27,6 +27,11 @@ export default {
     },
     css: {
         classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -101,15 +101,13 @@ export default {
         group: String
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/contextmenu/BaseContextMenu.vue

@@ -54,20 +54,20 @@ const classes = {
         }
     ],
     menu: 'p-contextmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -77,7 +77,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
 
 export default {
     name: 'BaseContextMenu',
@@ -121,15 +121,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/contextmenu/ContextMenuSub.vue

@@ -6,7 +6,7 @@
                     v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                    :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                     role="menuitem"
                     :aria-label="getItemLabel(processedItem)"
                     :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -20,22 +20,22 @@
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
-                    <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                         <template v-if="!templates.item">
                             <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                                <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                    <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                    <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                    <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                                 </a>
                             </router-link>
-                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                                 <template v-if="getItemProp(processedItem, 'items')">
-                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
+                                    <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
-                                    <AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
+                                    <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuicon')" />
                                 </template>
                             </a>
                         </template>
@@ -45,7 +45,7 @@
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                         :id="getItemId(processedItem) + '_list'"
                         role="menu"
-                        :class="getCXOptions('submenu')"
+                        :class="cx('submenu')"
                         :menuId="menuId"
                         :focusedItemId="focusedItemId"
                         :items="processedItem.items"
@@ -64,7 +64,7 @@
                     v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                     :id="getItemId(processedItem)"
                     :style="getItemProp(processedItem, 'style')"
-                    :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                    :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                     role="separator"
                     v-bind="ptm('separator')"
                 ></li>
@@ -74,14 +74,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
-import BaseContextMenu from './BaseContextMenu.vue';
 
 export default {
     name: 'ContextMenuSub',
-    extends: BaseContextMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         items: {
@@ -146,12 +146,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },

components/lib/dialog/BaseDialog.vue

@@ -316,15 +316,13 @@ export default {
         _instance: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/divider/BaseDivider.vue

@@ -124,15 +124,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/dock/BaseDock.vue

@@ -0,0 +1,185 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-dock {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+}
+
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
+.p-dock-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-dock-item {
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    will-change: transform;
+}
+
+.p-dock-link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+    cursor: default;
+}
+
+.p-dock-item-second-prev,
+.p-dock-item-second-next {
+    transform: scale(1.2);
+}
+
+.p-dock-item-prev,
+.p-dock-item-next {
+    transform: scale(1.4);
+}
+
+.p-dock-item-current {
+    transform: scale(1.6);
+    z-index: 1;
+}
+
+/* Position */
+/* top */
+.p-dock-top {
+    left: 0;
+    top: 0;
+    width: 100%;
+}
+
+.p-dock-top .p-dock-item {
+    transform-origin: center top;
+}
+
+/* bottom */
+.p-dock-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.p-dock-bottom .p-dock-item {
+    transform-origin: center bottom;
+}
+
+/* right */
+.p-dock-right {
+    right: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-right .p-dock-item {
+    transform-origin: center right;
+}
+
+.p-dock-right .p-dock-list {
+    flex-direction: column;
+}
+
+/* left */
+.p-dock-left {
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+
+.p-dock-left .p-dock-item {
+    transform-origin: center left;
+}
+
+.p-dock-left .p-dock-list {
+    flex-direction: column;
+}
+`;
+
+const classes = {
+    root: ({ props }) => ['p-dock p-component', `p-dock-${props.position}`, props.class],
+    container: 'p-dock-list-container',
+    menu: 'p-dock-list',
+    menuitem: ({ instance, processedItem, index, id }) => [
+        'p-dock-item',
+        {
+            'p-focus': instance.isItemActive(id),
+            'p-disabled': instance.disabled(processedItem),
+            'p-dock-item-second-prev': instance.currentIndex - 2 === index,
+            'p-dock-item-prev': instance.currentIndex - 1 === index,
+            'p-dock-item-current': instance.currentIndex === index,
+            'p-dock-item-next': instance.currentIndex + 1 === index,
+            'p-dock-item-second-next': instance.currentIndex + 2 === index
+        }
+    ],
+    content: 'p-menuitem-content',
+    action: ({ props, isActive, isExactActive }) => [
+        'p-dock-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    icon: 'p-dock-icon'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_dock_style', manual: true });
+
+export default {
+    name: 'BaseDock',
+    extends: BaseComponent,
+    props: {
+        position: {
+            type: String,
+            default: 'bottom'
+        },
+        model: null,
+        class: null,
+        style: null,
+        tooltipOptions: null,
+        exact: {
+            type: Boolean,
+            default: true
+        },
+        menuId: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/dock/Dock.d.ts

@@ -171,6 +171,11 @@ export interface DockProps {
      * @type {DockPassThroughOptions}
      */
     pt?: DockPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/dock/Dock.vue

@@ -1,161 +1,18 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+    <div :class="cx('root')" :style="style" v-bind="ptm('root')" data-pc-name="dock">
         <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseDock from './BaseDock.vue';
 import DockSub from './DockSub.vue';
 
 export default {
     name: 'Dock',
-    extends: BaseComponent,
+    extends: BaseDock,
-    props: {
-        position: {
-            type: String,
-            default: 'bottom'
-        },
-        model: null,
-        class: null,
-        style: null,
-        tooltipOptions: null,
-        exact: {
-            type: Boolean,
-            default: true
-        },
-        menuId: {
-            type: String,
-            default: null
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        }
-    },
-    computed: {
-        containerClass() {
-            return ['p-dock p-component', `p-dock-${this.position}`, this.class];
-        }
-    },
     components: {
         DockSub
     }
 };
 </script>
-
-<style>
-.p-dock {
-    position: absolute;
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    pointer-events: none;
-}
-
-.p-dock-list-container {
-    display: flex;
-    pointer-events: auto;
-}
-
-.p-dock-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-dock-item {
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    will-change: transform;
-}
-
-.p-dock-link {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    overflow: hidden;
-    cursor: default;
-}
-
-.p-dock-item-second-prev,
-.p-dock-item-second-next {
-    transform: scale(1.2);
-}
-
-.p-dock-item-prev,
-.p-dock-item-next {
-    transform: scale(1.4);
-}
-
-.p-dock-item-current {
-    transform: scale(1.6);
-    z-index: 1;
-}
-
-/* Position */
-/* top */
-.p-dock-top {
-    left: 0;
-    top: 0;
-    width: 100%;
-}
-
-.p-dock-top .p-dock-item {
-    transform-origin: center top;
-}
-
-/* bottom */
-.p-dock-bottom {
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.p-dock-bottom .p-dock-item {
-    transform-origin: center bottom;
-}
-
-/* right */
-.p-dock-right {
-    right: 0;
-    top: 0;
-    height: 100%;
-}
-
-.p-dock-right .p-dock-item {
-    transform-origin: center right;
-}
-
-.p-dock-right .p-dock-list {
-    flex-direction: column;
-}
-
-/* left */
-.p-dock-left {
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-
-.p-dock-left .p-dock-item {
-    transform-origin: center left;
-}
-
-.p-dock-left .p-dock-list {
-    flex-direction: column;
-}
-</style>

components/lib/dock/DockSub.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="p-dock-list-container" v-bind="ptm('container')">
+    <div :class="cx('container')" v-bind="ptm('container')">
         <ul
             ref="list"
             :id="id"
-            class="p-dock-list"
+            :class="cx('menu')"
             role="menu"
             :aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
             :aria-activedescendant="focused ? focusedOptionId : undefined"
@@ -19,21 +19,23 @@
             <template v-for="(processedItem, index) of model" :key="index">
                 <li
                     :id="getItemId(index)"
-                    :class="itemClass(processedItem, index, getItemId(index))"
+                    :class="cx('menuitem', { processedItem, index, id: getItemId(index) })"
                     role="menuitem"
                     :aria-label="processedItem.label"
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
                     v-bind="getPTOptions(getItemId(index), 'menuitem')"
+                    :data-p-focused="isItemActive(getItemId(index))"
+                    :data-p-disabled="disabled(processedItem) || false"
                 >
-                    <div class="p-menuitem-content" v-bind="getPTOptions(getItemId(index), 'content')">
+                    <div :class="cx('content')" v-bind="getPTOptions(getItemId(index), 'content')">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
                                     v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
                                     :href="href"
-                                    :class="linkClass({ isActive, isExactActive })"
+                                    :class="cx('action', { isActive, isExactActive })"
                                     :target="processedItem.target"
                                     tabindex="-1"
                                     aria-hidden="true"
@@ -41,25 +43,25 @@
                                     v-bind="getPTOptions(getItemId(index), 'action')"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
+                                        <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                     </template>
-                                    <component v-else :is="templates['icon']" :item="processedItem"></component>
+                                    <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                                 </a>
                             </router-link>
                             <a
                                 v-else
                                 v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
                                 :href="processedItem.url"
-                                :class="linkClass()"
+                                :class="cx('action')"
                                 :target="processedItem.target"
                                 tabindex="-1"
                                 aria-hidden="true"
                                 v-bind="getPTOptions(getItemId(index), 'action')"
                             >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
+                                    <span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
                                 </template>
-                                <component v-else :is="templates['icon']" :item="processedItem"></component>
+                                <component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
                             </a>
                         </template>
                         <component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
@@ -146,7 +148,7 @@ export default {
             });
         },
         isSameMenuItem(event) {
-            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
+            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[data-pc-section="menuitem"]')));
         },
         isItemActive(id) {
             return id === this.focusedOptionIndex;
@@ -241,56 +243,33 @@ export default {
             this.changeFocusedOptionIndex(0);
         },
         onEndKey() {
-            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
+            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]').length - 1);
         },
         onSpaceKey() {
             const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
-            const anchorElement = element && DomHandler.findSingle(element, '.p-dock-link');
+            const anchorElement = element && DomHandler.findSingle(element, '[data-pc-section="action"]');
 
             anchorElement ? anchorElement.click() : element && element.click();
         },
         findNextOptionIndex(index) {
-            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
             const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
         },
         findPrevOptionIndex(index) {
-            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
             const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
 
             return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
         },
         changeFocusedOptionIndex(index) {
-            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const menuitems = DomHandler.find(this.$refs.list, 'li[data-pc-section="menuitem"][data-p-disabled="false"]');
 
             let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
 
             this.focusedOptionIndex = menuitems[order].getAttribute('id');
         },
-        itemClass(item, index, id) {
-            return [
-                'p-dock-item',
-                {
-                    'p-focus': this.isItemActive(id),
-                    'p-disabled': this.disabled(item),
-                    'p-dock-item-second-prev': this.currentIndex - 2 === index,
-                    'p-dock-item-prev': this.currentIndex - 1 === index,
-                    'p-dock-item-current': this.currentIndex === index,
-                    'p-dock-item-next': this.currentIndex + 1 === index,
-                    'p-dock-item-second-next': this.currentIndex + 2 === index
-                }
-            ];
-        },
-        linkClass(routerProps) {
-            return [
-                'p-dock-link',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
         disabled(item) {
             return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
         }

components/lib/dropdown/BaseDropdown.vue

@@ -153,7 +153,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
 
 export default {
     name: 'BaseDropdown',
@@ -310,15 +310,13 @@ export default {
     },
     css: {
         inlineStyles,
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/editor/BaseEditor.vue

@@ -970,7 +970,7 @@ const classes = {
     content: 'p-editor-content'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
 
 export default {
     name: 'BaseEditor',
@@ -984,15 +984,13 @@ export default {
         modules: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/fieldset/BaseFieldset.vue

@@ -38,7 +38,7 @@ const classes = {
     content: 'p-fieldset-content'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
 
 export default {
     name: 'BaseFieldset',
@@ -53,15 +53,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/inplace/BaseInplace.vue

@@ -60,15 +60,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/inputnumber/BaseInputNumber.vue

@@ -132,7 +132,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
 
 export default {
     name: 'BaseInputNumber',
@@ -276,15 +276,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/inputswitch/BaseInputSwitch.vue

@@ -41,7 +41,7 @@ const classes = {
     slider: 'p-inputswitch-slider'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
 
 export default {
     name: 'BaseInputSwitch',
@@ -90,15 +90,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/inputtext/BaseInputText.vue

@@ -116,7 +116,7 @@ const classes = {
     root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
 
 export default {
     name: 'BaseInputText',
@@ -125,15 +125,13 @@ export default {
         modelValue: null
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/knob/BaseKnob.vue

@@ -30,7 +30,7 @@ const classes = {
     label: 'p-knob-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
 
 export default {
     name: 'BaseKnob',
@@ -102,15 +102,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/listbox/BaseListbox.vue

@@ -69,7 +69,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
 
 export default {
     name: 'BaseListbox',
@@ -149,15 +149,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/megamenu/BaseMegaMenu.vue

@@ -116,7 +116,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -129,26 +129,26 @@ const classes = {
     ],
     start: 'p-megamenu-start',
     menu: 'p-megamenu-root-list',
-    submenuHeader: ({ context, processedItem }) => [
+    submenuHeader: ({ instance, processedItem }) => [
         'p-megamenu-submenu-header p-submenu-header',
         {
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -156,8 +156,8 @@ const classes = {
     submenuIcon: 'p-submenu-icon',
     panel: 'p-megamenu-panel',
     grid: 'p-megamenu-grid',
-    column: ({ context, processedItem }) => {
+    column: ({ instance, processedItem }) => {
-        let length = context.isItemGroup(processedItem) ? processedItem.items.length : 0;
+        let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
         let columnClass;
 
         switch (length) {
@@ -189,7 +189,7 @@ const classes = {
     end: 'p-megamenu-end'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
 
 export default {
     name: 'BaseMegaMenu',
@@ -226,15 +226,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/megamenu/MegaMenuSub.vue

@@ -1,12 +1,12 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
-        <li v-if="submenu" :class="[getCXOptions('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
+        <li v-if="submenu" :class="[cx('submenuHeader', { submenu }), getItemProp(submenu, 'class')]" :style="getItemProp(submenu, 'style')" role="presentation" v-bind="ptm('submenuHeader')">{{ getItemLabel(submenu) }}</li>
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -20,35 +20,35 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('text')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="horizontal ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
-                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="getCXOptions('panel')" v-bind="ptm('panel')">
+                <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
-                    <div :class="getCXOptions('grid')" v-bind="ptm('grid')">
+                    <div :class="cx('grid')" v-bind="ptm('grid')">
-                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="getCXOptions('column', { processedItem })" v-bind="ptm('column')">
+                        <div v-for="col of processedItem.items" :key="getItemKey(col)" :class="cx('column', { processedItem })" v-bind="ptm('column')">
                             <MegaMenuSub
                                 v-for="submenu of col"
                                 :key="getSubListKey(submenu)"
                                 :id="getSubListId(submenu)"
-                                :style="getSXOptions('submenu', { processedItem })"
+                                :style="sx('submenu', true, { processedItem })"
                                 role="menu"
                                 :menuId="menuId"
                                 :focusedItemId="focusedItemId"
@@ -68,7 +68,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="separator"
                 v-bind="ptm('separator')"
@@ -78,15 +78,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMegaMenu from './BaseMegaMenu.vue';
 
 export default {
     name: 'MegaMenuSub',
-    extends: BaseMegaMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -157,18 +157,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return ObjectUtils.isNotEmpty(this.activeItem) ? this.activeItem.key === processedItem.key : false;
         },

components/lib/menu/BaseMenu.vue

@@ -37,26 +37,26 @@ const classes = {
     submenuHeader: 'p-submenu-header',
     separator: 'p-menuitem-separator',
     end: 'p-menu-end',
-    menuitem: ({ context }) => [
+    menuitem: ({ instance }) => [
         'p-menuitem',
         {
-            'p-focus': context.id === context.focusedOptionId,
+            'p-focus': instance.id === instance.focusedOptionId,
-            'p-disabled': context.disabled()
+            'p-disabled': instance.disabled()
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
 
 export default {
     name: 'BaseMenu',
@@ -100,15 +100,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/menu/Menuitem.vue

@@ -2,7 +2,7 @@
     <li
         v-if="visible()"
         :id="id"
-        :class="[getCXOptions('menuitem'), item.class]"
+        :class="[cx('menuitem'), item.class]"
         role="menuitem"
         :style="item.style"
         :aria-label="label()"
@@ -11,19 +11,19 @@
         :data-p-focused="isItemFocused()"
         :data-p-disabled="disabled() || false"
     >
-        <div :class="getCXOptions('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
+        <div :class="cx('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
             <template v-if="!templates.item">
                 <router-link v-if="item.to && !disabled()" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
+                    <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions('action')">
-                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
+                        <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                        <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
+                        <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
-                        <span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
+                        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
                     </a>
                 </router-link>
-                <a v-else v-ripple :href="item.url" :class="getCXOptions('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
+                <a v-else v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
-                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[getCXOptions('icon'), item.icon]" />
+                    <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                    <span v-else-if="item.icon" :class="[getCXOptions('icon'), item.icon]" v-bind="getPTOptions('icon')" />
+                    <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon')" />
-                    <span :class="getCXOptions('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
+                    <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label() }}</span>
                 </a>
             </template>
             <component v-else :is="templates.item" :item="item"></component>
@@ -32,13 +32,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMenu from './BaseMenu.vue';
 
 export default {
     name: 'Menuitem',
-    extends: BaseMenu,
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['item-click'],
     props: {
@@ -59,12 +59,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemFocused() {
             return this.focusedOptionId === this.id;
         },

components/lib/menubar/BaseMenubar.vue

@@ -77,7 +77,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -90,20 +90,20 @@ const classes = {
     start: 'p-menubar-start',
     button: 'p-menubar-button',
     menu: 'p-menubar-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -114,7 +114,7 @@ const classes = {
     end: 'p-menubar-end'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
 
 export default {
     name: 'BaseMenubar',
@@ -143,15 +143,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/menubar/MenubarSub.vue

@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -19,22 +19,22 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="getCXOptions('submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" :class="cx('submenuIcon')" />
-                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -44,7 +44,7 @@
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                     :menuId="menuId"
                     role="menu"
-                    :style="getSXOptions('submenu', { processedItem })"
+                    :style="sx('submenu', true, { processedItem })"
                     :focusedItemId="focusedItemId"
                     :items="processedItem.items"
                     :mobileActive="mobileActive"
@@ -60,7 +60,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="separator"
                 v-bind="ptm('separator')"
@@ -70,15 +70,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleDownIcon from 'primevue/icons/angledown';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseMenubar from './BaseMenubar.vue';
 
 export default {
     name: 'MenubarSub',
-    extends: BaseMenubar,
+    extends: BaseComponent,
     emits: ['item-mouseenter', 'item-click'],
     props: {
         items: {
@@ -144,18 +144,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },

components/lib/multiselect/BaseMultiSelect.vue

@@ -192,7 +192,7 @@ const classes = {
     hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
 
 export default {
     name: 'BaseMultiSelect',
@@ -358,15 +358,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/multiselect/MultiSelect.d.ts

@@ -185,7 +185,6 @@ export interface MultiSelectPassThroughOptions {
      * Uses to pass attributes to the option's DOM element.
      */
     option?: MultiSelectPassThroughOptionType;
-
     /**
      * Uses to pass attributes to the emptyMessage's DOM element.
      */

components/lib/overlaypanel/BaseOverlayPanel.vue

@@ -126,15 +126,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/paginator/BasePaginator.vue

@@ -0,0 +1,140 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-paginator-default {
+    display: flex;
+}
+
+.p-paginator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.p-paginator-left-content {
+    margin-right: auto;
+}
+
+.p-paginator-right-content {
+    margin-left: auto;
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev,
+.p-paginator-current {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    user-select: none;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-paginator-element:focus {
+    z-index: 1;
+    position: relative;
+}
+`;
+
+const classes = {
+    paginator: ({ instance, key }) => [
+        'p-paginator p-component',
+        {
+            'p-paginator-default': !instance.hasBreakpoints(),
+            [`p-paginator-${key}`]: instance.hasBreakpoints()
+        }
+    ],
+    start: 'p-paginator-left-content',
+    end: 'p-paginator-right-content',
+    firstPageButton: ({ instance }) => [
+        'p-paginator-first p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    firstPageIcon: 'p-paginator-icon',
+    prevPageButton: ({ instance }) => [
+        'p-paginator-prev p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    prevPageIcon: 'p-paginator-icon',
+    nextPageButton: ({ instance }) => [
+        'p-paginator-next p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    nextPageIcon: 'p-paginator-icon',
+    lastPageButton: ({ instance }) => [
+        'p-paginator-last p-paginator-element p-link',
+        {
+            'p-disabled': instance.$attrs.disabled
+        }
+    ],
+    lastPageIcon: 'p-paginator-icon',
+    current: 'p-paginator-current',
+    RPPDropdown: 'p-paginator-rpp-options',
+    JTPDropdown: 'p-paginator-page-options',
+    JTPInput: 'p-paginator-page-input'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });
+
+export default {
+    name: 'BasePaginator',
+    extends: BaseComponent,
+    props: {
+        totalRecords: {
+            type: Number,
+            default: 0
+        },
+        rows: {
+            type: Number,
+            default: 0
+        },
+        first: {
+            type: Number,
+            default: 0
+        },
+        pageLinkSize: {
+            type: Number,
+            default: 5
+        },
+        rowsPerPageOptions: {
+            type: Array,
+            default: null
+        },
+        template: {
+            type: [Object, String],
+            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        currentPageReportTemplate: {
+            type: null,
+            default: '({currentPage} of {totalPages})'
+        },
+        alwaysShow: {
+            type: Boolean,
+            default: true
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/paginator/CurrentPageReport.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="p-paginator-current" v-bind="ptm('current')">{{ text }}</span>
+    <span :class="cx('current')" v-bind="ptm('current')">{{ text }}</span>
 </template>
 
 <script>

components/lib/paginator/FirstPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('firstPageButton')">
+    <button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')">
-        <component :is="template || 'AngleDoubleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('firstPageIcon')" />
+        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-first p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleDoubleLeftIcon: AngleDoubleLeftIcon
     },

components/lib/paginator/JumpToPageDropdown.vue

@@ -1,5 +1,15 @@
 <template>
-    <JTPDropdown :modelValue="page" :options="pageOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-page-options" :disabled="disabled" :pt="ptm('JTPDropdown')"></JTPDropdown>
+    <JTPDropdown
+        :modelValue="page"
+        :options="pageOptions"
+        optionLabel="label"
+        optionValue="value"
+        @update:modelValue="onChange($event)"
+        :class="cx('JTPDropdown')"
+        :disabled="disabled"
+        :pt="ptm('JTPDropdown')"
+        data-pc-section="jtpdropdown"
+    ></JTPDropdown>
 </template>
 
 <script>

components/lib/paginator/JumpToPageInput.vue

@@ -1,5 +1,5 @@
 <template>
-    <JTPInput ref="jtpInput" :modelValue="d_page" class="p-paginator-page-input" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :pt="ptm('JTPInput')"></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('JTPInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :pt="ptm('JTPInput')" data-pc-section="jtpinput"></JTPInput>
 </template>
 
 <script>

components/lib/paginator/LastPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('lastPageButton')">
+    <button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')">
-        <component :is="template || 'AngleDoubleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('lastPageIcon')" />
+        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-last p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleDoubleRightIcon: AngleDoubleRightIcon
     },

components/lib/paginator/NextPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('nextPageButton')">
+    <button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')">
-        <component :is="template || 'AngleRightIcon'" class="p-paginator-icon" v-bind="getPTOptions('nextPageIcon')" />
+        <component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-next p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleRightIcon: AngleRightIcon
     },

components/lib/paginator/Paginator.d.ts

@@ -33,9 +33,9 @@ export interface PaginatorPassThroughOptions {
      */
     root?: PaginatorPassThroughOptionType;
     /**
-     * Uses to pass attributes to the left's DOM element.
+     * Uses to pass attributes to the start's DOM element.
      */
-    left?: PaginatorPassThroughOptionType;
+    start?: PaginatorPassThroughOptionType;
     /**
      * Uses to pass attributes to the first page button's DOM element.
      */

components/lib/paginator/Paginator.vue

@@ -1,7 +1,7 @@
 <template>
     <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('root')">
-        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" class="p-paginator p-component" :class="getPaginatorClasses(key)" v-bind="ptm('paginator')">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('paginator')" data-pc-name="paginator">
-            <div v-if="$slots.start" class="p-paginator-left-content" v-bind="ptm('left')">
+            <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
@@ -34,7 +34,7 @@
                 <JumpToPageDropdown v-else-if="item === 'JumpToPageDropdown'" :aria-label="getAriaLabel('jumpToPageDropdownLabel')" :page="page" :pageCount="pageCount" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
                 <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :pt="pt" />
             </template>
-            <div v-if="$slots.end" class="p-paginator-right-content" v-bind="ptm('end')">
+            <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>
@@ -42,8 +42,8 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import { UniqueComponentId } from 'primevue/utils';
+import BasePaginator from './BasePaginator.vue';
 import CurrrentPageReport from './CurrentPageReport.vue';
 import FirstPageLink from './FirstPageLink.vue';
 import JumpToPageDropdown from './JumpToPageDropdown.vue';
@@ -56,42 +56,8 @@ import RowsPerPageDropdown from './RowsPerPageDropdown.vue';
 
 export default {
     name: 'Paginator',
-    extends: BaseComponent,
+    extends: BasePaginator,
     emits: ['update:first', 'update:rows', 'page'],
-    props: {
-        totalRecords: {
-            type: Number,
-            default: 0
-        },
-        rows: {
-            type: Number,
-            default: 0
-        },
-        first: {
-            type: Number,
-            default: 0
-        },
-        pageLinkSize: {
-            type: Number,
-            default: 5
-        },
-        rowsPerPageOptions: {
-            type: Array,
-            default: null
-        },
-        template: {
-            type: [Object, String],
-            default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-        },
-        currentPageReportTemplate: {
-            type: null,
-            default: '({currentPage} of {totalPages})'
-        },
-        alwaysShow: {
-            type: Boolean,
-            default: true
-        }
-    },
     data() {
         return {
             d_first: this.first,
@@ -215,14 +181,6 @@ export default {
         hasBreakpoints() {
             return typeof this.template === 'object';
         },
-        getPaginatorClasses(key) {
-            return [
-                {
-                    'p-paginator-default': !this.hasBreakpoints(),
-                    [`p-paginator-${key}`]: this.hasBreakpoints()
-                }
-            ];
-        },
         setPaginatorAttribute() {
             if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
                 [...this.$refs.paginator].forEach((el) => {
@@ -329,45 +287,3 @@ export default {
     }
 };
 </script>
-
-<style lang="css">
-.p-paginator-default {
-    display: flex;
-}
-
-.p-paginator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.p-paginator-left-content {
-    margin-right: auto;
-}
-
-.p-paginator-right-content {
-    margin-left: auto;
-}
-
-.p-paginator-page,
-.p-paginator-next,
-.p-paginator-last,
-.p-paginator-first,
-.p-paginator-prev,
-.p-paginator-current {
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-    user-select: none;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-paginator-element:focus {
-    z-index: 1;
-    position: relative;
-}
-</style>

components/lib/paginator/PrevPageLink.vue

@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="containerClass" type="button" v-bind="getPTOptions('prevPageButton')">
+    <button v-ripple :class="cx('prevPageButton')" type="button" v-bind="getPTOptions('prevPageButton')">
-        <component :is="template || 'AngleLeftIcon'" class="p-paginator-icon" v-bind="getPTOptions('prevPageIcon')" />
+        <component :is="template || 'AngleLeftIcon'" :class="cx('prevPageIcon')" v-bind="getPTOptions('prevPageIcon')" />
     </button>
 </template>
 
@@ -27,16 +27,6 @@ export default {
             });
         }
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-paginator-prev p-paginator-element p-link',
-                {
-                    'p-disabled': this.$attrs.disabled
-                }
-            ];
-        }
-    },
     components: {
         AngleLeftIcon: AngleLeftIcon
     },

components/lib/paginator/RowsPerPageDropdown.vue

@@ -1,5 +1,15 @@
 <template>
-    <RPPDropdown :modelValue="rows" :options="rowsOptions" optionLabel="label" optionValue="value" @update:modelValue="onChange($event)" class="p-paginator-rpp-options" :disabled="disabled" :pt="ptm('RPPDropdown')"></RPPDropdown>
+    <RPPDropdown
+        :modelValue="rows"
+        :options="rowsOptions"
+        optionLabel="label"
+        optionValue="value"
+        @update:modelValue="onChange($event)"
+        :class="cx('RPPDropdown')"
+        :disabled="disabled"
+        :pt="ptm('RPPDropdown')"
+        data-pc-section="rppdropdown"
+    ></RPPDropdown>
 </template>
 
 <script>

components/lib/panelmenu/BasePanelMenu.vue

@@ -60,19 +60,19 @@ const classes = {
     toggleableContent: 'p-toggleable-content',
     menuContent: 'p-panelmenu-content',
     menu: 'p-panelmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-focus': context.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -82,7 +82,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
 
 export default {
     name: 'BasePanelMenu',
@@ -106,15 +106,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/panelmenu/PanelMenuList.vue

@@ -1,7 +1,7 @@
 <template>
     <PanelMenuSub
         :id="panelId + '_list'"
-        :class="getCXOptions('menu')"
+        :class="cx('menu')"
         role="tree"
         :tabindex="-1"
         :aria-activedescendant="focused ? focusedItemId : undefined"
@@ -21,13 +21,13 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
-import BasePanelMenu from './BasePanelMenu.vue';
 import PanelMenuSub from './PanelMenuSub.vue';
 
 export default {
     name: 'PanelMenuList',
-    extends: BasePanelMenu,
+    extends: BaseComponent,
     emits: ['item-toggle', 'header-focus'],
     props: {
         panelId: {
@@ -75,12 +75,6 @@ export default {
         getItemLabel(processedItem) {
             return this.getItemProp(processedItem, 'label');
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemVisible(processedItem) {
             return this.getItemProp(processedItem, 'visible') !== false;
         },

components/lib/panelmenu/PanelMenuSub.vue

@@ -1,10 +1,10 @@
 <template>
-    <ul :class="getCXOptions('submenu')" :tabindex="tabindex">
+    <ul :class="cx('submenu')" :tabindex="tabindex">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 :style="getItemProp(processedItem, 'style')"
                 role="treeitem"
                 :aria-label="getItemLabel(processedItem)"
@@ -16,29 +16,29 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
                             <template v-if="isItemGroup(processedItem)">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
                     <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
-                    <div v-show="isItemActive(processedItem)" :class="getCXOptions('toggleableContent')" v-bind="ptm('toggleableContent')">
+                    <div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
                         <PanelMenuSub
                             v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                             :id="getItemId(processedItem) + '_list'"
@@ -60,7 +60,7 @@
             <li
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 role="separator"
                 v-bind="ptm('separator')"
             ></li>
@@ -69,15 +69,15 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BasePanelMenu from './BasePanelMenu.vue';
 
 export default {
     name: 'PanelMenuSub',
-    extends: BasePanelMenu,
+    extends: BaseComponent,
     emits: ['item-toggle'],
     props: {
         panelId: {
@@ -134,12 +134,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },

components/lib/password/BasePassword.vue

@@ -63,7 +63,7 @@ const classes = {
     info: 'p-password-info'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
 
 export default {
     name: 'BasePassword',
@@ -169,15 +169,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/progressbar/BaseProgressBar.vue

@@ -145,15 +145,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/progressspinner/BaseProgressSpinner.vue

@@ -56,15 +56,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/radiobutton/BaseRadioButton.vue

@@ -98,15 +98,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/scrollpanel/BaseScrollPanel.vue

@@ -80,15 +80,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/scrolltop/BaseScrollTop.vue

@@ -66,15 +66,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/selectbutton/BaseSelectButton.vue

@@ -36,6 +36,11 @@ export default {
     },
     css: {
         classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>

components/lib/sidebar/BaseSidebar.vue

@@ -247,15 +247,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/skeleton/BaseSkeleton.vue

@@ -84,15 +84,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/slider/BaseSlider.vue

@@ -106,15 +106,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/speeddial/BaseSpeedDial.vue

@@ -0,0 +1,235 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-speeddial {
+    position: absolute;
+    display: flex;
+}
+
+.p-speeddial-button {
+    z-index: 1;
+}
+
+.p-speeddial-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: top 0s linear 0.2s;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.p-speeddial-item {
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+    will-change: transform;
+}
+
+.p-speeddial-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+    position: absolute;
+}
+
+.p-speeddial-rotate {
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    will-change: transform;
+}
+
+.p-speeddial-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-mask-visible {
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-opened .p-speeddial-list {
+    pointer-events: auto;
+}
+
+.p-speeddial-opened .p-speeddial-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.p-speeddial-opened .p-speeddial-rotate {
+    transform: rotate(45deg);
+}
+
+/* Direction */
+.p-speeddial-direction-up {
+    align-items: center;
+    flex-direction: column-reverse;
+}
+
+.p-speeddial-direction-up .p-speeddial-list {
+    flex-direction: column-reverse;
+}
+
+.p-speeddial-direction-down {
+    align-items: center;
+    flex-direction: column;
+}
+
+.p-speeddial-direction-down .p-speeddial-list {
+    flex-direction: column;
+}
+
+.p-speeddial-direction-left {
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+.p-speeddial-direction-left .p-speeddial-list {
+    flex-direction: row-reverse;
+}
+
+.p-speeddial-direction-right {
+    justify-content: center;
+    flex-direction: row;
+}
+
+.p-speeddial-direction-right .p-speeddial-list {
+    flex-direction: row;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        `p-speeddial p-component p-speeddial-${props.type}`,
+        {
+            [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
+            'p-speeddial-opened': instance.d_visible,
+            'p-disabled': props.disabled
+        }
+    ],
+    button: ({ props }) => [
+        'p-speeddial-button p-button-rounded',
+        {
+            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
+        }
+    ],
+    buttonIcon: ({ instance, props }) => (instance.d_visible && !!props.hideIcon ? props.hideIcon : props.showIcon),
+    menu: 'p-speeddial-list',
+    menuitem: ({ instance, id }) => [
+        'p-speeddial-item',
+        {
+            'p-focus': instance.isItemActive(id)
+        }
+    ],
+    action: ({ item }) => [
+        'p-speeddial-action',
+        {
+            'p-disabled': item.disabled
+        }
+    ],
+    actionIcon: 'p-speeddial-action-icon',
+    mask: ({ instance }) => [
+        'p-speeddial-mask',
+        {
+            'p-speeddial-mask-visible': instance.d_visible
+        }
+    ]
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_speeddial_style', manual: true });
+
+export default {
+    name: 'BaseSpeedDial',
+    extends: BaseComponent,
+    props: {
+        model: null,
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        direction: {
+            type: String,
+            default: 'up'
+        },
+        transitionDelay: {
+            type: Number,
+            default: 30
+        },
+        type: {
+            type: String,
+            default: 'linear'
+        },
+        radius: {
+            type: Number,
+            default: 0
+        },
+        mask: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        hideOnClickOutside: {
+            type: Boolean,
+            default: true
+        },
+        buttonClass: null,
+        maskStyle: null,
+        maskClass: null,
+        showIcon: {
+            type: String,
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
+        },
+        rotateAnimation: {
+            type: Boolean,
+            default: true
+        },
+        tooltipOptions: null,
+        style: null,
+        class: null,
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/speeddial/SpeedDial.d.ts

@@ -228,6 +228,11 @@ export interface SpeedDialProps {
      * @type {SpeedDialPassThroughOptions}
      */
     pt?: SpeedDialPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/speeddial/SpeedDial.vue

@@ -1,9 +1,9 @@
 <template>
-    <div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')">
+    <div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="speeddial">
         <slot name="button" :toggle="onClick">
             <SDButton
                 type="button"
-                :class="buttonClassName"
+                :class="[cx('button'), buttonClass]"
                 @click="onClick($event)"
                 :disabled="disabled"
                 @keydown="onTogglerKeydown"
@@ -16,24 +16,15 @@
             >
                 <template #icon>
                     <slot name="icon" :visible="d_visible">
-                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" v-bind="ptm('button')['icon']" />
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
-                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" v-bind="ptm('button')['icon']" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
                     </slot>
                 </template>
             </SDButton>
         </slot>
-        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
+        <ul :ref="listRef" :id="id + '_list'" :class="cx('menu')" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="index">
-                <li
+                <li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" :class="cx('menuitem', { id: `${id}_${index}` })" :style="getItemStyle(index)" role="menuitem" v-bind="getPTOptions(`${id}_${index}`, 'menuitem')">
-                    v-if="isItemVisible(item)"
-                    :id="`${id}_${index}`"
-                    :aria-controls="`${id}_item`"
-                    class="p-speeddial-item"
-                    :class="itemClass(`${id}_${index}`)"
-                    :style="getItemStyle(index)"
-                    role="menuitem"
-                    v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
-                >
                     <template v-if="!$slots.item">
                         <a
                             v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@@ -41,13 +32,13 @@
                             :tabindex="-1"
                             :href="item.url || '#'"
                             role="menuitem"
-                            :class="['p-speeddial-action', { 'p-disabled': item.disabled }]"
+                            :class="cx('action', { item })"
                             :target="item.target"
                             @click="onItemClick($event, item)"
                             :aria-label="item.label"
                             v-bind="getPTOptions(`${id}_${index}`, 'action')"
                         >
-                            <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
+                            <span v-if="item.icon" :class="[cx('actionIcon'), item.icon]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :onClick="(event) => onItemClick(event, item)"></component>
@@ -56,83 +47,22 @@
         </ul>
     </div>
     <template v-if="mask">
-        <div :class="maskClassName" :style="maskStyle" v-bind="ptm('mask')"></div>
+        <div :class="[cx('mask'), maskClass]" :style="maskStyle" v-bind="ptm('mask')"></div>
     </template>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseSpeedDial from './BaseSpeedDial.vue';
 
 export default {
     name: 'SpeedDial',
-    extends: BaseComponent,
+    extends: BaseSpeedDial,
     emits: ['click', 'show', 'hide', 'focus', 'blur'],
-    props: {
-        model: null,
-        visible: {
-            type: Boolean,
-            default: false
-        },
-        direction: {
-            type: String,
-            default: 'up'
-        },
-        transitionDelay: {
-            type: Number,
-            default: 30
-        },
-        type: {
-            type: String,
-            default: 'linear'
-        },
-        radius: {
-            type: Number,
-            default: 0
-        },
-        mask: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        hideOnClickOutside: {
-            type: Boolean,
-            default: true
-        },
-        buttonClass: null,
-        maskStyle: null,
-        maskClass: null,
-        showIcon: {
-            type: String,
-            default: undefined
-        },
-        hideIcon: {
-            type: String,
-            default: undefined
-        },
-        rotateAnimation: {
-            type: Boolean,
-            default: true
-        },
-        tooltipOptions: null,
-        style: null,
-        class: null,
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     documentClickListener: null,
     container: null,
     list: null,
@@ -157,8 +87,8 @@ export default {
         this.id = this.id || UniqueComponentId();
 
         if (this.type !== 'linear') {
-            const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
+            const button = DomHandler.findSingle(this.container, '[data-pc-section="button"]');
-            const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
+            const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
 
             if (button && firstItem) {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
@@ -306,7 +236,7 @@ export default {
             event.preventDefault();
         },
         onEnterKey(event) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
 
             this.onItemClick(event, this.model[itemIndex]);
@@ -394,7 +324,7 @@ export default {
             event.preventDefault();
         },
         changeFocusedOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
 
             if (filteredItems[index]) {
@@ -402,7 +332,7 @@ export default {
             }
         },
         findPrevOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -412,7 +342,7 @@ export default {
             return matchedOptionIndex;
         },
         findNextOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[0].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -512,44 +442,11 @@ export default {
         },
         listRef(el) {
             this.list = el;
-        },
-        itemClass(id) {
-            return [
-                {
-                    'p-focus': this.isItemActive(id)
-                }
-            ];
         }
     },
     computed: {
         containerClass() {
-            return [
+            return [this.cx('root'), this.class];
-                `p-speeddial p-component p-speeddial-${this.type}`,
-                {
-                    [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
-                    'p-speeddial-opened': this.d_visible,
-                    'p-disabled': this.disabled
-                },
-                this.class
-            ];
-        },
-        buttonClassName() {
-            return [
-                'p-speeddial-button p-button-rounded',
-                {
-                    'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
-                },
-                this.buttonClass
-            ];
-        },
-        maskClassName() {
-            return [
-                'p-speeddial-mask',
-                {
-                    'p-speeddial-mask-visible': this.d_visible
-                },
-                this.maskClass
-            ];
         },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
@@ -565,119 +462,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-speeddial {
-    position: absolute;
-    display: flex;
-}
-
-.p-speeddial-button {
-    z-index: 1;
-}
-
-.p-speeddial-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: top 0s linear 0.2s;
-    pointer-events: none;
-    z-index: 2;
-}
-
-.p-speeddial-item {
-    transform: scale(0);
-    opacity: 0;
-    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
-    will-change: transform;
-}
-
-.p-speeddial-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-    position: absolute;
-}
-
-.p-speeddial-rotate {
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    will-change: transform;
-}
-
-.p-speeddial-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.p-speeddial-mask-visible {
-    pointer-events: none;
-    opacity: 1;
-    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.p-speeddial-opened .p-speeddial-list {
-    pointer-events: auto;
-}
-
-.p-speeddial-opened .p-speeddial-item {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.p-speeddial-opened .p-speeddial-rotate {
-    transform: rotate(45deg);
-}
-
-/* Direction */
-.p-speeddial-direction-up {
-    align-items: center;
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-up .p-speeddial-list {
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-down {
-    align-items: center;
-    flex-direction: column;
-}
-
-.p-speeddial-direction-down .p-speeddial-list {
-    flex-direction: column;
-}
-
-.p-speeddial-direction-left {
-    justify-content: center;
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-left .p-speeddial-list {
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-right {
-    justify-content: center;
-    flex-direction: row;
-}
-
-.p-speeddial-direction-right .p-speeddial-list {
-    flex-direction: row;
-}
-</style>

components/lib/splitbutton/BaseSplitButton.vue

@@ -0,0 +1,149 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-splitbutton {
+    display: inline-flex;
+    position: relative;
+}
+
+.p-splitbutton .p-splitbutton-defaultbutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
+    flex: 1 1 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0 none;
+}
+
+.p-splitbutton-menubutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-splitbutton .p-menu {
+    min-width: 100%;
+}
+
+.p-fluid .p-splitbutton {
+    display: flex;
+}
+`;
+
+const classes = {
+    root: ({ props }) => [
+        'p-splitbutton p-component',
+        {
+            [`p-button-${props.severity}`]: props.severity,
+            'p-button-raised': props.raised,
+            'p-button-rounded': props.rounded,
+            'p-button-text': props.text,
+            'p-button-outlined': props.outlined,
+            'p-button-sm': props.size === 'small',
+            'p-button-lg': props.size === 'large'
+        }
+    ],
+    button: 'p-splitbutton-defaultbutton',
+    menuButton: 'p-splitbutton-menubutton'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitbutton_style', manual: true });
+
+export default {
+    name: 'BaseSplitButton',
+    extends: BaseComponent,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+        model: {
+            type: Array,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        class: {
+            type: null,
+            default: null
+        },
+        style: {
+            type: null,
+            default: null
+        },
+        buttonProps: {
+            type: null,
+            default: null
+        },
+        menuButtonProps: {
+            type: null,
+            default: null
+        },
+        menuButtonIcon: {
+            type: String,
+            default: undefined
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        raised: {
+            type: Boolean,
+            default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: Boolean,
+            default: false
+        },
+        outlined: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: null
+        },
+        plain: {
+            type: Boolean,
+            default: false
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/splitbutton/SplitButton.d.ts

@@ -163,6 +163,11 @@ export interface SplitButtonProps {
      * @type {SplitButtonPassThroughOptions}
      */
     pt?: SplitButtonPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/splitbutton/SplitButton.vue

@@ -1,7 +1,7 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+    <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
+            <PVSButton type="button" :class="cx('button')" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" :pt="ptm('button')" v-bind="buttonProps">
                 <template #icon="slotProps">
                     <slot name="icon">
                         <span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" />
@@ -12,7 +12,7 @@
         <PVSButton
             ref="button"
             type="button"
-            class="p-splitbutton-menubutton"
+            :class="cx('menuButton')"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -33,94 +33,16 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
 import { UniqueComponentId } from 'primevue/utils';
+import BaseSplitButton from './BaseSplitButton.vue';
 
 export default {
     name: 'SplitButton',
-    extends: BaseComponent,
+    extends: BaseSplitButton,
     emits: ['click'],
-    props: {
-        label: {
-            type: String,
-            default: null
-        },
-        icon: {
-            type: String,
-            default: null
-        },
-        model: {
-            type: Array,
-            default: null
-        },
-        autoZIndex: {
-            type: Boolean,
-            default: true
-        },
-        baseZIndex: {
-            type: Number,
-            default: 0
-        },
-        appendTo: {
-            type: String,
-            default: 'body'
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        class: {
-            type: null,
-            default: null
-        },
-        style: {
-            type: null,
-            default: null
-        },
-        buttonProps: {
-            type: null,
-            default: null
-        },
-        menuButtonProps: {
-            type: null,
-            default: null
-        },
-        menuButtonIcon: {
-            type: String,
-            default: undefined
-        },
-        severity: {
-            type: String,
-            default: null
-        },
-        raised: {
-            type: Boolean,
-            default: false
-        },
-        rounded: {
-            type: Boolean,
-            default: false
-        },
-        text: {
-            type: Boolean,
-            default: false
-        },
-        outlined: {
-            type: Boolean,
-            default: false
-        },
-        size: {
-            type: String,
-            default: null
-        },
-        plain: {
-            type: Boolean,
-            default: false
-        }
-    },
     data() {
         return {
             isExpanded: false
@@ -150,19 +72,7 @@ export default {
             return UniqueComponentId();
         },
         containerClass() {
-            return [
+            return [this.cx('root'), this.class];
-                'p-splitbutton p-component',
-                this.class,
-                {
-                    [`p-button-${this.severity}`]: this.severity,
-                    'p-button-raised': this.raised,
-                    'p-button-rounded': this.rounded,
-                    'p-button-text': this.text,
-                    'p-button-outlined': this.outlined,
-                    'p-button-sm': this.size === 'small',
-                    'p-button-lg': this.size === 'large'
-                }
-            ];
         }
     },
     components: {
@@ -172,37 +82,3 @@ export default {
     }
 };
 </script>
-
-<style scoped>
-.p-splitbutton {
-    display: inline-flex;
-    position: relative;
-}
-
-.p-splitbutton .p-splitbutton-defaultbutton,
-.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
-.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
-    flex: 1 1 auto;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0 none;
-}
-
-.p-splitbutton-menubutton,
-.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
-.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-splitbutton .p-menu {
-    min-width: 100%;
-}
-
-.p-fluid .p-splitbutton {
-    display: flex;
-}
-</style>

components/lib/splitter/BaseSplitter.vue

@@ -60,7 +60,7 @@ const inlineStyles = {
     root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
 
 export default {
     name: 'BaseSplitter',
@@ -89,15 +89,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/splitterpanel/BaseSplitterPanel.vue

@@ -21,7 +21,7 @@ const classes = {
     root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
 
 export default {
     name: 'BaseSplitterPanel',
@@ -37,15 +37,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/steps/BaseSteps.vue

@@ -0,0 +1,112 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-steps {
+    position: relative;
+}
+
+.p-steps .p-steps-list {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+    display: flex;
+}
+
+.p-steps-item {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+.p-steps-item .p-menuitem-link {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+    text-decoration: none;
+}
+
+.p-steps.p-steps-readonly .p-steps-item {
+    cursor: auto;
+}
+
+.p-steps-item.p-steps-current .p-menuitem-link {
+    cursor: default;
+}
+
+.p-steps-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+.p-steps-number {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-steps-title {
+    display: block;
+}
+`;
+
+const classes = {
+    root: ({ instance }) => ['p-steps p-component', { 'p-readonly': instance.readonly }],
+    menu: 'p-steps-list',
+    menuitem: ({ instance, item }) => [
+        'p-steps-item',
+        {
+            'p-highlight p-steps-current': instance.isActive(item),
+            'p-disabled': instance.isItemDisabled(item)
+        }
+    ],
+    action: ({ props, isActive, isExactActive }) => [
+        'p-menuitem-link',
+        {
+            'router-link-active': isActive,
+            'router-link-active-exact': props.exact && isExactActive
+        }
+    ],
+    step: 'p-steps-number',
+    label: 'p-steps-title'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_steps_style', manual: true });
+
+export default {
+    name: 'BaseSteps',
+    extends: BaseComponent,
+    props: {
+        id: {
+            type: String
+        },
+        model: {
+            type: Array,
+            default: null
+        },
+        readonly: {
+            type: Boolean,
+            default: true
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/steps/Steps.d.ts

@@ -85,6 +85,11 @@ export interface StepsProps {
      * @type {StepsPassThroughOptions}
      */
     pt?: StepsPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/steps/Steps.vue

@@ -1,26 +1,26 @@
 <template>
-    <nav :id="id" :class="containerClass" v-bind="ptm('root')">
+    <nav :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="steps">
-        <ol ref="list" class="p-steps-list" v-bind="ptm('menu')">
+        <ol ref="list" :class="cx('menu')" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="item.to">
-                <li v-if="visible(item)" :class="getItemClass(item)" :style="item.style" v-bind="ptm('menuitem')">
+                <li v-if="visible(item)" :class="[cx('menuitem', { item }), item.class]" :style="item.style" v-bind="ptm('menuitem')" :data-p-highlight="isActive(item)" :data-p-disabled="isItemDisabled(item)">
                     <template v-if="!$slots.item">
                         <router-link v-if="!isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
                             <a
                                 :href="href"
-                                :class="linkClass({ isActive, isExactActive })"
+                                :class="cx('action', { isActive, isExactActive })"
                                 :tabindex="-1"
                                 :aria-current="isExactActive ? 'step' : undefined"
                                 @click="onItemClick($event, item, navigate)"
                                 @keydown="onItemKeydown($event, item, navigate)"
                                 v-bind="ptm('action')"
                             >
-                                <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                                <span :class="cx('step')" v-bind="ptm('step')">{{ index + 1 }}</span>
-                                <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
+                                <span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</span>
                             </a>
                         </router-link>
-                        <span v-else :class="linkClass()" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
+                        <span v-else :class="cx('action')" @keydown="onItemKeydown($event, item)" v-bind="ptm('action')">
-                            <span class="p-steps-number" v-bind="ptm('step')">{{ index + 1 }}</span>
+                            <span :class="cx('step')" v-bind="ptm('step')">{{ index + 1 }}</span>
-                            <span class="p-steps-title" v-bind="ptm('label')">{{ label(item) }}</span>
+                            <span :class="cx('label')" v-bind="ptm('label')">{{ label(item) }}</span>
                         </span>
                     </template>
                     <component v-else :is="$slots.item" :item="item"></component>
@@ -31,30 +31,12 @@
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import { DomHandler } from 'primevue/utils';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseSteps from './BaseSteps.vue';
 
 export default {
     name: 'Steps',
-    extends: BaseComponent,
+    extends: BaseSteps,
-    props: {
-        id: {
-            type: String,
-            default: UniqueComponentId()
-        },
-        model: {
-            type: Array,
-            default: null
-        },
-        readonly: {
-            type: Boolean,
-            default: true
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        }
-    },
     mounted() {
         const firstItem = this.findFirstItem();
 
@@ -152,12 +134,12 @@ export default {
             return prevItem ? prevItem.children[0] : null;
         },
         findFirstItem() {
-            const firstSibling = DomHandler.findSingle(this.$refs.list, '.p-steps-item');
+            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="menuitem"]');
 
             return firstSibling ? firstSibling.children[0] : null;
         },
         findLastItem() {
-            const siblings = DomHandler.find(this.$refs.list, '.p-steps-item');
+            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="menuitem"]');
 
             return siblings ? siblings[siblings.length - 1].children[0] : null;
         },
@@ -169,25 +151,6 @@ export default {
         isActive(item) {
             return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
         },
-        getItemClass(item) {
-            return [
-                'p-steps-item',
-                item.class,
-                {
-                    'p-highlight p-steps-current': this.isActive(item),
-                    'p-disabled': this.isItemDisabled(item)
-                }
-            ];
-        },
-        linkClass(routerProps) {
-            return [
-                'p-menuitem-link',
-                {
-                    'router-link-active': routerProps && routerProps.isActive,
-                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-                }
-            ];
-        },
         isItemDisabled(item) {
             return this.disabled(item) || (this.readonly && !this.isActive(item));
         },
@@ -200,65 +163,6 @@ export default {
         label(item) {
             return typeof item.label === 'function' ? item.label() : item.label;
         }
-    },
-    computed: {
-        containerClass() {
-            return ['p-steps p-component', { 'p-readonly': this.readonly }];
-        }
     }
 };
 </script>
-
-<style>
-.p-steps {
-    position: relative;
-}
-
-.p-steps .p-steps-list {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-    display: flex;
-}
-
-.p-steps-item {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    flex: 1 1 auto;
-    overflow: hidden;
-}
-
-.p-steps-item .p-menuitem-link {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-    text-decoration: none;
-}
-
-.p-steps.p-steps-readonly .p-steps-item {
-    cursor: auto;
-}
-
-.p-steps-item.p-steps-current .p-menuitem-link {
-    cursor: default;
-}
-
-.p-steps-title {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-}
-
-.p-steps-number {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-steps-title {
-    display: block;
-}
-</style>

components/lib/tabmenu/BaseTabMenu.vue

@@ -0,0 +1,100 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-tabmenu {
+    overflow-x: auto;
+}
+
+.p-tabmenu-nav {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    flex-wrap: nowrap;
+}
+
+.p-tabmenu-nav a {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-decoration: none;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+.p-tabmenu-nav a:focus {
+    z-index: 1;
+}
+
+.p-tabmenu-nav .p-menuitem-text {
+    line-height: 1;
+}
+
+.p-tabmenu-ink-bar {
+    display: none;
+    z-index: 1;
+}
+
+.p-tabmenu::-webkit-scrollbar {
+    display: none;
+}
+`;
+
+const classes = {
+    root: 'p-tabmenu p-component',
+    menu: 'p-tabmenu-nav p-reset',
+    menuitem: ({ instance, props, index, item, isActive, isExactActive }) => [
+        'p-tabmenuitem',
+        {
+            'p-highlight': (props.exact ? isExactActive : isActive) || instance.d_activeIndex === index,
+            'p-disabled': instance.disabled(item)
+        }
+    ],
+    action: 'p-menuitem-link',
+    icon: 'p-menuitem-icon',
+    label: 'p-menuitem-text',
+    inkbar: 'p-tabmenu-ink-bar'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabmenu_style', manual: true });
+
+export default {
+    name: 'BaseTabMenu',
+    extends: BaseComponent,
+    props: {
+        model: {
+            type: Array,
+            default: null
+        },
+        exact: {
+            type: Boolean,
+            default: true
+        },
+        activeIndex: {
+            type: Number,
+            default: 0
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/tabmenu/TabMenu.d.ts

@@ -131,6 +131,11 @@ export interface TabMenuProps {
      * @type {TabMenuPassThroughOptions}
      */
     pt?: TabMenuPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/tabmenu/TabMenu.vue

@@ -1,16 +1,25 @@
 <template>
-    <div class="p-tabmenu p-component" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tabmenu">
-        <ul ref="nav" class="p-tabmenu-nav p-reset" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
+        <ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
             <template v-for="(item, i) of focusableItems" :key="label(item) + '_' + i.toString()">
                 <router-link v-if="item.to && !disabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                    <li v-if="visible(item)" ref="tab" :class="getRouteItemClass(item, isActive, isExactActive)" :style="item.style" role="presentation" v-bind="getPTOptions('menuitem', i)">
+                    <li
+                        v-if="visible(item)"
+                        ref="tab"
+                        :class="[cx('menuitem', { item, isActive, isExactActive }), item.class]"
+                        :style="item.style"
+                        role="presentation"
+                        v-bind="getPTOptions('menuitem', i)"
+                        :data-p-highlight="exact ? isExactActive : isActive"
+                        :data-p-disabled="disabled(item)"
+                    >
                         <template v-if="!$slots.item">
                             <a
                                 ref="tabLink"
                                 v-ripple
                                 role="menuitem"
                                 :href="href"
-                                class="p-menuitem-link"
+                                :class="cx('action')"
                                 :aria-label="label(item)"
                                 :aria-disabled="disabled(item)"
                                 :tabindex="isExactActive ? '0' : '-1'"
@@ -18,61 +27,49 @@
                                 @keydown="onKeydownItem($event, i, navigate)"
                                 v-bind="getPTOptions('action', i)"
                             >
-                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                                <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                                <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                                <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
-                                <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                             </a>
                         </template>
                         <component v-else :is="$slots.item" :item="item" :index="i"></component>
                     </li>
                 </router-link>
-                <li v-else-if="visible(item)" ref="tab" :class="getItemClass(item, i)" role="presentation" @click="onItemClick($event, item, i)" @keydown="onKeydownItem($event, i)" v-bind="getPTOptions('menuitem', i)">
+                <li
+                    v-else-if="visible(item)"
+                    ref="tab"
+                    :class="[cx('menuitem', { item, index: i }), item.class]"
+                    role="presentation"
+                    @click="onItemClick($event, item, i)"
+                    @keydown="onKeydownItem($event, i)"
+                    v-bind="getPTOptions('menuitem', i)"
+                    :data-p-highlight="d_activeIndex === i"
+                    :data-p-disabled="disabled(item)"
+                >
                     <template v-if="!$slots.item">
-                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" class="p-menuitem-link" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
+                        <a ref="tabLink" v-ripple role="menuitem" :href="item.url" :class="cx('action')" :target="item.target" :aria-label="label(item)" :aria-disabled="disabled(item)" :tabindex="setTabIndex(i)" v-bind="getPTOptions('action', i)">
-                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="getItemIcon(item)" />
+                            <component v-if="$slots.itemicon" :is="$slots.itemicon" :item="item" :class="[cx('icon'), item.icon]" />
-                            <span v-else-if="item.icon" :class="getItemIcon(item)" v-bind="getPTOptions('icon', i)" />
+                            <span v-else-if="item.icon" :class="[cx('icon'), item.icon]" v-bind="getPTOptions('icon', i)" />
-                            <span class="p-menuitem-text" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions('label', i)">{{ label(item) }}</span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :index="i"></component>
                 </li>
             </template>
-            <li ref="inkbar" role="none" class="p-tabmenu-ink-bar" v-bind="ptm('inkbar')"></li>
+            <li ref="inkbar" role="none" :class="cx('inkbar')" v-bind="ptm('inkbar')"></li>
         </ul>
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
+import BaseTabMenu from './BaseTabMenu.vue';
 
 export default {
     name: 'TabMenu',
-    extends: BaseComponent,
+    extends: BaseTabMenu,
     emits: ['update:activeIndex', 'tab-change'],
-    props: {
-        model: {
-            type: Array,
-            default: null
-        },
-        exact: {
-            type: Boolean,
-            default: true
-        },
-        activeIndex: {
-            type: Number,
-            default: 0
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     timeout: null,
     data() {
         return {
@@ -205,7 +202,7 @@ export default {
 
             let nextItem = items[i];
 
-            if (nextItem) return DomHandler.hasClass(nextItem, 'p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
+            if (nextItem) return DomHandler.getAttribute(nextItem, 'data-p-disabled') ? this.findNextItem(items, i) : { nextItem, i };
             else return null;
         },
         findPrevItem(items, index) {
@@ -217,32 +214,9 @@ export default {
 
             let prevItem = items[i];
 
-            if (prevItem) return DomHandler.hasClass(prevItem, 'p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
+            if (prevItem) return DomHandler.getAttribute(prevItem, 'data-p-disabled') ? this.findPrevItem(items, i) : { prevItem, i };
             else return null;
         },
-        getItemClass(item, index) {
-            return [
-                'p-tabmenuitem',
-                item.class,
-                {
-                    'p-highlight': this.d_activeIndex === index,
-                    'p-disabled': this.disabled(item)
-                }
-            ];
-        },
-        getRouteItemClass(item, isActive, isExactActive) {
-            return [
-                'p-tabmenuitem',
-                item.class,
-                {
-                    'p-highlight': this.exact ? isExactActive : isActive,
-                    'p-disabled': this.disabled(item)
-                }
-            ];
-        },
-        getItemIcon(item) {
-            return ['p-menuitem-icon', item.icon];
-        },
         visible(item) {
             return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
         },
@@ -255,7 +229,7 @@ export default {
         setDefaultTabIndexes(tabLinkRef) {
             setTimeout(() => {
                 tabLinkRef.forEach((item) => {
-                    item.tabIndex = DomHandler.hasClass(item.parentElement, 'p-highlight') ? '0' : '-1';
+                    item.tabIndex = DomHandler.getAttribute(item.parentElement, 'data-p-highlight') ? '0' : '-1';
                 });
             }, 300);
         },
@@ -269,7 +243,7 @@ export default {
             for (let i = 0; i < tabs.length; i++) {
                 let tab = tabs[i];
 
-                if (DomHandler.hasClass(tab, 'p-highlight')) {
+                if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
                     this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
                     this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
                     inkHighlighted = true;
@@ -285,7 +259,7 @@ export default {
     computed: {
         focusableItems() {
             return (this.model || []).reduce((result, item) => {
-                this.visible(item) && !DomHandler.hasClass(item, 'p-disabled') && result.push(item);
+                this.visible(item) && !this.disabled(item) && result.push(item);
 
                 return result;
             }, []);
@@ -296,45 +270,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-tabmenu {
-    overflow-x: auto;
-}
-
-.p-tabmenu-nav {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    flex-wrap: nowrap;
-}
-
-.p-tabmenu-nav a {
-    cursor: pointer;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    position: relative;
-    text-decoration: none;
-    text-decoration: none;
-    overflow: hidden;
-}
-
-.p-tabmenu-nav a:focus {
-    z-index: 1;
-}
-
-.p-tabmenu-nav .p-menuitem-text {
-    line-height: 1;
-}
-
-.p-tabmenu-ink-bar {
-    display: none;
-    z-index: 1;
-}
-
-.p-tabmenu::-webkit-scrollbar {
-    display: none;
-}
-</style>

components/lib/tabview/BaseTabView.vue

@@ -103,7 +103,7 @@ const classes = {
     panelContainer: 'p-tabview-panels'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
 
 export default {
     name: 'BaseTabView',
@@ -147,15 +147,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/tag/BaseTag.vue

@@ -47,15 +47,13 @@ export default {
         icon: String
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/terminal/BaseTerminal.vue

@@ -53,15 +53,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/textarea/BaseTextarea.vue

@@ -23,7 +23,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_textarea_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_textarea_style', manual: true });
 
 export default {
     name: 'BaseTextarea',
@@ -33,15 +33,13 @@ export default {
         autoResize: Boolean
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/tieredmenu/BaseTieredMenu.vue

@@ -45,7 +45,7 @@ const styles = `
 `;
 
 const inlineStyles = {
-    submenu: ({ context, processedItem }) => ({ display: context.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };
 
 const classes = {
@@ -58,20 +58,20 @@ const classes = {
         }
     ],
     menu: 'p-tieredmenu-root-list',
-    menuitem: ({ context, processedItem }) => [
+    menuitem: ({ instance, processedItem }) => [
         'p-menuitem',
         {
-            'p-menuitem-active p-highlight': context.isItemActive(processedItem),
+            'p-menuitem-active p-highlight': instance.isItemActive(processedItem),
-            'p-focus': context.isItemFocused(processedItem),
+            'p-focus': instance.isItemFocused(processedItem),
-            'p-disabled': context.isItemDisabled(processedItem)
+            'p-disabled': instance.isItemDisabled(processedItem)
         }
     ],
     content: 'p-menuitem-content',
-    action: ({ context, isActive, isExactActive }) => [
+    action: ({ props, isActive, isExactActive }) => [
         'p-menuitem-link',
         {
             'router-link-active': isActive,
-            'router-link-active-exact': context.exact && isExactActive
+            'router-link-active-exact': props.exact && isExactActive
         }
     ],
     icon: 'p-menuitem-icon',
@@ -81,7 +81,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
 
 export default {
     name: 'BaseTieredMenu',
@@ -130,15 +130,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/tieredmenu/TieredMenuSub.vue

@@ -1,11 +1,11 @@
 <template>
-    <ul :class="level === 0 ? getCXOptions('menu') : getCXOptions('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
+    <ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
+                :class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
                 role="menuitem"
                 :aria-label="getItemLabel(processedItem)"
                 :aria-disabled="isItemDisabled(processedItem) || undefined"
@@ -19,22 +19,22 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="getCXOptions('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
                     <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getCXOptions('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                            <a v-ripple :href="href" :class="cx('action', { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
-                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                                <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                                <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getCXOptions('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
+                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, 'action')">
-                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" />
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
-                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[getCXOptions('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, 'icon')" />
-                            <span :class="getCXOptions('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <span :class="cx('label')" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             <template v-if="getItemProp(processedItem, 'items')">
-                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="getCXOptions('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
-                                <AngleRightIcon v-else :class="getCXOptions('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                                <AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
                             </template>
                         </a>
                     </template>
@@ -43,7 +43,7 @@
                 <TieredMenuSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
                     :id="getItemId(processedItem) + '_list'"
-                    :style="getSXOptions('submenu', { processedItem })"
+                    :style="sx('submenu', true, { processedItem })"
                     role="menu"
                     :menuId="menuId"
                     :focusedItemId="focusedItemId"
@@ -61,7 +61,7 @@
                 v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
                 :id="getItemId(processedItem)"
                 :style="getItemProp(processedItem, 'style')"
-                :class="[getCXOptions('separator'), getItemProp(processedItem, 'class')]"
+                :class="[cx('separator'), getItemProp(processedItem, 'class')]"
                 role="separator"
                 v-bind="ptm('separator')"
             ></li>
@@ -70,14 +70,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
-import BaseTieredMenu from './BaseTieredMenu.vue';
 
 export default {
     name: 'TieredMenuSub',
-    extends: BaseTieredMenu,
+    extends: BaseComponent,
     emits: ['item-click', 'item-mouseenter'],
     props: {
         menuId: {
@@ -134,18 +134,6 @@ export default {
                 }
             });
         },
-        getCXOptions(key, params) {
-            return this.cx(key, {
-                ...params,
-                context: this
-            });
-        },
-        getSXOptions(key, params) {
-            return this.sx(key, true, {
-                ...params,
-                context: this
-            });
-        },
         isItemActive(processedItem) {
             return this.activeItemPath.some((path) => path.key === processedItem.key);
         },

components/lib/toast/BaseToast.vue

@@ -185,15 +185,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/toast/ToastMessage.vue

@@ -25,11 +25,11 @@ import InfoCircleIcon from 'primevue/icons/infocircle';
 import TimesIcon from 'primevue/icons/times';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 import Ripple from 'primevue/ripple';
-import BaseToast from './BaseToast.vue';
+import BaseComponent from 'primevue/basecomponent';
 
 export default {
     name: 'ToastMessage',
-    extends: BaseToast,
+    extends: BaseComponent,
     emits: ['close'],
     closeTimeout: null,
     props: {

components/lib/togglebutton/BaseToggleButton.vue

@@ -77,6 +77,11 @@ export default {
     },
     css: {
         classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>

components/lib/tree/BaseTree.vue

@@ -127,7 +127,7 @@ const classes = {
     subgroup: 'p-context-children'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
 
 export default {
     name: 'BaseTree',
@@ -199,15 +199,13 @@ export default {
         }
     },
     css: {
-        classes
+        classes,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/tree/TreeNode.vue

@@ -53,17 +53,17 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import MinusIcon from 'primevue/icons/minus';
 import Ripple from 'primevue/ripple';
 import { DomHandler } from 'primevue/utils';
-import BaseTree from './BaseTree.vue';
 
 export default {
     name: 'TreeNode',
-    extends: BaseTree,
+    extends: BaseComponent,
     emits: ['node-toggle', 'node-click', 'checkbox-change'],
     props: {
         node: {

components/lib/treeselect/BaseTreeSelect.vue

@@ -94,7 +94,7 @@ const classes = {
     emptyMessage: 'p-treeselect-empty-message'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
 
 export default {
     name: 'BaseTreeSelect',
@@ -173,15 +173,13 @@ export default {
     },
     css: {
         classes,
-        inlineStyles
+        inlineStyles,
+        loadStyle
     },
-    watch: {
+    provide() {
-        isUnstyled: {
+        return {
-            immediate: true,
+            $parentInstance: this
-            handler(newValue) {
+        };
-                !newValue && loadStyle();
-            }
-        }
     }
 };
 </script>

components/lib/tristatecheckbox/BaseTriStateCheckbox.vue

@@ -57,6 +57,11 @@ export default {
     },
     css: {
         classes
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
     }
 };
 </script>

doc/common/apidoc/index.json

@@ -4865,6 +4865,14 @@
                             "type": "ButtonPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": [],
@@ -16516,6 +16524,14 @@
                             "type": "DockPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": []
@@ -27851,12 +27867,12 @@
                             "description": "Uses to pass attributes to the root's DOM element."
                         },
                         {
-                            "name": "left",
+                            "name": "start",
                             "optional": true,
                             "readonly": false,
                             "type": "PaginatorPassThroughOptionType",
                             "default": "",
-                            "description": "Uses to pass attributes to the left's DOM element."
+                            "description": "Uses to pass attributes to the start's DOM element."
                         },
                         {
                             "name": "firstPageButton",
@@ -33491,6 +33507,14 @@
                             "type": "SpeedDialPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": []
@@ -33880,6 +33904,14 @@
                             "type": "SplitButtonPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": []
@@ -34473,6 +34505,14 @@
                             "type": "StepsPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": []
@@ -34845,6 +34885,14 @@
                             "type": "TabMenuPassThroughOptions",
                             "default": "",
                             "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
                         }
                     ],
                     "methods": []

rollup.config.js

@@ -245,6 +245,7 @@ function addServices() {
     addEntry('toasteventbus', 'ToastEventBus.js', 'toasteventbus');
     addEntry('overlayeventbus', 'OverlayEventBus.js', 'overlayeventbus');
     addEntry('usetoast', 'UseToast.js', 'usetoast');
+    addEntry('usestyle', 'UseStyle.js', 'usestyle');
     addEntry('terminalservice', 'TerminalService.js', 'terminalservice');
     addEntry('usedialog', 'UseDialog.js', 'usedialog');
     addEntry('dialogservice', 'DialogService.js', 'dialogservice');