From be7642f446fb878875ecc5ea2f21497f2fef145f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 12:25:27 +0300
Subject: [PATCH 1/6] Checkbox toggle state fix

---
 doc/checkbox/InvalidDoc.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/doc/checkbox/InvalidDoc.vue b/doc/checkbox/InvalidDoc.vue
index c7bbc57a7..abf678c0e 100644
--- a/doc/checkbox/InvalidDoc.vue
+++ b/doc/checkbox/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" />
+        <Checkbox v-model="checked" class="p-invalid" binary />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             checked: false,
             code: {
                 basic: `
-<Checkbox v-model="checked" class="p-invalid" />
+<Checkbox v-model="checked" class="p-invalid" binary />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" />
+        <Checkbox v-model="checked" class="p-invalid" binary />
     </div>
 </template>
 
@@ -37,7 +37,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Checkbox v-model="checked" class="p-invalid" />
+        <Checkbox v-model="checked" class="p-invalid" binary />
     </div>
 </template>
 

From c91d53e08564cad14a3f55e54b077717763684e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 12:25:41 +0300
Subject: [PATCH 2/6] Remove unnecessary placeholder

---
 doc/dropdown/FloatLabelDoc.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/doc/dropdown/FloatLabelDoc.vue b/doc/dropdown/FloatLabelDoc.vue
index b6d94c05e..acdc07c08 100644
--- a/doc/dropdown/FloatLabelDoc.vue
+++ b/doc/dropdown/FloatLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -26,7 +26,7 @@ export default {
             code: {
                 basic: `
 <div class="p-float-label">
-    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
     <label for="dd-city">Select a City</label>
 </div>
 `,
@@ -34,7 +34,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>
@@ -61,7 +61,7 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <div class="p-float-label">
-            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+            <Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
             <label for="dd-city">Select a City</label>
         </div>
     </div>

From 78ac1b8159dc6f348b943055a21fd03cc53809da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 12:26:04 +0300
Subject: [PATCH 3/6] Galleria responsive updates

---
 doc/galleria/ResponsiveDoc.vue | 44 +++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/doc/galleria/ResponsiveDoc.vue b/doc/galleria/ResponsiveDoc.vue
index 6059c6aeb..4bb65d5c6 100644
--- a/doc/galleria/ResponsiveDoc.vue
+++ b/doc/galleria/ResponsiveDoc.vue
@@ -2,17 +2,17 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria responsiveness is defined with the <i>responsiveOptions</i> property.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
-        <div>
-            <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
-                <template #item="slotProps">
-                    <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
-                </template>
-                <template #thumbnail="slotProps">
-                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
-                </template>
-            </Galleria>
-        </div>
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
+            <template #item="slotProps">
+                <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+            </template>
+            <template #thumbnail="slotProps">
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
+            </template>
+        </Galleria>
     </div>
     <DocSectionCode :code="code" :service="['PhotoService']" />
 </template>
@@ -40,24 +40,28 @@ export default {
             ],
             code: {
                 basic: `
-<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+<Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
     </template>
     <template #thumbnail="slotProps">
-        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+        <div class="grid grid-nogutter justify-content-center">
+            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+        </div>
     </template>
 </Galleria>
 `,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
             </template>
         </Galleria>
     </div>
@@ -94,13 +98,15 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
-        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" containerStyle="max-width: 800px">
+    <div class="card">
+        <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
             </template>
             <template #thumbnail="slotProps">
-                <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                <div class="grid grid-nogutter justify-content-center">
+                    <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                </div>
             </template>
         </Galleria>
     </div>

From f55bd3c2eb1ef00cbe6c040c4573c8ad878b46c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 12:45:16 +0300
Subject: [PATCH 4/6] Skeleton responsive issue fix

---
 doc/skeleton/ShapesDoc.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/doc/skeleton/ShapesDoc.vue b/doc/skeleton/ShapesDoc.vue
index 6488505be..45a951730 100644
--- a/doc/skeleton/ShapesDoc.vue
+++ b/doc/skeleton/ShapesDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full md:w-6 p-3">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -12,7 +12,7 @@
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -20,7 +20,7 @@
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Square</h5>
                 <div class="flex align-items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
@@ -29,7 +29,7 @@
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Circle</h5>
                 <div class="flex align-items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
@@ -79,7 +79,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full md:w-6 p-3">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -87,7 +87,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -95,7 +95,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Square</h5>
                 <div class="flex align-items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
@@ -104,7 +104,7 @@ export default {
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Circle</h5>
                 <div class="flex align-items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
@@ -124,7 +124,7 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap">
-            <div class="w-full md:w-6 p-3">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rectangle</h5>
                 <Skeleton class="mb-2"></Skeleton>
                 <Skeleton width="10rem" class="mb-2"></Skeleton>
@@ -132,7 +132,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2"></Skeleton>
                 <Skeleton width="10rem" height="4rem"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5>Rounded</h5>
                 <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
@@ -140,7 +140,7 @@ export default {
                 <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                 <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Square</h5>
                 <div class="flex align-items-end">
                     <Skeleton size="2rem" class="mr-2"></Skeleton>
@@ -149,7 +149,7 @@ export default {
                     <Skeleton size="5rem"></Skeleton>
                 </div>
             </div>
-            <div class="field col-12 md:col-6">
+            <div class="w-full xl:w-6 p-3">
                 <h5 class="mt-3">Circle</h5>
                 <div class="flex align-items-end">
                     <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>

From cab921e10c4af6e5a6a9ae6a43faa17b09f8968d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 13:58:34 +0300
Subject: [PATCH 5/6] Fixed #4674 - SpeedDial: mask border-radius added

---
 public/themes/arya-blue/theme.css               | 1 +
 public/themes/arya-green/theme.css              | 1 +
 public/themes/arya-orange/theme.css             | 1 +
 public/themes/arya-purple/theme.css             | 1 +
 public/themes/bootstrap4-dark-blue/theme.css    | 1 +
 public/themes/bootstrap4-dark-purple/theme.css  | 1 +
 public/themes/bootstrap4-light-blue/theme.css   | 1 +
 public/themes/bootstrap4-light-purple/theme.css | 1 +
 public/themes/fluent-light/theme.css            | 1 +
 public/themes/lara-dark-blue/theme.css          | 1 +
 public/themes/lara-dark-indigo/theme.css        | 1 +
 public/themes/lara-dark-purple/theme.css        | 1 +
 public/themes/lara-dark-teal/theme.css          | 1 +
 public/themes/lara-light-blue/theme.css         | 1 +
 public/themes/lara-light-indigo/theme.css       | 1 +
 public/themes/lara-light-purple/theme.css       | 1 +
 public/themes/lara-light-teal/theme.css         | 1 +
 public/themes/luna-amber/theme.css              | 1 +
 public/themes/luna-blue/theme.css               | 1 +
 public/themes/luna-green/theme.css              | 1 +
 public/themes/luna-pink/theme.css               | 1 +
 public/themes/md-dark-deeppurple/theme.css      | 1 +
 public/themes/md-dark-indigo/theme.css          | 1 +
 public/themes/md-light-deeppurple/theme.css     | 1 +
 public/themes/md-light-indigo/theme.css         | 1 +
 public/themes/mdc-dark-deeppurple/theme.css     | 1 +
 public/themes/mdc-dark-indigo/theme.css         | 1 +
 public/themes/mdc-light-deeppurple/theme.css    | 1 +
 public/themes/mdc-light-indigo/theme.css        | 1 +
 public/themes/mira/theme.css                    | 1 +
 public/themes/nano/theme.css                    | 1 +
 public/themes/nova-accent/theme.css             | 1 +
 public/themes/nova-alt/theme.css                | 1 +
 public/themes/nova-vue/theme.css                | 1 +
 public/themes/nova/theme.css                    | 1 +
 public/themes/rhea/theme.css                    | 1 +
 public/themes/saga-blue/theme.css               | 1 +
 public/themes/saga-green/theme.css              | 1 +
 public/themes/saga-orange/theme.css             | 1 +
 public/themes/saga-purple/theme.css             | 1 +
 public/themes/soho-dark/theme.css               | 1 +
 public/themes/soho-light/theme.css              | 1 +
 public/themes/tailwind-light/theme.css          | 1 +
 public/themes/vela-blue/theme.css               | 1 +
 public/themes/vela-green/theme.css              | 1 +
 public/themes/vela-orange/theme.css             | 1 +
 public/themes/vela-purple/theme.css             | 1 +
 public/themes/viva-dark/theme.css               | 1 +
 public/themes/viva-light/theme.css              | 1 +
 49 files changed, 49 insertions(+)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index f3ac6ef46..863ae90be 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index b0d68db51..9ac5275b6 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index d96169a0d..34c45968c 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 2030dfc52..d342e4e68 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 4a2c2462f..fa9d93a25 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index c5e35f768..da39936a3 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 32bc97547..2d5927c99 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 57ed87bb8..c03241ca4 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 560331798..5ea1b981d 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 2px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 981c34560..6c62e943b 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index c364051bf..454c2eef5 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index c2df2cc93..056a0a0f6 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index ba652f943..632ef07dd 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 6dd344ed6..4893c0d66 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index 1f5306969..ecaea98ef 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 284fbc952..647bb9004 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index e89ed5a74..01197a1d3 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -2296,6 +2296,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index aa987e9e8..5904663de 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 9cb1f1dbe..2e02d3166 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index ac7304bd0..73d43a65c 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 0a40d8fe7..31ffd31d3 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index d0b6f2c00..163882f9f 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 2cf65e0cf..8d9690bd4 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 39b23b51c..17c413527 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index af2af1f6a..04dd156da 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 432215160..2c3de490e 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 4af091374..669d059ef 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 2e1ede43b..e6277a872 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 323ec1c8b..80e3056a5 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.32);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 0adacd744..1251c490e 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -2305,6 +2305,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(112, 120, 136, 0.5);
+    border-radius: 4px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index acee474c7..f64b637f2 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 1px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 191c2e873..d0ac1cd06 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 05260ac04..1d8fa1efa 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 3f0a79ae8..0b4b62ffb 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index e2162b786..7f12b7fb3 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -2289,6 +2289,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index a95ae0564..2c9caf306 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 2px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index ef56935b5..92fd60a81 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 9e7448fbc..32403cab2 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index c4cb37db1..3cad0233c 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 1d8756cb3..a31567325 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index c58e37a18..95de048fe 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 964681f15..b87c927ac 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -2301,6 +2301,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 85089b6f7..415d6fcca 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -2312,6 +2312,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0.375rem;
   }
 
   .p-splitbutton {
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index aec6b5412..dd9d085f9 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index fa9445ad5..65a495349 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 969cdd274..fc4b5cd27 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 2fe4ccc64..50ae2bdae 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -2277,6 +2277,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 237f4b91a..24f43a798 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -2309,6 +2309,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index fe6e6fd1d..9be82a162 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -2309,6 +2309,7 @@
 
   .p-speeddial-mask {
     background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 6px;
   }
 
   .p-splitbutton {

From 0a02b2d500f41a6b70bdb088a380941d422e409f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 23 Oct 2023 13:58:40 +0300
Subject: [PATCH 6/6] Update MaskDoc.vue

---
 doc/speeddial/MaskDoc.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/doc/speeddial/MaskDoc.vue b/doc/speeddial/MaskDoc.vue
index 73665dbe6..f0106944f 100644
--- a/doc/speeddial/MaskDoc.vue
+++ b/doc/speeddial/MaskDoc.vue
@@ -2,9 +2,9 @@
     <DocSectionText v-bind="$attrs">
         <p>Adding <i>mask</i> property displays a modal layer behind the popup items.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,14 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
+<SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
-            <Toast />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>
@@ -113,10 +112,9 @@ data() {
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card p-3">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" mask :style="{ right: 0, bottom: 0 }" />
-            <Toast />
+            <SpeedDial :model="items" direction="up" mask :style="{ right: '1rem', bottom: '1rem' }" />
         </div>
     </div>
 </template>