Merge branch 'primefaces:master' into master

CHANGELOG.md

@@ -1,25 +1,65 @@
 # Changelog
 
+## [3.43.0](https://github.com/primefaces/primevue/tree/3.43.0) (2023-12-05)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.42.0...3.43.0)
+
+**Fixed bugs:**
+
+-   Calendar: Overwrites date when in time-only mode [\#4901](https://github.com/primefaces/primevue/issues/4901)
+-   Binding and ordering pt options defect [\#4921](https://github.com/primefaces/primevue/issues/4921)
+-   Some icons are not displaying from PrimeIcons.js Api file [\#4897](https://github.com/primefaces/primevue/issues/4897)
+-   Treetable lazy load plus pagination toggler icon remain as open [\#4441](https://github.com/primefaces/primevue/issues/4441)
+
+**Implemented New Features and Enhancements:**
+
+-   Add parent param to all pt method options [\#4929](https://github.com/primefaces/primevue/issues/4929)
+-   Media components Accessibility Improvements [\#4908](https://github.com/primefaces/primevue/issues/4908)
+-   Tree: Missing 'filter' event on search [\#4876](https://github.com/primefaces/primevue/issues/4876)
+
+## [3.42.0](https://github.com/primefaces/primevue/tree/3.42.0) (2023-11-28)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.41.1...3.42.0)
+
+**Breaking Changes:**
+
+-   Menu components: width changed as min-width [\#4870](https://github.com/primefaces/primevue/issues/4870)
+
+**Fixed bugs:**
+
+-   Splitter: aria-valuenow calculation defect [\#4889](https://github.com/primefaces/primevue/issues/4889)
+-   Listbox: select-on-focus causes a crash [\#4881](https://github.com/primefaces/primevue/issues/4881)
+-   Listbox: Tab key support defect when filter mode is on [\#4875](https://github.com/primefaces/primevue/issues/4875)
+-   Editor: Readonly prop does not react to any change [\#4872](https://github.com/primefaces/primevue/issues/4872)
+-   DataTable: Type definition doesn't match document [\#4662](https://github.com/primefaces/primevue/issues/4662)
+-   Wrong types issue with aria-label and aria-labelledby Props [\#4511](https://github.com/primefaces/primevue/issues/4511)
+
+**Implemented New Features and Enhancements:**
+
+-   Tree / TreeTable: new loadingMode property [\#4886](https://github.com/primefaces/primevue/issues/4886)
+-   Improve InlineMessage Implementation for Accessibility [\#4880](https://github.com/primefaces/primevue/issues/4880)
+-   Calendar: new iconDisplay property [\#4871](https://github.com/primefaces/primevue/issues/4871)
+
 ## [3.41.1](https://github.com/primefaces/primevue/tree/3.41.1) (2023-11-22)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.41.0...3.41.1)
 
 **Breaking Changes:**
 
--  StyleClass: deprecate enterClass/leaveClass use enterFromClass/leaveFromClass  [\#4866](https://github.com/primefaces/primevue/issues/486&)
+-   StyleClass: deprecate enterClass/leaveClass use enterFromClass/leaveFromClass [\#4866](https://github.com/primefaces/primevue/issues/486&)
--  Listbox: metaKeySelection default changed as true  [\#4865](https://github.com/primefaces/primevue/issues/4865)
+-   Listbox: metaKeySelection default changed as true [\#4865](https://github.com/primefaces/primevue/issues/4865)
 
 **Fixed bugs:**
 
--  DataTable: restore state defect   [\#4855](https://github.com/primefaces/primevue/issues/4855)
+-   DataTable: restore state defect [\#4855](https://github.com/primefaces/primevue/issues/4855)
--  PanelMenu: Menu items with no sub-items toggling border radius  [\#4816](https://github.com/primefaces/primevue/issues/4816)
+-   PanelMenu: Menu items with no sub-items toggling border radius [\#4816](https://github.com/primefaces/primevue/issues/4816)
--  Column: Missing typing for sorticon  [\#4423](https://github.com/primefaces/primevue/issues/4423)
+-   Column: Missing typing for sorticon [\#4423](https://github.com/primefaces/primevue/issues/4423)
 
 **Implemented New Features and Enhancements:**
 
--  Button: new badgeSeverity property   [\#4863](https://github.com/primefaces/primevue/issues/4863)
+-   Button: new badgeSeverity property [\#4863](https://github.com/primefaces/primevue/issues/4863)
--  MegaMenu / Menubar: menubutton templating  [\#4862](https://github.com/primefaces/primevue/issues/4862)
+-   MegaMenu / Menubar: menubutton templating [\#4862](https://github.com/primefaces/primevue/issues/4862)
--  Calendar: Week Number customization  [\#4669](https://github.com/primefaces/primevue/issues/4669)
+-   Calendar: Week Number customization [\#4669](https://github.com/primefaces/primevue/issues/4669)
 
 ## [3.41.0](https://github.com/primefaces/primevue/tree/3.41.0) (2023-11-20)
 
@@ -2221,14 +2261,14 @@
 
 **Implemented New Features and Enhancements:**
 
-- v2 DataTable: Frozen column improvements [\#4795](https://github.com/primefaces/primevue/issues/4795)
+-   v2 DataTable: Frozen column improvements [\#4795](https://github.com/primefaces/primevue/issues/4795)
-- TreeTable: Add custom header for column [\#2941](https://github.com/primefaces/primevue/issues/2941)
+-   TreeTable: Add custom header for column [\#2941](https://github.com/primefaces/primevue/issues/2941)
 
 **Fixed bugs:**
 
-- OrderList: order of selection reversed when moving multiple items to top or bottom [\#4700](https://github.com/primefaces/primevue/issues/4700)
+-   OrderList: order of selection reversed when moving multiple items to top or bottom [\#4700](https://github.com/primefaces/primevue/issues/4700)
-- Calendar: Crashes when Tab pressed and calendar overlay is not showing [\#4586](https://github.com/primefaces/primevue/issues/4586)
+-   Calendar: Crashes when Tab pressed and calendar overlay is not showing [\#4586](https://github.com/primefaces/primevue/issues/4586)
-- Calendar: Months are not highlighted with selection-mode="multiple" [\#3988](https://github.com/primefaces/primevue/issues/3988)
+-   Calendar: Months are not highlighted with selection-mode="multiple" [\#3988](https://github.com/primefaces/primevue/issues/3988)
 
 ## [2.10.2](https://github.com/primefaces/primevue/tree/2.10.2) (2023-08-16)
 

assets/data/news.json

@@ -1,8 +1,8 @@
 {
-    "id": 45,
+    "id": 46,
-    "content": "🎉 Black Friday Sale! Up to 50% Off",
+    "content": "Sakai Free Admin Template",
-    "linkText": "Buy Now",
+    "linkText": "View Demo",
-    "linkHref": "https://www.primefaces.org/store",
+    "linkHref": "https://sakai.primefaces.org",
     "backgroundStyle": "background-color:var(--primary-color)",
     "textStyle": "color:var(--primary-color-text);font-weight:500",
     "linkStyle": "color:var(--primary-color-text);font-weight:700;text-decoration: underline;"

assets/menu/menu.json

@@ -448,10 +448,6 @@
                             "name": "Overview",
                             "to": "/theming"
                         },
-                        {
-                            "name": "Visual Editor",
-                            "href": "https://designer.primevue.org"
-                        },
                         {
                             "name": "Colors",
                             "to": "/colors"

components/doc/DocApiTable.vue

@@ -29,14 +29,14 @@
                                 <template v-for="(value, i) in getType(v)" :key="value">
                                     <span v-if="i !== 0" class="doc-option-type">{{ ' | ' }}</span>
                                     <NuxtLink v-if="isLinkType(value)" :to="setLinkPath(value)" class="doc-option-type doc-option-link">{{ value }}</NuxtLink
-                                    ><span v-else class="doc-option-type">{{ value }}</span>
+                                    ><span v-else class="doc-option-type">{{ value === 'T' ? 'any' : value }}</span>
                                 </template>
                             </template>
 
                             <template v-else-if="k === 'options'">
                                 <template v-for="val in v" :key="val.name">
                                     <div class="doc-option-type-options-container">
-                                        {{ val.name }}: <span class="doc-option-type-options doc-option-type">{{ val.type }}</span>
+                                        {{ val.name }}: <span class="doc-option-type-options doc-option-type">{{ val.type === 'T' || (val.type.includes('<T') && !val.type.includes('<Tr')) ? 'any' : val.type }}</span>
                                     </div>
                                 </template>
                             </template>
@@ -111,7 +111,7 @@ export default {
             });
         },
         isLinkType(value) {
-            if (this.label === 'Slots') return false;
+            if (this.label === 'Slots' || value.includes('SharedPassThroughOption') || value.includes('PassThrough<')) return false;
             const validValues = ['confirmationoptions', 'toastmessageoptions'];
 
             return value.toLowerCase().includes(this.id.split('.')[1]) || validValues.includes(value.toLowerCase());

components/doc/codeeditor/templates.js

@@ -2,7 +2,7 @@ import pkg from '../../../package.json';
 import { services } from './services';
 
 const PrimeVue = {
-    version: '^3.40.0',
+    version: '^3.43.0',
     description:
         'PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 400+ ready to use UI blocks to build spectacular applications in no time.'
 };
@@ -60,7 +60,7 @@ const getVueApp = (props = {}, sourceType) => {
 
     if (embedded) {
         // main.js
-        unstyled += `, unstyled: true, pt: Tailwind, ptOptions: { mergeProps: true }`;
+        unstyled += `, unstyled: true, pt: Tailwind`;
         imports += `import Tailwind from 'primevue/passthrough/tailwind';
 import ThemeSwitcher from './components/ThemeSwitcher.vue';`;
         element += `app.component('ThemeSwitcher', ThemeSwitcher);`;

components/doc/helpers/PTHelper.js

@@ -7,10 +7,21 @@ export const getPTOption = (name) => {
 
     for (const [i, prop] of props.entries()) {
         if (options) {
+            let subCompName, subOptions;
+            let hasSubComp = prop.name !== 'hooks' && prop.type.indexOf('TransitionType') === -1 && prop.type.indexOf('<') > -1 && name.toLowerCase() !== prop.type.slice(0, prop.type.indexOf('<')).toLowerCase();
+
+            if (hasSubComp) {
+                subCompName = prop.type.slice(0, prop.type.indexOf('<')).replace('PassThroughOptions', '').replace('PassThroughOptionType', '');
+                subOptions = APIDocs[subCompName.toLowerCase()].interfaces.values[`${subCompName}PassThroughMethodOptions`];
+                const objToReplace = subOptions.props.find((opt) => opt.name === 'parent');
+
+                objToReplace.type = prop.type;
+            }
+
             data.push({
                 value: i + 1,
                 label: prop.name,
-                options: options?.props,
+                options: hasSubComp ? subOptions?.props : options?.props,
                 description: prop.description
             });
         } else {

components/lib/accordion/Accordion.d.ts

@@ -31,6 +31,10 @@ export interface AccordionPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: AccordionState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/accordion/Accordion.vue

@@ -106,6 +106,7 @@ export default {
             const tabMetaData = {
                 props: tab.props || {},
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/accordiontab/AccordionTab.d.ts

@@ -8,7 +8,6 @@
  *
  */
 import { AnchorHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
-import { AccordionPassThroughOptions } from '../accordion';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -29,9 +28,9 @@ export interface AccordionTabPassThroughMethodOptions {
      */
     props: AccordionTabProps;
     /**
-     * Defines parent instance.
+     * Defines parent options.
      */
-    parent: AccordionPassThroughOptions;
+    parent: any;
     /**
      * Defines current options.
      */

components/lib/api/PrimeIcons.js

@@ -193,20 +193,20 @@ const PrimeIcons = {
     SLIDERS_V: 'pi pi-sliders-v',
     SORT: 'pi pi-sort',
     SORT_ALPHA_DOWN: 'pi pi-sort-alpha-down',
-    SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-alt-down',
+    SORT_ALPHA_ALT_DOWN: 'pi pi-sort-alpha-down-alt',
     SORT_ALPHA_UP: 'pi pi-sort-alpha-up',
-    SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-alt-up',
+    SORT_ALPHA_ALT_UP: 'pi pi-sort-alpha-up-alt',
     SORT_ALT: 'pi pi-sort-alt',
-    SORT_ALT_SLASH: 'pi pi-sort-slash',
+    SORT_ALT_SLASH: 'pi pi-sort-alt-slash',
     SORT_AMOUNT_DOWN: 'pi pi-sort-amount-down',
     SORT_AMOUNT_DOWN_ALT: 'pi pi-sort-amount-down-alt',
     SORT_AMOUNT_UP: 'pi pi-sort-amount-up',
     SORT_AMOUNT_UP_ALT: 'pi pi-sort-amount-up-alt',
     SORT_DOWN: 'pi pi-sort-down',
     SORT_NUMERIC_DOWN: 'pi pi-sort-numeric-down',
-    SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-alt-down',
+    SORT_NUMERIC_ALT_DOWN: 'pi pi-sort-numeric-down-alt',
     SORT_NUMERIC_UP: 'pi pi-sort-numeric-up',
-    SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-alt-up',
+    SORT_NUMERIC_ALT_UP: 'pi pi-sort-numeric-up-alt',
     SORT_UP: 'pi pi-sort-up',
     SPINNER: 'pi pi-spinner',
     STAR: 'pi pi-star',
@@ -216,7 +216,7 @@ const PrimeIcons = {
     STEP_FORWARD: 'pi pi-step-forward',
     STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
     STOP: 'pi pi-stop',
-    STOPWATCH: 'pi pi-stop-watch',
+    STOPWATCH: 'pi pi-stopwatch',
     STOP_CIRCLE: 'pi pi-stop-circle',
     SUN: 'pi pi-sun',
     SYNC: 'pi pi-sync',

components/lib/autocomplete/AutoComplete.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
@@ -38,12 +38,30 @@ export interface AutoCompletePassThroughMethodOptions {
      * Defines current options.
      */
     context: AutoCompleteContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface AutoCompleteSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: AutoCompleteProps;
+    /**
+     * Defines current inline state.
+     */
+    state: AutoCompleteState;
+}
+
 /**
  * Custom change event.
  * @see {@link AutoCompleteEmits.change}
@@ -150,8 +168,9 @@ export interface AutoCompletePassThroughOptions {
     loadingIcon?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
-    dropdownButton?: ButtonPassThroughOptionType;
+    dropdownButton?: ButtonPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the panel's DOM element.
      */

components/lib/avatar/Avatar.d.ts

@@ -7,7 +7,6 @@
  * @module avatar
  */
 import { VNode } from 'vue';
-import { AvatarGroupPassThroughOptions } from '../avatargroup';
 import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
@@ -27,9 +26,9 @@ export interface AvatarPassThroughMethodOptions {
      */
     props: AvatarProps;
     /**
-     * Defines parent instance.
+     * Defines parent options.
      */
-    parent: AvatarGroupPassThroughOptions;
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/avatar/Avatar.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="getPTOptions('root')" data-pc-name="avatar">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar">
         <slot>
-            <span v-if="label" :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+            <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
-            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="getPTOptions('icon')" />
+            <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
-            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="getPTOptions('image')" />
+            <img v-else-if="image" :src="image" :alt="ariaLabel" @error="onError" v-bind="ptm('image')" />
         </slot>
     </div>
 </template>
@@ -19,13 +19,6 @@ export default {
     methods: {
         onError(event) {
             this.$emit('error', event);
-        },
-        getPTOptions(key) {
-            return this.ptm(key, {
-                parent: {
-                    instance: this.$parent
-                }
-            });
         }
     }
 };

components/lib/badge/Badge.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type BadgePassThroughOptionType = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions) => BadgePassThroughAttributes | string) | string | null | undefined;
+export declare type BadgePassThroughOptionType<T = any> = BadgePassThroughAttributes | ((options: BadgePassThroughMethodOptions<T>) => BadgePassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface BadgePassThroughMethodOptions {
+export interface BadgePassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -30,6 +30,10 @@ export interface BadgePassThroughMethodOptions {
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
 }
 
 /**
@@ -43,11 +47,11 @@ export interface BadgePassThroughAttributes {
  * Custom passthrough(pt) options.
  * @see {@link BadgeProps.pt}
  */
-export interface BadgePassThroughOptions {
+export interface BadgePassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: BadgePassThroughOptionType;
+    root?: BadgePassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/badgedirective/BadgeDirective.d.ts

@@ -18,6 +18,10 @@ export declare type BadgeDirectivePassThroughOptionType = BadgeDirectivePassThro
  */
 export interface BadgePassThroughMethodOptions {
     context: BadgeContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/basecomponent/BaseComponent.vue

@@ -202,7 +202,20 @@ export default {
             return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
         },
         $params() {
-            return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
+            const parentInstance = this.$parentInstance || this.$parent;
+
+            return {
+                instance: this,
+                props: this.$props,
+                state: this.$data,
+                parent: {
+                    instance: parentInstance,
+                    props: parentInstance?.$props,
+                    state: parentInstance?.$data
+                },
+                /* @deprecated since v3.43.0. Use the `parent.instance` instead of the `parentInstance`.*/
+                parentInstance
+            };
         },
         $style() {
             return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };

components/lib/blockui/BlockUI.d.ts

@@ -30,6 +30,10 @@ export interface BlockUIPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: BlockUIState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -31,6 +31,10 @@ export interface BreadcrumbPassThroughMethodOptions {
      * Defines current options.
      */
     context: BreadcrumbContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/button/Button.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes | string) | string | null | undefined;
+export declare type ButtonPassThroughOptionType<T = any> = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions<T>) => ButtonPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ButtonPassThroughMethodOptions {
+export interface ButtonPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -33,7 +33,7 @@ export interface ButtonPassThroughMethodOptions {
     /**
      * Defines parent instance.
      */
-    parent: any;
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -44,27 +44,27 @@ export interface ButtonPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link ButtonProps.pt}
  */
-export interface ButtonPassThroughOptions {
+export interface ButtonPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: ButtonPassThroughOptionType;
+    root?: ButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
-    loadingIcon?: ButtonPassThroughOptionType;
+    loadingIcon?: ButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
-    icon?: ButtonPassThroughOptionType;
+    icon?: ButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the label's DOM element.
      */
-    label?: ButtonPassThroughOptionType;
+    label?: ButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the badge's DOM element.
      */
-    badge?: ButtonPassThroughOptionType;
+    badge?: ButtonPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -171,7 +171,7 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Used to pass attributes to DOM elements inside the component.
      * @type {ButtonPassThroughOptions}
      */
-    pt?: PassThrough<ButtonPassThroughOptions>;
+    pt?: PassThrough<ButtonPassThroughOptions<any>>;
     /**
      * Used to configure passthrough(pt) options of the component.
      * @type {PassThroughOptions}

components/lib/button/Button.vue

@@ -26,10 +26,6 @@ export default {
     methods: {
         getPTOptions(key) {
             return this.ptm(key, {
-                parent: {
-                    props: this.$parent?.$props,
-                    state: this.$parent?.$data
-                },
                 context: {
                     disabled: this.disabled
                 }
@@ -41,7 +37,7 @@ export default {
             return this.$attrs.disabled || this.$attrs.disabled === '' || this.loading;
         },
         defaultAriaLabel() {
-            return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+            return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs.ariaLabel;
         },
         hasIcon() {
             return this.icon || this.$slots.icon;

components/lib/calendar/Calendar.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -37,12 +37,30 @@ export interface CalendarPassThroughMethodOptions {
      * Defines current options.
      */
     context: CalendarContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface CalendarSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: CalendarProps;
+    /**
+     * Defines current inline state.
+     */
+    state: CalendarState;
+}
+
 /**
  * Custom Calendar responsive options metadata.
  */
@@ -117,9 +135,9 @@ export interface CalendarPassThroughOptions {
     input?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    dropdownButton?: ButtonPassThroughOptionType;
+    dropdownButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -138,9 +156,9 @@ export interface CalendarPassThroughOptions {
     header?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    previousButton?: ButtonPassThroughOptionType;
+    previousButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the title's DOM element.
      */
@@ -159,9 +177,9 @@ export interface CalendarPassThroughOptions {
     decadeTitle?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    nextButton?: ButtonPassThroughOptionType;
+    nextButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the container's DOM element.
      */
@@ -288,14 +306,14 @@ export interface CalendarPassThroughOptions {
     buttonbar?: CalendarPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    todayButton?: ButtonPassThroughOptionType;
+    todayButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    clearButton?: ButtonPassThroughOptionType;
+    clearButton?: ButtonPassThroughOptions<CalendarSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the aria selected day's DOM element.
      */
@@ -798,6 +816,10 @@ export interface CalendarSlots {
          * Style class of the input icon
          */
         class: any;
+        /**
+         * Click callback
+         */
+        clickCallback: () => void;
     }): VNode[];
     /**
      * Custom previous icon template.

components/lib/calendar/Calendar.vue

@@ -48,7 +48,7 @@
             </template>
         </CalendarButton>
         <template v-else-if="showIcon && iconDisplay === 'input'">
-            <slot name="inputicon" :class="cx('inputIcon')">
+            <slot name="inputicon" :class="cx('inputIcon')" :clickCallback="onButtonClick">
                 <component :is="icon ? 'i' : 'CalendarIcon'" :class="[icon, cx('inputIcon')]" @click="onButtonClick" v-bind="ptm('inputicon')" />
             </slot>
         </template>
@@ -1272,14 +1272,10 @@ export default {
             let formattedValue = null;
 
             if (date) {
-                if (this.timeOnly) {
+                formattedValue = this.formatDate(date, this.datePattern);
-                    formattedValue = this.formatTime(date);
-                } else {
-                    formattedValue = this.formatDate(date, this.datePattern);
 
-                    if (this.showTime) {
+                if (this.showTime || this.timeOnly) {
-                        formattedValue += ' ' + this.formatTime(date);
+                    formattedValue += ' ' + this.formatTime(date);
-                    }
                 }
             }
 
@@ -1798,18 +1794,13 @@ export default {
             let date;
             let parts = text.split(' ');
 
-            if (this.timeOnly) {
+            const dateFormat = this.datePattern;
-                date = new Date();
-                this.populateTime(date, parts[0], parts[1]);
-            } else {
-                const dateFormat = this.datePattern;
 
-                if (this.showTime) {
+            if (this.showTime || this.timeOnly) {
-                    date = this.parseDate(parts[0], dateFormat);
+                date = this.parseDate(parts[0], dateFormat);
-                    this.populateTime(date, parts[1], parts[2]);
+                this.populateTime(date, parts[1], parts[2]);
-                } else {
+            } else {
-                    date = this.parseDate(text, dateFormat);
+                date = this.parseDate(text, dateFormat);
-                }
             }
 
             return date;

components/lib/carousel/Carousel.d.ts

@@ -34,6 +34,10 @@ export interface CarouselPassThroughMethodOptions {
      * Defines current options.
      */
     context: CarouselContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/carousel/Carousel.vue

@@ -101,7 +101,7 @@ import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId, ObjectUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BaseCarousel from './BaseCarousel.vue';
 
 export default {
@@ -453,6 +453,8 @@ export default {
 
                 case 'ArrowUp':
                 case 'ArrowDown':
+                case 'PageUp':
+                case 'PageDown':
                     event.preventDefault();
                     break;
 
@@ -481,7 +483,7 @@ export default {
             this.changedFocusedIndicator(activeIndex, 0);
         },
         onEndKey() {
-            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]r')];
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
             const activeIndex = this.findFocusedIndicatorIndex();
 
             this.changedFocusedIndicator(activeIndex, indicators.length - 1);

components/lib/cascadeselect/CascadeSelect.d.ts

@@ -32,6 +32,10 @@ export interface CascadeSelectPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: CascadeSelectState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/chart/Chart.d.ts

@@ -26,6 +26,10 @@ export interface ChartPassThroughMethodOptions {
      * Defines valid properties.
      */
     props: ChartProps;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/chart/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chart">
+    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="chart">
         <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>

components/lib/chart/style/ChartStyle.js

@@ -1,12 +1,8 @@
 import BaseStyle from 'primevue/base/style';
 
-const css = `
+const inlineStyles = {
-@layer primevue {
+    root: { position: 'relative' }
-    .p-chart {
+};
-        position: relative;
-    }
-}
-`;
 
 const classes = {
     root: 'p-chart'
@@ -14,6 +10,6 @@ const classes = {
 
 export default BaseStyle.extend({
     name: 'chart',
-    css,
+    inlineStyles,
     classes
 });

components/lib/checkbox/Checkbox.d.ts

@@ -34,6 +34,10 @@ export interface CheckboxPassThroughMethodOptions {
      * Defines current options.
      */
     context: CheckboxContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/chip/Chip.d.ts

@@ -30,6 +30,10 @@ export interface ChipPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ChipState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/chips/Chips.d.ts

@@ -30,6 +30,10 @@ export interface ChipsPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ChipsState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/colorpicker/ColorPicker.d.ts

@@ -32,6 +32,10 @@ export interface ColorPickerPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ColorPickerState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/column/Column.d.ts

@@ -11,7 +11,7 @@
 
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { DataTablePassThroughOptions } from '../datatable';
 import { DropdownPassThroughOptionType } from '../dropdown';
 import { PassThroughOptions } from '../passthrough';
@@ -33,9 +33,9 @@ export interface ColumnPassThroughMethodOptions {
      */
     props: ColumnProps;
     /**
-     * Defines parent instance.
+     * Defines parent options.
      */
-    parent: DataTablePassThroughOptions;
+    parent: any;
     /**
      * Defines current options.
      */
@@ -46,6 +46,20 @@ export interface ColumnPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ColumnSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ColumnProps;
+    /**
+     * Defines parent instance.
+     */
+    parent: DataTablePassThroughOptions;
+}
+
 /**
  * Filter model metadata.
  */
@@ -194,7 +208,7 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Dropdown component.
      * @see {@link DropdownPassThroughOptionType}
      */
-    filterOperatorDropdown?: DropdownPassThroughOptionType;
+    filterOperatorDropdown?: DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter constraints' DOM element.
      */
@@ -207,39 +221,39 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Dropdown component.
      * @see {@link DropdownPassThroughOptionType}
      */
-    filterMatchModeDropdown?: DropdownPassThroughOptionType;
+    filterMatchModeDropdown?: DropdownPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter remove button container's DOM element.
      */
     filterRemove?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    filterRemoveButton?: ButtonPassThroughOptionType;
+    filterRemoveButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter add rule's DOM element.
      */
     filterAddRule?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    filterAddRuleButton?: ButtonPassThroughOptionType;
+    filterAddRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter buttonbar's DOM element.
      */
     filterButtonbar?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    filterClearButton?: ButtonPassThroughOptionType;
+    filterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
+     * @see {@link ButtonPassThroughOptions}
      */
-    filterApplyButton?: ButtonPassThroughOptionType;
+    filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the body cell's DOM element.
      */

components/lib/columngroup/ColumnGroup.d.ts

@@ -6,7 +6,6 @@
  * @module columngroup
  */
 import { ComponentHooks } from '../basecomponent';
-import { DataTablePassThroughOptions } from '../datatable';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -25,9 +24,9 @@ export interface ColumnGroupPassThroughMethodOptions {
      */
     props: ColumnGroupProps;
     /**
-     * Defines parent instance.
+     * Defines parent options.
      */
-    parent: DataTablePassThroughOptions;
+    parent: any;
     /**
      * Defines current options.
      */

components/lib/config/PrimeVue.js

@@ -92,7 +92,7 @@ export const defaultOptions = {
             moveToSource: 'Move to Source',
             moveAllToTarget: 'Move All to Target',
             moveAllToSource: 'Move All to Source',
-            pageLabel: '{page}',
+            pageLabel: 'Page {page}',
             firstPageLabel: 'First Page',
             lastPageLabel: 'Last Page',
             nextPageLabel: 'Next Page',

components/lib/confirmdialog/ConfirmDialog.d.ts

@@ -32,12 +32,30 @@ export interface ConfirmDialogPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ConfirmDialogState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ConfirmDialogSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ConfirmDialogProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ConfirmDialogState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link ConfirmDialogProps.pt}
@@ -87,12 +105,12 @@ export interface ConfirmDialogPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    rejectButton?: ButtonPassThroughOptions;
+    rejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    acceptButton?: ButtonPassThroughOptions;
+    acceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/confirmpopup/ConfirmPopup.d.ts

@@ -34,12 +34,30 @@ export interface ConfirmPopupPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ConfirmPopupState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ConfirmPopupSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ConfirmPopupProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ConfirmPopupState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link ConfirmPopupProps.pt}
@@ -69,12 +87,12 @@ export interface ConfirmPopupPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    rejectButton?: ButtonPassThroughOptions;
+    rejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    acceptButton?: ButtonPassThroughOptions;
+    acceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/contextmenu/ContextMenu.d.ts

@@ -38,6 +38,10 @@ export interface ContextMenuPassThroughMethodOptions {
      * Defines current options.
      */
     context: ContextMenuContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/datatable/BodyCell.vue

@@ -222,6 +222,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/ColumnFilter.vue

@@ -330,6 +330,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/DataTable.d.ts

@@ -41,12 +41,30 @@ export interface DataTablePassThroughMethodOptions {
      * Defines current options.
      */
     context: DataTableContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface DataTableSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: DataTableProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DataTableState;
+}
+
 /**
  * Custom datatable export metadata.
  */
@@ -378,7 +396,7 @@ export interface DataTableRowExpandEvent {
     /**
      * Expanded row data
      */
-    data: any[];
+    data: any;
 }
 
 /**
@@ -582,7 +600,7 @@ export interface DataTablePassThroughOptions {
      * Used to pass attributes to the Paginator component.
      * @see {@link PaginatorPassThroughOptionType}
      */
-    paginator?: PaginatorPassThroughOptionType;
+    paginator?: PaginatorPassThroughOptionType<DataTableSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the wrapper's DOM element.
      */

components/lib/datatable/FooterCell.vue

@@ -47,6 +47,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/HeaderCell.vue

@@ -206,6 +206,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/HeaderCheckbox.vue

@@ -50,6 +50,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/RowCheckbox.vue

@@ -55,6 +55,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/RowRadioButton.vue

@@ -40,6 +40,7 @@ export default {
             const columnMetaData = {
                 props: this.column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/TableBody.vue

@@ -310,6 +310,7 @@ export default {
         getColumnPT(key) {
             const columnMetaData = {
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 }

components/lib/datatable/TableFooter.vue

@@ -43,6 +43,7 @@ export default {
             const columnGroupMetaData = {
                 props: this.getColumnGroupProps(),
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },
@@ -61,6 +62,7 @@ export default {
             const rowMetaData = {
                 props: row.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/datatable/TableHeader.vue

@@ -234,6 +234,7 @@ export default {
             const columnGroupMetaData = {
                 props: this.getColumnGroupProps(),
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },
@@ -252,6 +253,7 @@ export default {
             const rowMetaData = {
                 props: row.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },
@@ -269,6 +271,7 @@ export default {
             const columnMetaData = {
                 props: column.props,
                 parent: {
+                    instance: this,
                     props: this.$props,
                     state: this.$data
                 },

components/lib/dataview/DataView.d.ts

@@ -31,11 +31,30 @@ export interface DataViewPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: DataViewState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
+
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface DataViewSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: DataViewProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DataViewState;
+}
+
 /**
  * Custom page event.
  * @see {@link DataViewEmits.page}
@@ -76,7 +95,7 @@ export interface DataViewPassThroughOptions {
      * Used to pass attributes to the Paginator component.
      * @see {@link PaginatorPassThroughOptionType}
      */
-    paginator?: PaginatorPassThroughOptionType;
+    paginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */

components/lib/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -35,6 +35,10 @@ export interface DataViewLayoutOptionsPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: DataViewLayoutOptionsState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/deferredcontent/DeferredContent.d.ts

@@ -30,6 +30,10 @@ export interface DeferredContentPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: DeferredContentState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/dialog/Dialog.d.ts

@@ -12,14 +12,14 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type DialogPassThroughOptionType = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions) => DialogPassThroughAttributes | string) | string | null | undefined;
+export declare type DialogPassThroughOptionType<T = any> = DialogPassThroughAttributes | ((options: DialogPassThroughMethodOptions<T>) => DialogPassThroughAttributes | string) | string | null | undefined;
 
-export declare type DialogPassThroughTransitionType = TransitionProps | ((options: DialogPassThroughMethodOptions) => TransitionProps) | undefined;
+export declare type DialogPassThroughTransitionType<T = any> = TransitionProps | ((options: DialogPassThroughMethodOptions<T>) => TransitionProps) | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface DialogPassThroughMethodOptions {
+export interface DialogPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -32,6 +32,10 @@ export interface DialogPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: DialogState;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -42,51 +46,51 @@ export interface DialogPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link DialogProps.pt}
  */
-export interface DialogPassThroughOptions {
+export interface DialogPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: DialogPassThroughOptionType;
+    root?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the header's DOM element.
      */
-    header?: DialogPassThroughOptionType;
+    header?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the header title's DOM element.
      */
-    title?: DialogPassThroughOptionType;
+    title?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the header icons' DOM element.
      */
-    icons?: DialogPassThroughOptionType;
+    icons?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the maximizable button's DOM element.
      */
-    maximizableButton?: DialogPassThroughOptionType;
+    maximizableButton?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the maximizable icon's DOM element.
      */
-    maximizableIcon?: DialogPassThroughOptionType;
+    maximizableIcon?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the close button's component.
      */
-    closeButton?: DialogPassThroughOptionType;
+    closeButton?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the close button icon's component.
      */
-    closeButtonIcon?: DialogPassThroughOptionType;
+    closeButtonIcon?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
-    content?: DialogPassThroughOptionType;
+    content?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the footer's DOM element.
      */
-    footer?: DialogPassThroughOptionType;
+    footer?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the mask's DOM element.
      */
-    mask?: DialogPassThroughOptionType;
+    mask?: DialogPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -95,7 +99,7 @@ export interface DialogPassThroughOptions {
     /**
      * Used to control Vue Transition API.
      */
-    transition?: DialogPassThroughTransitionType;
+    transition?: DialogPassThroughTransitionType<T>;
 }
 
 /**

components/lib/divider/Divider.d.ts

@@ -26,6 +26,10 @@ export interface DividerPassThroughMethodOptions {
      * Defines valid properties.
      */
     props: DividerProps;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/dock/Dock.d.ts

@@ -35,6 +35,10 @@ export interface DockPassThroughMethodOptions {
      * Defines current options.
      */
     context: DockContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/dropdown/Dropdown.d.ts

@@ -13,14 +13,14 @@ import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 import { VirtualScrollerItemOptions, VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
 
-export declare type DropdownPassThroughOptionType = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions) => DropdownPassThroughAttributes | string) | string | null | undefined;
+export declare type DropdownPassThroughOptionType<T = any> = DropdownPassThroughAttributes | ((options: DropdownPassThroughMethodOptions<T>) => DropdownPassThroughAttributes | string) | string | null | undefined;
 
-export declare type DropdownPassThroughTransitionType = TransitionProps | ((options: DropdownPassThroughMethodOptions) => TransitionProps) | undefined;
+export declare type DropdownPassThroughTransitionType<T = any> = TransitionProps | ((options: DropdownPassThroughMethodOptions<T>) => TransitionProps) | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface DropdownPassThroughMethodOptions {
+export interface DropdownPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -33,6 +33,10 @@ export interface DropdownPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: DropdownState;
+    /**
+     * Defines parent instance.
+     */
+    parent: T | any;
     /**
      * Defines current options.
      */
@@ -77,51 +81,51 @@ export interface DropdownFilterEvent {
  * Custom passthrough(pt) options.
  * @see {@link DropdownProps.pt}
  */
-export interface DropdownPassThroughOptions {
+export interface DropdownPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: DropdownPassThroughOptionType;
+    root?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the input's DOM element.
      */
-    input?: DropdownPassThroughOptionType;
+    input?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the clear icon's DOM element.
      */
-    clearIcon?: DropdownPassThroughOptionType;
+    clearIcon?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the trigger' DOM element.
      */
-    trigger?: DropdownPassThroughOptionType;
+    trigger?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
-    loadingIcon?: DropdownPassThroughOptionType;
+    loadingIcon?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
-    panel?: DropdownPassThroughOptionType;
+    panel?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the header's DOM element.
      */
-    header?: DropdownPassThroughOptionType;
+    header?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the filter container's DOM element.
      */
-    filterContainer?: DropdownPassThroughOptionType;
+    filterContainer?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the filter input's DOM element.
      */
-    filterInput?: DropdownPassThroughOptionType;
+    filterInput?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */
-    filterIcon?: DropdownPassThroughOptionType;
+    filterIcon?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the wrapper's DOM element.
      */
-    wrapper?: DropdownPassThroughOptionType;
+    wrapper?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the VirtualScroller component.
      * @see {@link VirtualScrollerPassThroughOptionType}
@@ -130,39 +134,39 @@ export interface DropdownPassThroughOptions {
     /**
      * Used to pass attributes to the list's DOM element.
      */
-    list?: DropdownPassThroughOptionType;
+    list?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the item group's DOM element.
      */
-    itemGroup?: DropdownPassThroughOptionType;
+    itemGroup?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the item's DOM element.
      */
-    item?: DropdownPassThroughOptionType;
+    item?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
-    emptyMessage?: DropdownPassThroughOptionType;
+    emptyMessage?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the hidden first focusable element's DOM element.
      */
-    hiddenFirstFocusableEl?: DropdownPassThroughOptionType;
+    hiddenFirstFocusableEl?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the hidden filter result's DOM element.
      */
-    hiddenFilterResult?: DropdownPassThroughOptionType;
+    hiddenFilterResult?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the hidden empty message's DOM element.
      */
-    hiddenEmptyMessage?: DropdownPassThroughOptionType;
+    hiddenEmptyMessage?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the hidden selected message's DOM element.
      */
-    hiddenSelectedMessage?: DropdownPassThroughOptionType;
+    hiddenSelectedMessage?: DropdownPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the hidden last focusable element's DOM element.
      */
-    hiddenLastFocusableEl?: DropdownPassThroughOptionType;
+    hiddenLastFocusableEl?: DropdownPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/dropdown/Dropdown.vue

@@ -125,7 +125,7 @@
                                             :data-p-highlight="isSelected(option)"
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
-                                            v-bind="getPTOptions(option, getItemOptions, i, 'item')"
+                                            v-bind="getPTItemOptions(option, getItemOptions, i, 'item')"
                                         >
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         </li>
@@ -253,7 +253,7 @@ export default {
         getOptionRenderKey(option, index) {
             return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
         },
-        getPTOptions(option, itemOptions, index, key) {
+        getPTItemOptions(option, itemOptions, index, key) {
             return this.ptm(key, {
                 context: {
                     selected: this.isSelected(option),

components/lib/dropdown/style/DropdownStyle.js

@@ -102,7 +102,7 @@ const classes = {
         'p-dropdown p-component p-inputwrapper',
         {
             'p-disabled': props.disabled,
-            'p-dropdown-clearable': props.showClear && !props.disabled,
+            'p-dropdown-clearable': props.showClear,
             'p-focus': state.focused,
             'p-inputwrapper-filled': instance.hasSelectedOption,
             'p-inputwrapper-focus': state.focused || state.overlayVisible,

components/lib/editor/Editor.d.ts

@@ -30,6 +30,10 @@ export interface EditorPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: EditorState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/fieldset/Fieldset.d.ts

@@ -32,6 +32,10 @@ export interface FieldsetPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: FieldsetState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/fieldset/Fieldset.vue

@@ -77,7 +77,7 @@ export default {
             return UniqueComponentId();
         },
         buttonAriaLabel() {
-            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.legend;
+            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.legend;
         }
     },
     directives: {

components/lib/fileupload/FileUpload.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { BadgePassThroughOptions } from '../badge';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { MessagePassThroughOptions } from '../message';
@@ -32,12 +33,30 @@ export interface FileUploadPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: FileUploadState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface FileUploadPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: FileUploadProps;
+    /**
+     * Defines current inline state.
+     */
+    state: FileUploadState;
+}
+
 /**
  * Custom select event.
  * @see {@link FileUploadEmits.select}
@@ -199,12 +218,12 @@ export interface FileUploadPassThroughOptions {
      * Used to pass attributes to the upload button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    uploadButton?: ButtonPassThroughOptions;
+    uploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the cancel button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    cancelButton?: ButtonPassThroughOptions;
+    cancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
@@ -217,7 +236,7 @@ export interface FileUploadPassThroughOptions {
      * Used to pass attributes to the messages' DOM element.
      * @see {@link MessagePassThroughOptions}
      */
-    message?: MessagePassThroughOptions;
+    message?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the file's DOM element.
      */
@@ -239,9 +258,10 @@ export interface FileUploadPassThroughOptions {
      */
     fileSize?: FileUploadPassThroughOptionType;
     /**
-     * Used to pass attributes to the badge's DOM element.
+     * Used to pass attributes to the Badge component.
+     * @see {@link BadgePassThroughOptions}
      */
-    badge?: FileUploadPassThroughOptionType;
+    badge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the actions's DOM element.
      */
@@ -250,7 +270,7 @@ export interface FileUploadPassThroughOptions {
      * Used to pass attributes to the remove button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    removeButton?: ButtonPassThroughOptions;
+    removeButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the empty's DOM element.
      */

components/lib/galleria/BaseGalleria.vue

@@ -113,6 +113,14 @@ export default {
         nextButtonProps: {
             type: null,
             default: null
+        },
+        ariaLabel: {
+            type: String,
+            default: null
+        },
+        ariaRoledescription: {
+            type: String,
+            default: null
         }
     },
     style: GalleriaStyle,

components/lib/galleria/Galleria.d.ts

@@ -36,6 +36,10 @@ export interface GalleriaPassThroughMethodOptions {
      * Defines current options.
      */
     context: GalleriaContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -390,6 +394,14 @@ export interface GalleriaProps {
      * Used to pass all properties of the HTMLButtonElement to the next navigation button.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Defines a string value that description for the role of the component.
+     */
+    ariaRoledescription?: string | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {GalleriaPassThroughOptions}

components/lib/galleria/Galleria.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" role="dialog" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
             </transition>

components/lib/galleria/GalleriaContent.vue

@@ -1,5 +1,15 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }" data-pc-name="galleria">
+    <div
+        v-if="$attrs.value && $attrs.value.length > 0"
+        :id="id"
+        role="region"
+        :class="[cx('root'), $attrs.containerClass]"
+        :style="$attrs.containerStyle"
+        :aria-label="$attrs.ariaLabel"
+        :aria-roledescription="$attrs.ariaRoledescription"
+        v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }"
+        data-pc-name="galleria"
+    >
         <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
             <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
         </button>

components/lib/galleria/GalleriaItem.vue

@@ -14,12 +14,11 @@
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />
             </div>
         </div>
-        <ul v-if="showIndicators" :class="cx('indicators')" v-bind="ptm('indicators')">
+        <ul v-if="showIndicators" ref="indicatorContent" :class="cx('indicators')" v-bind="ptm('indicators')">
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
                 :class="cx('indicator', { index })"
-                tabindex="0"
                 :aria-label="ariaPageLabel(index + 1)"
                 :aria-selected="activeIndex === index"
                 :aria-controls="id + '_item_' + index"
@@ -29,7 +28,7 @@
                 v-bind="ptm('indicator', getIndicatorPTOptions(index))"
                 :data-p-highlight="isIndicatorItemActive(index)"
             >
-                <button v-if="!templates['indicator']" type="button" tabindex="-1" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
+                <button v-if="!templates['indicator']" type="button" :tabindex="activeIndex === index ? '0' : '-1'" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
             </li>
         </ul>
@@ -41,6 +40,7 @@ import BaseComponent from 'primevue/basecomponent';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
+import { DomHandler } from 'primevue/utils';
 
 export default {
     name: 'GalleriaItem',
@@ -156,8 +156,32 @@ export default {
                     event.preventDefault();
                     break;
 
+                case 'ArrowRight':
+                    this.onRightKey();
+                    break;
+
+                case 'ArrowLeft':
+                    this.onLeftKey();
+                    break;
+
+                case 'Home':
+                    this.onHomeKey();
+                    event.preventDefault();
+                    break;
+
+                case 'End':
+                    this.onEndKey();
+                    event.preventDefault();
+                    break;
+
+                case 'Tab':
+                    this.onTabKey();
+                    break;
+
                 case 'ArrowDown':
                 case 'ArrowUp':
+                case 'PageUp':
+                case 'PageDown':
                     event.preventDefault();
                     break;
 
@@ -165,6 +189,51 @@ export default {
                     break;
             }
         },
+        onRightKey() {
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+            const activeIndex = this.findFocusedIndicatorIndex();
+
+            this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+        },
+        onLeftKey() {
+            const activeIndex = this.findFocusedIndicatorIndex();
+
+            this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+        },
+        onHomeKey() {
+            const activeIndex = this.findFocusedIndicatorIndex();
+
+            this.changedFocusedIndicator(activeIndex, 0);
+        },
+        onEndKey() {
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+            const activeIndex = this.findFocusedIndicatorIndex();
+
+            this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+        },
+        onTabKey() {
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+
+            const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
+            const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+
+            indicators[activeIndex].children[0].tabIndex = '-1';
+            indicators[highlightedIndex].children[0].tabIndex = '0';
+        },
+        findFocusedIndicatorIndex() {
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+            const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
+
+            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        },
+        changedFocusedIndicator(prevInd, nextInd) {
+            const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
+
+            indicators[prevInd].children[0].tabIndex = '-1';
+            indicators[nextInd].children[0].tabIndex = '0';
+            indicators[nextInd].children[0].focus();
+        },
         isIndicatorItemActive(index) {
             return this.activeIndex === index;
         },

components/lib/image/Image.d.ts

@@ -32,6 +32,10 @@ export interface ImagePassThroughMethodOptions {
      * Defines current inline state.
      */
     state: ImageState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/image/Image.vue

@@ -3,7 +3,7 @@
         <slot name="image" :onError="onError" :errorCallback="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
-        <button v-if="preview" ref="previewButton" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
+        <button v-if="preview" ref="previewButton" :aria-label="zoomImageAriaLabel" type="button" :class="cx('button')" @click="onImageClick" v-bind="{ ...previewButtonProps, ...ptm('button') }">
             <slot name="indicatoricon">
                 <component :is="indicatorIcon ? 'i' : 'EyeIcon'" :class="cx('icon')" v-bind="ptm('icon')" />
             </slot>
@@ -212,6 +212,9 @@ export default {
         zoomOutAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomOut : undefined;
         },
+        zoomImageAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.zoomImage : undefined;
+        },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }

components/lib/inlinemessage/InlineMessage.d.ts

@@ -30,6 +30,10 @@ export interface InlineMessagePassThroughMethodOptions {
      * Defines current inline state.
      */
     state: InlineMessageState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/inlinemessage/InlineMessage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div aria-live="polite" :class="cx('root')" v-bind="ptm('root')">
+    <div role="alert" aria-live="assertive" aria-atomic="true" :class="cx('root')" v-bind="ptm('root')">
         <slot name="icon">
             <component :is="icon ? 'span' : iconComponent" :class="cx('icon')" v-bind="ptm('icon')"></component>
         </slot>
@@ -10,11 +10,11 @@
 </template>
 
 <script>
-import BaseInlineMessage from './BaseInlineMessage.vue';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
 import TimesCircleIcon from 'primevue/icons/timescircle';
+import BaseInlineMessage from './BaseInlineMessage.vue';
 
 export default {
     name: 'InlineMessage',

components/lib/inplace/Inplace.d.ts

@@ -32,12 +32,30 @@ export interface InplacePassThroughMethodOptions {
      * Defines current inline state.
      */
     state: InplaceState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface InplaceSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: InplaceProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InplaceState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link InplaceProps.pt}
@@ -59,7 +77,7 @@ export interface InplacePassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    closeButton?: ButtonPassThroughOptions;
+    closeButton?: ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/inputgroup/InputGroup.d.ts

@@ -22,6 +22,10 @@ export interface InputGroupPassThroughMethodOptions {
      * Defines instance.
      */
     instance: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/inputgroupaddon/InputGroupAddon.d.ts

@@ -22,6 +22,10 @@ export interface InputGroupAddonPassThroughMethodOptions {
      * Defines instance.
      */
     instance: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/inputmask/InputMask.d.ts

@@ -29,6 +29,10 @@ export interface InputMaskPassThroughMethodOptions {
      * Defines current options.
      */
     context: InputMaskContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/inputnumber/InputNumber.d.ts

@@ -9,17 +9,17 @@
  */
 import { ButtonHTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
-import { InputTextPassThroughOptionType } from '../inputtext';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
 
-export declare type InputNumberPassThroughOptionType = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions) => InputNumberPassThroughAttributes | string) | string | null | undefined;
+export declare type InputNumberPassThroughOptionType<T = any> = InputNumberPassThroughAttributes | ((options: InputNumberPassThroughMethodOptions<T>) => InputNumberPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface InputNumberPassThroughMethodOptions {
+export interface InputNumberPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -32,12 +32,30 @@ export interface InputNumberPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: InputNumberState;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface InputNumberSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: InputNumberProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputNumberState;
+}
+
 /**
  * Custom input event.
  * @see {@link InputNumberEmits.input}
@@ -72,30 +90,30 @@ export interface InputNumberBlurEvent {
  * Custom passthrough(pt) options.
  * @see {@link InputNumberProps.pt}
  */
-export interface InputNumberPassThroughOptions {
+export interface InputNumberPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: InputNumberPassThroughOptionType;
+    root?: InputNumberPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the Input component.
+     * Used to pass attributes to the InputText component.
-     * @see {@link InputTextPassThroughOptionType}
+     * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptionType;
+    input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the button group's DOM element.
      */
-    buttonGroup?: InputNumberPassThroughOptionType;
+    buttonGroup?: InputNumberPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    incrementButton?: ButtonPassThroughOptionType;
+    incrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    decrementButton?: ButtonPassThroughOptionType;
+    decrementButton?: ButtonPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/inputnumber/InputNumber.vue

@@ -22,7 +22,8 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            v-bind="{ ...inputProps, ...ptm('input') }"
+            v-bind="inputProps"
+            :pt="ptm('input')"
             :unstyled="unstyled"
             data-pc-section="input"
         />
@@ -33,7 +34,8 @@
                 :disabled="disabled"
                 :tabindex="-1"
                 aria-hidden="true"
-                v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
+                v-bind="incrementButtonProps"
+                :pt="ptm('incrementButton')"
                 :unstyled="unstyled"
                 data-pc-section="incrementbutton"
             >
@@ -49,7 +51,8 @@
                 :disabled="disabled"
                 :tabindex="-1"
                 aria-hidden="true"
-                v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
+                v-bind="decrementButtonProps"
+                :pt="ptm('decrementButton')"
                 :unstyled="unstyled"
                 data-pc-section="decrementbutton"
             >
@@ -67,7 +70,8 @@
             :disabled="disabled"
             :tabindex="-1"
             aria-hidden="true"
-            v-bind="{ ...incrementButtonProps, ...ptm('incrementButton') }"
+            v-bind="incrementButtonProps"
+            :pt="ptm('incrementButton')"
             :unstyled="unstyled"
             data-pc-section="incrementbutton"
         >
@@ -84,7 +88,8 @@
             :disabled="disabled"
             :tabindex="-1"
             aria-hidden="true"
-            v-bind="{ ...decrementButtonProps, ...ptm('decrementButton') }"
+            v-bind="decrementButtonProps"
+            :pt="ptm('decrementButton')"
             :unstyled="unstyled"
             data-pc-section="decrementbutton"
         >

components/lib/inputswitch/InputSwitch.d.ts

@@ -30,6 +30,10 @@ export interface InputSwitchPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: InputSwitchState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/inputtext/InputText.d.ts

@@ -12,12 +12,12 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
 
-export declare type InputTextPassThroughOptionType = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions) => InputTextPassThroughAttributes | string) | string | null | undefined;
+export declare type InputTextPassThroughOptionType<T = any> = InputTextPassThroughAttributes | ((options: InputTextPassThroughMethodOptions<T>) => InputTextPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface InputTextPassThroughMethodOptions {
+export interface InputTextPassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -30,6 +30,10 @@ export interface InputTextPassThroughMethodOptions {
      * Defines current options.
      */
     context: InputTextContext;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -40,11 +44,11 @@ export interface InputTextPassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link InputTextProps.pt}
  */
-export interface InputTextPassThroughOptions {
+export interface InputTextPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: InputTextPassThroughOptionType;
+    root?: InputTextPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/inputtext/InputText.vue

@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)" data-pc-name="inputtext" />
+    <input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" data-pc-name="inputtext" />
 </template>
 
 <script>
@@ -10,6 +10,14 @@ export default {
     extends: BaseInputText,
     emits: ['update:modelValue'],
     methods: {
+        getPTOptions(key) {
+            return this.ptm(key, {
+                context: {
+                    filled: this.filled,
+                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
+                }
+            });
+        },
         onInput(event) {
             this.$emit('update:modelValue', event.target.value);
         }
@@ -17,14 +25,6 @@ export default {
     computed: {
         filled() {
             return this.modelValue != null && this.modelValue.toString().length > 0;
-        },
-        ptmParams() {
-            return {
-                context: {
-                    filled: this.filled,
-                    disabled: this.$attrs.disabled || this.$attrs.disabled === ''
-                }
-            };
         }
     }
 };

components/lib/knob/Knob.d.ts

@@ -29,6 +29,10 @@ export interface KnobPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: KnobState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/listbox/Listbox.d.ts

@@ -35,6 +35,10 @@ export interface ListboxPassThroughMethodOptions {
      * Defines current options.
      */
     context: ListboxContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/listbox/Listbox.vue

@@ -228,6 +228,7 @@ export default {
         onListFocus(event) {
             this.focused = true;
             this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.autoUpdateModel();
             this.$emit('focus', event);
         },
         onListBlur(event) {
@@ -327,7 +328,7 @@ export default {
             let metaSelection = this.optionTouched ? false : this.metaKeySelection;
 
             if (metaSelection) {
-                let metaKey = event.metaKey || event.ctrlKey;
+                let metaKey = event && (event.metaKey || event.ctrlKey);
 
                 if (selected) {
                     if (metaKey) {
@@ -632,7 +633,7 @@ export default {
             }
         },
         autoUpdateModel() {
-            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption && !this.multiple) {
+            if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption && !this.multiple && this.focused) {
                 this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
                 this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex]);
             }

components/lib/megamenu/MegaMenu.d.ts

@@ -35,6 +35,10 @@ export interface MegaMenuPassThroughMethodOptions {
      * Defines current options.
      */
     context: MegaMenuContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/menu/Menu.d.ts

@@ -37,6 +37,10 @@ export interface MenuPassThroughMethodOptions {
      * Defines current options.
      */
     context: MenuContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/menubar/Menubar.d.ts

@@ -35,6 +35,10 @@ export interface MenubarPassThroughMethodOptions {
      * Defines current options.
      */
     context: MenubarContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/message/Message.d.ts

@@ -12,14 +12,14 @@ import { ComponentHooks } from '../basecomponent';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type MessagePassThroughOptionType = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions) => MessagePassThroughAttributes | string) | string | null | undefined;
+export declare type MessagePassThroughOptionType<T = any> = MessagePassThroughAttributes | ((options: MessagePassThroughMethodOptions<T>) => MessagePassThroughAttributes | string) | string | null | undefined;
 
-export declare type MessagePassThroughTransitionType = TransitionProps | ((options: MessagePassThroughMethodOptions) => TransitionProps) | undefined;
+export declare type MessagePassThroughTransitionType<T = any> = TransitionProps | ((options: MessagePassThroughMethodOptions<T>) => TransitionProps) | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface MessagePassThroughMethodOptions {
+export interface MessagePassThroughMethodOptions<T = any> {
     /**
      * Defines instance.
      */
@@ -32,6 +32,10 @@ export interface MessagePassThroughMethodOptions {
      * Defines current inline state.
      */
     state: MessageState;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
     /**
      * Defines passthrough(pt) options in global config.
      */
@@ -42,41 +46,41 @@ export interface MessagePassThroughMethodOptions {
  * Custom passthrough(pt) options.
  * @see {@link MessageProps.pt}
  */
-export interface MessagePassThroughOptions {
+export interface MessagePassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: MessagePassThroughOptionType;
+    root?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the wrapper's DOM element.
      */
-    wrapper?: MessagePassThroughOptionType;
+    wrapper?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */
-    icon?: MessagePassThroughOptionType;
+    icon?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the text's DOM element.
      */
-    text?: MessagePassThroughOptionType;
+    text?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the button's DOM element.
      * @deprecated since v3.30.2. Use 'closeButton' option.
      */
-    button?: MessagePassThroughOptionType;
+    button?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the button's DOM element.
      */
-    closeButton?: MessagePassThroughOptionType;
+    closeButton?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the button icon's DOM element.
      * @deprecated since v3.30.2. Use 'closeIcon' option.
      */
-    buttonIcon?: MessagePassThroughOptionType;
+    buttonIcon?: MessagePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the button icon's DOM element.
      */
-    closeIcon?: MessagePassThroughOptionType;
+    closeIcon?: MessagePassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -85,7 +89,7 @@ export interface MessagePassThroughOptions {
     /**
      * Used to control Vue Transition API.
      */
-    transition?: MessagePassThroughTransitionType;
+    transition?: MessagePassThroughTransitionType<T>;
 }
 
 /**

components/lib/multiselect/MultiSelect.d.ts

@@ -37,6 +37,10 @@ export interface MultiSelectPassThroughMethodOptions {
      * Defines current options.
      */
     context: MultiSelectContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/orderlist/OrderList.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -37,12 +37,30 @@ export interface OrderListPassThroughMethodOptions {
      * Defines current options.
      */
     context: OrderListContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface OrderListSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: OrderListProps;
+    /**
+     * Defines current inline state.
+     */
+    state: OrderListState;
+}
+
 /**
  * Custom reorder event
  * @see {@link OrderListEmits.reorder}
@@ -93,19 +111,19 @@ export interface OrderListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    moveUpButton?: ButtonPassThroughOptionType;
+    moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveTopButton?: ButtonPassThroughOptionType;
+    moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveDownButton?: ButtonPassThroughOptionType;
+    moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveBottomButton?: ButtonPassThroughOptionType;
+    moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the container's DOM element.
      */

components/lib/orderlist/OrderList.vue

@@ -2,28 +2,28 @@
     <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveUpButton')" v-bind="moveUpButtonProps" data-pc-section="moveupbutton" :unstyled="unstyled">
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled" data-pc-section="moveupbutton">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveTopButton')" v-bind="moveTopButtonProps" data-pc-section="movetopbutton" :unstyled="unstyled">
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled" data-pc-section="movetopbutton">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveDownButton')" v-bind="moveDownButtonProps" data-pc-section="movedownbutton" :unstyled="unstyled">
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled" data-pc-section="movedownbutton">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" :pt="ptm('moveBottomButton')" v-bind="moveBottomButtonProps" data-pc-section="movebottombutton" :unstyled="unstyled">
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled" data-pc-section="movebottombutton">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />

components/lib/organizationchart/OrganizationChart.d.ts

@@ -34,6 +34,10 @@ export interface OrganizationChartPassThroughMethodOptions {
      * Defines current options.
      */
     context: OrganizationChartContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/overlaypanel/OverlayPanel.d.ts

@@ -32,6 +32,10 @@ export interface OverlayPanelPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: OverlayPanelState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/paginator/Paginator.d.ts

@@ -9,17 +9,17 @@
  */
 import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { DropdownPassThroughOptionType } from '../dropdown';
+import { DropdownPassThroughOptions } from '../dropdown';
-import { InputNumberPassThroughOptionType } from '../inputnumber';
+import { InputNumberPassThroughOptions } from '../inputnumber';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
-export declare type PaginatorPassThroughOptionType = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions) => PaginatorPassThroughAttributes | string) | string | null | undefined;
+export declare type PaginatorPassThroughOptionType<T = any> = PaginatorPassThroughAttributes | ((options: PaginatorPassThroughMethodOptions<T>) => PaginatorPassThroughAttributes | string) | string | null | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface PaginatorPassThroughMethodOptions {
+export interface PaginatorPassThroughMethodOptions<T> {
     /**
      * Defines instance.
      */
@@ -32,6 +32,10 @@ export interface PaginatorPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: PaginatorState;
+    /**
+     * Defines parent instance.
+     */
+    parent: T;
     /**
      * Defines current options.
      */
@@ -42,86 +46,100 @@ export interface PaginatorPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PaginatorSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: PaginatorProps;
+    /**
+     * Defines current inline state.
+     */
+    state: PaginatorState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link PaginatorProps.pt}
  */
-export interface PaginatorPassThroughOptions {
+export interface PaginatorPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the paginator wrapper's DOM element.
      */
-    paginatorWrapper?: PaginatorPassThroughOptionType;
+    paginatorWrapper?: PaginatorPassThroughOptionType<T> | any;
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: PaginatorPassThroughOptionType;
+    root?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the start's DOM element.
      */
-    start?: PaginatorPassThroughOptionType;
+    start?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the first page button's DOM element.
      */
-    firstPageButton?: PaginatorPassThroughOptionType;
+    firstPageButton?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the first page icon's DOM element.
      */
-    firstPageIcon?: PaginatorPassThroughOptionType;
+    firstPageIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page button's DOM element.
      */
-    previousPageButton?: PaginatorPassThroughOptionType;
+    previousPageButton?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page icon's DOM element.
      */
-    previousPageIcon?: PaginatorPassThroughOptionType;
+    previousPageIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page button's DOM element.
      */
-    nextPageButton?: PaginatorPassThroughOptionType;
+    nextPageButton?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page icon's DOM element.
      */
-    nextPageIcon?: PaginatorPassThroughOptionType;
+    nextPageIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page button's DOM element.
      */
-    lastPageButton?: PaginatorPassThroughOptionType;
+    lastPageButton?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page icon's DOM element.
      */
-    lastPageIcon?: PaginatorPassThroughOptionType;
+    lastPageIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the pages's DOM element.
      */
-    pages?: PaginatorPassThroughOptionType;
+    pages?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the page button's DOM element.
      */
-    pageButton?: PaginatorPassThroughOptionType;
+    pageButton?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the current's DOM element.
      */
-    current?: PaginatorPassThroughOptionType;
+    current?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptionType}
+     * @see {@link DropdownPassThroughOptions}
      */
-    rowPerPageDropdown?: DropdownPassThroughOptionType;
+    rowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptionType}
+     * @see {@link DropdownPassThroughOptions}
      */
-    jumpToPageDropdown?: DropdownPassThroughOptionType;
+    jumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Dropdown component.
-     * @see {@link InputNumberPassThroughOptionType}
+     * @see {@link InputNumberPassThroughOptions}
      */
-    jumpToPageInput?: InputNumberPassThroughOptionType;
+    jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the end's DOM element.
      */
-    end?: PaginatorPassThroughOptionType;
+    end?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}

components/lib/panel/Panel.d.ts

@@ -32,6 +32,10 @@ export interface PanelPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: PanelState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/panel/Panel.vue

@@ -81,7 +81,7 @@ export default {
             return UniqueComponentId();
         },
         buttonAriaLabel() {
-            return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
+            return this.toggleButtonProps && this.toggleButtonProps.ariaLabel ? this.toggleButtonProps.ariaLabel : this.header;
         }
     },
     components: {

components/lib/panelmenu/PanelMenu.d.ts

@@ -37,6 +37,10 @@ export interface PanelMenuPassThroughMethodOptions {
      * Defines current options.
      */
     context: PanelMenuContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */

components/lib/passthrough/tailwind/index.js

@@ -838,16 +838,24 @@ export default {
             class: 'absolute flex'
         },
         button: {
-            root: ({ parent }) => ({
+            root: ({ parent }) => {
-                class: [
+                return {
-                    'w-16 !h-16 !rounded-full justify-center z-10',
+                    class: [
-                    {
+                        'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
-                        'rotate-45': parent.state.d_visible
+                        'flex items-center justify-center',
-                    }
+                        'transition duration-200 ease-in-out',
-                ]
+                        'focus:outline-none focus:outline-offset-0',
-            }),
+                        'w-16 !h-16 !rounded-full justify-center z-10',
-            label: {
+                        {
-                class: 'hidden'
+                            'rotate-45': parent.state.d_visible
+                        }
+                    ]
+                };
+            },
+            label: () => {
+                return {
+                    class: 'hidden'
+                };
             }
         },
         menu: {
@@ -884,19 +892,155 @@ export default {
             class: ['inline-flex relative', 'rounded-md', { 'shadow-lg': props.raised }]
         }),
         button: {
-            root: ({ parent }) => ({
+            root: ({ props, parent }) => {
-                class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
+                return {
-            }),
+                    class: [
-            icon: {
+                        'rounded-r-none border-r-0',
-                class: 'mr-2'
+                        { 'rounded-l-full': parent.props.rounded },
+                        {
+                            'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                            'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                parent.props.link
+                        },
+                        {
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'secondary',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'success',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'info',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'warning',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'help',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'danger'
+                        },
+                        {
+                            'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
+                                props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
+                                props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
+                                props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
+                                props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
+                                props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
+                                props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                        },
+                        { 'shadow-lg': props.raised },
+                        { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+                        {
+                            'bg-transparent border-transparent': props.text && !props.plain,
+                            'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
+                            'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                            'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
+                            'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
+                            'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
+                            'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
+                        },
+                        { 'shadow-lg': props.raised && props.text },
+                        {
+                            'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
+                            'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
+                            'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
+                        },
+                        {
+                            'bg-transparent border': props.outlined && !props.plain,
+                            'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
+                            'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
+                            'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
+                            'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
+                            'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
+                            'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
+                        },
+                        { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
+                    ]
+                };
+            },
+            icon: () => {
+                return {
+                    class: 'mr-2'
+                };
             }
         },
         menubutton: {
-            root: ({ parent }) => ({
+            root: ({ props, parent }) => {
-                class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
+                return {
-            }),
+                    class: [
-            label: {
+                        'rounded-l-none',
-                class: 'hidden'
+                        { 'rounded-r-full': parent.props.rounded },
+                        {
+                            'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
+                            'text-blue-600 bg-transparent border-transparent focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                parent.props.link
+                        },
+                        {
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(176,185,198,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(203,213,225,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'secondary',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(136,234,172,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(134,239,172,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'success',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'info',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(250,207,133,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,211,77,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'warning',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(212,170,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(216,180,254,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'help',
+                            'focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(247,162,162,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(252,165,165,0.7),0_1px_2px_0_rgba(0,0,0,0)]':
+                                props.severity === 'danger'
+                        },
+                        {
+                            'text-white dark:text-gray-900 bg-gray-500 dark:bg-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-600 dark:hover:bg-gray-500 hover:border-gray-600 dark:hover:border-gray-500':
+                                props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-green-500 dark:bg-green-400 border border-green-500 dark:border-green-400 hover:bg-green-600 dark:hover:bg-green-500 hover:border-green-600 dark:hover:border-green-500':
+                                props.severity === 'success' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 dark:bg-blue-400 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 hover:border-blue-600 dark:hover:bg-blue-500 dark:hover:border-blue-500':
+                                props.severity === 'info' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-orange-500 dark:bg-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-600 dark:hover:bg-orange-500 hover:border-orange-600 dark:hover:border-orange-500':
+                                props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-purple-500 dark:bg-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-600 dark:hover:bg-purple-500 hover:border-purple-600 dark:hover:border-purple-500':
+                                props.severity === 'help' && !props.text && !props.outlined && !props.plain,
+                            'text-white dark:text-gray-900 bg-red-500 dark:bg-red-400 border border-red-500 dark:border-red-400 hover:bg-red-600 dark:hover:bg-red-500 hover:border-red-600 dark:hover:border-red-500':
+                                props.severity === 'danger' && !props.text && !props.outlined && !props.plain
+                        },
+                        { 'shadow-lg': props.raised },
+                        { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
+                        {
+                            'bg-transparent border-transparent': props.text && !props.plain,
+                            'text-blue-500 dark:text-blue-400 hover:bg-blue-300/20': props.text && (props.severity === null || props.severity === 'info') && !props.plain,
+                            'text-gray-500 dark:text-gray-400 hover:bg-gray-300/20': props.text && props.severity === 'secondary' && !props.plain,
+                            'text-green-500 dark:text-green-400 hover:bg-green-300/20': props.text && props.severity === 'success' && !props.plain,
+                            'text-orange-500 dark:text-orange-400 hover:bg-orange-300/20': props.text && props.severity === 'warning' && !props.plain,
+                            'text-purple-500 dark:text-purple-400 hover:bg-purple-300/20': props.text && props.severity === 'help' && !props.plain,
+                            'text-red-500 dark:text-red-400 hover:bg-red-300/20': props.text && props.severity === 'danger' && !props.plain
+                        },
+                        { 'shadow-lg': props.raised && props.text },
+                        {
+                            'text-gray-500 hover:bg-gray-300/20': props.plain && props.text,
+                            'text-gray-500 border border-gray-500 hover:bg-gray-300/20': props.plain && props.outlined,
+                            'text-white bg-gray-500 border border-gray-500 hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text
+                        },
+                        {
+                            'bg-transparent border': props.outlined && !props.plain,
+                            'text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-300/20': props.outlined && (props.severity === null || props.severity === 'info') && !props.plain,
+                            'text-gray-500 dark:text-gray-400 border border-gray-500 dark:border-gray-400 hover:bg-gray-300/20': props.outlined && props.severity === 'secondary' && !props.plain,
+                            'text-green-500 dark:text-green-400 border border-green-500 dark:border-green-400 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain,
+                            'text-orange-500 dark:text-orange-400 border border-orange-500 dark:border-orange-400 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain,
+                            'text-purple-500 dark:text-purple-400 border border-purple-500 dark:border-purple-400 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain,
+                            'text-red-500 dark:text-red-400 border border-red-500 dark:border-red-400 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain
+                        },
+                        { 'px-4 py-3 text-base': props.size === null, 'text-xs py-2 px-3': props.size === 'small', 'text-xl py-3 px-4': props.size === 'large' }
+                    ]
+                };
+            },
+            label: () => {
+                return {
+                    class: 'hidden'
+                };
             }
         }
     },
@@ -922,44 +1066,73 @@ export default {
         root: {
             class: 'w-full inline-flex'
         },
-        input: ({ props }) => ({
+        input: {
-            class: [
+            root: ({ parent }) => {
-                {
+                return {
-                    'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
+                    class: [
-                },
+                        // { test: parent }
-                {
+                        'm-0',
-                    'order-2': props.buttonLayout == 'horizontal'
+                        'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
-                }
+                        'p-3 text-base',
-            ]
+                        {
-        }),
+                            'rounded-tr-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
+                        },
+                        {
+                            'order-2': parent.props.buttonLayout == 'horizontal'
+                        }
+                    ]
+                };
+            }
+        },
         buttongroup: ({ props }) => ({
             class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
         }),
-        incrementbutton: ({ props }) => ({
+        incrementbutton: {
-            class: [
+            root: ({ parent }) => {
-                'flex !items-center !justify-center',
+                return {
-                {
+                    class: [
-                    'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                        'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
-                },
+                        'flex items-center justify-center',
-                {
+                        'transition duration-200 ease-in-out',
-                    'order-3': props.buttonLayout == 'horizontal'
+                        'focus:outline-none focus:outline-offset-0',
-                }
+                        {
-            ]
+                            'rounded-md rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
-        }),
+                        },
-        label: {
+                        {
-            class: 'hidden'
+                            'order-3 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
+                        }
+                    ]
+                };
+            },
+            label: () => {
+                return {
+                    class: 'hidden'
+                };
+            }
         },
-        decrementbutton: ({ props }) => ({
+        decrementbutton: {
-            class: [
+            root: ({ parent }) => {
-                'flex !items-center !justify-center',
+                return {
-                {
+                    class: [
-                    'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                        'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
-                },
+                        'flex items-center justify-center',
-                {
+                        'transition duration-200 ease-in-out',
-                    'order-1': props.buttonLayout == 'horizontal'
+                        'focus:outline-none focus:outline-offset-0',
-                }
+                        {
-            ]
+                            'rounded-md rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': parent.props.showButtons && parent.props.buttonLayout == 'stacked'
-        })
+                        },
+                        {
+                            'order-1 px-4 py-3 text-base rounded-md': parent.props.buttonLayout == 'horizontal'
+                        }
+                    ]
+                };
+            },
+            label: () => {
+                return {
+                    class: 'hidden'
+                };
+            }
+        }
     },
     knob: {
         root: ({ props }) => ({
@@ -1382,11 +1555,20 @@ export default {
                 { 'rounded-lg': !props.showIcon, 'border-r-0 rounded-l-lg': props.showIcon }
             ]
         }),
-        dropdownbutton: ({ props }) => ({
+        dropdownbutton: {
-            root: {
+            root: ({ parent }) => {
-                class: [{ 'rounded-l-none': props.showIcon }]
+                return {
+                    class: [
+                        'text-white dark:text-gray-900 bg-blue-500 dark:bg-blue-400 border border-blue-500 dark:border-blue-400 hover:bg-blue-600 dark:hover:bg-blue-500 hover:border-blue-600 dark:hover:border-blue-500 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)]',
+                        'flex items-center justify-center',
+                        'transition duration-200 ease-in-out',
+                        'focus:outline-none focus:outline-offset-0',
+                        'px-4 py-3 text-base rounded-md',
+                        { 'rounded-l-none': parent.props.showIcon }
+                    ]
+                };
             }
-        }),
+        },
         panel: ({ props }) => ({
             class: [
                 'bg-white dark:bg-gray-900',
@@ -2965,73 +3147,81 @@ export default {
             class: 'flex flex-col justify-center p-5'
         },
         moveupbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movetopbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movedownbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movebottombutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
@@ -3073,73 +3263,81 @@ export default {
             class: 'flex flex-col justify-center p-5'
         },
         sourcemoveupbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         sourcemovetopbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         sourcemovedownbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         sourcemovebottombutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
@@ -3176,73 +3374,81 @@ export default {
             class: 'flex flex-col justify-center p-5'
         },
         movetotargetbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movealltotargetbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movetosourcebutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         movealltosourcebutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
@@ -3251,73 +3457,81 @@ export default {
             class: 'flex flex-col justify-center p-5'
         },
         targetmoveupbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         targetmovetopbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         targetmovedownbutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
         },
         targetmovebottombutton: {
-            root: ({ context }) => ({
+            root: ({ context }) => {
-                class: [
+                return {
-                    'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    class: [
-                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                        'relative inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden m-0', // button component
-                    'transition duration-200 ease-in-out',
+                        'text-white bg-blue-500 border border-blue-500 rounded-md',
-                    'justify-center px-0 py-3', // icon only
+                        'transition duration-200 ease-in-out',
-                    'mb-2 w-12', // orderlist button
+                        'justify-center px-0 py-3', // icon only
-                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                        'mb-2 w-12', // orderlist button
-                    {
+                        'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
-                        'cursor-default pointer-events-none opacity-60': context.disabled
+                        {
-                    }
+                            'cursor-default pointer-events-none opacity-60': context.disabled
-                ]
+                        }
-            }),
+                    ]
+                };
+            },
             label: {
                 class: 'flex-initial w-0'
             }
@@ -4035,11 +4249,5 @@ export default {
         resizehelper: {
             class: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
         }
-    },
-    // CHART
-    chart: {
-        root: {
-            class: 'relative'
-        }
     }
 };

components/lib/password/Password.d.ts

@@ -9,7 +9,7 @@
  */
 import { HTMLAttributes, InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { InputTextPassThroughOptionType } from '../inputtext';
+import { InputTextPassThroughOptions } from '../inputtext';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, Nullable, PassThrough } from '../ts-helpers';
 
@@ -33,12 +33,30 @@ export interface PasswordPassThroughMethodOptions {
      * Defines current inline state.
      */
     state: PasswordState;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PasswordSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: PasswordProps;
+    /**
+     * Defines current inline state.
+     */
+    state: PasswordState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link PasswordProps.pt}
@@ -50,9 +68,9 @@ export interface PasswordPassThroughOptions {
     root?: PasswordPassThroughOptionType;
     /**
      * Used to pass attributes to the InputText component.
-     * @see {@link InputTextPassThroughOptionType}
+     * @see {@link InputTextPassThroughOptions}
      */
-    input?: PasswordPassThroughOptionType;
+    input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the hide icon's DOM element.
      */

components/lib/password/Password.vue

@@ -20,7 +20,8 @@
             @blur="onBlur"
             @keyup="onKeyUp"
             @invalid="onInvalid"
-            v-bind="{ ...inputProps, ...ptm('input') }"
+            v-bind="inputProps"
+            :pt="ptm('input')"
             :unstyled="unstyled"
         />
         <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="onMaskToggle" :toggleCallback="onMaskToggle">

components/lib/picklist/PickList.d.ts

@@ -9,7 +9,7 @@
  */
 import { ButtonHTMLAttributes, HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
-import { ButtonPassThroughOptionType } from '../button';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -37,12 +37,30 @@ export interface PickListPassThroughMethodOptions {
      * Defines current options.
      */
     context: PickListContext;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
     /**
      * Defines passthrough(pt) options in global config.
      */
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PickListSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: PickListProps;
+    /**
+     * Defines current inline state.
+     */
+    state: PickListState;
+}
+
 /**
  * Custom reorder event.
  * @see {@link PickListEmits.reorder}
@@ -133,19 +151,19 @@ export interface PickListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveUpButton?: ButtonPassThroughOptionType;
+    sourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveTopButton?: ButtonPassThroughOptionType;
+    sourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveDownButton?: ButtonPassThroughOptionType;
+    sourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveBottomButton?: ButtonPassThroughOptionType;
+    sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the source wrapper's DOM element.
      */
@@ -165,19 +183,19 @@ export interface PickListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    moveToTargetButton?: ButtonPassThroughOptionType;
+    moveToTargetButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveAllToTargetButton?: ButtonPassThroughOptionType;
+    moveAllToTargetButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveToSourceButton?: ButtonPassThroughOptionType;
+    moveToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    moveAllToSourceButton?: ButtonPassThroughOptionType;
+    moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the target wrapper's DOM element.
      */
@@ -201,19 +219,19 @@ export interface PickListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveUpButton?: ButtonPassThroughOptionType;
+    targetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveTopButton?: ButtonPassThroughOptionType;
+    targetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveDownButton?: ButtonPassThroughOptionType;
+    targetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveBottomButton?: ButtonPassThroughOptionType;
+    targetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}