Refactor #3965, Improve build and Added *Base models

.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
         }
     },
     plugins: ['prettier'],
-    ignorePatterns: ['**/public/**'],
+    ignorePatterns: ['**/public/**', '**/dist/**'],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

assets/styles/primevue.css

@@ -1,10 +0,0 @@
-@import '../../components/lib/common/Common.css';
-/* Todo: badge.css should be removed for unstyled */
-@import '../../components/lib/badge/Badge.css';
-@import '../../components/lib/button/Button.css';
-@import '../../components/lib/checkbox/Checkbox.css';
-@import '../../components/lib/colorpicker/ColorPicker.css';
-@import '../../components/lib/inputtext/InputText.css';
-@import '../../components/lib/radiobutton/RadioButton.css';
-@import '../../components/lib/ripple/Ripple.css';
-@import '../../components/lib/tooltip/Tooltip.css';

components/lib/accordion/BaseAccordion.vue

@@ -45,7 +45,7 @@ const classes = {
     }
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
 
 export default {
     name: 'BaseAccordion',

components/lib/autocomplete/AutoComplete.vue

@@ -110,7 +110,7 @@
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -166,7 +166,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                 </div>

components/lib/autocomplete/BaseAutoComplete.vue

@@ -126,7 +126,6 @@ const classes = {
     inputToken: 'p-autocomplete-input-token',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
-    hiddenSearchResult: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-autocomplete-panel p-component',
         {
@@ -144,11 +143,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-autocomplete-empty-message',
+    emptyMessage: 'p-autocomplete-empty-message'
-    hiddenSelectedMessage: 'p-hidden-accessible'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
 
 export default {
     name: 'BaseAutoComplete',

components/lib/avatar/BaseAvatar.vue

@@ -48,7 +48,7 @@ const classes = {
     icon: 'p-avatar-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
 
 export default {
     name: 'BaseAvatar',

components/lib/avatargroup/BaseAvatarGroup.vue

@@ -17,7 +17,7 @@ const classes = {
     root: 'p-avatar-group p-component'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatargroup_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
 
 export default {
     name: 'BaseAvatarGroup',

components/lib/badge/BaseBadge.vue

@@ -54,7 +54,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_badge_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 export default {
     name: 'BaseBadge',

components/lib/badgedirective/BadgeDirective.js

@@ -1,19 +1,19 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseBadgeDirective from './BaseBadgeDirective';
 
-const BadgeDirective = BaseDirective.extend('badge', {
+const BadgeDirective = BaseBadgeDirective.extend('badge', {
     mounted(el, binding) {
         const id = UniqueComponentId() + '_badge';
 
-        el.$_pbadgeId = id;
         el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
 
-        let badge = document.createElement('span');
+        const badge = DomHandler.createElement('span', {
+            id,
+            class: this.cx('root'),
+            'p-bind': this.ptm('root')
+        });
 
-        badge.id = id;
+        el.$_pbadgeId = badge.getAttribute('id');
-        !el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
-        badge.setAttribute('data-pc-name', 'badge');
-        badge.setAttribute('data-pc-section', 'root');
 
         for (let modifier in binding.modifiers) {
             !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
@@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
-        el.$pEl = badge;
 
-        BaseDirective.handleCSS('badge', el, binding);
+        this.$el = badge;
     },
     updated(el, binding) {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');

components/lib/badgedirective/BaseBadgeDirective.js

@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-badge {
     display: inline-block;
     border-radius: 10px;
@@ -30,3 +34,19 @@
     padding: 0;
     border-radius: 50%;
 }
+`;
+
+const classes = {
+    root: 'p-badge p-component'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
+
+const BaseBadgeDirective = BaseDirective.extend({
+    css: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseBadgeDirective;

components/lib/base/Base.js

@@ -0,0 +1,48 @@
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
+.p-overflow-hidden {
+    overflow: hidden;
+}
+
+.p-unselectable-text {
+    user-select: none;
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
+`;
+
+export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
+
+const Base = {
+    styles
+};
+
+export default Base;

components/lib/base/package.json

@@ -0,0 +1,5 @@
+{
+    "main": "./base.cjs.js",
+    "module": "./base.esm.js",
+    "unpkg": "./base.min.js"
+}

components/lib/basecomponent/BaseComponent.vue

@@ -1,19 +1,358 @@
 <script>
+import { loadBaseStyle } from 'primevue/base';
+import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
-const inlineStyles = {
+const inlineStyles = {};
-    hiddenAccessible: {
+
-        border: '0',
+const buttonStyles = `
-        clip: 'rect(0 0 0 0)',
+.p-button {
-        height: '1px',
+    margin: 0;
-        margin: '-1px',
+    display: inline-flex;
-        overflow: 'hidden',
+    cursor: pointer;
-        padding: '0',
+    user-select: none;
-        position: 'absolute',
+    align-items: center;
-        width: '1px'
+    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 checkboxStyles = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: default;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
+const inputTextStyles = `
+.p-inputtext {
+    margin: 0;
+}
+
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .input:-webkit-autofill ~ label {
+    top: -20px;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}
+`;
+const radioButtonStyles = `
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton.p-radiobutton-disabled {
+    cursor: default;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+`;
+const styles = `
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+
+.p-hidden-space {
+    visibility: hidden;
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+
+.p-disabled, .p-disabled * {
+    cursor: default !important;
+    pointer-events: none;
+    user-select: none;
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="file"]::-webkit-file-upload-button,
+button { /* @todo */
+    border-radius: 0;
+}
+
+.p-link {
+	text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-link:disabled {
+	cursor: default;
+}
+
+/* Non vue overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-connected-overlay-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-connected-overlay-leave-to {
+    opacity: 0;
+}
+
+.p-connected-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-leave-active {
+    transition: opacity .1s linear;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+${buttonStyles}
+${checkboxStyles}
+${inputTextStyles}
+${radioButtonStyles}
+`;
+
+const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
 
 export default {
     name: 'BaseComponent',
@@ -36,9 +375,15 @@ export default {
         isUnstyled: {
             immediate: true,
             handler(newValue) {
-                !newValue && this.$options.css && this.$css.loadStyle();
+                if (!newValue) {
+                    loadStyle();
+                    this.$options.css && this.$css.loadStyle();
                 }
             }
+        }
+    },
+    beforeMount() {
+        loadBaseStyle();
     },
     methods: {
         _getHostInstance(instance) {

components/lib/basedirective/BaseDirective.js

@@ -1,69 +1,109 @@
-import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { loadBaseStyle } from 'primevue/base';
+import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
+
+const BaseDirective = {
+    _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
+    _getOptionValue: (options, key = '', params = {}) => {
+        const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
+        const fKey = fKeys.shift();
+
+        return fKey
+            ? ObjectUtils.isObject(options)
+                ? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
+                : undefined
+            : ObjectUtils.getItemValue(options, params);
+    },
+    _getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
+        const datasetPrefix = 'data-pc-';
+        const self = BaseDirective._getOptionValue(obj, key, params);
+        const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
+        const merged = mergeProps(self, globalPT, {
+            ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }),
+            [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
+        });
+
+        return merged;
+    },
+    _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
+        const config = binding?.instance?.$primevue?.config;
+        const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName];
+        const selfHook = binding?.value?.pt?.hooks?.[hookName];
+
+        globalHook?.(el, binding, vnode, prevVnode);
+        selfHook?.(el, binding, vnode, prevVnode);
+    },
+    _extend: (name, options = {}) => {
+        const handleHook = (hook, el, binding, vnode, prevVnode) => {
+            el.$instance = el.$instance || {};
+
+            const config = binding?.instance?.$primevue?.config;
+            const $instance = el.$instance[name] || {};
+            const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {};
+
+            el.$instance[name] = {
+                ...$instance,
+                /* new instance variables to pass in directive methods */
+                $name: name,
+                $host: el,
+                $binding: binding,
+                $el: $instance['$el'] || undefined,
+                $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
+                /* computed instance variables */
+                defaultPT: config?.pt?.directives?.[name],
+                isUnstyled: config?.unstyled,
+                /* instance's methods */
+                ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance[name], el.$instance?.[name]?.$binding?.value?.pt, key, { ...params }),
+                ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance?.[name], obj, key, params, false),
+                cx: (key = '', params = {}) => (!el.$instance?.[name]?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.classes, key, { ...params }) : undefined),
+                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined),
+                ...$options
+            };
+
+            $instance[hook]?.(el, binding, vnode, prevVnode); // handle hook in directive implementation
+            BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
+        };
 
-export const BaseDirective = {
-    extend: (directiveName, hooks) => {
         return {
             created: (el, binding, vnode, prevVnode) => {
-                hooks['created'] && hooks['created'](el, binding, vnode, prevVnode);
+                handleHook('created', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                hooks['beforeMount'] && hooks['beforeMount'](el, binding, vnode, prevVnode);
+                const instance = el.$instance[name];
-                BaseDirective.handleHook(directiveName, 'beforeMount', el, binding, vnode, prevVnode);
+
+                loadBaseStyle();
+                !instance?.isUnstyled && instance?.$css?.loadStyle();
+                handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {
-                hooks['mounted'] && hooks['mounted'](el, binding, vnode, prevVnode);
+                handleHook('mounted', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'mounted', el, binding, vnode, prevVnode);
             },
             beforeUpdate: (el, binding, vnode, prevVnode) => {
-                hooks['beforeUpdate'] && hooks['beforeUpdate'](el, binding, vnode, prevVnode);
+                handleHook('beforeUpdate', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'beforeUpdate', el, binding, vnode, prevVnode);
             },
             updated: (el, binding, vnode, prevVnode) => {
-                hooks['updated'] && hooks['updated'](el, binding, vnode, prevVnode);
+                handleHook('updated', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'updated', el, binding, vnode, prevVnode);
             },
             beforeUnmount: (el, binding, vnode, prevVnode) => {
-                hooks['beforeUnmount'] && hooks['beforeUnmount'](el, binding, vnode, prevVnode);
+                handleHook('beforeUnmount', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'beforeUnmount', el, binding, vnode, prevVnode);
             },
             unmounted: (el, binding, vnode, prevVnode) => {
-                hooks['unmounted'] && hooks['unmounted'](el, binding, vnode, prevVnode);
+                handleHook('unmounted', el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'unmounted', el, binding, vnode, prevVnode);
             }
         };
     },
-    handleHook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
+    extend: (...args) => {
-        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
+        const [name, options] = BaseDirective._getMeta(...args);
-        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
 
-        // global pt hook
+        return {
-        _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
+            extend: (..._args) => {
-        // options pt hook
+                const [_name, _options] = BaseDirective._getMeta(..._args);
-        binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
+
+                return BaseDirective.extend(_name, { ...options, ...options?.methods, ..._options });
             },
-    handleCSS: (directiveName, el, binding) => {
+            ...BaseDirective._extend(name, options)
-        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
+        };
-        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
-        let ptCSSOptions = [];
-
-        // global pt css
-        _directive && _directive.css && ptCSSOptions.push(_directive.css);
-        // options pt css
-        binding.value && binding.value.pt && binding.value.pt.css && ptCSSOptions.push(binding.value.pt.css);
-
-        for (let option of ptCSSOptions) {
-            Object.entries(option).forEach(([key, value]) => {
-                let styledElement;
-
-                if (key === 'root' && directiveName !== 'badge') styledElement = el;
-                else {
-                    styledElement = DomHandler.findSingle(el, `[data-pc-section="${ObjectUtils.convertToFlatCase(key)}"]`);
-                }
-
-                value.class && DomHandler.addMultipleClasses(styledElement, value.class);
-                value.style && DomHandler.addStyles(styledElement, value.style);
-            });
-        }
     }
 };
+
+export default BaseDirective;

components/lib/basedirective/package.json

@@ -1,6 +1,5 @@
 {
     "main": "./basedirective.cjs.js",
     "module": "./basedirective.esm.js",
-    "unpkg": "./basedirective.min.js",
+    "unpkg": "./basedirective.min.js"
-    "types": "./BaseDirective.d.ts"
 }

components/lib/blockui/BaseBlockUI.vue

@@ -28,7 +28,7 @@ const classes = {
     root: 'p-blockui-container'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_blockui_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
 
 export default {
     name: 'BaseBlockUI',

components/lib/blockui/BlockUI.vue

@@ -38,7 +38,7 @@ export default {
                 this.mask = document.createElement('div');
                 !this.isUnstyled && this.mask.setAttribute('class', styleClass);
                 document.body.appendChild(this.mask);
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
             } else {
                 this.mask = document.createElement('div');
@@ -65,7 +65,7 @@ export default {
             if (this.fullScreen) {
                 if (!this.isUnstyled) {
                     document.body.removeChild(this.mask);
-                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 }
             } else {
                 this.$refs.container.removeChild(this.mask);

components/lib/breadcrumb/BaseBreadcrumb.vue

@@ -53,7 +53,7 @@ const classes = {
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
 
 export default {
     name: 'BaseBreadcrumb',

components/lib/button/BaseButton.vue

@@ -103,16 +103,10 @@ const classes = {
             'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
         }
     ],
-    label: 'p-button-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 });
+const { load: loadStyle } = useStyle(styles, { name: 'button', manual: true });
 
 export default {
     name: 'BaseButton',

components/lib/button/Button.css

@@ -1,68 +0,0 @@
-.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;
-}

components/lib/button/Button.vue

@@ -9,7 +9,7 @@
                 <span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
             </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="[cx('badge'), badgeClass]" v-bind="ptm('badge')">{{ badge }}</span>
+            <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
         </slot>
     </button>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
+import Badge from 'primevue/badge';
 import BaseButton from './BaseButton.vue';
 
 export default {
@@ -43,7 +44,8 @@ export default {
         }
     },
     components: {
-        SpinnerIcon
+        SpinnerIcon,
+        Badge
     },
     directives: {
         ripple: Ripple

components/lib/calendar/BaseCalendar.vue

@@ -200,13 +200,10 @@ const classes = {
     weekLabelContainer: 'p-disabled',
     day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
     dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }],
-    hiddenSelectedDay: 'p-hidden-accessible',
     monthPicker: 'p-monthpicker',
     month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
-    hiddenMonth: 'p-hidden-accessible',
     yearPicker: 'p-yearpicker',
     year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
-    hiddenYear: 'p-hidden-accessible',
     timePicker: 'p-timepicker',
     hourPicker: 'p-hour-picker',
     incrementButton: 'p-link',
@@ -222,7 +219,7 @@ const classes = {
     clearButton: 'p-button-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
 
 export default {
     name: 'BaseCalendar',

components/lib/calendar/Calendar.vue

@@ -165,7 +165,7 @@
                                                     >
                                                         <slot name="date" :date="date">{{ date.day }}</slot>
                                                     </span>
-                                                    <div v-if="isSelected(date)" :class="cx('hiddenSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
+                                                    <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
                                                         {{ date.day }}
                                                     </div>
                                                 </td>
@@ -188,7 +188,7 @@
                                 :data-p-highlight="isMonthSelected(i)"
                             >
                                 {{ m.value }}
-                                <div v-if="isMonthSelected(i)" :class="cx('hiddenMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
+                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
                                     {{ m.value }}
                                 </div>
                             </span>
@@ -206,7 +206,7 @@
                                 :data-p-highlight="isYearSelected(y.value)"
                             >
                                 {{ y.value }}
-                                <div v-if="isYearSelected(y.value)" :class="cx('hiddenYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
+                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
                                     {{ y.value }}
                                 </div>
                             </span>
@@ -1543,8 +1543,7 @@ export default {
                 this.mask.addEventListener('click', this.maskClickListener);
 
                 document.body.appendChild(this.mask);
-                document.body.setAttribute('data-p-overflow-hidden', 'true');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         disableModality() {
@@ -1578,8 +1577,7 @@ export default {
             }
 
             if (!hasBlockerMasks) {
-                document.body.removeAttribute('data-p-overflow-hidden');
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         updateCurrentMetaData() {

components/lib/carousel/BaseCarousel.vue

@@ -128,7 +128,7 @@ const classes = {
     footer: 'p-carousel-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_carousel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
 
 export default {
     name: 'BaseCarousel',

components/lib/cascadeselect/BaseCascadeSelect.vue

@@ -100,7 +100,6 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     label: ({ instance, props }) => [
         'p-cascadeselect-label p-inputtext',
         {
@@ -111,7 +110,6 @@ const classes = {
     dropdownButton: 'p-cascadeselect-trigger',
     loadingIcon: 'p-cascadeselect-trigger-icon',
     dropdownIcon: 'p-cascadeselect-trigger-icon',
-    hiddenSearchResult: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-cascadeselect-panel p-component',
         {
@@ -120,7 +118,6 @@ const classes = {
         }
     ],
     wrapper: 'p-cascadeselect-items-wrapper',
-    hiddenSelectedMessage: 'p-hidden-accessible',
     list: 'p-cascadeselect-panel p-cascadeselect-items',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
@@ -137,7 +134,7 @@ const classes = {
     sublist: 'p-cascadeselect-sublist'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
 
 export default {
     name: 'BaseCascadeSelect',

components/lib/cascadeselect/CascadeSelect.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')" data-pc-name="cascadeselect">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -38,7 +38,7 @@
                 <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -65,7 +65,7 @@
                             :pt="pt"
                         />
                     </div>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                 </div>

components/lib/chart/BaseChart.vue

@@ -12,7 +12,7 @@ const classes = {
     root: 'p-chart'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chart_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
 
 export default {
     name: 'BaseChart',

components/lib/checkbox/BaseCheckbox.vue

@@ -31,7 +31,6 @@ const classes = {
             'p-checkbox-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     input: ({ instance, props }) => [
         'p-checkbox-box',
         {
@@ -43,7 +42,7 @@ const classes = {
     icon: 'p-checkbox-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'checkbox', manual: true });
 
 export default {
     name: 'BaseCheckbox',

components/lib/checkbox/Checkbox.css

@@ -1,17 +0,0 @@
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: default;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}

components/lib/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" @click="onClick($event)" v-bind="getPTOptions('root')" data-pc-name="checkbox">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 :id="inputId"

components/lib/chip/BaseChip.vue

@@ -38,7 +38,7 @@ const classes = {
     removeIcon: 'p-chip-remove-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chip_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
 
 export default {
     name: 'BaseChip',

components/lib/chips/BaseChips.vue

@@ -67,7 +67,7 @@ const classes = {
     inputToken: 'p-chips-input-token'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
 
 export default {
     name: 'BaseChips',

components/lib/colorpicker/BaseColorPicker.vue

@@ -4,11 +4,11 @@ import { useStyle } from 'primevue/usestyle';
 
 const styles = `
 .p-colorpicker-panel .p-colorpicker-color {
-    background: transparent url("./images/color.png") no-repeat left top;
+    background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
 }
 
 .p-colorpicker-panel .p-colorpicker-hue {
-    background: transparent url("./images/hue.png") no-repeat left top;
+    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
 }
 `;
 
@@ -32,7 +32,7 @@ const classes = {
     hueHandle: 'p-colorpicker-hue-handle'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
 
 export default {
     name: 'BaseColorPicker',

components/lib/colorpicker/ColorPicker.css

@@ -1,7 +0,0 @@
-.p-colorpicker-panel .p-colorpicker-color {
-     background: transparent url("./images/color.png") no-repeat left top; 
-}
-
-.p-colorpicker-panel .p-colorpicker-hue {
-    background: transparent url("./images/hue.png") no-repeat left top; 
-}

components/lib/common/Common.css

@@ -1,168 +0,0 @@
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-
-.p-hidden {
-    display: none;
-}
-
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled, .p-disabled * {
-    cursor: default !important;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-overflow-hidden {
-    overflow: hidden;
-}
-
-.p-unselectable-text {
-    user-select: none;
-}
-
-.p-scrollbar-measure {
-    width: 100px;
-    height: 100px;
-    overflow: scroll;
-    position: absolute;
-    top: -9999px;
-}
-
-@-webkit-keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-@keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-input[type="file"]::-webkit-file-upload-button,
-button {
-    border-radius: 0;
-}
-
-.p-link {
-	text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-	cursor: default;
-}
-
-/* Non vue overlay animations */
-.p-connected-overlay {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-visible {
-    opacity: 1;
-    transform: scaleY(1);
-}
-
-.p-connected-overlay-hidden {
-    opacity: 0;
-    transform: scaleY(1);
-    transition: opacity .1s linear;
-}
-
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
-.p-connected-overlay-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-leave-active {
-    transition: opacity .1s linear;
-}
-
-/* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
-    max-height: 0;
-}
-
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
-    max-height: 1000px;
-}
-
-.p-toggleable-content-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-toggleable-content-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
-
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
-}

components/lib/confirmpopup/BaseConfirmPopup.vue

@@ -90,7 +90,7 @@ const classes = {
     acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_confirmpopup_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'confirmpopup', manual: true });
 
 export default {
     name: 'BaseConfirmPopup',

components/lib/contextmenu/BaseContextMenu.vue

@@ -77,7 +77,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
 
 export default {
     name: 'BaseContextMenu',

components/lib/datatable/BaseDataTable.vue

@@ -309,7 +309,6 @@ const classes = {
             'p-disabled': instance.disabled
         }
     ],
-    hiddenHeaderInputWrapper: 'p-hidden-accessible',
     headerCheckbox: ({ instance }) => [
         'p-checkbox-box p-component',
         {
@@ -423,7 +422,6 @@ const classes = {
             'p-checkbox-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     checkbox: ({ instance }) => [
         'p-checkbox-box p-component',
         {
@@ -465,7 +463,7 @@ const classes = {
     reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_datatable_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'datatable', manual: true });
 
 export default {
     name: 'BaseDataTable',

components/lib/datatable/HeaderCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
-        <div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"

components/lib/datatable/RowCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"

components/lib/datatable/RowRadioButton.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
         </div>
         <div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">

components/lib/dialog/BaseDialog.vue

@@ -203,7 +203,7 @@ const classes = {
     footer: 'p-dialog-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dialog_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
 
 export default {
     name: 'BaseDialog',

components/lib/dialog/Dialog.vue

@@ -189,19 +189,19 @@ export default {
 
             if (!this.modal) {
                 if (this.maximized) {
-                    !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                    DomHandler.addClass(document.body, 'p-overflow-hidden');
                 } else {
-                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 }
             }
         },
         enableDocumentSettings() {
-            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
+            if (this.modal || (this.maximizable && this.maximized)) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         unbindDocumentState() {
-            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
+            if (this.modal || (this.maximizable && this.maximized)) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },

components/lib/divider/BaseDivider.vue

@@ -104,7 +104,7 @@ const classes = {
     content: 'p-divider-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'divider', manual: true });
 
 export default {
     name: 'BaseDivider',

components/lib/dock/BaseDock.vue

@@ -137,7 +137,7 @@ const classes = {
     icon: 'p-dock-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dock_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dock', manual: true });
 
 export default {
     name: 'BaseDock',

components/lib/dropdown/BaseDropdown.vue

@@ -127,12 +127,10 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-dropdown-header',
     filterContainer: 'p-dropdown-filter-container',
     filterInput: 'p-dropdown-filter p-inputtext p-component',
     filterIcon: 'p-dropdown-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     wrapper: 'p-dropdown-items-wrapper',
     list: 'p-dropdown-items',
     itemGroup: 'p-dropdown-item-group',
@@ -144,13 +142,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-dropdown-empty-message',
+    emptyMessage: 'p-dropdown-empty-message'
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dropdown', manual: true });
 
 export default {
     name: 'BaseDropdown',

components/lib/dropdown/Dropdown.vue

@@ -66,8 +66,7 @@
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenFirstFocusableEl')"
+                        class="p-hidden-accessible p-hidden-focusable"
-                        :style="sx('hiddenAccessible', isUnstyled)"
                         :tabindex="0"
                         @focus="onFirstHiddenFocus"
                         v-bind="ptm('hiddenFirstFocusableEl')"
@@ -97,7 +96,7 @@
                                 <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+                        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
                     </div>
@@ -131,17 +130,10 @@
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         </li>
                                     </template>
-                                    <li
+                                    <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
-                                        v-if="filterValue && (!items || (items && items.length === 0))"
-                                        :class="cx('emptyMessage')"
-                                        :style="sx('hiddenAccessible', isUnstyled)"
-                                        role="option"
-                                        v-bind="ptm('emptyMessage')"
-                                        :data-p-hidden-accessible="true"
-                                    >
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
+                                    <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -152,26 +144,17 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
-                        v-if="!options || (options && options.length === 0)"
-                        role="status"
-                        aria-live="polite"
-                        :class="cx('emptyHiddenMessage')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
-                        v-bind="ptm('hiddenEmptyMessage')"
-                        :data-p-hidden-accessible="true"
-                    >
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenLastFocusableEl')"
+                        class="p-hidden-accessible p-hidden-focusable"
-                        :style="sx('hiddenAccessible', isUnstyled)"
                         :tabindex="0"
                         @focus="onLastHiddenFocus"
                         v-bind="ptm('hiddenLastFocusableEl')"

components/lib/editor/BaseEditor.vue

@@ -970,7 +970,7 @@ const classes = {
     content: 'p-editor-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
 
 export default {
     name: 'BaseEditor',

components/lib/fieldset/BaseFieldset.vue

@@ -38,7 +38,7 @@ const classes = {
     content: 'p-fieldset-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'fieldset', manual: true });
 
 export default {
     name: 'BaseFieldset',

components/lib/fileupload/BaseFileUpload.vue

@@ -75,7 +75,7 @@ const classes = {
     removeButton: 'p-fileupload-file-remove'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_fileupload_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'fileupload', manual: true });
 
 export default {
     name: 'BaseFileUpload',

components/lib/focustrap/BaseFocusTrap.js

@@ -0,0 +1,5 @@
+import BaseDirective from 'primevue/basedirective';
+
+const BaseFocusTrap = BaseDirective.extend({});
+
+export default BaseFocusTrap;

components/lib/focustrap/FocusTrap.js

@@ -1,7 +1,32 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BaseFocusTrap from './BaseFocusTrap';
 
-function bind(el, binding) {
+const FocusTrap = BaseFocusTrap.extend('focustrap', {
+    mounted(el, binding) {
+        const { disabled } = binding.value || {};
+
+        if (!disabled) {
+            this.createHiddenFocusableElements(el, binding);
+            this.bind(el, binding);
+            this.autoFocus(el, binding);
+        }
+
+        DomHandler.setAttributes(el, {
+            'p-bind': this.ptm('root')
+        });
+
+        this.$el = el;
+    },
+    updated(el, binding) {
+        const { disabled } = binding.value || {};
+
+        disabled && this.unbind(el);
+    },
+    unmounted(el) {
+        this.unbind(el);
+    },
+    methods: {
+        bind(el, binding) {
             const { onFocusIn, onFocusOut } = binding.value || {};
 
             el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
@@ -28,23 +53,20 @@ function bind(el, binding) {
 
             el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
             el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
-}
+        },
-
+        unbind(el) {
-function unbind(el) {
             el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
             el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
             el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
-}
+        },
-
+        autoFocus(el, binding) {
-function autoFocus(el, binding) {
             const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
             let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`);
 
             autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`));
             DomHandler.focus(focusableElement);
-}
+        },
-
+        onFirstHiddenElementFocus(event) {
-function onFirstHiddenElementFocus(event) {
             const { currentTarget, relatedTarget } = event;
             const focusableElement =
                 relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
@@ -52,9 +74,8 @@ function onFirstHiddenElementFocus(event) {
                     : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
 
             DomHandler.focus(focusableElement);
-}
+        },
-
+        onLastHiddenElementFocus(event) {
-function onLastHiddenElementFocus(event) {
             const { currentTarget, relatedTarget } = event;
             const focusableElement =
                 relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
@@ -62,39 +83,24 @@ function onLastHiddenElementFocus(event) {
                     : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
 
             DomHandler.focus(focusableElement);
-}
+        },
-
+        createHiddenFocusableElements(el, binding) {
-function createHiddenFocusableElements(el, binding) {
             const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
 
             const createFocusableElement = (onFocus) => {
-        const element = document.createElement('span');
+                return DomHandler.createElement('span', {
-
+                    class: 'p-hidden-accessible p-hidden-focusable',
-        if (binding.instance.$primevue && binding.instance.$primevue.config && binding.instance.$primevue.config.unstyled) {
+                    tabIndex,
-            element.style.border = '0';
+                    role: 'presentation',
-            element.style.clip = 'rect(0 0 0 0)';
+                    'aria-hidden': true,
-            element.style.height = '1px';
+                    'data-p-hidden-accessible': true,
-            element.style.margin = '-1px';
+                    'data-p-hidden-focusable': true,
-            element.style.overflow = 'hidden';
+                    onFocus
-            element.style.padding = '0';
+                });
-            element.style.position = 'absolute';
-            element.style.width = '1px';
-        } else {
-            element.classList = 'p-hidden-accessible p-hidden-focusable';
-        }
-
-        element.tabIndex = tabIndex;
-        element.setAttribute('aria-hidden', 'true');
-        element.setAttribute('role', 'presentation');
-        element.setAttribute('data-p-hidden-accessible', true);
-        element.setAttribute('data-p-hidden-focusable', true);
-        element.addEventListener('focus', onFocus);
-
-        return element;
             };
 
-    const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
+            const firstFocusableElement = createFocusableElement(this.onFirstHiddenElementFocus);
-    const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
+            const lastFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);
 
             firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
             firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
@@ -107,31 +113,6 @@ function createHiddenFocusableElements(el, binding) {
             el.prepend(firstFocusableElement);
             el.append(lastFocusableElement);
         }
-
-const FocusTrap = BaseDirective.extend('focustrap', {
-    mounted(el, binding) {
-        const { disabled } = binding.value || {};
-
-        if (!disabled) {
-            createHiddenFocusableElements(el, binding);
-            bind(el, binding);
-            autoFocus(el, binding);
-        }
-
-        el.setAttribute('data-pc-section', 'root');
-        el.setAttribute('data-pc-name', 'focustrap');
-
-        el.$pEl = el;
-        BaseDirective.handleCSS('focustrap', el, binding);
-    },
-
-    updated(el, binding) {
-        const { disabled } = binding.value || {};
-
-        disabled && unbind(el);
-    },
-    unmounted(el) {
-        unbind(el);
     }
 });
 

components/lib/galleria/BaseGalleria.vue

@@ -371,7 +371,7 @@ const classes = {
     nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_galleria_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'galleria', manual: true });
 
 export default {
     name: 'BaseGalleria',

components/lib/galleria/Galleria.vue

@@ -35,8 +35,7 @@ export default {
     },
     beforeUnmount() {
         if (this.fullScreen) {
-            document.body.setAttribute('data-p-overflow-hidden', 'false');
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
 
         this.mask = null;
@@ -52,8 +51,7 @@ export default {
         },
         onEnter(el) {
             this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
-            document.body.setAttribute('data-p-overflow-hidden', 'true');
+            DomHandler.addClass(document.body, 'p-overflow-hidden');
-            !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
             this.focus();
         },
         onBeforeLeave() {
@@ -62,8 +60,7 @@ export default {
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
             this.containerVisible = false;
-            document.body.setAttribute('data-p-overflow-hidden', 'false');
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
         onActiveItemChange(index) {
             if (this.activeIndex !== index) {

components/lib/image/BaseImage.vue

@@ -97,7 +97,7 @@ const classes = {
     preview: 'p-image-preview'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_image_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'image', manual: true });
 
 export default {
     name: 'BaseImage',

components/lib/inlinemessage/BaseInlineMessage.vue

@@ -26,7 +26,7 @@ const classes = {
     text: 'p-inline-message-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inlinemessage_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inlinemessage', manual: true });
 
 export default {
     name: 'BaseInlineMessage',

components/lib/inplace/BaseInplace.vue

@@ -28,7 +28,7 @@ const classes = {
     content: 'p-inplace-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inplace_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inplace', manual: true });
 
 export default {
     name: 'BaseInplace',

components/lib/inputnumber/BaseInputNumber.vue

@@ -132,7 +132,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputnumber', manual: true });
 
 export default {
     name: 'BaseInputNumber',

components/lib/inputswitch/BaseInputSwitch.vue

@@ -37,11 +37,10 @@ const classes = {
             'p-focus': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     slider: 'p-inputswitch-slider'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputswitch', manual: true });
 
 export default {
     name: 'BaseInputSwitch',

components/lib/inputswitch/InputSwitch.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" :style="sx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="inputswitch">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 :id="inputId"

components/lib/inputtext/BaseInputText.vue

@@ -116,7 +116,7 @@ const classes = {
     root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputtext', manual: true });
 
 export default {
     name: 'BaseInputText',

components/lib/inputtext/InputText.css

@@ -1,106 +0,0 @@
-.p-inputtext {
-    margin: 0;
-}
-
-.p-fluid .p-inputtext {
-    width: 100%;
-}
-
-/* InputGroup */
-.p-inputgroup {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-inputgroup .p-float-label {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position: relative;
-}
-
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
-
-.p-float-label textarea ~ label {
-    top: 1rem;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-    top: -.75rem;
-    font-size: 12px;
-}
-
-.p-float-label .input:-webkit-autofill ~ label {
-    top: -20px;
-    font-size: 12px;
-}
-
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-    position: relative;
-    display: inline-block;
-}
-
-.p-input-icon-left > i,
-.p-input-icon-left > svg,
-.p-input-icon-right > i,
-.p-input-icon-right > svg {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
-}
-
-.p-fluid .p-input-icon-left,
-.p-fluid .p-input-icon-right {
-    display: block;
-    width: 100%;
-}

components/lib/knob/BaseKnob.vue

@@ -30,7 +30,7 @@ const classes = {
     label: 'p-knob-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'knob', manual: true });
 
 export default {
     name: 'BaseKnob',

components/lib/listbox/BaseListbox.vue

@@ -46,12 +46,10 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-listbox-header',
     filterContainer: 'p-listbox-filter-container',
     filterInput: 'p-listbox-filter p-inputtext p-component',
     filterIcon: 'p-listbox-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     wrapper: 'p-listbox-list-wrapper',
     list: 'p-listbox-list',
     itemGroup: 'p-listbox-item-group',
@@ -63,13 +61,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-listbox-empty-message',
+    emptyMessage: 'p-listbox-empty-message'
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'listbox', manual: true });
 
 export default {
     name: 'BaseListbox',

components/lib/listbox/Listbox.vue

@@ -4,8 +4,7 @@
             ref="firstHiddenFocusableElement"
             role="presentation"
             aria-hidden="true"
-            :class="cx('hiddenFirstFocusableEl')"
+            class="p-hidden-accessible p-hidden-focusable"
-            :style="sx('hiddenAccessible', isUnstyled)"
             :tabindex="!disabled ? tabindex : -1"
             @focus="onFirstHiddenFocus"
             v-bind="ptm('hiddenFirstFocusableEl')"
@@ -36,7 +35,7 @@
                     <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                 </slot>
             </div>
-            <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                 {{ filterResultMessageText }}
             </span>
         </div>
@@ -102,18 +101,17 @@
             </VirtualScroller>
         </div>
         <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" :class="cx('hiddenEmptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
+        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
             {{ emptyMessageText }}
         </span>
-        <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
             {{ selectedMessageText }}
         </span>
         <span
             ref="lastHiddenFocusableElement"
             role="presentation"
             aria-hidden="true"
-            :class="cx('hiddenLastFocusableEl')"
+            class="p-hidden-accessible p-hidden-focusable"
-            :style="sx('hiddenAccessible', isUnstyled)"
             :tabindex="!disabled ? tabindex : -1"
             @focus="onLastHiddenFocus"
             v-bind="ptm('hiddenLastFocusableEl')"

components/lib/megamenu/BaseMegaMenu.vue

@@ -189,7 +189,7 @@ const classes = {
     end: 'p-megamenu-end'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'megamenu', manual: true });
 
 export default {
     name: 'BaseMegaMenu',

components/lib/menu/BaseMenu.vue

@@ -56,7 +56,7 @@ const classes = {
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'menu', manual: true });
 
 export default {
     name: 'BaseMenu',

components/lib/menubar/BaseMenubar.vue

@@ -114,7 +114,7 @@ const classes = {
     end: 'p-menubar-end'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'menubar', manual: true });
 
 export default {
     name: 'BaseMenubar',

components/lib/message/BaseMessage.vue

@@ -57,7 +57,7 @@ const classes = {
     buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_message_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
 
 export default {
     name: 'BaseMessage',

components/lib/multiselect/BaseMultiSelect.vue

@@ -126,7 +126,6 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     labelContainer: 'p-multiselect-label-container',
     label: ({ instance, props }) => [
         'p-multiselect-label',
@@ -148,7 +147,6 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-multiselect-header',
     headerCheckboxContainer: ({ instance }) => [
         'p-checkbox p-component',
@@ -157,7 +155,6 @@ const classes = {
             'p-checkbox-focused': instance.headerCheckboxFocused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     headerCheckbox: ({ instance }) => [
         'p-checkbox-box',
         {
@@ -169,7 +166,6 @@ const classes = {
     filterContainer: 'p-multiselect-filter-container',
     filterInput: 'p-multiselect-filter p-inputtext p-component',
     filterIcon: 'p-multiselect-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     closeButton: 'p-multiselect-close p-link',
     closeIcon: 'p-multiselect-close-icon',
     wrapper: 'p-multiselect-items-wrapper',
@@ -186,13 +182,10 @@ const classes = {
     checkboxContainer: 'p-checkbox p-component',
     checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
     checkboxIcon: 'p-checkbox-icon',
-    emptyMessage: 'p-multiselect-empty-message',
+    emptyMessage: 'p-multiselect-empty-message'
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'multiselect', manual: true });
 
 export default {
     name: 'BaseMultiSelect',

components/lib/multiselect/MultiSelect.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="multiselect">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -59,8 +59,7 @@
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenFirstFocusableEl')"
+                        class="p-hidden-accessible p-hidden-focusable"
-                        :style="sx('hiddenAccessible', isUnstyled)"
                         :tabindex="0"
                         @focus="onFirstHiddenFocus"
                         v-bind="ptm('hiddenFirstFocusableEl')"
@@ -70,7 +69,7 @@
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="(showToggleAll && selectionLimit == null) || filter" :class="cx('header')" v-bind="ptm('header')">
                         <div v-if="showToggleAll && selectionLimit == null" :class="cx('headerCheckboxContainer')" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
-                            <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+                            <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
                                 <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
                             </div>
                             <div :class="cx('headerCheckbox')" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
@@ -100,7 +99,7 @@
                                 <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span v-if="filter" role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
                         <button v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
@@ -166,26 +165,17 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
-                        v-if="!options || (options && options.length === 0)"
-                        role="status"
-                        aria-live="polite"
-                        :class="cx('hiddenEmptyMessage')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
-                        v-bind="ptm('hiddenEmptyMessage')"
-                        :data-p-hidden-accessible="true"
-                    >
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenLastFocusableEl')"
+                        class="p-hidden-accessible p-hidden-focusable"
-                        :style="sx('hiddenAccessible', isUnstyled)"
                         :tabindex="0"
                         @focus="onLastHiddenFocus"
                         v-bind="ptm('hiddenLastFocusableEl')"

components/lib/orderlist/BaseOrderList.vue

@@ -62,7 +62,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_orderlist_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'orderlist', manual: true });
 
 export default {
     name: 'BaseOrderList',

components/lib/organizationchart/BaseOrganizationChart.vue

@@ -71,7 +71,7 @@ const classes = {
     nodes: 'p-organizationchart-nodes'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_organizationchart_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'organizationchart', manual: true });
 
 export default {
     name: 'BaseOrganizationChart',

components/lib/overlaypanel/BaseOverlayPanel.vue

@@ -87,7 +87,7 @@ const classes = {
     closeIcon: 'p-overlaypanel-close-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_overlaypanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'overlaypanel', manual: true });
 
 export default {
     name: 'BaseOverlayPanel',

components/lib/paginator/BasePaginator.vue

@@ -95,7 +95,7 @@ const classes = {
     jumpToPageInput: 'p-paginator-page-input'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'paginator', manual: true });
 
 export default {
     name: 'BasePaginator',

components/lib/panel/BasePanel.vue

@@ -40,7 +40,7 @@ const classes = {
     footer: 'p-panel-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'panel', manual: true });
 
 export default {
     name: 'BasePanel',

components/lib/panelmenu/BasePanelMenu.vue

@@ -82,7 +82,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'panelmenu', manual: true });
 
 export default {
     name: 'BasePanelMenu',

components/lib/password/BasePassword.vue

@@ -50,7 +50,6 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    hiddenAccesible: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-password-panel p-component',
         {
@@ -63,7 +62,7 @@ const classes = {
     info: 'p-password-info'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'password', manual: true });
 
 export default {
     name: 'BasePassword',

components/lib/password/Password.vue

@@ -28,7 +28,7 @@
         <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
             <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
         </slot>
-        <span :class="cx('hiddenAccesible')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
+        <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
             {{ infoText }}
         </span>
         <Portal :appendTo="appendTo">

components/lib/picklist/BasePickList.vue

@@ -63,7 +63,7 @@ const classes = {
     targetControls: 'p-picklist-buttons p-picklist-target-controls'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_picklist_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'picklist', manual: true });
 
 export default {
     name: 'BasePickList',

components/lib/progressbar/BaseProgressBar.vue

@@ -126,7 +126,7 @@ const classes = {
     label: 'p-progressbar-label'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressbar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'progressbar', manual: true });
 
 export default {
     name: 'BaseProgressBar',

components/lib/progressspinner/BaseProgressSpinner.vue

@@ -36,7 +36,7 @@ const classes = {
     circle: 'p-progress-spinner-circle'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressspinner_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'progressspinner', manual: true });
 
 export default {
     name: 'BaseProgressSpinner',

components/lib/radiobutton/BaseRadioButton.vue

@@ -44,7 +44,6 @@ const classes = {
             'p-radiobutton-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     input: ({ instance, props }) => [
         'p-radiobutton-box',
         {
@@ -56,7 +55,7 @@ const classes = {
     icon: 'p-radiobutton-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_radiobutton_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'radiobutton', manual: true });
 
 export default {
     name: 'BaseRadioButton',

components/lib/radiobutton/RadioButton.css

@@ -1,30 +0,0 @@
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton.p-radiobutton-disabled {
-    cursor: default;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}

components/lib/radiobutton/RadioButton.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="radiobutton">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="ptm('hiddenInput')" />
         </div>
         <div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">

components/lib/rating/BaseRating.vue

@@ -34,7 +34,6 @@ const classes = {
             'p-focus': instance.focusedOptionIndex === 0
         }
     ],
-    hiddenCancelInputWrapper: 'p-hidden-accessible',
     cancelIcon: 'p-rating-icon p-rating-cancel',
     item: ({ instance, props, value }) => [
         'p-rating-item',
@@ -43,12 +42,11 @@ const classes = {
             'p-focus': value === instance.focusedOptionIndex
         }
     ],
-    hiddenItemInputWrapper: 'p-hidden-accessible',
     onIcon: 'p-rating-icon',
     offIcon: 'p-rating-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_rating_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'rating', manual: true });
 
 export default {
     name: 'BaseRating',

components/lib/rating/Rating.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="rating">
         <div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')" :data-p-focused="focusedOptionIndex === 0">
-            <span :class="cx('hiddenCancelInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
+            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
                 <input
                     type="radio"
                     value="0"
@@ -22,7 +22,7 @@
         </div>
         <template v-for="value in stars" :key="value">
             <div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
-                <span :class="cx('hiddenItemInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
                         :value="value"

components/lib/ripple/BaseRipple.js

@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-ripple {
     overflow: hidden;
     position: relative;
@@ -26,3 +30,19 @@
         transform: scale(2.5);
     }
 }
+`;
+
+const classes = {
+    root: 'p-ink'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'ripple', manual: true });
+
+const BaseRipple = BaseDirective.extend({
+    css: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseRipple;

components/lib/ripple/Ripple.js

@@ -1,47 +1,55 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler } from 'primevue/utils';
+import BaseRipple from './BaseRipple';
 
-let timeout;
+const Ripple = BaseRipple.extend('ripple', {
+    mounted(el, binding) {
+        const primevue = binding.instance.$primevue;
 
-function bindEvents(el) {
+        if (primevue && primevue.config && primevue.config.ripple) {
-    el.addEventListener('mousedown', onMouseDown);
+            el.$_prippleUnstyled = primevue.config.unstyled || false;
+
+            this.create(el, binding);
+            this.bindEvents(el);
         }
+    },
+    unmounted(el) {
+        this.remove(el);
+    },
+    timeout: undefined,
+    methods: {
+        bindEvents(el) {
+            el.addEventListener('mousedown', this.onMouseDown.bind(this));
+        },
+        unbindEvents(el) {
+            el.removeEventListener('mousedown', this.onMouseDown.bind(this));
+        },
+        create(el, binding) {
+            const ink = DomHandler.createElement('span', {
+                role: 'presentation',
+                'aria-hidden': true,
+                'data-p-ink': true,
+                'data-p-ink-active': false,
+                class: this.cx('root'),
+                onAnimationEnd: this.onAnimationEnd,
+                'p-bind': this.ptm('root')
+            });
 
-function unbindEvents(el) {
-    el.removeEventListener('mousedown', onMouseDown);
-}
-
-function create(el, binding) {
-    let ink = document.createElement('span');
-
-    !el.$_prippleUnstyled && (ink.className = 'p-ink');
-    ink.setAttribute('data-pc-name', 'ripple');
-    ink.setAttribute('data-pc-section', 'root');
-    ink.setAttribute('role', 'presentation');
-    ink.setAttribute('aria-hidden', 'true');
-    ink.setAttribute('data-p-ink', 'true');
-    ink.setAttribute('data-p-ink-active', 'false');
             el.appendChild(ink);
-    el.$pEl = ink;
 
-    ink.addEventListener('animationend', onAnimationEnd);
+            this.$el = ink;
-
+        },
-    BaseDirective.handleCSS('ripple', ink, binding);
+        remove(el) {
-}
+            let ink = this.getInk(el);
-
-function remove(el) {
-    let ink = getInk(el);
 
             if (ink) {
-        unbindEvents(el);
+                this.unbindEvents(el);
-        ink.removeEventListener('animationend', onAnimationEnd);
+                ink.removeEventListener('animationend', this.onAnimationEnd);
                 ink.remove();
             }
-}
+        },
-
+        onMouseDown(event) {
-function onMouseDown(event) {
             let target = event.currentTarget;
-    let ink = getInk(target);
+            let ink = this.getInk(target);
 
             if (!ink || getComputedStyle(ink, null).display === 'none') {
                 return;
@@ -67,24 +75,22 @@ function onMouseDown(event) {
             !target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
             ink.setAttribute('data-p-ink-active', 'true');
 
-    timeout = setTimeout(() => {
+            this.timeout = setTimeout(() => {
                 if (ink) {
                     !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
                     ink.setAttribute('data-p-ink-active', 'false');
                 }
             }, 401);
-}
+        },
-
+        onAnimationEnd(event) {
-function onAnimationEnd(event) {
+            if (this.timeout) {
-    if (timeout) {
+                clearTimeout(this.timeout);
-        clearTimeout(timeout);
             }
 
             !event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
             event.currentTarget.setAttribute('data-p-ink-active', 'false');
-}
+        },
-
+        getInk(el) {
-function getInk(el) {
             for (let i = 0; i < el.children.length; i++) {
                 if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
                     return el.children[i];
@@ -93,21 +99,6 @@ function getInk(el) {
 
             return null;
         }
-
-const Ripple = BaseDirective.extend('ripple', {
-    mounted(el, binding) {
-        const primevue = binding.instance.$primevue;
-
-        if (primevue && primevue.config && primevue.config.ripple) {
-            el.$_prippleUnstyled = primevue.config.unstyled || false;
-
-            create(el, binding);
-            bindEvents(el);
-        }
-    },
-
-    unmounted(el) {
-        remove(el);
     }
 });
 

components/lib/scrollpanel/BaseScrollPanel.vue

@@ -68,7 +68,7 @@ const classes = {
     bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrollpanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'scrollpanel', manual: true });
 
 export default {
     name: 'BaseScrollPanel',

components/lib/scrolltop/BaseScrollTop.vue

@@ -42,7 +42,7 @@ const classes = {
     icon: 'p-scrolltop-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrolltop_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'scrolltop', manual: true });
 
 export default {
     name: 'BaseScrollTop',

components/lib/sidebar/BaseSidebar.vue

@@ -203,7 +203,7 @@ const classes = {
     content: 'p-sidebar-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_sidebar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'sidebar', manual: true });
 
 export default {
     name: 'BaseSidebar',

components/lib/sidebar/Sidebar.vue

@@ -121,16 +121,14 @@ export default {
             }
 
             if (this.blockScroll) {
-                document.body.setAttribute('data-p-overflow-hidden', 'true');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         disableDocumentSettings() {
             this.unbindOutsideClickListener();
 
             if (this.blockScroll) {
-                document.body.setAttribute('data-p-overflow-hidden', 'false');
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         onKeydown(event) {

components/lib/skeleton/BaseSkeleton.vue

@@ -51,7 +51,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_skeleton_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'skeleton', manual: true });
 
 export default {
     name: 'BaseSkeleton',

components/lib/slider/BaseSlider.vue

@@ -60,7 +60,7 @@ const classes = {
     handle: 'p-slider-handle'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_slider_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'slider', manual: true });
 
 export default {
     name: 'BaseSlider',

components/lib/speeddial/BaseSpeedDial.vue

@@ -156,7 +156,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_speeddial_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
 
 export default {
     name: 'BaseSpeedDial',

components/lib/splitbutton/BaseSplitButton.vue

@@ -53,7 +53,7 @@ const classes = {
     menuButton: 'p-splitbutton-menubutton'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitbutton_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'splitbutton', manual: true });
 
 export default {
     name: 'BaseSplitButton',

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 } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'splitter', manual: true });
 
 export default {
     name: 'BaseSplitter',