From 916a9dfbc9c175c23865b9acbf6ab19e0a7ace4d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 16:02:42 +0300
Subject: [PATCH 1/5] Doc api table cosmetics

---
 assets/styles/layout/_doc.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index ece0ff892..ef076f39a 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -343,8 +343,8 @@
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
                 position: relative;
                 scroll-margin-top: 6.5rem;
-                background-color: var(--highlight-bg);
-                color: var(--highlight-text-color);
+                background-color: var(--doc-highlight-text-bg);
+                color: var(--doc-highlight-text-color);
                 border-radius: 6px;
                 padding: 2px 6px;
                 font-weight: 600;

From b9c0574c5a6bd74d696406a75df0d8ffad6c8466 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 16:59:59 +0300
Subject: [PATCH 2/5] Refactored ConfirmDialog demos

---
 .../lib/confirmdialog/ConfirmDialog.vue       |   1 +
 doc/confirmdialog/AccessibilityDoc.vue        |   3 +-
 doc/confirmdialog/BasicDoc.vue                |  19 ++-
 doc/confirmdialog/ConfirmationServiceDoc.vue  |   2 +-
 doc/confirmdialog/HeadlessDoc.vue             | 156 ++++++++++++++++++
 doc/confirmdialog/PositionDoc.vue             |  56 +++----
 doc/confirmdialog/TemplateDoc.vue             |  63 +++----
 pages/confirmdialog/index.vue                 |   8 +-
 8 files changed, 239 insertions(+), 69 deletions(-)
 create mode 100644 doc/confirmdialog/HeadlessDoc.vue

diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 5347f9a1c..60e82c2bb 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -15,6 +15,7 @@
         :unstyled="unstyled"
     >
         <template v-if="$slots.container" #container="slotProps">
+            sds
             <slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
         </template>
         <template v-if="!$slots.container">
diff --git a/doc/confirmdialog/AccessibilityDoc.vue b/doc/confirmdialog/AccessibilityDoc.vue
index 904e80b0e..40ba80f6d 100644
--- a/doc/confirmdialog/AccessibilityDoc.vue
+++ b/doc/confirmdialog/AccessibilityDoc.vue
@@ -78,7 +78,8 @@ export default {
                 basic: `
 <ConfirmDialog id="confirm" />
 
-<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>`
+<Button @click="openDialog()" label="Confirm" :aria-expanded="visible" :aria-controls="visible ? 'confirm' : null"></Button>
+`
             },
             code2: {
                 basic: `
diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index bfbcb4bbf..e5b213d6b 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Dialog. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,7 +18,7 @@ export default {
                 basic: `
 <ConfirmDialog></ConfirmDialog>
 <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
 `,
                 options: `
 <template>
@@ -26,7 +26,7 @@ export default {
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -51,7 +51,8 @@ export default {
                 message: 'Do you want to delete this record?',
                 header: 'Delete Confirmation',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                rejectClass: 'p-button-text p-button-text',
+                acceptClass: 'p-button-danger p-button-text',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -70,7 +71,7 @@ export default {
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -100,7 +101,8 @@ const confirm2 = () => {
         message: 'Do you want to delete this record?',
         header: 'Delete Confirmation',
         icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
+        rejectClass: 'p-button-text p-button-text',
+        acceptClass: 'p-button-danger p-button-text',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -133,7 +135,8 @@ const confirm2 = () => {
                 message: 'Do you want to delete this record?',
                 header: 'Delete Confirmation',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                rejectClass: 'p-button-text p-button-text',
+                acceptClass: 'p-button-danger p-button-text',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
diff --git a/doc/confirmdialog/ConfirmationServiceDoc.vue b/doc/confirmdialog/ConfirmationServiceDoc.vue
index f5d29058f..e5a8935e2 100644
--- a/doc/confirmdialog/ConfirmationServiceDoc.vue
+++ b/doc/confirmdialog/ConfirmationServiceDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="doc-section-description">
-        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
new file mode 100644
index 000000000..6cb7d74af
--- /dev/null
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -0,0 +1,156 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
+    </DocSectionText>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmDialog group="headless">
+    <template #container="{ message, onAccept, onReject }">
+        <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+            <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                <i class="pi pi-question text-5xl"></i>
+            </div>
+            <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+            <p class="mb-0">{{ message.message }}</p>
+            <div class="flex align-items-center gap-2 mt-4">
+                <Button label="Save" @click="onAccept"></Button>
+                <Button label="Cancel" outlined @click="onReject"></Button>
+            </div>
+        </div>
+    </template>
+</ConfirmDialog>
+<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+`,
+                options: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <ConfirmDialog group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+                <div class="border-circle bg-primary inline-flex justify-content-center align-items-center h-6rem w-6rem -mt-8">
+                    <i class="pi pi-question text-5xl"></i>
+                </div>
+                <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
+                <p class="mb-0">{{ message.message }}</p>
+                <div class="flex align-items-center gap-2 mt-4">
+                    <Button label="Save" @click="onAccept"></Button>
+                    <Button label="Cancel" outlined @click="onReject"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmDialog>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <Toast />
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = () => {
+    confirm.require({
+        group: 'headless',
+        header: 'Are you sure?',
+        message: 'Please confirm to proceed.',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation() {
+            this.$confirm.require({
+                group: 'headless',
+                header: 'Are you sure?',
+                message: 'Please confirm to proceed.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index adef71079..3688c8d54 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -1,14 +1,14 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The <i>position</i> property of the confirm options is used to display a Dialog at all edges and corners of the screen.</p>
+        <p>The <i>position</i> property of the confirm options specifies the location of the Dialog.</p>
     </DocSectionText>
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -28,12 +28,12 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmDialog group="positionDialog"></ConfirmDialog>
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<ConfirmDialog group="positioned"></ConfirmDialog>
+<div class="flex flex-wrap justify-content-center gap-2 mb-3">
     <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
 </div>
-<div class="flex flex-wrap justify-content-center gap-2 mb-2">
+<div class="flex flex-wrap justify-content-center gap-2 mb-3">
     <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
     <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -47,13 +47,13 @@ export default {
                 options: `
 <template>
     <Toast />
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -71,16 +71,16 @@ export default {
     methods: {
         confirmPosition(position) {
             this.$confirm.require({
-                group: 'positionDialog',
-                message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
                 accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
                 reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
                 }
             });
         },
@@ -91,13 +91,13 @@ export default {
                 composition: `
 <template>
     <Toast />
-    <ConfirmDialog group="positionDialog"></ConfirmDialog>
+    <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
-        <div class="flex flex-wrap justify-content-center gap-2 mb-2">
+        <div class="flex flex-wrap justify-content-center gap-2 mb-3">
             <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
             <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
@@ -119,16 +119,16 @@ const toast = useToast();
 
 const confirmPosition = (position) => {
     confirm.require({
-        group: 'positionDialog',
-        message: 'Do you want to delete this record?',
-        header: 'Delete Confirmation',
+        group: 'positioned',
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
         icon: 'pi pi-info-circle',
         position: position,
         accept: () => {
-            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
         },
         reject: () => {
-            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
         }
     });
 };
@@ -140,16 +140,16 @@ const confirmPosition = (position) => {
     methods: {
         confirmPosition(position) {
             this.$confirm.require({
-                group: 'positionDialog',
-                message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                group: 'positioned',
+                message: 'Are you sure you want to proceed?',
+                header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
                 accept: () => {
-                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
                 reject: () => {
-                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'Process incomplete', life: 3000 });
                 }
             });
         }
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 8fe5300af..f852685c6 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -1,17 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <p>Templating allows customizing the message content.</p>
     </DocSectionText>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,28 +22,28 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+<ConfirmDialog group="templating">
     <template #message="slotProps">
-        <div class="flex p-4">
-            <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-            <p class="pl-2">{{ slotProps.message.message }}</p>
+        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+            <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+            <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
 </ConfirmDialog>
-<Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
 `,
                 options: `
 <template>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <Toast />
 </template>
@@ -54,11 +54,12 @@ export default {
         showTemplate() {
             this.$confirm.require({
                 group: 'templating',
-                header: 'Terms and Conditions',
-                message: 'Do you accept that?',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
                 icon: 'pi pi-question-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                acceptClass: 'p-button-outlined',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -73,16 +74,16 @@ export default {
 `,
                 composition: `
 <template>
-    <ConfirmDialog group="templating" :pt="{ headertitle: 'mr-4' }">
+    <ConfirmDialog group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
+                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmDialog>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <Toast />
 </template>
@@ -97,11 +98,12 @@ const toast = useToast();
 const showTemplate = () => {
     confirm.require({
         group: 'templating',
-        header: 'Terms and Conditions',
-        message: 'Do you accept that?',
+        header: 'Confirmation',
+        message: 'Please confirm to proceed moving forward.',
         icon: 'pi pi-question-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
+        acceptClass: 'p-button-outlined',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -119,11 +121,12 @@ const showTemplate = () => {
         showTemplate() {
             this.$confirm.require({
                 group: 'templating',
-                header: 'Terms and Conditions',
-                message: 'Do you accept that?',
+                header: 'Confirmation',
+                message: 'Please confirm to proceed moving forward.',
                 icon: 'pi pi-question-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                acceptClass: 'p-button-outlined',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index b7e2ed136..9c0a01844 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/confirmdialog/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmdialog/HeadlessDoc.vue';
 import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
@@ -31,7 +32,7 @@ export default {
                 },
                 {
                     id: 'confirmation-service',
-                    label: 'Confirmation Service',
+                    label: 'Service',
                     component: ConfirmationServiceDoc
                 },
                 {
@@ -49,6 +50,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

From d8f85ec9578d578f84aacc876a433d252f99af1c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 17:02:47 +0300
Subject: [PATCH 3/5] Removed typo

---
 components/lib/confirmdialog/ConfirmDialog.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 60e82c2bb..5347f9a1c 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -15,7 +15,6 @@
         :unstyled="unstyled"
     >
         <template v-if="$slots.container" #container="slotProps">
-            sds
             <slot name="container" :message="confirmation" :onClose="slotProps.onClose" :onAccept="accept" :onReject="reject" />
         </template>
         <template v-if="!$slots.container">

From f45070390e5c3d6f06d9598ee6fc2e163e272052 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 21:25:28 +0300
Subject: [PATCH 4/5] Additional visual cosmetics on confirm dialog demos

---
 doc/confirmdialog/HeadlessDoc.vue | 12 ++++++------
 doc/confirmdialog/TemplateDoc.vue | 21 ++++++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
index 6cb7d74af..8a8e5b70c 100644
--- a/doc/confirmdialog/HeadlessDoc.vue
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -11,8 +11,8 @@
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept"></Button>
-                    <Button label="Cancel" outlined @click="onReject"></Button>
+                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
@@ -38,8 +38,8 @@ export default {
             <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
             <p class="mb-0">{{ message.message }}</p>
             <div class="flex align-items-center gap-2 mt-4">
-                <Button label="Save" @click="onAccept"></Button>
-                <Button label="Cancel" outlined @click="onReject"></Button>
+                <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
             </div>
         </div>
     </template>
@@ -57,8 +57,8 @@ export default {
                 <span class="font-bold text-2xl block mb-2 mt-4">{{ message.header }}</span>
                 <p class="mb-0">{{ message.message }}</p>
                 <div class="flex align-items-center gap-2 mt-4">
-                    <Button label="Save" @click="onAccept"></Button>
-                    <Button label="Cancel" outlined @click="onReject"></Button>
+                    <Button label="Save" @click="onAccept" class="w-8rem"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="w-8rem"></Button>
                 </div>
             </div>
         </template>
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index f852685c6..47fa1c7da 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -25,7 +25,7 @@ export default {
 <ConfirmDialog group="templating">
     <template #message="slotProps">
         <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-            <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
@@ -56,10 +56,11 @@ export default {
                 group: 'templating',
                 header: 'Confirmation',
                 message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                acceptClass: 'p-button-outlined',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -77,7 +78,7 @@ export default {
     <ConfirmDialog group="templating">
         <template #message="slotProps">
             <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
-                <i :class="slotProps.message.icon" class="text-5xl text-primary-500"></i>
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
@@ -100,10 +101,11 @@ const showTemplate = () => {
         group: 'templating',
         header: 'Confirmation',
         message: 'Please confirm to proceed moving forward.',
-        icon: 'pi pi-question-circle',
+        icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
-        acceptClass: 'p-button-outlined',
+        rejectClass: 'p-button-sm',
+        acceptClass: 'p-button-outlined p-button-sm',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -123,10 +125,11 @@ const showTemplate = () => {
                 group: 'templating',
                 header: 'Confirmation',
                 message: 'Please confirm to proceed moving forward.',
-                icon: 'pi pi-question-circle',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                acceptClass: 'p-button-outlined',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },

From 9bec0e1ee38fab7a6388382641430013b67792d6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 28 Oct 2023 22:04:42 +0300
Subject: [PATCH 5/5] Updated ConfirmPopup demos

---
 .../lib/confirmdialog/ConfirmDialog.vue       |   1 -
 .../confirmpopup/style/ConfirmPopupStyle.js   |   4 +-
 doc/confirmpopup/AccessibilityDoc.vue         |   2 +-
 doc/confirmpopup/BasicDoc.vue                 |  20 ++-
 doc/confirmpopup/ConfirmationServiceDoc.vue   |   2 +-
 doc/confirmpopup/HeadlessDoc.vue              | 140 ++++++++++++++++++
 doc/confirmpopup/TemplateDoc.vue              |  74 ++++-----
 pages/confirmpopup/index.vue                  |   8 +-
 8 files changed, 199 insertions(+), 52 deletions(-)
 create mode 100644 doc/confirmpopup/HeadlessDoc.vue

diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 5347f9a1c..904e5f7d3 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -55,7 +55,6 @@ import BaseConfirmDialog from './BaseConfirmDialog.vue';
 export default {
     name: 'ConfirmDialog',
     extends: BaseConfirmDialog,
-
     confirmListener: null,
     closeListener: null,
     data() {
diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
index 362780089..7be86f603 100644
--- a/components/lib/confirmpopup/style/ConfirmPopupStyle.js
+++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@@ -86,8 +86,8 @@ const classes = {
     icon: ({ instance }) => ['p-confirm-popup-icon', instance.confirmation ? instance.confirmation.icon : null],
     message: 'p-confirm-popup-message',
     footer: 'p-confirm-popup-footer',
-    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-text' : null],
-    acceptButton: 'p-confirm-popup-accept'
+    rejectButton: ({ instance }) => ['p-confirm-popup-reject', instance.confirmation && !instance.confirmation.rejectClass ? 'p-button-sm p-button-text' : null],
+    acceptButton: ({ instance }) => ['p-confirm-popup-accept', instance.confirmation && !instance.confirmation.acceptClass ? 'p-button-sm' : null]
 };
 
 export default BaseStyle.extend({
diff --git a/doc/confirmpopup/AccessibilityDoc.vue b/doc/confirmpopup/AccessibilityDoc.vue
index 9b8821faa..0ded5e1ed 100644
--- a/doc/confirmpopup/AccessibilityDoc.vue
+++ b/doc/confirmpopup/AccessibilityDoc.vue
@@ -6,7 +6,7 @@
             <i>aria-modal</i> is added since focus is kept within the popup.
         </p>
         <p>
-            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmDialog adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
+            When <i>require</i> method of the <i>$confirm</i> instance is used and a trigger is passed as a parameter, ConfirmPopup adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to the trigger so that the relation between the
             trigger and the dialog is defined.
         </p>
         <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index 2bc1eb7bc..7b695081d 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -1,11 +1,11 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ConfirmDialog is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. <i>target</i> attribute is mandatory to align the popup to its caller.</p>
+        <p>ConfirmPopup is displayed by calling the <i>require</i> method of the <i>$confirm</i> instance by passing the options to customize the Popup. The <i>target</i> attribute is mandatory to align the popup to its referrer.</p>
     </DocSectionText>
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,10 +17,8 @@ export default {
             code: {
                 basic: `
 <ConfirmPopup></ConfirmPopup>
-<div class="card flex flex-wrap gap-2 justify-content-center">
-    <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-    <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
-</div>
+<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
 `,
                 options: `
 <template>
@@ -28,7 +26,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -53,7 +51,7 @@ export default {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                acceptClass: 'p-button-danger p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -72,7 +70,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
     </div>
 </template>
 
@@ -102,7 +100,7 @@ const confirm2 = (event) => {
         target: event.currentTarget,
         message: 'Do you want to delete this record?',
         icon: 'pi pi-info-circle',
-        acceptClass: 'p-button-danger',
+        acceptClass: 'p-button-danger p-button-sm',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -135,7 +133,7 @@ const confirm2 = (event) => {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
-                acceptClass: 'p-button-danger',
+                acceptClass: 'p-button-danger p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
diff --git a/doc/confirmpopup/ConfirmationServiceDoc.vue b/doc/confirmpopup/ConfirmationServiceDoc.vue
index bb3499fa0..557dadcbc 100644
--- a/doc/confirmpopup/ConfirmationServiceDoc.vue
+++ b/doc/confirmpopup/ConfirmationServiceDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="doc-section-description">
-        <p><i>$confirm</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useConfirm</i> function for Composition API.</p>
+        <p>The service is available with the <i>useConfirm</i> function for Composition API or using the <i>$confirm</i> property of the application for Options API.</p>
     </div>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/doc/confirmpopup/HeadlessDoc.vue b/doc/confirmpopup/HeadlessDoc.vue
new file mode 100644
index 000000000..3c244f3eb
--- /dev/null
+++ b/doc/confirmpopup/HeadlessDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire confirmation UI instead of the default elements.</p>
+    </DocSectionText>
+    <ConfirmPopup group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="bg-gray-900 text-white border-round p-3">
+                <span>{{ message.message }}</span>
+                <div class="flex align-items-center gap-2 mt-3">
+                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ConfirmPopup group="headless">
+    <template #container="{ message, onAccept, onReject }">
+        <div class="bg-gray-900 text-white border-round p-3">
+            <span>{{ message.message }}</span>
+            <div class="flex align-items-center gap-2 mt-3">
+                <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
+                <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+            </div>
+        </div>
+    </template>
+</ConfirmPopup>
+<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+`,
+                options: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="bg-gray-900 text-white border-round p-3">
+                <span>{{ message.message }}</span>
+                <div class="flex align-items-center gap-2 mt-3">
+                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script>
+export default {
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Are you sure? You cannot undo this.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <Toast />
+    <ConfirmPopup group="headless">
+        <template #container="{ message, onAccept, onReject }">
+            <div class="bg-gray-900 text-white border-round p-3">
+                <span>{{ message.message }}</span>
+                <div class="flex align-items-center gap-2 mt-3">
+                    <Button label="Save" @click="onAccept" class="p-button-sm p-button-outlined"></Button>
+                    <Button label="Cancel" outlined @click="onReject" class="p-button-sm p-button-text"></Button>
+                </div>
+            </div>
+        </template>
+    </ConfirmPopup>
+    <div class="card flex justify-content-center">
+        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const requireConfirmation = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        group: 'headless',
+        message: 'Are you sure? You cannot undo this.',
+        accept: () => {
+            toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
+        },
+        reject: () => {
+            toast.add({severity:'error', summary:'Rejected', detail:'You have rejected', life: 3000});
+        }
+    });
+}
+<\/script>
+`
+            }
+        };
+    },
+    methods: {
+        requireConfirmation(event) {
+            this.$confirm.require({
+                target: event.currentTarget,
+                group: 'headless',
+                message: 'Are you sure? You cannot undo this.',
+                accept: () => {
+                    this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+                },
+                reject: () => {
+                    this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+                }
+            });
+        }
+    }
+};
+</script>
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index 859b8f955..fee39f73b 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -1,17 +1,17 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Templating allows customizing the content where the message instance is available as the implicit variable.</p>
+        <p>Templating allows customizing the message content.</p>
     </DocSectionText>
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,31 +22,29 @@ export default {
         return {
             code: {
                 basic: `
-<ConfirmPopup group="demo">
+<ConfirmPopup group="templating">
     <template #message="slotProps">
-        <div class="flex p-4">
-            <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-            <p class="pl-2">{{ slotProps.message.message }}</p>
+        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+            <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+            <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
 </ConfirmPopup>
-<div class="card flex flex-wrap gap-2 justify-content-center">
-    <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
-</div>
+<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
 `,
                 options: `
 <template>
     <Toast />
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
 </template>
 
@@ -56,11 +54,13 @@ export default {
         showTemplate(event) {
             this.$confirm.require({
                 target: event.currentTarget,
-                group: 'demo',
-                message: 'Do you accept that?',
-                icon: 'pi pi-question-circle',
+                group: 'templating',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -76,16 +76,16 @@ export default {
                 composition: `
 <template>
     <Toast />
-    <ConfirmPopup group="demo">
+    <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex p-4">
-                <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                <p class="pl-2">{{ slotProps.message.message }}</p>
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+                <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
+                <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
-    <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions"></Button>
+    <div class="card flex justify-content-center">
+        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
     </div>
 </template>
 
@@ -99,11 +99,13 @@ const toast = useToast();
 const showTemplate = (event) => {
     confirm.require({
         target: event.currentTarget,
-        group: 'demo',
-        message: 'Do you accept that?',
-        icon: 'pi pi-question-circle',
+        group: 'templating',
+        message: 'Please confirm to proceed moving forward.',
+        icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
+        rejectClass: 'p-button-sm',
+        acceptClass: 'p-button-outlined p-button-sm',
         accept: () => {
             toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
         },
@@ -121,11 +123,13 @@ const showTemplate = (event) => {
         showTemplate(event) {
             this.$confirm.require({
                 target: event.currentTarget,
-                group: 'demo',
-                message: 'Do you accept that?',
-                icon: 'pi pi-question-circle',
+                group: 'templating',
+                message: 'Please confirm to proceed moving forward.',
+                icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
+                rejectClass: 'p-button-sm',
+                acceptClass: 'p-button-outlined p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/pages/confirmpopup/index.vue b/pages/confirmpopup/index.vue
index a152e9765..f4b2b2924 100644
--- a/pages/confirmpopup/index.vue
+++ b/pages/confirmpopup/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
+import HeadlessDoc from '@/doc/confirmpopup/HeadlessDoc.vue';
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmpopup/pt/index.vue';
@@ -30,7 +31,7 @@ export default {
                 },
                 {
                     id: 'confirmation-service',
-                    label: 'Confirmation Service',
+                    label: 'Service',
                     component: ConfirmationServiceDoc
                 },
                 {
@@ -43,6 +44,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',