diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 717ac639d..1f47cec77 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -23743,6 +23743,30 @@
                             "default": "",
                             "description": "Used to pass attributes to the item's DOM element."
                         },
+                        {
+                            "name": "itemLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item label's DOM element."
+                        },
+                        {
+                            "name": "tickIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the tick icon's DOM element."
+                        },
+                        {
+                            "name": "blankIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the bank icon's DOM element."
+                        },
                         {
                             "name": "emptyMessage",
                             "optional": true,
@@ -24230,6 +24254,22 @@
                             "default": "true",
                             "description": "When enabled, the focus is placed on the hovered option."
                         },
+                        {
+                            "name": "highlightOnSelect",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Highlights automatically the first item."
+                        },
+                        {
+                            "name": "showTick",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "Whether the selected option will be shown with a tick."
+                        },
                         {
                             "name": "filterMessage",
                             "optional": true,
diff --git a/doc/overlaypanel/BasicDoc.vue b/doc/overlaypanel/BasicDoc.vue
index 8578d4fec..113ebdf91 100644
--- a/doc/overlaypanel/BasicDoc.vue
+++ b/doc/overlaypanel/BasicDoc.vue
@@ -26,36 +26,14 @@
                 <div>
                     <span class="font-medium text-900 block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                            <img :src="`https://primefaces.org/cdn/primevue/images/avatar/${member.image}`" style="width: 32px" />
                             <div>
-                                <span class="font-medium">Amy Elsner</span>
-                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
                             </div>
                             <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Owner</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Bernardo Dominic</span>
-                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Editor</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Ioni Bowcher Elsner</span>
-                                <div class="text-sm text-color-secondary">ioni@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Viewer</span>
+                                <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
                         </li>
@@ -71,6 +49,11 @@
 export default {
     data() {
         return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ],
             code: {
                 basic: `
 <Button type="button" icon="pi pi-image" label="Image" @click="toggle" />
@@ -96,36 +79,14 @@ export default {
         <div>
             <span class="font-medium text-900 block mb-2">Team Members</span>
             <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                <li class="flex align-items-center gap-2">
-                    <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                     <div>
-                        <span class="font-medium">Amy Elsner</span>
-                        <div class="text-sm text-color-secondary">amy@email.com</div>
+                        <span class="font-medium">{{ member.name }}</span>
+                        <div class="text-sm text-color-secondary">{{ member.email }}</div>
                     </div>
                     <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                        <span>Owner</span>
-                        <i class="pi pi-angle-down"></i>
-                    </div>
-                </li>
-                <li class="flex align-items-center gap-2">
-                    <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
-                    <div>
-                        <span class="font-medium">Bernardo Dominic</span>
-                        <div class="text-sm text-color-secondary">bernardo@email.com</div>
-                    </div>
-                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                        <span>Editor</span>
-                        <i class="pi pi-angle-down"></i>
-                    </div>
-                </li>
-                <li class="flex align-items-center gap-2">
-                    <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
-                    <div>
-                        <span class="font-medium">Ioni Bowcher Elsner</span>
-                        <div class="text-sm text-color-secondary">ioni@email.com</div>
-                    </div>
-                    <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                        <span>Viewer</span>
+                        <span>{{ member.role }}</span>
                         <i class="pi pi-angle-down"></i>
                     </div>
                 </li>
@@ -160,36 +121,14 @@ export default {
                 <div>
                     <span class="font-medium text-900 block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                             <div>
-                                <span class="font-medium">Amy Elsner</span>
-                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
                             </div>
                             <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Owner</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Bernardo Dominic</span>
-                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Editor</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Ioni Bowcher Elsner</span>
-                                <div class="text-sm text-color-secondary">ioni@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Viewer</span>
+                                <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
                         </li>
@@ -202,6 +141,15 @@ export default {
 
 <script>
 export default {
+    data() {
+        return {
+            members: [
+                { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+                { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+                { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+            ]
+        }
+    },
     methods: {
         toggle(event) {
             this.$refs.op.toggle(event);
@@ -236,36 +184,14 @@ export default {
                 <div>
                     <span class="font-medium text-900 block mb-2">Team Members</span>
                     <ul class="list-none p-0 m-0 flex flex-column gap-3">
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px" />
+                        <li v-for="member in members" :key="member.name" class="flex align-items-center gap-2">
+                            <img :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${member.image}\`" style="width: 32px" />
                             <div>
-                                <span class="font-medium">Amy Elsner</span>
-                                <div class="text-sm text-color-secondary">amy@email.com</div>
+                                <span class="font-medium">{{ member.name }}</span>
+                                <div class="text-sm text-color-secondary">{{ member.email }}</div>
                             </div>
                             <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Owner</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/bernardodominic.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Bernardo Dominic</span>
-                                <div class="text-sm text-color-secondary">bernardo@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Editor</span>
-                                <i class="pi pi-angle-down"></i>
-                            </div>
-                        </li>
-                        <li class="flex align-items-center gap-2">
-                            <img src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" style="width: 32px" />
-                            <div>
-                                <span class="font-medium">Ioni Bowcher Elsner</span>
-                                <div class="text-sm text-color-secondary">ioni@email.com</div>
-                            </div>
-                            <div class="flex align-items-center gap-2 text-color-secondary ml-auto text-sm">
-                                <span>Viewer</span>
+                                <span>{{ member.role }}</span>
                                 <i class="pi pi-angle-down"></i>
                             </div>
                         </li>
@@ -280,6 +206,11 @@ export default {
 import { ref } from "vue";
 
 const op = ref();
+const members = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png', email: 'amy@email.com', role: 'Owner' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png', email: 'bernardo@email.com', role: 'Editor' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png', email: 'ioni@email.com', role: 'Viewer' }
+]);
 
 const toggle = (event) => {
     op.value.toggle(event);
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index 31efc7c9d..9461535e9 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -15,8 +15,8 @@
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
+                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>
@@ -48,8 +48,8 @@ export default {
                     <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                 </div>
                 <div class="flex gap-3 mb-3">
-                    <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
-                    <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
+                    <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
+                    <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                 </div>
             </div>
         </section>
@@ -72,8 +72,8 @@ export default {
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
+                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>
@@ -139,8 +139,8 @@ export default {
                             <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                         </div>
                         <div class="flex gap-3 mb-3">
-                            <Button label="Another Upload?" text class="p-0" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white p-0" @click="closeCallback"></Button>
+                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
+                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
                         </div>
                     </div>
                 </section>