diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index 7a7a22c7b..e559dc25d 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -24,14 +24,12 @@ export default {
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items">
-    <template #item="item">
-        <template #item="{ item }">
-            <a class="cursor-pointer" :href="item.url">
-                <span :class="item.icon"></span>
-            </a>
-        </template>
-        <template #separator> / </template>
+    <template #item="{ item }">
+        <a class="cursor-pointer" :href="item.url">
+            <span :class="item.icon"></span>
+        </a>
     </template>
+    <template #separator> / </template>
 </Breadcrumb>
 `,
                 options: `
diff --git a/doc/contextmenu/CommandDoc.vue b/doc/contextmenu/CommandDoc.vue
index cfe4ca104..0e28fa1f2 100644
--- a/doc/contextmenu/CommandDoc.vue
+++ b/doc/contextmenu/CommandDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
     <div class="card flex md:justify-content-center">
         <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
@@ -237,7 +237,7 @@ const items = ref([
             toast.add({ severity: 'success', summary: 'Success', detail: 'Invitation sent!', life: 3000 });
         }
     }
-]);        
+]);
 
 const onRightClick = (event, user) => {
     selectedUser.value = user;
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 25470abe8..5281cba6d 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>When content exceeeds viewport, Dialog automatically becomes scrollable.</p>
+        <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
     </DocSectionText>
 
     <div class="card flex justify-content-center">
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index f3f8643f6..494a90ae4 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -58,7 +58,7 @@ export default {
                         },
                         {
                             label: 'Vite.js',
-                            url: 'https://vuejs.org/'
+                            url: 'https://vitejs.dev/'
                         }
                     ]
                 }
@@ -138,7 +138,7 @@ export default {
                         },
                         {
                             label: 'Vite.js',
-                            url: 'https://vuejs.org/'
+                            url: 'https://vitejs.dev/'
                         }
                     ]
                 }
@@ -207,7 +207,7 @@ const items = ref([
             },
             {
                 label: 'Vite.js',
-                url: 'https://vuejs.org/'
+                url: 'https://vitejs.dev/'
             }
         ]
     }
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index 41fd65a39..7e5e9f6a3 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -7,11 +7,11 @@
     </DocSectionText>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -34,11 +34,11 @@ export default {
 <template>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -55,10 +55,10 @@ export default {
     },
     mounted() {
         this.loading = true;
-        this.nodes2 = this.initateNodes2();
+        this.nodes2 = this.initiateNodes2();
 
         setTimeout(() => {
-            this.nodes = this.initateNodes();
+            this.nodes = this.initiateNodes();
             this.loading = false;
             this.nodes2.map((node) => (node.loading = false));
         }, 2000);
@@ -112,7 +112,7 @@ export default {
                 }, 500);
             }
         },
-        initateNodes() {
+        initiateNodes() {
             return [
                 {
                     key: '0',
@@ -131,7 +131,7 @@ export default {
                 }
             ];
         },
-        initateNodes2() {
+        initiateNodes2() {
             return [
                 {
                     key: '0',
@@ -161,11 +161,11 @@ export default {
 <template>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -183,7 +183,7 @@ onMounted(() => {
     nodes2.value = initiateNodes2();
 
     setTimeout(() => {
-        nodes.value = initateNodes();
+        nodes.value = initiateNodes();
         loading.value = false;
         nodes2.value.map((node) => (node.loading = false));
     }, 2000);
@@ -239,7 +239,7 @@ const onNodeExpand2 = (node) => {
     }
 };
 
-const initateNodes = () => {
+const initiateNodes = () => {
     return [
         {
             key: '0',
@@ -259,7 +259,7 @@ const initateNodes = () => {
     ];
 };
 
-const initateNodes2 = () => {
+const initiateNodes2 = () => {
     return [
         {
             key: '0',
@@ -315,10 +315,10 @@ const initateNodes2 = () => {
     },
     mounted() {
         this.loading = true;
-        this.nodes2 = this.initateNodes2();
+        this.nodes2 = this.initiateNodes2();
 
         setTimeout(() => {
-            this.nodes = this.initateNodes();
+            this.nodes = this.initiateNodes();
             this.loading = false;
             this.nodes2.map((node) => (node.loading = false));
         }, 2000);
@@ -373,7 +373,7 @@ const initateNodes2 = () => {
                 }, 500);
             }
         },
-        initateNodes() {
+        initiateNodes() {
             return [
                 {
                     key: '0',
@@ -392,7 +392,7 @@ const initateNodes2 = () => {
                 }
             ];
         },
-        initateNodes2() {
+        initiateNodes2() {
             return [
                 {
                     key: '0',
diff --git a/doc/treeselect/FilledDoc.vue b/doc/treeselect/FilledDoc.vue
index 675bbb066..b7832ec46 100644
--- a/doc/treeselect/FilledDoc.vue
+++ b/doc/treeselect/FilledDoc.vue
@@ -18,12 +18,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
 </template>
 
@@ -46,7 +46,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
 </template>
 
diff --git a/doc/tristatecheckbox/FilledDoc.vue b/doc/tristatecheckbox/FilledDoc.vue
index f08da174f..176f63ed8 100644
--- a/doc/tristatecheckbox/FilledDoc.vue
+++ b/doc/tristatecheckbox/FilledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A model can be bound using the standard v-model directive.</p>
+        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex flex-column align-items-center">
         <TriStateCheckbox v-model="value" variant="filled" />
@@ -15,7 +15,7 @@ export default {
             value: null,
             code: {
                 basic: `
-<TriStateCheckbox v-model="value" />
+<TriStateCheckbox v-model="value" variant="filled" />
 `,
                 options: `
 <template>