diff --git a/components/doc/autocomplete/theming/tailwinddoc.js b/components/doc/autocomplete/theming/tailwinddoc.js
index 9e01ad1f92..b7f3a58f2b 100644
--- a/components/doc/autocomplete/theming/tailwinddoc.js
+++ b/components/doc/autocomplete/theming/tailwinddoc.js
@@ -7,10 +7,13 @@ export function TailwindDoc(props) {
         basic: `
 const TRANSITIONS = {
     overlay: {
-        enterFromClass: 'opacity-0 scale-75',
-        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
-        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
-        leaveToClass: 'opacity-0'
+        timeout: 150,
+        classNames: {
+            enter: 'opacity-0 scale-75',
+            enterActive: 'opacity-100 !scale-100 transition-transform transition-opacity duration-150 ease-in',
+            exit: 'opacity-100',
+            exitActive: '!opacity-0 transition-opacity duration-150 ease-linear'
+        }
     }
 };
 
@@ -33,7 +36,7 @@ const Tailwind = {
                 'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             )
         },
-        inputtoken: {
+        inputToken: {
             className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
         },
         input: ({ props }) => ({
@@ -53,7 +56,7 @@ const Tailwind = {
         token: {
             className: classNames('py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center')
         },
-        dropdownbutton: {
+        dropdownButton: {
             root: 'rounded-tl-none rounded-bl-none'
         },
         panel: {
@@ -61,20 +64,14 @@ const Tailwind = {
         },
         list: 'py-3 list-none m-0',
         item: ({ context }) => ({
-            className: classNames(
-                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
-                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
-                'dark:text-white/80 dark:hover:bg-gray-800',
-                'hover:text-gray-700 hover:bg-gray-200',
-                {
-                    'text-gray-700': !context.focused && !context.selected,
-                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
-                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
-                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
-                }
-            )
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.selected
+            })
         }),
-        itemgroup: {
+        itemGroup: {
             className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
         },
         transition: TRANSITIONS.overlay
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
index 4bdf8653c9..d7b9170895 100644
--- a/components/lib/autocomplete/AutoCompletePanel.js
+++ b/components/lib/autocomplete/AutoCompletePanel.js
@@ -21,7 +21,8 @@ export const AutoCompletePanel = React.memo(
         const getPTOptions = (item, key) => {
             return _ptm(key, {
                 context: {
-                    selected: props.selectedItem.current === item
+                    selected: props.selectedItem.current === item,
+                    disabled: item.disabled
                 }
             });
         };
@@ -107,7 +108,7 @@ export const AutoCompletePanel = React.memo(
                         className: cx('item', { suggestion }),
                         style,
                         onClick: (e) => props.onItemClick(e, suggestion),
-                        'aria-selected': props.selectedItem === suggestion,
+                        'aria-selected': props.selectedItem.current === suggestion,
                         'data-p-disabled': suggestion.disabled
                     },
                     getPTOptions(suggestion, 'item')
diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
index 14c87ff681..1e6502869d 100755
--- a/components/lib/autocomplete/autocomplete.d.ts
+++ b/components/lib/autocomplete/autocomplete.d.ts
@@ -216,6 +216,11 @@ export interface AutoCompleteContext {
      * @defaultValue false
      */
     selected: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
 }
 
 /**
diff --git a/components/lib/listbox/ListBoxItem.js b/components/lib/listbox/ListBoxItem.js
index c2fd3f98d8..e5a5b34eff 100644
--- a/components/lib/listbox/ListBoxItem.js
+++ b/components/lib/listbox/ListBoxItem.js
@@ -3,7 +3,7 @@ import { Ripple } from '../ripple/Ripple';
 import { DomHandler, mergeProps, ObjectUtils } from '../utils/Utils';
 
 export const ListBoxItem = React.memo((props) => {
-    const [focused, setFocused] = React.useState(false);
+    const [focusedState, setFocusedState] = React.useState(false);
     const {
         ptCallbacks: { ptm, cx }
     } = props;
@@ -14,17 +14,17 @@ export const ListBoxItem = React.memo((props) => {
             context: {
                 selected: props.selected,
                 disabled: props.disabled,
-                focused: focused
+                focused: focusedState
             }
         });
     };
 
     const onFocus = (event) => {
-        setFocused(true);
+        setFocusedState(true);
     };
 
     const onBlur = (event) => {
-        setFocused(false);
+        setFocusedState(false);
     };
 
     const onClick = (event) => {
diff --git a/components/lib/multiselect/MultiSelectItem.js b/components/lib/multiselect/MultiSelectItem.js
index e2d8cedda9..89ba0b1f9b 100644
--- a/components/lib/multiselect/MultiSelectItem.js
+++ b/components/lib/multiselect/MultiSelectItem.js
@@ -4,7 +4,7 @@ import { Ripple } from '../ripple/Ripple';
 import { IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 
 export const MultiSelectItem = React.memo((props) => {
-    const [focused, setFocused] = React.useState(false);
+    const [focusedState, setFocusedState] = React.useState(false);
     const { ptm, cx } = props;
 
     const getPTOptions = (key) => {
@@ -13,7 +13,7 @@ export const MultiSelectItem = React.memo((props) => {
             context: {
                 selected: props.selected,
                 disabled: props.disabled,
-                focused: focused
+                focused: focusedState
             }
         });
     };
@@ -40,11 +40,11 @@ export const MultiSelectItem = React.memo((props) => {
     };
 
     const onFocus = (event) => {
-        setFocused(true);
+        setFocusedState(true);
     };
 
     const onBlur = (event) => {
-        setFocused(false);
+        setFocusedState(false);
     };
 
     const checkboxIconProps = mergeProps(
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 428b66464b..acea299690 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1456,7 +1456,7 @@ const Tailwind = {
                 'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             )
         },
-        inputtoken: {
+        inputToken: {
             className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
         },
         input: ({ props }) => ({
@@ -1485,13 +1485,13 @@ const Tailwind = {
         list: 'py-3 list-none m-0',
         item: ({ context }) => ({
             className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
-                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.selected,
                 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
-                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
-                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': context.selected
             })
         }),
-        itemgroup: {
+        itemGroup: {
             className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
         },
         transition: TRANSITIONS.overlay