diff --git a/.prettierignore b/.prettierignore
index 3cf5f91bbf..ed6d4fdf7d 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -12,5 +12,4 @@ package-lock.json
 **/*.ts
 **/*.mts
 **/*.cts
-**/*.vue
 **/*.md
diff --git a/apps/vue-docs/.eslintrc.json b/apps/vue-docs/.eslintrc.json
index 77e5c9a41d..bb6b34eb94 100644
--- a/apps/vue-docs/.eslintrc.json
+++ b/apps/vue-docs/.eslintrc.json
@@ -29,6 +29,7 @@
 		},
 		{
 			"files": ["*.vue"],
+			"extends": ["prettier"],
 			"rules": {
 				"vue/multi-word-component-names": 0,
 				"vue/no-multiple-template-root": 0,
diff --git a/apps/vue-docs/docs/custom/CodeTab.vue b/apps/vue-docs/docs/custom/CodeTab.vue
index 9a20ffd363..a06dcbf334 100644
--- a/apps/vue-docs/docs/custom/CodeTab.vue
+++ b/apps/vue-docs/docs/custom/CodeTab.vue
@@ -1,28 +1,28 @@
 <template>
-  <div class="container">
-    <div class="example-wrapper vvd-root">
-      <div
-        class="example"
-        :class="{
-          'example--no-padding': noPadding,
-          'example--visible-overflow': visibleOverflow,
-          'example--no-overflow': noOverflow,
-        }"
-      >
-        <slot name="example" />
-      </div>
-    </div>
-    <div class="controls">
-      <VButton
-        icon="code-solid"
-        :appearance="isCodeVisible ? 'filled' : 'ghost'"
-        @click="isCodeVisible = !isCodeVisible"
-      />
-    </div>
-    <div v-if="isCodeVisible" class="code">
-      <slot name="code" />
-    </div>
-  </div>
+	<div class="container">
+		<div class="example-wrapper vvd-root">
+			<div
+				class="example"
+				:class="{
+					'example--no-padding': noPadding,
+					'example--visible-overflow': visibleOverflow,
+					'example--no-overflow': noOverflow,
+				}"
+			>
+				<slot name="example" />
+			</div>
+		</div>
+		<div class="controls">
+			<VButton
+				icon="code-solid"
+				:appearance="isCodeVisible ? 'filled' : 'ghost'"
+				@click="isCodeVisible = !isCodeVisible"
+			/>
+		</div>
+		<div v-if="isCodeVisible" class="code">
+			<slot name="code" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -30,61 +30,63 @@ import { defineClientComponent } from 'vitepress';
 import { ref } from 'vue';
 
 defineProps({
-  noPadding: Boolean,
-  visibleOverflow: Boolean,
-  noOverflow: Boolean,
+	noPadding: Boolean,
+	visibleOverflow: Boolean,
+	noOverflow: Boolean,
 });
 
-const VButton = defineClientComponent(async () => (await import('@vonage/vivid-vue')).VButton);
+const VButton = defineClientComponent(
+	async () => (await import('@vonage/vivid-vue')).VButton
+);
 
 const isCodeVisible = ref(false);
 </script>
 
 <style lang="scss" scoped>
 .container {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .controls {
-  border-top: 1px solid lightgray;
-  padding: 4px 8px;
-  display: flex;
-  flex-direction: row-reverse;
+	border-top: 1px solid lightgray;
+	padding: 4px 8px;
+	display: flex;
+	flex-direction: row-reverse;
 
-  border-left: 1px solid lightgray;
-  border-right: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+	border-left: 1px solid lightgray;
+	border-right: 1px solid lightgray;
+	border-bottom: 1px solid lightgray;
 }
 
 .example {
-  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23F5F5F5%22%2F%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A);
-  padding: 16px;
+	background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23F5F5F5%22%2F%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A);
+	padding: 16px;
 
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border: 1px solid lightgray;
-  overflow-x: auto;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	border: 1px solid lightgray;
+	overflow-x: auto;
 
-  transform: translateX(0);
+	transform: translateX(0);
 
-  &--no-padding {
-    padding: 0;
-  }
+	&--no-padding {
+		padding: 0;
+	}
 
-  &--no-overflow {
-    overflow: hidden;
-  }
+	&--no-overflow {
+		overflow: hidden;
+	}
 
-  &--visible-overflow {
-    overflow: visible;
-  }
+	&--visible-overflow {
+		overflow: visible;
+	}
 }
 .code {
-  :deep([class*='language-']) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    margin: 0;
-  }
+	:deep([class*='language-']) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		margin: 0;
+	}
 }
 </style>
diff --git a/apps/vue-docs/docs/custom/Layout.vue b/apps/vue-docs/docs/custom/Layout.vue
index e30a1a3225..178e640a96 100644
--- a/apps/vue-docs/docs/custom/Layout.vue
+++ b/apps/vue-docs/docs/custom/Layout.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <Layout />
-  </div>
+	<div>
+		<Layout />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue b/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue
index 9de9cd8e33..dc35767a32 100644
--- a/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue
@@ -1,10 +1,18 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item 1" expanded> This is the first item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 4"> This is the fourth item's accordion body. </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item 1" expanded>
+			This is the first item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 2">
+			This is the second item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 3">
+			This is the third item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 4">
+			This is the fourth item's accordion body.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue b/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue
index 41493213f2..90e1180595 100644
--- a/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue
@@ -1,10 +1,18 @@
 <template>
-  <VAccordion expand-mode="multi">
-    <VAccordionItem heading="Accordion item 1" expanded> This is the first item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 4"> This is the fourth item's accordion body. </VAccordionItem>
-  </VAccordion>
+	<VAccordion expand-mode="multi">
+		<VAccordionItem heading="Accordion item 1" expanded>
+			This is the first item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 2">
+			This is the second item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 3">
+			This is the third item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 4">
+			This is the fourth item's accordion body.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue
index 4d392cc20c..2c0677526b 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Click to toggle accordion item" expanded>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Click to toggle accordion item" expanded>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue
index 61bd1f58af..93392addee 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with heading">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with heading">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue
index ee1330d81c..edf41b06fb 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="my heading" heading-level="3">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="my heading" heading-level="3">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue
index 33f5f51f2c..2e246f8ef2 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with icon" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with icon" icon="chat-solid">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue
index 284c5ee504..ce9d63f1bf 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue
@@ -1,9 +1,13 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with icon-trailing" icon="chat-solid" icon-trailing>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem
+			heading="Accordion item with icon-trailing"
+			icon="chat-solid"
+			icon-trailing
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue
index 502b3150ec..239d254be1 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with metadata" meta="meta-data">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with metadata" meta="meta-data">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue
index 48a8a7310a..24a6a2afcf 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item without indicator" no-indicator>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item without indicator" no-indicator>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue
index 9bfe2e01c8..7622c21988 100644
--- a/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue
@@ -1,15 +1,24 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="normal accordion item" meta="meta-data" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
-  <hr />
-  <VAccordion>
-    <VAccordionItem heading="condensed accordion item" size="condensed" meta="meta-data" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem
+			heading="normal accordion item"
+			meta="meta-data"
+			icon="chat-solid"
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
+	<hr />
+	<VAccordion>
+		<VAccordionItem
+			heading="condensed accordion item"
+			size="condensed"
+			meta="meta-data"
+			icon="chat-solid"
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 <script setup lang="ts">
 import { VAccordion, VAccordionItem } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue b/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue
index 8f636a6388..b209dc3aaf 100644
--- a/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VActionGroup>
-    <VButton icon="reply-line" />
-    <VButton label="copy" />
-    <VButton label="paste" />
-    <VButton label="submit" />
-  </VActionGroup>
+	<VActionGroup>
+		<VButton icon="reply-line" />
+		<VButton label="copy" />
+		<VButton label="paste" />
+		<VButton label="submit" />
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/action-group/AppearanceExample.vue
index d6e803cd01..c04202c7aa 100644
--- a/apps/vue-docs/docs/examples/components/action-group/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/AppearanceExample.vue
@@ -1,18 +1,18 @@
 <template>
-  <div>
-    <VActionGroup appearance="fieldset">
-      <VButton label="edit" />
-      <VButton label="copy" />
-      <VButton label="paste" />
-      <VButton label="submit" />
-    </VActionGroup>
-    <VActionGroup appearance="ghost">
-      <VButton label="edit" appearance="filled" />
-      <VButton label="copy" appearance="filled" />
-      <VButton label="paste" appearance="filled" />
-      <VButton label="submit" appearance="filled" />
-    </VActionGroup>
-  </div>
+	<div>
+		<VActionGroup appearance="fieldset">
+			<VButton label="edit" />
+			<VButton label="copy" />
+			<VButton label="paste" />
+			<VButton label="submit" />
+		</VActionGroup>
+		<VActionGroup appearance="ghost">
+			<VButton label="edit" appearance="filled" />
+			<VButton label="copy" appearance="filled" />
+			<VButton label="paste" appearance="filled" />
+			<VButton label="submit" appearance="filled" />
+		</VActionGroup>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/ComposedSearchExample.vue b/apps/vue-docs/docs/examples/components/action-group/ComposedSearchExample.vue
index 00d83aecf8..6307fb6e83 100644
--- a/apps/vue-docs/docs/examples/components/action-group/ComposedSearchExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/ComposedSearchExample.vue
@@ -1,9 +1,21 @@
 <template>
-  <VActionGroup shape="pill">
-    <VButton label="Action" appearance="ghost" icon="chevron-down-solid" icon-trailing shape="pill" />
-    <VDivider orientation="vertical" />
-    <VTextField icon="search-line" placeholder="Search..." appearance="ghost" shape="pill" style="min-width: 160px" />
-  </VActionGroup>
+	<VActionGroup shape="pill">
+		<VButton
+			label="Action"
+			appearance="ghost"
+			icon="chevron-down-solid"
+			icon-trailing
+			shape="pill"
+		/>
+		<VDivider orientation="vertical" />
+		<VTextField
+			icon="search-line"
+			placeholder="Search..."
+			appearance="ghost"
+			shape="pill"
+			style="min-width: 160px"
+		/>
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/RadioGroupExample.vue b/apps/vue-docs/docs/examples/components/action-group/RadioGroupExample.vue
index f5cfa07776..ebaade54fb 100644
--- a/apps/vue-docs/docs/examples/components/action-group/RadioGroupExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/RadioGroupExample.vue
@@ -1,31 +1,31 @@
 <template>
-  <VActionGroup role="radiogroup" aria-label="Text Alignment">
-    <VButton
-      type="button"
-      role="radio"
-      icon="align-left-line"
-      aria-checked="false"
-      tabindex="0"
-      aria-label="Text Align Left"
-    />
-    <VButton
-      type="button"
-      role="radio"
-      icon="align-center-line"
-      aria-checked="true"
-      tabindex="-1"
-      aria-label="Text Align Center"
-      appearance="filled"
-    />
-    <VButton
-      type="button"
-      role="radio"
-      icon="align-right-line"
-      aria-checked="false"
-      tabindex="-1"
-      aria-label="Text Align Right"
-    />
-  </VActionGroup>
+	<VActionGroup role="radiogroup" aria-label="Text Alignment">
+		<VButton
+			type="button"
+			role="radio"
+			icon="align-left-line"
+			aria-checked="false"
+			tabindex="0"
+			aria-label="Text Align Left"
+		/>
+		<VButton
+			type="button"
+			role="radio"
+			icon="align-center-line"
+			aria-checked="true"
+			tabindex="-1"
+			aria-label="Text Align Center"
+			appearance="filled"
+		/>
+		<VButton
+			type="button"
+			role="radio"
+			icon="align-right-line"
+			aria-checked="false"
+			tabindex="-1"
+			aria-label="Text Align Right"
+		/>
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/SemisplitButtonExample.vue b/apps/vue-docs/docs/examples/components/action-group/SemisplitButtonExample.vue
index c44a1ead54..805f0aa28a 100644
--- a/apps/vue-docs/docs/examples/components/action-group/SemisplitButtonExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/SemisplitButtonExample.vue
@@ -1,15 +1,15 @@
 <template>
-  <div>
-    <VActionGroup shape="pill">
-      <VButton label="My Action" appearance="ghost" shape="pill" />
-      <VDivider orientation="vertical" />
-      <VButton shape="pill" icon="chevron-down-solid" />
-    </VActionGroup>
-    <VActionGroup shape="pill" tight>
-      <VButton label="My Action" appearance="ghost" shape="pill" />
-      <VButton shape="pill" icon="chevron-down-solid" />
-    </VActionGroup>
-  </div>
+	<div>
+		<VActionGroup shape="pill">
+			<VButton label="My Action" appearance="ghost" shape="pill" />
+			<VDivider orientation="vertical" />
+			<VButton shape="pill" icon="chevron-down-solid" />
+		</VActionGroup>
+		<VActionGroup shape="pill" tight>
+			<VButton label="My Action" appearance="ghost" shape="pill" />
+			<VButton shape="pill" icon="chevron-down-solid" />
+		</VActionGroup>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/SeparatorExample.vue b/apps/vue-docs/docs/examples/components/action-group/SeparatorExample.vue
index 75b0d2ef16..7b5d1edcbc 100644
--- a/apps/vue-docs/docs/examples/components/action-group/SeparatorExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/SeparatorExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VActionGroup appearance="fieldset">
-    <VButton icon="reply-line" />
-    <VDivider orientation="vertical" />
-    <VButton icon="compose-line" />
-  </VActionGroup>
+	<VActionGroup appearance="fieldset">
+		<VButton icon="reply-line" />
+		<VDivider orientation="vertical" />
+		<VButton icon="compose-line" />
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/ShapeExample.vue b/apps/vue-docs/docs/examples/components/action-group/ShapeExample.vue
index 69cb2afa86..8fbdf7a288 100644
--- a/apps/vue-docs/docs/examples/components/action-group/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/ShapeExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VActionGroup shape="pill">
-    <VButton label="edit" shape="pill" />
-    <VButton label="copy" shape="pill" />
-    <VButton label="paste" shape="pill" />
-    <VButton label="submit" shape="pill" />
-  </VActionGroup>
+	<VActionGroup shape="pill">
+		<VButton label="edit" shape="pill" />
+		<VButton label="copy" shape="pill" />
+		<VButton label="paste" shape="pill" />
+		<VButton label="submit" shape="pill" />
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/action-group/TightExample.vue b/apps/vue-docs/docs/examples/components/action-group/TightExample.vue
index a62c309f9d..180561b6b6 100644
--- a/apps/vue-docs/docs/examples/components/action-group/TightExample.vue
+++ b/apps/vue-docs/docs/examples/components/action-group/TightExample.vue
@@ -1,18 +1,22 @@
 <template>
-  <VLayout column-basis="block" column-spacing="small" style="--layout-grid-template-columns: 250px">
-    <VTextField name="username" aria-label="Username" placeholder="Username" />
-    <VActionGroup appearance="fieldset" tight>
-      <VButton icon="flag-uruguay" />
-      <VTextField
-        appearance="ghost"
-        aria-label="Phone number"
-        placeholder="Phone number"
-        name="phone"
-        autocomplete=""
-        style="flex-grow: 1"
-      />
-    </VActionGroup>
-  </VLayout>
+	<VLayout
+		column-basis="block"
+		column-spacing="small"
+		style="--layout-grid-template-columns: 250px"
+	>
+		<VTextField name="username" aria-label="Username" placeholder="Username" />
+		<VActionGroup appearance="fieldset" tight>
+			<VButton icon="flag-uruguay" />
+			<VTextField
+				appearance="ghost"
+				aria-label="Phone number"
+				placeholder="Phone number"
+				name="phone"
+				autocomplete=""
+				style="flex-grow: 1"
+			/>
+		</VActionGroup>
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/alert/ActionItemsExample.vue b/apps/vue-docs/docs/examples/components/alert/ActionItemsExample.vue
index 4da3767caf..4548fb9396 100644
--- a/apps/vue-docs/docs/examples/components/alert/ActionItemsExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/ActionItemsExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" open>
-      <template #action-items>
-        <VButton appearance="outlined" shape="pill" label="Action" />
-      </template>
-    </VAlert>
-  </div>
+	<div class="example-container">
+		<VAlert text="An important information for you" open>
+			<template #action-items>
+				<VButton appearance="outlined" shape="pill" label="Action" />
+			</template>
+		</VAlert>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +14,7 @@ import { VAlert, VButton } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/alert/ConnotationExample.vue
index b3aabc4515..8324fd0b37 100644
--- a/apps/vue-docs/docs/examples/components/alert/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/ConnotationExample.vue
@@ -1,26 +1,31 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" :connotation="connotation" open />
-    <VSelect v-model="connotation" label="Select a connotation">
-      <VOption value="accent" text="accent" />
-      <VOption value="success" text="success" />
-      <VOption value="warning" text="warning" />
-      <VOption value="alert" text="alert" />
-      <VOption value="information" text="information" />
-    </VSelect>
-  </div>
+	<div class="example-container">
+		<VAlert
+			text="An important information for you"
+			:connotation="connotation"
+			open
+		/>
+		<VSelect v-model="connotation" label="Select a connotation">
+			<VOption value="accent" text="accent" />
+			<VOption value="success" text="success" />
+			<VOption value="warning" text="warning" />
+			<VOption value="alert" text="alert" />
+			<VOption value="information" text="information" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { VAlert, VSelect, VOption } from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
-const connotation = ref<InstanceType<typeof VAlert>['$props']['connotation']>('accent');
+const connotation =
+	ref<InstanceType<typeof VAlert>['$props']['connotation']>('accent');
 </script>
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/alert/HeadlineExample.vue
index 0fc661ebaa..24928afbaf 100644
--- a/apps/vue-docs/docs/examples/components/alert/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/HeadlineExample.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="example-container">
-    <VAlert headline="This requires your attention" text="An important information for you" open />
-  </div>
+	<div class="example-container">
+		<VAlert
+			headline="This requires your attention"
+			text="An important information for you"
+			open
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +14,7 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/IconExample.vue b/apps/vue-docs/docs/examples/components/alert/IconExample.vue
index 17c69866d8..bc7f14a342 100644
--- a/apps/vue-docs/docs/examples/components/alert/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/IconExample.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" open icon="megaphone-solid" />
-  </div>
+	<div class="example-container">
+		<VAlert
+			text="An important information for you"
+			open
+			icon="megaphone-solid"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +14,7 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/MainExample.vue b/apps/vue-docs/docs/examples/components/alert/MainExample.vue
index b6596797b6..6adac9e7ff 100644
--- a/apps/vue-docs/docs/examples/components/alert/MainExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/MainExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="example-container">
-    <VAlert open>
-      <template #main>
-        <VSwitch label="Do not show more alerts" />
-      </template>
-    </VAlert>
-  </div>
+	<div class="example-container">
+		<VAlert open>
+			<template #main>
+				<VSwitch label="Do not show more alerts" />
+			</template>
+		</VAlert>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +14,7 @@ import { VAlert, VSwitch } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/MaximumInlineSizeExample.vue b/apps/vue-docs/docs/examples/components/alert/MaximumInlineSizeExample.vue
index bc1ad09270..9f95ad99a2 100644
--- a/apps/vue-docs/docs/examples/components/alert/MaximumInlineSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/MaximumInlineSizeExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="example-container">
-    <VAlert
-      style="--alert-max-inline-size: 300px"
-      text="This is helptful to prevent the alert from becoming too wide when displaying a long message"
-      open
-    />
-  </div>
+	<div class="example-container">
+		<VAlert
+			style="--alert-max-inline-size: 300px"
+			text="This is helptful to prevent the alert from becoming too wide when displaying a long message"
+			open
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +14,7 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/MinimumInlineSizeExample.vue b/apps/vue-docs/docs/examples/components/alert/MinimumInlineSizeExample.vue
index a02ecc6667..bc86bf4ff0 100644
--- a/apps/vue-docs/docs/examples/components/alert/MinimumInlineSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/MinimumInlineSizeExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="example-container">
-    <VAlert style="--alert-min-inline-size: auto" text="Very fitting!" open />
-  </div>
+	<div class="example-container">
+		<VAlert style="--alert-min-inline-size: auto" text="Very fitting!" open />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +10,7 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/OpenExample.vue b/apps/vue-docs/docs/examples/components/alert/OpenExample.vue
index d12d235d98..c45e8ab959 100644
--- a/apps/vue-docs/docs/examples/components/alert/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/OpenExample.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" :open="open" />
-    <VButton appearance="outlined" label="Show/Hide alert" @click="open = !open" />
-  </div>
+	<div class="example-container">
+		<VAlert text="An important information for you" :open="open" />
+		<VButton
+			appearance="outlined"
+			label="Show/Hide alert"
+			@click="open = !open"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +18,7 @@ const open = ref(false);
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/PlacementExample.vue b/apps/vue-docs/docs/examples/components/alert/PlacementExample.vue
index 2fb6340494..5cf93f5e86 100644
--- a/apps/vue-docs/docs/examples/components/alert/PlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/PlacementExample.vue
@@ -1,12 +1,17 @@
 <template>
-  <div class="example-container">
-    <VAlert class="small-alert" placement="top-start" text="top-start" open />
-    <VAlert class="small-alert" placement="top" text="top" open />
-    <VAlert class="small-alert" placement="top-end" text="top-end" open />
-    <VAlert class="small-alert" placement="bottom-start" text="bottom-start" open />
-    <VAlert class="small-alert" placement="bottom" text="bottom" open />
-    <VAlert class="small-alert" placement="bottom-end" text="bottom-end" open />
-  </div>
+	<div class="example-container">
+		<VAlert class="small-alert" placement="top-start" text="top-start" open />
+		<VAlert class="small-alert" placement="top" text="top" open />
+		<VAlert class="small-alert" placement="top-end" text="top-end" open />
+		<VAlert
+			class="small-alert"
+			placement="bottom-start"
+			text="bottom-start"
+			open
+		/>
+		<VAlert class="small-alert" placement="bottom" text="bottom" open />
+		<VAlert class="small-alert" placement="bottom-end" text="bottom-end" open />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -15,11 +20,11 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 
 .small-alert {
-  --alert-min-inline-size: 200px;
+	--alert-min-inline-size: 200px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/RemovableExample.vue b/apps/vue-docs/docs/examples/components/alert/RemovableExample.vue
index 78a66457c2..de73dfdd17 100644
--- a/apps/vue-docs/docs/examples/components/alert/RemovableExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/RemovableExample.vue
@@ -1,8 +1,13 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" removable :open="open" @close="open = false" />
-    <VButton appearance="outlined" label="Show alert" @click="open = true" />
-  </div>
+	<div class="example-container">
+		<VAlert
+			text="An important information for you"
+			removable
+			:open="open"
+			@close="open = false"
+		/>
+		<VButton appearance="outlined" label="Show alert" @click="open = true" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +19,7 @@ const open = ref(false);
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/TextExample.vue b/apps/vue-docs/docs/examples/components/alert/TextExample.vue
index 3dbd5d481e..a39cb69ff5 100644
--- a/apps/vue-docs/docs/examples/components/alert/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/TextExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" open />
-  </div>
+	<div class="example-container">
+		<VAlert text="An important information for you" open />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -10,7 +10,7 @@ import { VAlert } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/alert/TimeoutmsExample.vue b/apps/vue-docs/docs/examples/components/alert/TimeoutmsExample.vue
index 3fc41a9c8a..0ded17c61e 100644
--- a/apps/vue-docs/docs/examples/components/alert/TimeoutmsExample.vue
+++ b/apps/vue-docs/docs/examples/components/alert/TimeoutmsExample.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="example-container">
-    <VAlert text="An important information for you" timeoutms="2000" :open="open" @close="open = false" />
-    <VButton appearance="outlined" label="Show an alert for 2 seconds" @click="open = true" />
-  </div>
+	<div class="example-container">
+		<VAlert
+			text="An important information for you"
+			timeoutms="2000"
+			:open="open"
+			@close="open = false"
+		/>
+		<VButton
+			appearance="outlined"
+			label="Show an alert for 2 seconds"
+			@click="open = true"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,7 +23,7 @@ const open = ref(false);
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  transform: translateX(0px);
+	height: 200px;
+	transform: translateX(0px);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/avatar/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/avatar/AppearanceExample.vue
index d643fb7eb1..979ee3da53 100644
--- a/apps/vue-docs/docs/examples/components/avatar/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/AppearanceExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <VAvatar appearance="filled" />
-    <VAvatar appearance="duotone" />
-    <VAvatar appearance="outlined" />
-  </div>
+	<div>
+		<VAvatar appearance="filled" />
+		<VAvatar appearance="duotone" />
+		<VAvatar appearance="outlined" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/AvatarExample.vue b/apps/vue-docs/docs/examples/components/avatar/AvatarExample.vue
index c61e9ff3ff..d3474b21e9 100644
--- a/apps/vue-docs/docs/examples/components/avatar/AvatarExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/AvatarExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VAvatar aria-label="avatar" />
+	<VAvatar aria-label="avatar" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/avatar/ConnotationExample.vue
index 62d77ac352..2d894ff5a4 100644
--- a/apps/vue-docs/docs/examples/components/avatar/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/ConnotationExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <VAvatar connotation="accent" />
-    <VAvatar connotation="cta" />
-    <VAvatar connotation="accent" appearance="duotone" />
-    <VAvatar connotation="cta" appearance="duotone" />
-    <VAvatar connotation="accent" appearance="outlined" />
-    <VAvatar connotation="cta" appearance="outlined" />
-  </div>
+	<div>
+		<VAvatar connotation="accent" />
+		<VAvatar connotation="cta" />
+		<VAvatar connotation="accent" appearance="duotone" />
+		<VAvatar connotation="cta" appearance="duotone" />
+		<VAvatar connotation="accent" appearance="outlined" />
+		<VAvatar connotation="cta" appearance="outlined" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/GraphicExample.vue b/apps/vue-docs/docs/examples/components/avatar/GraphicExample.vue
index a57db4e052..bd68fab61e 100644
--- a/apps/vue-docs/docs/examples/components/avatar/GraphicExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/GraphicExample.vue
@@ -1,120 +1,140 @@
 <template>
-  <div>
-    <VAvatar shape="pill" connotation="cta">
-      <template #graphic>
-        <img
-          src="https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
-          alt="woman"
-        />
-      </template>
-    </VAvatar>
+	<div>
+		<VAvatar shape="pill" connotation="cta">
+			<template #graphic>
+				<img
+					src="https://images.pexels.com/photos/762080/pexels-photo-762080.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
+					alt="woman"
+				/>
+			</template>
+		</VAvatar>
 
-    <VAvatar shape="pill" connotation="cta">
-      <template #graphic>
-        <svg xmlns="http://www.w3.org/2000/svg" width="349.66" height="349.66" fill="none" viewBox="0 0 349.66 349.66">
-          <path
-            d="M258.65 229.64H106.73c-16.654 0-35.169-13.505-41.345-30.159L2.011 30.161C-4.165 13.507 4.325.002 20.985.002h151.91c16.653 0 35.168 13.505 41.344 30.159l63.374 169.32c6.183 16.654-2.307 30.159-18.967 30.159z"
-            fill="url(#a)"
-            transform="translate(0 59.913)"
-          />
-          <path
-            d="M329.7 44.809H173.84c-15.565 0-32.869 12.619-38.643 28.183l-47.654 128.46c-5.775 15.564 2.16 28.183 17.731 28.183h155.86c15.564 0 32.868-12.619 38.642-28.183l47.655-128.46c5.774-15.564-2.167-28.183-17.731-28.183z"
-            fill="url(#b)"
-            transform="translate(0 59.913)"
-          />
-          <path
-            d="M105.78 229.63h153.1a27.995 27.995 0 0 0 2.72-.185c.054.005.109.008.166.008 8.922 0 18.311-4.78 22.625-8.285 6.276-5.099 9.997-8.74 14.022-16.253-7.212 12.612-14.68 11.974-20.076-2.868a8.237 8.237 0 0 0-.778-1.626 38.248 38.248 0 0 0-.336-.944l-56.119-151.28a38.757 38.757 0 0 0-1.446-3.39h-45.819c-15.564 0-32.868 12.619-38.643 28.183L87.542 201.45a32.942 32.942 0 0 0-.621 1.831c-5.443 13.513-11.951 13.677-19.11 1.287 4.155 7.676 7.997 11.395 14.475 16.605 4.454 3.581 14.147 8.465 23.359 8.465.046 0 .092-.002.136-.005z"
-            clip-rule="evenodd"
-            fill="url(#c)"
-            fill-rule="evenodd"
-            transform="translate(0 59.913)"
-          />
-          <path
-            d="M151.74 337.64h151.92c.894 0 1.765-.039 2.611-.115.113.028.235.042.365.042 8.923 0 18.311-4.78 22.626-8.286 6.275-5.099 9.996-8.739 14.021-16.252-6.853 11.984-13.937 12.005-19.256-.76a34.11 34.11 0 0 0-1.399-4.788l-63.375-169.32c-6.176-16.654-24.691-30.159-41.344-30.159H65.999c-16.66 0-25.15 13.505-18.974 30.159l63.374 169.32c6.176 16.654 24.691 30.159 41.345 30.159z"
-            clip-rule="evenodd"
-            fill="url(#d)"
-            fill-rule="evenodd"
-            transform="translate(-45 -48.087)"
-            opacity=".4"
-            style="mix-blend-mode: hard-light"
-          />
-          <path
-            d="M219.03 153h155.86c15.564 0 23.506 12.619 17.731 28.183l-47.654 128.46c-5.775 15.564-23.079 28.183-38.643 28.183h-155.36c-.044.004-.09.006-.136.006-.182 0-.364-.002-.547-.006-2.08-.013-4.022-.252-5.812-.693-7.032-1.478-13.569-5.008-16.999-7.767-6.479-5.209-10.321-8.929-14.476-16.605 7.159 12.39 13.667 12.226 19.11-1.287.186-.605.393-1.216.621-1.831l47.654-128.46C186.154 165.619 203.458 153 219.022 153z"
-            clip-rule="evenodd"
-            fill="url(#e)"
-            fill-rule="evenodd"
-            transform="translate(-45 -48.087)"
-            opacity=".15"
-            style="mix-blend-mode: hard-light"
-          />
-          <path
-            d="M330.05 45H174.19c-15.564 0-32.868 12.619-38.642 28.183l-47.655 128.46c-5.774 15.564 2.161 28.183 17.731 28.183h155.86c15.564 0 32.868-12.619 38.642-28.183l47.655-128.46C353.555 57.619 345.614 45 330.05 45z"
-            fill="url(#f)"
-            fill-opacity=".2"
-            transform="translate(0 59.913)"
-          />
-          <defs>
-            <linearGradient
-              id="a"
-              x1="226"
-              x2="45"
-              y1="108"
-              y2="67.5"
-              gradientTransform="translate(-45 -108)"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#A662FF" offset="0" />
-              <stop stop-color="#57EDFD" offset="1" />
-            </linearGradient>
-            <linearGradient
-              id="b"
-              x1="278.5"
-              x2="404"
-              y1="306"
-              y2="157.5"
-              gradientTransform="translate(-45 -108)"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#FC27F6" offset="0" />
-              <stop stop-color="#FFA694" offset="1" />
-            </linearGradient>
-            <linearGradient
-              id="c"
-              x1="186.5"
-              x2="343"
-              y1="153"
-              y2="153"
-              gradientTransform="translate(-45 -108)"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#7600FF" offset="0" />
-              <stop stop-color="#FB2FFB" offset="1" />
-            </linearGradient>
-            <linearGradient id="d" x1="252.5" x2="216" y1="112.5" y2="127.5" gradientUnits="userSpaceOnUse">
-              <stop stop-color="#fff" offset="0" />
-              <stop stop-color="#fff" stop-opacity="0" offset="1" />
-            </linearGradient>
-            <linearGradient id="e" x1="190" x2="210.86" y1="165" y2="172.66" gradientUnits="userSpaceOnUse">
-              <stop stop-color="#fff" offset="0" />
-              <stop stop-color="#fff" stop-opacity="0" offset="1" />
-            </linearGradient>
-            <linearGradient
-              id="f"
-              x1="372.5"
-              x2="346.5"
-              y1="249"
-              y2="240"
-              gradientTransform="translate(-45 -108)"
-              gradientUnits="userSpaceOnUse"
-            >
-              <stop stop-color="#fff" offset="0" />
-              <stop stop-color="#fff" stop-opacity="0" offset="1" />
-            </linearGradient>
-          </defs>
-        </svg>
-      </template>
-    </VAvatar>
-  </div>
+		<VAvatar shape="pill" connotation="cta">
+			<template #graphic>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="349.66"
+					height="349.66"
+					fill="none"
+					viewBox="0 0 349.66 349.66"
+				>
+					<path
+						d="M258.65 229.64H106.73c-16.654 0-35.169-13.505-41.345-30.159L2.011 30.161C-4.165 13.507 4.325.002 20.985.002h151.91c16.653 0 35.168 13.505 41.344 30.159l63.374 169.32c6.183 16.654-2.307 30.159-18.967 30.159z"
+						fill="url(#a)"
+						transform="translate(0 59.913)"
+					/>
+					<path
+						d="M329.7 44.809H173.84c-15.565 0-32.869 12.619-38.643 28.183l-47.654 128.46c-5.775 15.564 2.16 28.183 17.731 28.183h155.86c15.564 0 32.868-12.619 38.642-28.183l47.655-128.46c5.774-15.564-2.167-28.183-17.731-28.183z"
+						fill="url(#b)"
+						transform="translate(0 59.913)"
+					/>
+					<path
+						d="M105.78 229.63h153.1a27.995 27.995 0 0 0 2.72-.185c.054.005.109.008.166.008 8.922 0 18.311-4.78 22.625-8.285 6.276-5.099 9.997-8.74 14.022-16.253-7.212 12.612-14.68 11.974-20.076-2.868a8.237 8.237 0 0 0-.778-1.626 38.248 38.248 0 0 0-.336-.944l-56.119-151.28a38.757 38.757 0 0 0-1.446-3.39h-45.819c-15.564 0-32.868 12.619-38.643 28.183L87.542 201.45a32.942 32.942 0 0 0-.621 1.831c-5.443 13.513-11.951 13.677-19.11 1.287 4.155 7.676 7.997 11.395 14.475 16.605 4.454 3.581 14.147 8.465 23.359 8.465.046 0 .092-.002.136-.005z"
+						clip-rule="evenodd"
+						fill="url(#c)"
+						fill-rule="evenodd"
+						transform="translate(0 59.913)"
+					/>
+					<path
+						d="M151.74 337.64h151.92c.894 0 1.765-.039 2.611-.115.113.028.235.042.365.042 8.923 0 18.311-4.78 22.626-8.286 6.275-5.099 9.996-8.739 14.021-16.252-6.853 11.984-13.937 12.005-19.256-.76a34.11 34.11 0 0 0-1.399-4.788l-63.375-169.32c-6.176-16.654-24.691-30.159-41.344-30.159H65.999c-16.66 0-25.15 13.505-18.974 30.159l63.374 169.32c6.176 16.654 24.691 30.159 41.345 30.159z"
+						clip-rule="evenodd"
+						fill="url(#d)"
+						fill-rule="evenodd"
+						transform="translate(-45 -48.087)"
+						opacity=".4"
+						style="mix-blend-mode: hard-light"
+					/>
+					<path
+						d="M219.03 153h155.86c15.564 0 23.506 12.619 17.731 28.183l-47.654 128.46c-5.775 15.564-23.079 28.183-38.643 28.183h-155.36c-.044.004-.09.006-.136.006-.182 0-.364-.002-.547-.006-2.08-.013-4.022-.252-5.812-.693-7.032-1.478-13.569-5.008-16.999-7.767-6.479-5.209-10.321-8.929-14.476-16.605 7.159 12.39 13.667 12.226 19.11-1.287.186-.605.393-1.216.621-1.831l47.654-128.46C186.154 165.619 203.458 153 219.022 153z"
+						clip-rule="evenodd"
+						fill="url(#e)"
+						fill-rule="evenodd"
+						transform="translate(-45 -48.087)"
+						opacity=".15"
+						style="mix-blend-mode: hard-light"
+					/>
+					<path
+						d="M330.05 45H174.19c-15.564 0-32.868 12.619-38.642 28.183l-47.655 128.46c-5.774 15.564 2.161 28.183 17.731 28.183h155.86c15.564 0 32.868-12.619 38.642-28.183l47.655-128.46C353.555 57.619 345.614 45 330.05 45z"
+						fill="url(#f)"
+						fill-opacity=".2"
+						transform="translate(0 59.913)"
+					/>
+					<defs>
+						<linearGradient
+							id="a"
+							x1="226"
+							x2="45"
+							y1="108"
+							y2="67.5"
+							gradientTransform="translate(-45 -108)"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#A662FF" offset="0" />
+							<stop stop-color="#57EDFD" offset="1" />
+						</linearGradient>
+						<linearGradient
+							id="b"
+							x1="278.5"
+							x2="404"
+							y1="306"
+							y2="157.5"
+							gradientTransform="translate(-45 -108)"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#FC27F6" offset="0" />
+							<stop stop-color="#FFA694" offset="1" />
+						</linearGradient>
+						<linearGradient
+							id="c"
+							x1="186.5"
+							x2="343"
+							y1="153"
+							y2="153"
+							gradientTransform="translate(-45 -108)"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#7600FF" offset="0" />
+							<stop stop-color="#FB2FFB" offset="1" />
+						</linearGradient>
+						<linearGradient
+							id="d"
+							x1="252.5"
+							x2="216"
+							y1="112.5"
+							y2="127.5"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#fff" offset="0" />
+							<stop stop-color="#fff" stop-opacity="0" offset="1" />
+						</linearGradient>
+						<linearGradient
+							id="e"
+							x1="190"
+							x2="210.86"
+							y1="165"
+							y2="172.66"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#fff" offset="0" />
+							<stop stop-color="#fff" stop-opacity="0" offset="1" />
+						</linearGradient>
+						<linearGradient
+							id="f"
+							x1="372.5"
+							x2="346.5"
+							y1="249"
+							y2="240"
+							gradientTransform="translate(-45 -108)"
+							gradientUnits="userSpaceOnUse"
+						>
+							<stop stop-color="#fff" offset="0" />
+							<stop stop-color="#fff" stop-opacity="0" offset="1" />
+						</linearGradient>
+					</defs>
+				</svg>
+			</template>
+		</VAvatar>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -123,6 +143,6 @@ import { VAvatar } from '@vonage/vivid-vue';
 
 <style scoped>
 img {
-  height: 100%;
+	height: 100%;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/avatar/IconExample.vue b/apps/vue-docs/docs/examples/components/avatar/IconExample.vue
index f5a19e4c9b..9cc31df009 100644
--- a/apps/vue-docs/docs/examples/components/avatar/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VAvatar icon="group-2-solid" />
+	<VAvatar icon="group-2-solid" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/InitialsExample.vue b/apps/vue-docs/docs/examples/components/avatar/InitialsExample.vue
index ff3ad556df..3d4e373691 100644
--- a/apps/vue-docs/docs/examples/components/avatar/InitialsExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/InitialsExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VAvatar initials="vivid avatar" />
+	<VAvatar initials="vivid avatar" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/ShapeExample.vue b/apps/vue-docs/docs/examples/components/avatar/ShapeExample.vue
index 5076345114..5a51599bf0 100644
--- a/apps/vue-docs/docs/examples/components/avatar/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VAvatar shape="rounded" />
-    <VAvatar shape="pill" />
-  </div>
+	<div>
+		<VAvatar shape="rounded" />
+		<VAvatar shape="pill" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/avatar/SizeExample.vue b/apps/vue-docs/docs/examples/components/avatar/SizeExample.vue
index daf7bf3951..8467c2a912 100644
--- a/apps/vue-docs/docs/examples/components/avatar/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/avatar/SizeExample.vue
@@ -1,23 +1,30 @@
 <template>
-  <div>
-    <VAvatar size="condensed" shape="pill" />
-    <VAvatar size="normal" shape="pill" />
-    <VAvatar size="expanded" shape="pill" />
-    <VAvatar size="condensed" shape="pill" initials="john doe" />
-    <VAvatar size="normal" shape="pill" initials="john doe" />
-    <VAvatar size="expanded" shape="pill" initials="john doe" />
-    <VAvatar shape="pill" connotation="cta">
-      <svg height="110" width="110">
-        <defs>
-          <filter id="f1" x="0" y="0">
-            <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
-          </filter>
-        </defs>
-        <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
-        Sorry, your browser does not support inline SVG.
-      </svg>
-    </VAvatar>
-  </div>
+	<div>
+		<VAvatar size="condensed" shape="pill" />
+		<VAvatar size="normal" shape="pill" />
+		<VAvatar size="expanded" shape="pill" />
+		<VAvatar size="condensed" shape="pill" initials="john doe" />
+		<VAvatar size="normal" shape="pill" initials="john doe" />
+		<VAvatar size="expanded" shape="pill" initials="john doe" />
+		<VAvatar shape="pill" connotation="cta">
+			<svg height="110" width="110">
+				<defs>
+					<filter id="f1" x="0" y="0">
+						<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
+					</filter>
+				</defs>
+				<rect
+					width="90"
+					height="90"
+					stroke="green"
+					stroke-width="3"
+					fill="yellow"
+					filter="url(#f1)"
+				/>
+				Sorry, your browser does not support inline SVG.
+			</svg>
+		</VAvatar>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/badge/AppearanceExample.vue
index 2ea4cbed4e..06adbd216f 100644
--- a/apps/vue-docs/docs/examples/components/badge/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/AppearanceExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <VBadge text="filled" appearance="filled" />
-    <VBadge text="subtle" appearance="subtle" />
-    <VBadge text="duotone" appearance="duotone" />
-  </div>
+	<div>
+		<VBadge text="filled" appearance="filled" />
+		<VBadge text="subtle" appearance="subtle" />
+		<VBadge text="duotone" appearance="duotone" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/DuotoneBadgeWithConnotationExample.vue b/apps/vue-docs/docs/examples/components/badge/DuotoneBadgeWithConnotationExample.vue
index aa27a607bb..06f0017e21 100644
--- a/apps/vue-docs/docs/examples/components/badge/DuotoneBadgeWithConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/DuotoneBadgeWithConnotationExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <VBadge text="accent" appearance="duotone" connotation="accent" />
-    <VBadge text="cta" appearance="duotone" connotation="cta" />
-    <VBadge text="information" appearance="duotone" connotation="information" />
-    <VBadge text="success" appearance="duotone" connotation="success" />
-    <VBadge text="warning" appearance="duotone" connotation="warning" />
-    <VBadge text="alert" appearance="duotone" connotation="alert" />
-  </div>
+	<div>
+		<VBadge text="accent" appearance="duotone" connotation="accent" />
+		<VBadge text="cta" appearance="duotone" connotation="cta" />
+		<VBadge text="information" appearance="duotone" connotation="information" />
+		<VBadge text="success" appearance="duotone" connotation="success" />
+		<VBadge text="warning" appearance="duotone" connotation="warning" />
+		<VBadge text="alert" appearance="duotone" connotation="alert" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/FilledBadgeWithConnotationExample.vue b/apps/vue-docs/docs/examples/components/badge/FilledBadgeWithConnotationExample.vue
index 655d124780..5e7ef4689a 100644
--- a/apps/vue-docs/docs/examples/components/badge/FilledBadgeWithConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/FilledBadgeWithConnotationExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <VBadge text="accent" connotation="accent" appearance="filled" />
-    <VBadge text="cta" connotation="cta" appearance="filled" />
-    <VBadge text="information" connotation="information" appearance="filled" />
-    <VBadge text="success" connotation="success" />
-    <VBadge text="warning" connotation="warning" />
-    <VBadge text="alert" connotation="alert" />
-  </div>
+	<div>
+		<VBadge text="accent" connotation="accent" appearance="filled" />
+		<VBadge text="cta" connotation="cta" appearance="filled" />
+		<VBadge text="information" connotation="information" appearance="filled" />
+		<VBadge text="success" connotation="success" />
+		<VBadge text="warning" connotation="warning" />
+		<VBadge text="alert" connotation="alert" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/IconExample.vue b/apps/vue-docs/docs/examples/components/badge/IconExample.vue
index 5a29ed0849..110b597f04 100644
--- a/apps/vue-docs/docs/examples/components/badge/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/IconExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VBadge appearance="filled" icon="message-sent-line" />
-    <VBadge appearance="filled" icon="message-sent-line" shape="pill" />
-  </div>
+	<div>
+		<VBadge appearance="filled" icon="message-sent-line" />
+		<VBadge appearance="filled" icon="message-sent-line" shape="pill" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/IconWithTextExample.vue b/apps/vue-docs/docs/examples/components/badge/IconWithTextExample.vue
index 100092d603..3dc2131bb4 100644
--- a/apps/vue-docs/docs/examples/components/badge/IconWithTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/IconWithTextExample.vue
@@ -1,8 +1,13 @@
 <template>
-  <div>
-    <VBadge appearance="filled" text="icon" icon="check-line" />
-    <VBadge appearance="filled" text="icon-trailing" icon="check-line" icon-trailing />
-  </div>
+	<div>
+		<VBadge appearance="filled" text="icon" icon="check-line" />
+		<VBadge
+			appearance="filled"
+			text="icon-trailing"
+			icon="check-line"
+			icon-trailing
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/ShapeExample.vue b/apps/vue-docs/docs/examples/components/badge/ShapeExample.vue
index 52ca3210f1..0caa557b10 100644
--- a/apps/vue-docs/docs/examples/components/badge/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VBadge text="rounded" shape="rounded" />
-    <VBadge text="pill" shape="pill" />
-  </div>
+	<div>
+		<VBadge text="rounded" shape="rounded" />
+		<VBadge text="pill" shape="pill" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/SubtleBadgeWithConnotationExample.vue b/apps/vue-docs/docs/examples/components/badge/SubtleBadgeWithConnotationExample.vue
index 450d2d4397..80c5ed1949 100644
--- a/apps/vue-docs/docs/examples/components/badge/SubtleBadgeWithConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/SubtleBadgeWithConnotationExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <VBadge text="accent" appearance="subtle" connotation="accent" />
-    <VBadge text="cta" appearance="subtle" connotation="cta" />
-    <VBadge text="information" appearance="subtle" connotation="information" />
-    <VBadge text="success" appearance="subtle" connotation="success" />
-    <VBadge text="warning" appearance="subtle" connotation="warning" />
-    <VBadge text="alert" appearance="subtle" connotation="alert" />
-  </div>
+	<div>
+		<VBadge text="accent" appearance="subtle" connotation="accent" />
+		<VBadge text="cta" appearance="subtle" connotation="cta" />
+		<VBadge text="information" appearance="subtle" connotation="information" />
+		<VBadge text="success" appearance="subtle" connotation="success" />
+		<VBadge text="warning" appearance="subtle" connotation="warning" />
+		<VBadge text="alert" appearance="subtle" connotation="alert" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/badge/TextExample.vue b/apps/vue-docs/docs/examples/components/badge/TextExample.vue
index 421064e98e..068c705597 100644
--- a/apps/vue-docs/docs/examples/components/badge/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/badge/TextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VBadge text="A default badge" />
+	<VBadge text="A default badge" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/banner/ActionItemsExample.vue b/apps/vue-docs/docs/examples/components/banner/ActionItemsExample.vue
index f76ee71063..bea013c5fc 100644
--- a/apps/vue-docs/docs/examples/components/banner/ActionItemsExample.vue
+++ b/apps/vue-docs/docs/examples/components/banner/ActionItemsExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VBanner text="A banner with an action button">
-    <template #action-items>
-      <VButton appearance="filled" connotation="accent" label="Learn More" />
-    </template>
-  </VBanner>
+	<VBanner text="A banner with an action button">
+		<template #action-items>
+			<VButton appearance="filled" connotation="accent" label="Learn More" />
+		</template>
+	</VBanner>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/banner/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/banner/ConnotationExample.vue
index a235fd2fc9..336739ddf4 100644
--- a/apps/vue-docs/docs/examples/components/banner/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/banner/ConnotationExample.vue
@@ -1,11 +1,17 @@
 <template>
-  <div>
-    <VBanner text="Here's some information that you may find useful!" connotation="information" />
-    <VBanner text="Here's some information that you may find important!" connotation="announcement" />
-    <VBanner text="Operation Successful!" connotation="success" />
-    <VBanner text="Heads up - this is a warning" connotation="warning" />
-    <VBanner text="ALERT! Something went wrong!" connotation="alert" />
-  </div>
+	<div>
+		<VBanner
+			text="Here's some information that you may find useful!"
+			connotation="information"
+		/>
+		<VBanner
+			text="Here's some information that you may find important!"
+			connotation="announcement"
+		/>
+		<VBanner text="Operation Successful!" connotation="success" />
+		<VBanner text="Heads up - this is a warning" connotation="warning" />
+		<VBanner text="ALERT! Something went wrong!" connotation="alert" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/banner/IconExample.vue b/apps/vue-docs/docs/examples/components/banner/IconExample.vue
index ec19400f43..12855777bc 100644
--- a/apps/vue-docs/docs/examples/components/banner/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/banner/IconExample.vue
@@ -1,5 +1,8 @@
 <template>
-  <VBanner text="Here's some information that you may find important!" icon="home-line" />
+	<VBanner
+		text="Here's some information that you may find important!"
+		icon="home-line"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/banner/RemovableExample.vue b/apps/vue-docs/docs/examples/components/banner/RemovableExample.vue
index be950fd7ed..04d2e79724 100644
--- a/apps/vue-docs/docs/examples/components/banner/RemovableExample.vue
+++ b/apps/vue-docs/docs/examples/components/banner/RemovableExample.vue
@@ -1,5 +1,8 @@
 <template>
-  <VBanner text="Here's some information that you may find important!" removable />
+	<VBanner
+		text="Here's some information that you may find important!"
+		removable
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/banner/TextExample.vue b/apps/vue-docs/docs/examples/components/banner/TextExample.vue
index 3f530ff955..fe2eef7c07 100644
--- a/apps/vue-docs/docs/examples/components/banner/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/banner/TextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VBanner text="Here's some information that you may find important!" />
+	<VBanner text="Here's some information that you may find important!" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/breadcrumb-item/CombinedExample.vue b/apps/vue-docs/docs/examples/components/breadcrumb-item/CombinedExample.vue
index c547ce6119..8dfdd5c4cc 100644
--- a/apps/vue-docs/docs/examples/components/breadcrumb-item/CombinedExample.vue
+++ b/apps/vue-docs/docs/examples/components/breadcrumb-item/CombinedExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="display: flex">
-    <VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
-    <VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
-    <VBreadcrumbItem text="..." />
-    <VBreadcrumbItem text="Breadcrumb" />
-  </div>
+	<div style="display: flex">
+		<VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
+		<VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
+		<VBreadcrumbItem text="..." />
+		<VBreadcrumbItem text="Breadcrumb" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/breadcrumb-item/LinkExample.vue b/apps/vue-docs/docs/examples/components/breadcrumb-item/LinkExample.vue
index 3208372f81..149b50efcb 100644
--- a/apps/vue-docs/docs/examples/components/breadcrumb-item/LinkExample.vue
+++ b/apps/vue-docs/docs/examples/components/breadcrumb-item/LinkExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
+	<VBreadcrumbItem text="Breadcrumb" href="https://vivid.vonage.com" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/breadcrumb-item/TextExample.vue b/apps/vue-docs/docs/examples/components/breadcrumb-item/TextExample.vue
index 1d72350ef9..95882e947b 100644
--- a/apps/vue-docs/docs/examples/components/breadcrumb-item/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/breadcrumb-item/TextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VBreadcrumbItem text="Breadcrumb" />
+	<VBreadcrumbItem text="Breadcrumb" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/breadcrumb/CommonUsageExample.vue b/apps/vue-docs/docs/examples/components/breadcrumb/CommonUsageExample.vue
index 0a5c4160af..3b27243d1a 100644
--- a/apps/vue-docs/docs/examples/components/breadcrumb/CommonUsageExample.vue
+++ b/apps/vue-docs/docs/examples/components/breadcrumb/CommonUsageExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VBreadcrumb>
-    <VBreadcrumbItem href="#" text="breadcrumb" />
-    <VBreadcrumbItem href="#" text="breadcrumb" />
-    <VBreadcrumbItem href="#" text="breadcrumb" />
-    <VBreadcrumbItem text="breadcrumb" />
-  </VBreadcrumb>
+	<VBreadcrumb>
+		<VBreadcrumbItem href="#" text="breadcrumb" />
+		<VBreadcrumbItem href="#" text="breadcrumb" />
+		<VBreadcrumbItem href="#" text="breadcrumb" />
+		<VBreadcrumbItem text="breadcrumb" />
+	</VBreadcrumb>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/breadcrumb/MultipleHiddenCrumbsExample.vue b/apps/vue-docs/docs/examples/components/breadcrumb/MultipleHiddenCrumbsExample.vue
index e4ef317ed6..7dedf05670 100644
--- a/apps/vue-docs/docs/examples/components/breadcrumb/MultipleHiddenCrumbsExample.vue
+++ b/apps/vue-docs/docs/examples/components/breadcrumb/MultipleHiddenCrumbsExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VBreadcrumb>
-    <VBreadcrumbItem href="#" text="breadcrumb" />
-    <VBreadcrumbItem text="..." />
-    <VBreadcrumbItem href="#" text="breadcrumb" />
-  </VBreadcrumb>
+	<VBreadcrumb>
+		<VBreadcrumbItem href="#" text="breadcrumb" />
+		<VBreadcrumbItem text="..." />
+		<VBreadcrumbItem href="#" text="breadcrumb" />
+	</VBreadcrumb>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/button/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/button/AppearanceExample.vue
index d8a52044ef..120289f8cd 100644
--- a/apps/vue-docs/docs/examples/components/button/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/AppearanceExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton label="ghost" appearance="ghost" />
-    <VButton label="filled" appearance="filled" />
-    <VButton label="outlined" appearance="outlined" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton label="ghost" appearance="ghost" />
+		<VButton label="filled" appearance="filled" />
+		<VButton label="outlined" appearance="outlined" />
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/DefaultLabelExample.vue b/apps/vue-docs/docs/examples/components/button/DefaultLabelExample.vue
index c9b5d433a8..5f9dcca024 100644
--- a/apps/vue-docs/docs/examples/components/button/DefaultLabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/DefaultLabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VButton appearance="filled" label="A default button" />
+	<VButton appearance="filled" label="A default button" />
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/DisabledExample.vue b/apps/vue-docs/docs/examples/components/button/DisabledExample.vue
index 87967ba989..1347cccfca 100644
--- a/apps/vue-docs/docs/examples/components/button/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/DisabledExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VButton appearance="ghost" label="ghost" disabled />
-  <VButton appearance="filled" label="filled" disabled />
-  <VButton appearance="outlined" label="outlined" disabled />
+	<VButton appearance="ghost" label="ghost" disabled />
+	<VButton appearance="filled" label="filled" disabled />
+	<VButton appearance="outlined" label="outlined" disabled />
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/FilledButtonConnotationExample.vue b/apps/vue-docs/docs/examples/components/button/FilledButtonConnotationExample.vue
index 02b9a9c65f..96b8e452f5 100644
--- a/apps/vue-docs/docs/examples/components/button/FilledButtonConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/FilledButtonConnotationExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton appearance="filled" label="accent" connotation="accent" />
-    <VButton appearance="filled" label="cta" connotation="cta" />
-    <VButton appearance="filled" label="success" connotation="success" />
-    <VButton appearance="filled" label="alert" connotation="alert" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton appearance="filled" label="accent" connotation="accent" />
+		<VButton appearance="filled" label="cta" connotation="cta" />
+		<VButton appearance="filled" label="success" connotation="success" />
+		<VButton appearance="filled" label="alert" connotation="alert" />
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/FullWidthButtonExample.vue b/apps/vue-docs/docs/examples/components/button/FullWidthButtonExample.vue
index 9694da7871..b6519bbde1 100644
--- a/apps/vue-docs/docs/examples/components/button/FullWidthButtonExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/FullWidthButtonExample.vue
@@ -1,11 +1,16 @@
 <template>
-  <VButton class="button-width" label="I'm full width" shape="pill" appearance="filled" />
+	<VButton
+		class="button-width"
+		label="I'm full width"
+		shape="pill"
+		appearance="filled"
+	/>
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
 </script>
 <style scoped lang="scss">
 .button-width {
-  display: block;
+	display: block;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/button/GhostButtonConnotationExample.vue b/apps/vue-docs/docs/examples/components/button/GhostButtonConnotationExample.vue
index b2addaeee8..7d6a5b85df 100644
--- a/apps/vue-docs/docs/examples/components/button/GhostButtonConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/GhostButtonConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VButton appearance="ghost" label="accent" connotation="accent" />
-  <VButton appearance="ghost" label="cta" connotation="cta" />
-  <VButton appearance="ghost" label="success" connotation="success" />
-  <VButton appearance="ghost" label="alert" connotation="alert" />
+	<VButton appearance="ghost" label="accent" connotation="accent" />
+	<VButton appearance="ghost" label="cta" connotation="cta" />
+	<VButton appearance="ghost" label="success" connotation="success" />
+	<VButton appearance="ghost" label="alert" connotation="alert" />
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/IconExample.vue b/apps/vue-docs/docs/examples/components/button/IconExample.vue
index 4fc7246a0e..1ba8f708e2 100644
--- a/apps/vue-docs/docs/examples/components/button/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/IconExample.vue
@@ -1,8 +1,17 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton appearance="filled" icon="message-sent-line" aria-label="Send Message" />
-    <VButton appearance="filled" icon="message-sent-line" aria-label="Send Message" shape="pill" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton
+			appearance="filled"
+			icon="message-sent-line"
+			aria-label="Send Message"
+		/>
+		<VButton
+			appearance="filled"
+			icon="message-sent-line"
+			aria-label="Send Message"
+			shape="pill"
+		/>
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/IconWithLabelExample.vue b/apps/vue-docs/docs/examples/components/button/IconWithLabelExample.vue
index 2607853a05..cd3e8b331e 100644
--- a/apps/vue-docs/docs/examples/components/button/IconWithLabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/IconWithLabelExample.vue
@@ -1,8 +1,13 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton appearance="filled" label="icon" icon="check-line" />
-    <VButton appearance="filled" label="icon-trailing" icon="check-line" icon-trailing />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton appearance="filled" label="icon" icon="check-line" />
+		<VButton
+			appearance="filled"
+			label="icon-trailing"
+			icon="check-line"
+			icon-trailing
+		/>
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/OutlinedButtonExample.vue b/apps/vue-docs/docs/examples/components/button/OutlinedButtonExample.vue
index 56e5d05cf6..49df93c7fb 100644
--- a/apps/vue-docs/docs/examples/components/button/OutlinedButtonExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/OutlinedButtonExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton appearance="outlined" label="accent" connotation="accent" />
-    <VButton appearance="outlined" label="cta" connotation="cta" />
-    <VButton appearance="outlined" label="success" connotation="success" />
-    <VButton appearance="outlined" label="alert" connotation="alert" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton appearance="outlined" label="accent" connotation="accent" />
+		<VButton appearance="outlined" label="cta" connotation="cta" />
+		<VButton appearance="outlined" label="success" connotation="success" />
+		<VButton appearance="outlined" label="alert" connotation="alert" />
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/PendingExample.vue b/apps/vue-docs/docs/examples/components/button/PendingExample.vue
index 8a4d567592..8fbcfbae6a 100644
--- a/apps/vue-docs/docs/examples/components/button/PendingExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/PendingExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VButton appearance="ghost" label="ghost" pending />
-  <VButton appearance="filled" label="filled" pending />
-  <VButton appearance="outlined" label="outlined" pending />
+	<VButton appearance="ghost" label="ghost" pending />
+	<VButton appearance="filled" label="filled" pending />
+	<VButton appearance="outlined" label="outlined" pending />
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/ShapeExample.vue b/apps/vue-docs/docs/examples/components/button/ShapeExample.vue
index d238c29be8..57b2b02440 100644
--- a/apps/vue-docs/docs/examples/components/button/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton appearance="filled" label="rounded" shape="rounded" />
-    <VButton appearance="filled" label="pill" shape="pill" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton appearance="filled" label="rounded" shape="rounded" />
+		<VButton appearance="filled" label="pill" shape="pill" />
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/SizeExample.vue b/apps/vue-docs/docs/examples/components/button/SizeExample.vue
index f563980788..89afc67286 100644
--- a/apps/vue-docs/docs/examples/components/button/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/SizeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VButton appearance="filled" label="super-condensed" size="super-condensed" />
-  <VButton appearance="filled" label="condensed" size="condensed" />
-  <VButton appearance="filled" label="normal" size="normal" />
-  <VButton appearance="filled" label="expanded" size="expanded" />
+	<VButton appearance="filled" label="super-condensed" size="super-condensed" />
+	<VButton appearance="filled" label="condensed" size="condensed" />
+	<VButton appearance="filled" label="normal" size="normal" />
+	<VButton appearance="filled" label="expanded" size="expanded" />
 </template>
 <script setup lang="ts">
 import { VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/StackedExample.vue b/apps/vue-docs/docs/examples/components/button/StackedExample.vue
index 03fdaa1056..8ec370716b 100644
--- a/apps/vue-docs/docs/examples/components/button/StackedExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/StackedExample.vue
@@ -1,10 +1,21 @@
 <template>
-  <VLayout column-spacing="small" column-basis="small">
-    <VButton stacked appearance="filled" label="Stacked" />
-    <VButton stacked appearance="filled" icon="message-sent-line" label="With Icon" />
-    <VButton stacked appearance="filled" icon="message-sent-line" icon-trailing label="Icon Trailing" />
-    <VButton stacked appearance="filled" icon="message-sent-line" />
-  </VLayout>
+	<VLayout column-spacing="small" column-basis="small">
+		<VButton stacked appearance="filled" label="Stacked" />
+		<VButton
+			stacked
+			appearance="filled"
+			icon="message-sent-line"
+			label="With Icon"
+		/>
+		<VButton
+			stacked
+			appearance="filled"
+			icon="message-sent-line"
+			icon-trailing
+			label="Icon Trailing"
+		/>
+		<VButton stacked appearance="filled" icon="message-sent-line" />
+	</VLayout>
 </template>
 <script setup lang="ts">
 import { VLayout, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/button/ToggleButtonExample.vue b/apps/vue-docs/docs/examples/components/button/ToggleButtonExample.vue
index a6082ff32c..0dcddfec7a 100644
--- a/apps/vue-docs/docs/examples/components/button/ToggleButtonExample.vue
+++ b/apps/vue-docs/docs/examples/components/button/ToggleButtonExample.vue
@@ -1,5 +1,11 @@
 <template>
-  <VButton connotation="cta" shape="pill" :icon="icon" :aria-label="ariaLabel" @click="toggleButton" />
+	<VButton
+		connotation="cta"
+		shape="pill"
+		:icon="icon"
+		:aria-label="ariaLabel"
+		@click="toggleButton"
+	/>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -10,8 +16,8 @@ const ariaLabel = ref('Mute');
 const ariaPressed = ref(false);
 
 function toggleButton() {
-  ariaPressed.value = !ariaPressed.value;
-  icon.value = ariaPressed.value ? 'mic-mute-solid' : 'microphone-solid';
-  ariaLabel.value = ariaPressed.value ? 'Unmute' : 'Mute';
+	ariaPressed.value = !ariaPressed.value;
+	icon.value = ariaPressed.value ? 'mic-mute-solid' : 'microphone-solid';
+	ariaLabel.value = ariaPressed.value ? 'Unmute' : 'Mute';
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/AppearanceExample.vue
index ee7e5451f1..c21b8647f1 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/AppearanceExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCalendar>
-    <VCalendarEvent slot="day-0" appearance="filled" heading="filled" />
-    <VCalendarEvent slot="day-1" appearance="subtle" heading="subtle" />
-  </VCalendar>
+	<VCalendar>
+		<VCalendarEvent slot="day-0" appearance="filled" heading="filled" />
+		<VCalendarEvent slot="day-1" appearance="subtle" heading="subtle" />
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/BasicExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/BasicExample.vue
index 1f7c16a342..53b2ecb75b 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/BasicExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/BasicExample.vue
@@ -1,67 +1,74 @@
 <template>
-  <VCalendar datetime="2021-01-01">
-    <VCalendarEvent
-      slot="day-0"
-      start="0"
-      duration="1"
-      connotation="information"
-      heading="Pool party"
-      description="2pm"
-    />
-    <VCalendarEvent
-      slot="day-0"
-      start="14"
-      duration="2.25"
-      connotation="accent"
-      appearance="subtle"
-      heading="Summer time"
-      description="All Day"
-    />
-    <VCalendarEvent
-      slot="day-2"
-      start="4"
-      duration="4"
-      connotation="announcement"
-      heading="Team meeting"
-      description="11am - 13pm"
-    />
-    <VCalendarEvent
-      slot="day-3"
-      start="16"
-      duration="8"
-      connotation="success"
-      heading="Main event"
-      description="12:30pm"
-      overlap-count="2"
-    />
-    <VCalendarEvent
-      slot="day-3"
-      start="17"
-      duration="7"
-      connotation="information"
-      heading="Roadmap discussion"
-      description="All Day"
-    />
-    <VCalendarEvent
-      slot="day-3"
-      start="18.5"
-      duration="7.5"
-      connotation="accent"
-      appearance="subtle"
-      heading="Summer time"
-      description="15:30pm"
-      overlap-count="1"
-    />
-    <VCalendarEvent slot="day-6" start="12" duration="4" connotation="cta" heading="Team social" description="14pm" />
-    <VCalendarEvent
-      slot="day-6"
-      start="20"
-      duration="5"
-      connotation="success"
-      heading="Summer time"
-      description="18pm"
-    />
-  </VCalendar>
+	<VCalendar datetime="2021-01-01">
+		<VCalendarEvent
+			slot="day-0"
+			start="0"
+			duration="1"
+			connotation="information"
+			heading="Pool party"
+			description="2pm"
+		/>
+		<VCalendarEvent
+			slot="day-0"
+			start="14"
+			duration="2.25"
+			connotation="accent"
+			appearance="subtle"
+			heading="Summer time"
+			description="All Day"
+		/>
+		<VCalendarEvent
+			slot="day-2"
+			start="4"
+			duration="4"
+			connotation="announcement"
+			heading="Team meeting"
+			description="11am - 13pm"
+		/>
+		<VCalendarEvent
+			slot="day-3"
+			start="16"
+			duration="8"
+			connotation="success"
+			heading="Main event"
+			description="12:30pm"
+			overlap-count="2"
+		/>
+		<VCalendarEvent
+			slot="day-3"
+			start="17"
+			duration="7"
+			connotation="information"
+			heading="Roadmap discussion"
+			description="All Day"
+		/>
+		<VCalendarEvent
+			slot="day-3"
+			start="18.5"
+			duration="7.5"
+			connotation="accent"
+			appearance="subtle"
+			heading="Summer time"
+			description="15:30pm"
+			overlap-count="1"
+		/>
+		<VCalendarEvent
+			slot="day-6"
+			start="12"
+			duration="4"
+			connotation="cta"
+			heading="Team social"
+			description="14pm"
+		/>
+		<VCalendarEvent
+			slot="day-6"
+			start="20"
+			duration="5"
+			connotation="success"
+			heading="Summer time"
+			description="18pm"
+		/>
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/ConnotationExample.vue
index 56aabc9979..8cc5cc0d0f 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/ConnotationExample.vue
@@ -1,13 +1,48 @@
 <template>
-  <VCalendar>
-    <VCalendarEvent slot="day-0" connotation="accent" appearance="filled" heading="accent" />
-    <VCalendarEvent slot="day-1" connotation="cta" appearance="filled" heading="cta" />
-    <VCalendarEvent slot="day-2" connotation="success" appearance="filled" heading="success" />
-    <VCalendarEvent slot="day-3" connotation="alert" appearance="filled" heading="alert" />
-    <VCalendarEvent slot="day-4" connotation="warning" appearance="filled" heading="warning" />
-    <VCalendarEvent slot="day-5" connotation="information" appearance="filled" heading="information" />
-    <VCalendarEvent slot="day-6" connotation="announcement" appearance="filled" heading="announcement" />
-  </VCalendar>
+	<VCalendar>
+		<VCalendarEvent
+			slot="day-0"
+			connotation="accent"
+			appearance="filled"
+			heading="accent"
+		/>
+		<VCalendarEvent
+			slot="day-1"
+			connotation="cta"
+			appearance="filled"
+			heading="cta"
+		/>
+		<VCalendarEvent
+			slot="day-2"
+			connotation="success"
+			appearance="filled"
+			heading="success"
+		/>
+		<VCalendarEvent
+			slot="day-3"
+			connotation="alert"
+			appearance="filled"
+			heading="alert"
+		/>
+		<VCalendarEvent
+			slot="day-4"
+			connotation="warning"
+			appearance="filled"
+			heading="warning"
+		/>
+		<VCalendarEvent
+			slot="day-5"
+			connotation="information"
+			appearance="filled"
+			heading="information"
+		/>
+		<VCalendarEvent
+			slot="day-6"
+			connotation="announcement"
+			appearance="filled"
+			heading="announcement"
+		/>
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/DescriptionExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/DescriptionExample.vue
index 3cb94cc85b..3500e868bf 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/DescriptionExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/DescriptionExample.vue
@@ -1,7 +1,10 @@
 <template>
-  <VCalendar>
-    <VCalendarEvent slot="day-0" description="A party in which guests swim in a swimming pool" />
-  </VCalendar>
+	<VCalendar>
+		<VCalendarEvent
+			slot="day-0"
+			description="A party in which guests swim in a swimming pool"
+		/>
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/HeadingExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/HeadingExample.vue
index 5eff6257d9..4ddd752a10 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/HeadingExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/HeadingExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VCalendar>
-    <VCalendarEvent slot="day-0" heading="Summer pool party" />
-  </VCalendar>
+	<VCalendar>
+		<VCalendarEvent slot="day-0" heading="Summer pool party" />
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar-event/SubtitleCalendarEventExample.vue b/apps/vue-docs/docs/examples/components/calendar-event/SubtitleCalendarEventExample.vue
index 254cbf3653..4b35dbcae0 100644
--- a/apps/vue-docs/docs/examples/components/calendar-event/SubtitleCalendarEventExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar-event/SubtitleCalendarEventExample.vue
@@ -1,13 +1,48 @@
 <template>
-  <VCalendar>
-    <VCalendarEvent slot="day-0" connotation="accent" appearance="subtle" heading="accent" />
-    <VCalendarEvent slot="day-1" connotation="cta" appearance="subtle" heading="cta" />
-    <VCalendarEvent slot="day-2" connotation="success" appearance="subtle" heading="success" />
-    <VCalendarEvent slot="day-3" connotation="alert" appearance="subtle" heading="alert" />
-    <VCalendarEvent slot="day-4" connotation="warning" appearance="subtle" heading="warning" />
-    <VCalendarEvent slot="day-5" connotation="information" appearance="subtle" heading="information" />
-    <VCalendarEvent slot="day-6" connotation="announcement" appearance="subtle" heading="announcement" />
-  </VCalendar>
+	<VCalendar>
+		<VCalendarEvent
+			slot="day-0"
+			connotation="accent"
+			appearance="subtle"
+			heading="accent"
+		/>
+		<VCalendarEvent
+			slot="day-1"
+			connotation="cta"
+			appearance="subtle"
+			heading="cta"
+		/>
+		<VCalendarEvent
+			slot="day-2"
+			connotation="success"
+			appearance="subtle"
+			heading="success"
+		/>
+		<VCalendarEvent
+			slot="day-3"
+			connotation="alert"
+			appearance="subtle"
+			heading="alert"
+		/>
+		<VCalendarEvent
+			slot="day-4"
+			connotation="warning"
+			appearance="subtle"
+			heading="warning"
+		/>
+		<VCalendarEvent
+			slot="day-5"
+			connotation="information"
+			appearance="subtle"
+			heading="information"
+		/>
+		<VCalendarEvent
+			slot="day-6"
+			connotation="announcement"
+			appearance="subtle"
+			heading="announcement"
+		/>
+	</VCalendar>
 </template>
 <script setup lang="ts">
 import { VCalendar, VCalendarEvent } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar/BasicExample.vue b/apps/vue-docs/docs/examples/components/calendar/BasicExample.vue
index e275f5c406..0a170f2eaa 100644
--- a/apps/vue-docs/docs/examples/components/calendar/BasicExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar/BasicExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <VCalendar />
-  </div>
+	<div>
+		<VCalendar />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/calendar/DateTimeExample.vue b/apps/vue-docs/docs/examples/components/calendar/DateTimeExample.vue
index 1ff75bb3af..c084eaaa4a 100644
--- a/apps/vue-docs/docs/examples/components/calendar/DateTimeExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar/DateTimeExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCalendar datetime="2022-01-01" />
+	<VCalendar datetime="2022-01-01" />
 </template>
 <script setup lang="ts">
 import { VCalendar } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar/Hour12Example.vue b/apps/vue-docs/docs/examples/components/calendar/Hour12Example.vue
index be16fba425..da0d8113e9 100644
--- a/apps/vue-docs/docs/examples/components/calendar/Hour12Example.vue
+++ b/apps/vue-docs/docs/examples/components/calendar/Hour12Example.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCalendar hour12 />
+	<VCalendar hour12 />
 </template>
 <script setup lang="ts">
 import { VCalendar } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar/LocaleExample.vue b/apps/vue-docs/docs/examples/components/calendar/LocaleExample.vue
index b7a9b2f63f..7be024a6c4 100644
--- a/apps/vue-docs/docs/examples/components/calendar/LocaleExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar/LocaleExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCalendar locales="he-IL" start-day="sunday" style="direction: rtl" />
+	<VCalendar locales="he-IL" start-day="sunday" style="direction: rtl" />
 </template>
 <script setup lang="ts">
 import { VCalendar } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/calendar/StartDayExample.vue b/apps/vue-docs/docs/examples/components/calendar/StartDayExample.vue
index f61d6d3b46..aa18cc0fba 100644
--- a/apps/vue-docs/docs/examples/components/calendar/StartDayExample.vue
+++ b/apps/vue-docs/docs/examples/components/calendar/StartDayExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCalendar start-day="sunday" />
+	<VCalendar start-day="sunday" />
 </template>
 <script setup lang="ts">
 import { VCalendar } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/card/ElevationExample.vue b/apps/vue-docs/docs/examples/components/card/ElevationExample.vue
index 23bfd6ced5..56458de63e 100644
--- a/apps/vue-docs/docs/examples/components/card/ElevationExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/ElevationExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VCard
-    elevation="12"
-    headline="Vivid Card Component"
-    subtitle="extra text to the card headline"
-    icon="chat-line"
-    text="the card can contain multiple lines of text"
-  />
+	<VCard
+		elevation="12"
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+		icon="chat-line"
+		text="the card can contain multiple lines of text"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/FooterSlotExample.vue b/apps/vue-docs/docs/examples/components/card/FooterSlotExample.vue
index 24611cb1ad..66b73f4916 100644
--- a/apps/vue-docs/docs/examples/components/card/FooterSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/FooterSlotExample.vue
@@ -1,15 +1,27 @@
 <template>
-  <VCard headline="All Options on Deck" subtitle="subtitle" icon="chat-line" text="here is the card text">
-    <template #media>
-      <div style="height: 150px; width: 100%; background-color: rebeccapurple" />
-    </template>
-    <template #meta>
-      <VButton icon="more-vertical-solid" appearance="ghost" />
-    </template>
-    <template #footer>
-      <VButton icon="arrow-bold-right-line" shape="pill" label="Action" appearance="outlined" />
-    </template>
-  </VCard>
+	<VCard
+		headline="All Options on Deck"
+		subtitle="subtitle"
+		icon="chat-line"
+		text="here is the card text"
+	>
+		<template #media>
+			<div
+				style="height: 150px; width: 100%; background-color: rebeccapurple"
+			/>
+		</template>
+		<template #meta>
+			<VButton icon="more-vertical-solid" appearance="ghost" />
+		</template>
+		<template #footer>
+			<VButton
+				icon="arrow-bold-right-line"
+				shape="pill"
+				label="Action"
+				appearance="outlined"
+			/>
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/GraphicSlotExample.vue b/apps/vue-docs/docs/examples/components/card/GraphicSlotExample.vue
index 86126f77bf..d8b1e61c3c 100644
--- a/apps/vue-docs/docs/examples/components/card/GraphicSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/GraphicSlotExample.vue
@@ -1,9 +1,15 @@
 <template>
-  <VCard headline="Vivid Card Component" subtitle="extra text to the card headline">
-    <template #graphic>
-      <VIcon name="android-mono" style="font-size: 44px; color: var(--vvd-color-sucess)" />
-    </template>
-  </VCard>
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+	>
+		<template #graphic>
+			<VIcon
+				name="android-mono"
+				style="font-size: 44px; color: var(--vvd-color-sucess)"
+			/>
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/card/HeadlineExample.vue
index 97d9b60626..eb2c06a4a9 100644
--- a/apps/vue-docs/docs/examples/components/card/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/HeadlineExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCard headline="Vivid Card Component" />
+	<VCard headline="Vivid Card Component" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/IconExample.vue b/apps/vue-docs/docs/examples/components/card/IconExample.vue
index 0c82b6f5f8..0c397dd634 100644
--- a/apps/vue-docs/docs/examples/components/card/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/IconExample.vue
@@ -1,5 +1,9 @@
 <template>
-  <VCard headline="Vivid Card Component" subtitle="extra text to the card headline" icon="chat-line" />
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+		icon="chat-line"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/MainSlotExample.vue b/apps/vue-docs/docs/examples/components/card/MainSlotExample.vue
index 4db8ebae13..dec54d408a 100644
--- a/apps/vue-docs/docs/examples/components/card/MainSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/MainSlotExample.vue
@@ -1,9 +1,11 @@
 <template>
-  <VCard>
-    <template #main>
-      <VLayout gutters="small"> assign custom template using "main" slot </VLayout>
-    </template>
-  </VCard>
+	<VCard>
+		<template #main>
+			<VLayout gutters="small">
+				assign custom template using "main" slot
+			</VLayout>
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/MediaSlotExample.vue b/apps/vue-docs/docs/examples/components/card/MediaSlotExample.vue
index b1149a7b16..a68bd97c88 100644
--- a/apps/vue-docs/docs/examples/components/card/MediaSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/MediaSlotExample.vue
@@ -1,13 +1,17 @@
 <template>
-  <VCard headline="Card with Media" text="here is the card text" style="max-inline-size: 300px">
-    <template #media>
-      <img
-        src="https://doodleipsum.com/300x150/flat?bg=EB765D&amp;i=7d5ed3bc0c215d1359b2a63d03cf1540"
-        alt="Sitting on Floor"
-        style="width: 100%; height: 150px; object-fit: cover"
-      />
-    </template>
-  </VCard>
+	<VCard
+		headline="Card with Media"
+		text="here is the card text"
+		style="max-inline-size: 300px"
+	>
+		<template #media>
+			<img
+				src="https://doodleipsum.com/300x150/flat?bg=EB765D&amp;i=7d5ed3bc0c215d1359b2a63d03cf1540"
+				alt="Sitting on Floor"
+				style="width: 100%; height: 150px; object-fit: cover"
+			/>
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/MetaSlotExample.vue b/apps/vue-docs/docs/examples/components/card/MetaSlotExample.vue
index 3a0d2f15e8..31a016f2c3 100644
--- a/apps/vue-docs/docs/examples/components/card/MetaSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/MetaSlotExample.vue
@@ -1,9 +1,12 @@
 <template>
-  <VCard headline="Vivid Card Component" subtitle="extra text to the card headline">
-    <template #meta>
-      <VButton icon="more-vertical-solid" appearance="ghost" />
-    </template>
-  </VCard>
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+	>
+		<template #meta>
+			<VButton icon="more-vertical-solid" appearance="ghost" />
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/SubtitleExample.vue b/apps/vue-docs/docs/examples/components/card/SubtitleExample.vue
index 0494ff827e..205f032d48 100644
--- a/apps/vue-docs/docs/examples/components/card/SubtitleExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/SubtitleExample.vue
@@ -1,5 +1,8 @@
 <template>
-  <VCard headline="Vivid Card Component" subtitle="extra text to the card headline" />
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/TextExample.vue b/apps/vue-docs/docs/examples/components/card/TextExample.vue
index 7197c85721..93abe8a992 100644
--- a/apps/vue-docs/docs/examples/components/card/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/TextExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VCard
-    headline="Vivid Card Component"
-    subtitle="extra text to the card headline"
-    text="the card can contain multiple lines of text"
-  />
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline"
+		text="the card can contain multiple lines of text"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/TrimHeadlineExample.vue b/apps/vue-docs/docs/examples/components/card/TrimHeadlineExample.vue
index 7c28ce9052..5c7cca4d6b 100644
--- a/apps/vue-docs/docs/examples/components/card/TrimHeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/TrimHeadlineExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VCard
-    headline="Vivid Card Component with long headline to trim"
-    subtitle="here is the card text"
-    style="--headline-line-clamp: 1; max-inline-size: 42ch"
-  />
+	<VCard
+		headline="Vivid Card Component with long headline to trim"
+		subtitle="here is the card text"
+		style="--headline-line-clamp: 1; max-inline-size: 42ch"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/card/TrimSubtitleExample.vue b/apps/vue-docs/docs/examples/components/card/TrimSubtitleExample.vue
index bebf44c15b..81f567499d 100644
--- a/apps/vue-docs/docs/examples/components/card/TrimSubtitleExample.vue
+++ b/apps/vue-docs/docs/examples/components/card/TrimSubtitleExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VCard
-    headline="Vivid Card Component"
-    subtitle="extra text to the card headline that is set to be trimmed after 2 lines so the card will not be too long"
-    style="--subtitle-line-clamp: 2; max-inline-size: 42ch"
-  />
+	<VCard
+		headline="Vivid Card Component"
+		subtitle="extra text to the card headline that is set to be trimmed after 2 lines so the card will not be too long"
+		style="--subtitle-line-clamp: 2; max-inline-size: 42ch"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/checkbox/CheckedExample.vue b/apps/vue-docs/docs/examples/components/checkbox/CheckedExample.vue
index ff277a8489..f398ed1105 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/CheckedExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/CheckedExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCheckbox checked />
+	<VCheckbox checked />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/checkbox/DisabledExample.vue b/apps/vue-docs/docs/examples/components/checkbox/DisabledExample.vue
index eefe2f5b3c..7b09d565dc 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/DisabledExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VCheckbox disabled />
-    <VCheckbox disabled checked />
-  </div>
+	<div>
+		<VCheckbox disabled />
+		<VCheckbox disabled checked />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/checkbox/IndeterminateExample.vue b/apps/vue-docs/docs/examples/components/checkbox/IndeterminateExample.vue
index 9bd67f74d0..b8bb444cf1 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/IndeterminateExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/IndeterminateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCheckbox ref="checkbox" />
+	<VCheckbox ref="checkbox" />
 </template>
 
 <script setup lang="ts">
@@ -8,8 +8,8 @@ import { ref, watchEffect } from 'vue';
 
 const checkbox = ref<VCheckbox>(null);
 watchEffect(() => {
-  if (checkbox.value) {
-    checkbox.value.$el.indeterminate = true;
-  }
+	if (checkbox.value) {
+		checkbox.value.$el.indeterminate = true;
+	}
 });
 </script>
diff --git a/apps/vue-docs/docs/examples/components/checkbox/LabelExample.vue b/apps/vue-docs/docs/examples/components/checkbox/LabelExample.vue
index 5b1262ebd3..566260e406 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCheckbox label="A default checkbox" />
+	<VCheckbox label="A default checkbox" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/checkbox/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/checkbox/ReadonlyExample.vue
index 72b37062f7..365bbaee91 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/ReadonlyExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VCheckbox readonly />
-    <VCheckbox readonly checked />
-  </div>
+	<div>
+		<VCheckbox readonly />
+		<VCheckbox readonly checked />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/checkbox/ValueExample.vue b/apps/vue-docs/docs/examples/components/checkbox/ValueExample.vue
index fb5985c280..df5a5936e2 100644
--- a/apps/vue-docs/docs/examples/components/checkbox/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/checkbox/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VCheckbox value="my-value" />
+	<VCheckbox value="my-value" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/combobox/AutocompleteExample.vue b/apps/vue-docs/docs/examples/components/combobox/AutocompleteExample.vue
index b5dc9eec16..5550a4cf55 100644
--- a/apps/vue-docs/docs/examples/components/combobox/AutocompleteExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/AutocompleteExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox autocomplete="both">
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox autocomplete="both">
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/DefaultSlotExample.vue b/apps/vue-docs/docs/examples/components/combobox/DefaultSlotExample.vue
index 585c6dbfb6..bb8dc022ff 100644
--- a/apps/vue-docs/docs/examples/components/combobox/DefaultSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/DefaultSlotExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox>
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox>
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/DisabledExample.vue b/apps/vue-docs/docs/examples/components/combobox/DisabledExample.vue
index 24ea67422d..e80a449bfb 100644
--- a/apps/vue-docs/docs/examples/components/combobox/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/DisabledExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox disabled>
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox disabled>
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/LabelExample.vue b/apps/vue-docs/docs/examples/components/combobox/LabelExample.vue
index c8cf7969f6..5df0095ceb 100644
--- a/apps/vue-docs/docs/examples/components/combobox/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/LabelExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox label="Search for something">
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox label="Search for something">
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/OpenExample.vue b/apps/vue-docs/docs/examples/components/combobox/OpenExample.vue
index 5ed1816c77..54b18138e9 100644
--- a/apps/vue-docs/docs/examples/components/combobox/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/OpenExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox open>
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox open>
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VCombobox, VOption } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/PlaceholderExample.vue b/apps/vue-docs/docs/examples/components/combobox/PlaceholderExample.vue
index 2997457aa4..2697974685 100644
--- a/apps/vue-docs/docs/examples/components/combobox/PlaceholderExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/PlaceholderExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox placeholder="placeholder">
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox placeholder="placeholder">
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/PlacementExample.vue b/apps/vue-docs/docs/examples/components/combobox/PlacementExample.vue
index 822a047bb7..19f390c78c 100644
--- a/apps/vue-docs/docs/examples/components/combobox/PlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/PlacementExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="combobox-wrapper">
-    <VCombobox placement="top">
-      <VOption text="First Option" />
-      <VOption text="Second Option" />
-    </VCombobox>
-  </div>
+	<div class="combobox-wrapper">
+		<VCombobox placement="top">
+			<VOption text="First Option" />
+			<VOption text="Second Option" />
+		</VCombobox>
+	</div>
 </template>
 <script setup lang="ts">
 import { VCombobox, VOption } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/combobox/ValueExample.vue b/apps/vue-docs/docs/examples/components/combobox/ValueExample.vue
index 4e008ec850..d4f7535ba3 100644
--- a/apps/vue-docs/docs/examples/components/combobox/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/combobox/ValueExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VCombobox value="First Option">
-    <VOption text="First Option" />
-    <VOption text="Second Option" />
-  </VCombobox>
+	<VCombobox value="First Option">
+		<VOption text="First Option" />
+		<VOption text="Second Option" />
+	</VCombobox>
 </template>
 <script setup lang="ts">
 import { VOption, VCombobox } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/data-grid/BasicExample.vue b/apps/vue-docs/docs/examples/components/data-grid/BasicExample.vue
index 338f96c3aa..d9f527a81d 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/BasicExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/BasicExample.vue
@@ -1,21 +1,27 @@
 <template>
-  <VDataGrid>
-    <VDataGridRow role="row" row-type="header">
-      <VDataGridCell cell-type="columnheader" role="columnheader">Name</VDataGridCell>
-      <VDataGridCell cell-type="columnheader" role="columnheader">Surname</VDataGridCell>
-      <VDataGridCell cell-type="columnheader" role="columnheader">Age</VDataGridCell>
-    </VDataGridRow>
-    <VDataGridRow>
-      <VDataGridCell>John</VDataGridCell>
-      <VDataGridCell>Doe</VDataGridCell>
-      <VDataGridCell>30</VDataGridCell>
-    </VDataGridRow>
-    <VDataGridRow>
-      <VDataGridCell>Jane</VDataGridCell>
-      <VDataGridCell>Doe</VDataGridCell>
-      <VDataGridCell>25</VDataGridCell>
-    </VDataGridRow>
-  </VDataGrid>
+	<VDataGrid>
+		<VDataGridRow role="row" row-type="header">
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Name
+			</VDataGridCell>
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Surname
+			</VDataGridCell>
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Age
+			</VDataGridCell>
+		</VDataGridRow>
+		<VDataGridRow>
+			<VDataGridCell>John</VDataGridCell>
+			<VDataGridCell>Doe</VDataGridCell>
+			<VDataGridCell>30</VDataGridCell>
+		</VDataGridRow>
+		<VDataGridRow>
+			<VDataGridCell>Jane</VDataGridCell>
+			<VDataGridCell>Doe</VDataGridCell>
+			<VDataGridCell>25</VDataGridCell>
+		</VDataGridRow>
+	</VDataGrid>
 </template>
 <script setup lang="ts">
 import { VDataGrid, VDataGridCell, VDataGridRow } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/data-grid/CustomCellsExample.vue b/apps/vue-docs/docs/examples/components/data-grid/CustomCellsExample.vue
index dddf80e2e2..96b9b97b73 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/CustomCellsExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/CustomCellsExample.vue
@@ -1,50 +1,64 @@
 <template>
-  <VDataGrid>
-    <VDataGridRow role="row" row-type="header">
-      <VDataGridCell cell-type="columnheader" role="columnheader">Name</VDataGridCell>
-      <VDataGridCell cell-type="columnheader" role="columnheader">Surname</VDataGridCell>
-      <VDataGridCell cell-type="columnheader" role="columnheader">Age</VDataGridCell>
-      <VDataGridCell cell-type="columnheader" role="columnheader">Profession</VDataGridCell>
-    </VDataGridRow>
-    <VDataGridRow v-for="employee in data" :key="employee.id">
-      <VDataGridCell>{{ employee.name }}</VDataGridCell>
-      <VDataGridCell>{{ employee.surname }}</VDataGridCell>
-      <VDataGridCell>{{ employee.age }}</VDataGridCell>
-      <VDataGridCell>
-        <VSelect v-model="employee.profession" fixed-dropdown>
-          <VOption
-            v-for="profession in professions"
-            :key="profession.id"
-            :value="profession.id.toString()"
-            :text="profession.name"
-          />
-        </VSelect>
-      </VDataGridCell>
-    </VDataGridRow>
-  </VDataGrid>
+	<VDataGrid>
+		<VDataGridRow role="row" row-type="header">
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Name
+			</VDataGridCell>
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Surname
+			</VDataGridCell>
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Age
+			</VDataGridCell>
+			<VDataGridCell cell-type="columnheader" role="columnheader">
+				Profession
+			</VDataGridCell>
+		</VDataGridRow>
+		<VDataGridRow v-for="employee in data" :key="employee.id">
+			<VDataGridCell>{{ employee.name }}</VDataGridCell>
+			<VDataGridCell>{{ employee.surname }}</VDataGridCell>
+			<VDataGridCell>{{ employee.age }}</VDataGridCell>
+			<VDataGridCell>
+				<VSelect v-model="employee.profession" fixed-dropdown>
+					<VOption
+						v-for="profession in professions"
+						:key="profession.id"
+						:value="profession.id.toString()"
+						:text="profession.name"
+					/>
+				</VSelect>
+			</VDataGridCell>
+		</VDataGridRow>
+	</VDataGrid>
 </template>
 <script setup lang="ts">
-import { VDataGrid, VDataGridCell, VDataGridRow, VSelect, VOption } from '@vonage/vivid-vue';
+import {
+	VDataGrid,
+	VDataGridCell,
+	VDataGridRow,
+	VSelect,
+	VOption,
+} from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
 const professions = ref([
-  { id: 1, name: 'Developer' },
-  { id: 2, name: 'Designer' },
-  { id: 3, name: 'Tester' },
-  { id: 4, name: 'Manager' },
-  { id: 5, name: 'Sales' },
-  { id: 6, name: 'Marketing' },
-  { id: 7, name: 'Support' },
-  { id: 8, name: 'HR' },
-  { id: 9, name: 'Finance' },
-  { id: 10, name: 'Legal' },
-  { id: 11, name: 'Other' },
+	{ id: 1, name: 'Developer' },
+	{ id: 2, name: 'Designer' },
+	{ id: 3, name: 'Tester' },
+	{ id: 4, name: 'Manager' },
+	{ id: 5, name: 'Sales' },
+	{ id: 6, name: 'Marketing' },
+	{ id: 7, name: 'Support' },
+	{ id: 8, name: 'HR' },
+	{ id: 9, name: 'Finance' },
+	{ id: 10, name: 'Legal' },
+	{ id: 11, name: 'Other' },
 ]);
 
 const data = ref([
-  { id: 1, name: 'John', surname: 'Doe', age: 30, profession: 2 },
-  { id: 2, name: 'Jane', surname: 'Doe', age: 25, profession: 5 },
-  { id: 3, name: 'Bill', surname: 'Cave', age: 22, profession: 9 },
-  { id: 4, name: 'Jill', surname: 'Jane', age: 23, profession: 1 },
+	{ id: 1, name: 'John', surname: 'Doe', age: 30, profession: 2 },
+	{ id: 2, name: 'Jane', surname: 'Doe', age: 25, profession: 5 },
+	{ id: 3, name: 'Bill', surname: 'Cave', age: 22, profession: 9 },
+	{ id: 4, name: 'Jill', surname: 'Jane', age: 23, profession: 1 },
 ]);
 </script>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/CustomColumnsWidthsExample.vue b/apps/vue-docs/docs/examples/components/data-grid/CustomColumnsWidthsExample.vue
index db87b947dc..53c016db85 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/CustomColumnsWidthsExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/CustomColumnsWidthsExample.vue
@@ -1,15 +1,19 @@
 <template>
-  <VDataGrid id="grid" :rows-data="data" :grid-template-columns="gridTemplateColumns" />
+	<VDataGrid
+		id="grid"
+		:rows-data="data"
+		:grid-template-columns="gridTemplateColumns"
+	/>
 </template>
 <script setup lang="ts">
 import { VDataGrid } from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
 const data = ref([
-  { name: 'John', surname: 'Doe', age: 30 },
-  { name: 'Jane', surname: 'Doe', age: 25 },
-  { name: 'Bill', surname: 'Cave', age: 22 },
-  { name: 'Jill', surname: 'Jane', age: 23 },
+	{ name: 'John', surname: 'Doe', age: 30 },
+	{ name: 'Jane', surname: 'Doe', age: 25 },
+	{ name: 'Bill', surname: 'Cave', age: 22 },
+	{ name: 'Jill', surname: 'Jane', age: 23 },
 ]);
 
 const gridTemplateColumns = ref('50px 100px 1fr');
@@ -18,6 +22,6 @@ const gridTemplateColumns = ref('50px 100px 1fr');
 <style lang="scss">
 [role='columnheader'],
 [role='gridcell'] {
-  min-inline-size: 50px; /* Needed to reduce the default min-inline-size of 80px */
+	min-inline-size: 50px; /* Needed to reduce the default min-inline-size of 80px */
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/GenerateHeaderExample.vue b/apps/vue-docs/docs/examples/components/data-grid/GenerateHeaderExample.vue
index ddde57fcf1..bd01a541c0 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/GenerateHeaderExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/GenerateHeaderExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VSelect v-model="value" label="Header Type" class="select">
-    <VOption value="none" text="none" />
-    <VOption value="sticky" text="sticky" />
-    <VOption value="default" text="default" />
-  </VSelect>
-  <VDataGrid id="grid" :generate-header="value" :rows-data="data" />
+	<VSelect v-model="value" label="Header Type" class="select">
+		<VOption value="none" text="none" />
+		<VOption value="sticky" text="sticky" />
+		<VOption value="default" text="default" />
+	</VSelect>
+	<VDataGrid id="grid" :generate-header="value" :rows-data="data" />
 </template>
 <script setup lang="ts">
 import { VDataGrid, VSelect, VOption } from '@vonage/vivid-vue';
@@ -12,15 +12,15 @@ import { ref } from 'vue';
 
 const value = ref('none');
 const data = ref([
-  { name: 'John', surname: 'Doe', age: 30 },
-  { name: 'Jane', surname: 'Doe', age: 25 },
-  { name: 'Bill', surname: 'Cave', age: 22 },
-  { name: 'Jill', surname: 'Jane', age: 23 },
+	{ name: 'John', surname: 'Doe', age: 30 },
+	{ name: 'Jane', surname: 'Doe', age: 25 },
+	{ name: 'Bill', surname: 'Cave', age: 22 },
+	{ name: 'Jill', surname: 'Jane', age: 23 },
 ]);
 </script>
 <style lang="scss" scoped>
 #grid {
-  height: 150px;
-  overflow: scroll;
+	height: 150px;
+	overflow: scroll;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/ManipulatingDataExample.vue b/apps/vue-docs/docs/examples/components/data-grid/ManipulatingDataExample.vue
index 2ce748cc2c..2b18e5bf7e 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/ManipulatingDataExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/ManipulatingDataExample.vue
@@ -1,67 +1,65 @@
 <template>
-  <div>
-    <VButton label="Add item" appearance="outlined" @click="push" />
-    <VButton label="Remove last item" appearance="outlined" @click="pop" />
-    <VButton label="Remove first item" appearance="outlined" @click="shift" />
-    <VButton label="Update items" appearance="outlined" @click="update" />
-    <VButton label="Replace items" appearance="outlined" @click="replace" />
-    <VDataGrid selection-mode="single-row" style="max-block-size: 500px;">
-      <VDataGridRow row-type="header">
-        <VDataGridCell cell-type="columnheader">
-          Column 1
-        </VDataGridCell>
-        <VDataGridCell cell-type="columnheader">
-          Column 2
-        </VDataGridCell>
-      </VDataGridRow>
-      <VDataGridRow v-for="row in data" :key="row.id">
-        <VDataGridCell>{{ row.data1 }}</VDataGridCell>
-        <VDataGridCell>{{ row.data2 }}</VDataGridCell>
-      </VDataGridRow>
-    </VDataGrid>
-  </div>
+	<div>
+		<VButton label="Add item" appearance="outlined" @click="push" />
+		<VButton label="Remove last item" appearance="outlined" @click="pop" />
+		<VButton label="Remove first item" appearance="outlined" @click="shift" />
+		<VButton label="Update items" appearance="outlined" @click="update" />
+		<VButton label="Replace items" appearance="outlined" @click="replace" />
+		<VDataGrid selection-mode="single-row" style="max-block-size: 500px">
+			<VDataGridRow row-type="header">
+				<VDataGridCell cell-type="columnheader"> Column 1 </VDataGridCell>
+				<VDataGridCell cell-type="columnheader"> Column 2 </VDataGridCell>
+			</VDataGridRow>
+			<VDataGridRow v-for="row in data" :key="row.id">
+				<VDataGridCell>{{ row.data1 }}</VDataGridCell>
+				<VDataGridCell>{{ row.data2 }}</VDataGridCell>
+			</VDataGridRow>
+		</VDataGrid>
+	</div>
 </template>
 <script setup lang="ts">
-  import { VDataGrid, VDataGridRow, VDataGridCell, VButton } from '@vonage/vivid-vue';
-	import { ref } from 'vue';
+import {
+	VDataGrid,
+	VDataGridRow,
+	VDataGridCell,
+	VButton,
+} from '@vonage/vivid-vue';
+import { ref } from 'vue';
 
-  let data = ref<{id: number, data1: string, data2: string}[]>([]);
+let data = ref<{ id: number; data1: string; data2: string }[]>([]);
 
-	let count = 1;
-  function push() {
-    data.value.push(
-      {
-				id: count,
-        data1: `data${count}1`,
-        data2: `data${count}2`
-      }
-    );
-    count++;
-  }
+let count = 1;
+function push() {
+	data.value.push({
+		id: count,
+		data1: `data${count}1`,
+		data2: `data${count}2`,
+	});
+	count++;
+}
 
-	for (let i = 0; i < 1000; i++) {
-		push();
-	}
-
-  function pop() {
-    data.value.pop();
-  }
+for (let i = 0; i < 1000; i++) {
+	push();
+}
 
-  function shift() {
-    data.value.shift();
-  }
+function pop() {
+	data.value.pop();
+}
 
-  function update() {
-		for (const row of data.value) {
-			row.data1 = `${row.data1} changed`;
-		}
-  }
+function shift() {
+	data.value.shift();
+}
 
-	function replace() {
-		data.value = data.value.map((row) => ({
-			...row,
-			data2: `${row.data2} replaced`
-		}));
+function update() {
+	for (const row of data.value) {
+		row.data1 = `${row.data1} changed`;
 	}
+}
 
+function replace() {
+	data.value = data.value.map((row) => ({
+		...row,
+		data2: `${row.data2} replaced`,
+	}));
+}
 </script>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/NoTabbingExample.vue b/apps/vue-docs/docs/examples/components/data-grid/NoTabbingExample.vue
index 792ef40c71..c2dfe93b06 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/NoTabbingExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/NoTabbingExample.vue
@@ -1,7 +1,15 @@
 <template>
-  <VButton label="Tabbing" :appearance="!value ? 'filled' : 'outlined'" @click="value = false" />
-  <VButton label="No Tabbing" :appearance="value ? 'filled' : 'outlined'" @click="value = true" />
-  <VDataGrid id="grid" :no-tabbing="value" :rows-data="data" />
+	<VButton
+		label="Tabbing"
+		:appearance="!value ? 'filled' : 'outlined'"
+		@click="value = false"
+	/>
+	<VButton
+		label="No Tabbing"
+		:appearance="value ? 'filled' : 'outlined'"
+		@click="value = true"
+	/>
+	<VDataGrid id="grid" :no-tabbing="value" :rows-data="data" />
 </template>
 <script setup lang="ts">
 import { VDataGrid, VButton } from '@vonage/vivid-vue';
@@ -9,9 +17,9 @@ import { ref } from 'vue';
 
 const value = ref(true);
 const data = ref([
-  { name: 'John', surname: 'Doe', age: 30 },
-  { name: 'Jane', surname: 'Doe', age: 25 },
-  { name: 'Bill', surname: 'Cave', age: 22 },
-  { name: 'Jill', surname: 'Jane', age: 23 },
+	{ name: 'John', surname: 'Doe', age: 30 },
+	{ name: 'Jane', surname: 'Doe', age: 25 },
+	{ name: 'Bill', surname: 'Cave', age: 22 },
+	{ name: 'Jill', surname: 'Jane', age: 23 },
 ]);
 </script>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/RowsDataExample.vue b/apps/vue-docs/docs/examples/components/data-grid/RowsDataExample.vue
index c74f307c60..66fc178eb5 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/RowsDataExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/RowsDataExample.vue
@@ -1,14 +1,14 @@
 <template>
-  <VDataGrid id="grid" :rows-data="data" />
+	<VDataGrid id="grid" :rows-data="data" />
 </template>
 <script setup lang="ts">
 import { VDataGrid } from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
 const data = ref([
-  { name: 'John', surname: 'Doe', age: 30 },
-  { name: 'Jane', surname: 'Doe', age: 25 },
-  { name: 'Bill', surname: 'Cave', age: 22 },
-  { name: 'Jill', surname: 'Jane', age: 23 },
+	{ name: 'John', surname: 'Doe', age: 30 },
+	{ name: 'Jane', surname: 'Doe', age: 25 },
+	{ name: 'Bill', surname: 'Cave', age: 22 },
+	{ name: 'Jill', surname: 'Jane', age: 23 },
 ]);
 </script>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/SelectionModeExample.vue b/apps/vue-docs/docs/examples/components/data-grid/SelectionModeExample.vue
index 838d06074c..fdd8edaa9a 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/SelectionModeExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/SelectionModeExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <VSelect v-model="value" label="Selection Mode" class="select">
-    <VOption value="none" text="none" />
-    <VOption value="single-row" text="single-row" />
-    <VOption value="multi-row" text="multi-row" />
-    <VOption value="single-cell" text="single-cell" />
-    <VOption value="multi-cell" text="multi-cell" />
-  </VSelect>
-  <VDataGrid id="grid" :selection-mode="value" :rows-data="data" />
+	<VSelect v-model="value" label="Selection Mode" class="select">
+		<VOption value="none" text="none" />
+		<VOption value="single-row" text="single-row" />
+		<VOption value="multi-row" text="multi-row" />
+		<VOption value="single-cell" text="single-cell" />
+		<VOption value="multi-cell" text="multi-cell" />
+	</VSelect>
+	<VDataGrid id="grid" :selection-mode="value" :rows-data="data" />
 </template>
 <script setup lang="ts">
 import { VDataGrid, VSelect, VOption } from '@vonage/vivid-vue';
@@ -15,9 +15,9 @@ import { DataGridSelectionMode } from '@vonage/vivid/lib/data-grid/data-grid';
 
 const value = ref<DataGridSelectionMode>('none');
 const data = ref([
-  { name: 'John', surname: 'Doe', age: 30 },
-  { name: 'Jane', surname: 'Doe', age: 25 },
-  { name: 'Bill', surname: 'Cave', age: 22 },
-  { name: 'Jill', surname: 'Jane', age: 23 },
+	{ name: 'John', surname: 'Doe', age: 30 },
+	{ name: 'Jane', surname: 'Doe', age: 25 },
+	{ name: 'Bill', surname: 'Cave', age: 22 },
+	{ name: 'Jill', surname: 'Jane', age: 23 },
 ]);
 </script>
diff --git a/apps/vue-docs/docs/examples/components/data-grid/SortingExample.vue b/apps/vue-docs/docs/examples/components/data-grid/SortingExample.vue
index ef9af5eeaf..0cd2e8e5e3 100644
--- a/apps/vue-docs/docs/examples/components/data-grid/SortingExample.vue
+++ b/apps/vue-docs/docs/examples/components/data-grid/SortingExample.vue
@@ -1,116 +1,125 @@
 <template>
-  <VDataGrid @sort="onSort">
-    <VDataGridRow role="row" row-type="header">
-      <VDataGridCell
-        v-for="column in columns"
-        :key="column.columnDataKey"
-        cell-type="columnheader"
-        role="columnheader"
-        :aria-sort="column.sortDirection"
-      >
-        {{ column.title }}
-      </VDataGridCell>
-    </VDataGridRow>
-    <VDataGridRow v-for="employee in data" :key="employee.id">
-      <VDataGridCell>{{ employee.name }}</VDataGridCell>
-      <VDataGridCell>{{ employee.surname }}</VDataGridCell>
-      <VDataGridCell>{{ employee.age }}</VDataGridCell>
-      <VDataGridCell>
-        <VSelect v-model="employee.profession" fixed-dropdown>
-          <VOption
-            v-for="profession in professions"
-            :key="profession.id"
-            :value="profession.id.toString()"
-            :text="profession.name"
-          />
-        </VSelect>
-      </VDataGridCell>
-    </VDataGridRow>
-  </VDataGrid>
+	<VDataGrid @sort="onSort">
+		<VDataGridRow role="row" row-type="header">
+			<VDataGridCell
+				v-for="column in columns"
+				:key="column.columnDataKey"
+				cell-type="columnheader"
+				role="columnheader"
+				:aria-sort="column.sortDirection"
+			>
+				{{ column.title }}
+			</VDataGridCell>
+		</VDataGridRow>
+		<VDataGridRow v-for="employee in data" :key="employee.id">
+			<VDataGridCell>{{ employee.name }}</VDataGridCell>
+			<VDataGridCell>{{ employee.surname }}</VDataGridCell>
+			<VDataGridCell>{{ employee.age }}</VDataGridCell>
+			<VDataGridCell>
+				<VSelect v-model="employee.profession" fixed-dropdown>
+					<VOption
+						v-for="profession in professions"
+						:key="profession.id"
+						:value="profession.id.toString()"
+						:text="profession.name"
+					/>
+				</VSelect>
+			</VDataGridCell>
+		</VDataGridRow>
+	</VDataGrid>
 </template>
 <script setup lang="ts">
-import { VDataGrid, VDataGridCell, VDataGridRow, VSelect, VOption } from '@vonage/vivid-vue';
+import {
+	VDataGrid,
+	VDataGridCell,
+	VDataGridRow,
+	VSelect,
+	VOption,
+} from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
 const ORIGINAL_DATA = [
-  { id: 1, name: 'John', surname: 'Doe', age: 30, profession: 2 },
-  { id: 2, name: 'Jane', surname: 'Doe', age: 25, profession: 5 },
-  { id: 3, name: 'Bill', surname: 'Cave', age: 22, profession: 9 },
-  { id: 4, name: 'Jill', surname: 'Jane', age: 23, profession: 1 },
+	{ id: 1, name: 'John', surname: 'Doe', age: 30, profession: 2 },
+	{ id: 2, name: 'Jane', surname: 'Doe', age: 25, profession: 5 },
+	{ id: 3, name: 'Bill', surname: 'Cave', age: 22, profession: 9 },
+	{ id: 4, name: 'Jill', surname: 'Jane', age: 23, profession: 1 },
 ];
 
 const professions = ref([
-  { id: 1, name: 'Developer' },
-  { id: 2, name: 'Designer' },
-  { id: 3, name: 'Tester' },
-  { id: 4, name: 'Manager' },
-  { id: 5, name: 'Sales' },
-  { id: 6, name: 'Marketing' },
-  { id: 7, name: 'Support' },
-  { id: 8, name: 'HR' },
-  { id: 9, name: 'Finance' },
-  { id: 10, name: 'Legal' },
-  { id: 11, name: 'Other' },
+	{ id: 1, name: 'Developer' },
+	{ id: 2, name: 'Designer' },
+	{ id: 3, name: 'Tester' },
+	{ id: 4, name: 'Manager' },
+	{ id: 5, name: 'Sales' },
+	{ id: 6, name: 'Marketing' },
+	{ id: 7, name: 'Support' },
+	{ id: 8, name: 'HR' },
+	{ id: 9, name: 'Finance' },
+	{ id: 10, name: 'Legal' },
+	{ id: 11, name: 'Other' },
 ]);
 
 const data = ref(Array.from(ORIGINAL_DATA));
 
 const columns = ref([
-  {
-    title: 'Name',
-    columnDataKey: 'name',
-    sortable: true,
-    sortDirection: 'none',
-  },
-  {
-    title: 'Surname',
-    columnDataKey: 'surname',
-    sortable: true,
-    sortDirection: 'none',
-  },
-  {
-    title: 'Age',
-    columnDataKey: 'age',
-    sortable: true,
-    sortDirection: 'none',
-  },
-  {
-    title: 'Profession',
-    columnDataKey: 'profession',
-    sortable: true,
-    sortDirection: 'none',
-  },
+	{
+		title: 'Name',
+		columnDataKey: 'name',
+		sortable: true,
+		sortDirection: 'none',
+	},
+	{
+		title: 'Surname',
+		columnDataKey: 'surname',
+		sortable: true,
+		sortDirection: 'none',
+	},
+	{
+		title: 'Age',
+		columnDataKey: 'age',
+		sortable: true,
+		sortDirection: 'none',
+	},
+	{
+		title: 'Profession',
+		columnDataKey: 'profession',
+		sortable: true,
+		sortDirection: 'none',
+	},
 ]);
 
 const sortDataByColumnKey = (columnDataKey: string, sortDirection: string) => {
-  if (sortDirection === 'none') {
-    data.value = Array.from(ORIGINAL_DATA);
-    return;
-  }
+	if (sortDirection === 'none') {
+		data.value = Array.from(ORIGINAL_DATA);
+		return;
+	}
 
-  data.value.sort((a, b) => {
-    if (a[columnDataKey] < b[columnDataKey]) {
-      return sortDirection === 'ascending' ? -1 : 1;
-    }
-    if (a[columnDataKey] > b[columnDataKey]) {
-      return sortDirection === 'ascending' ? 1 : -1;
-    }
-    return 0;
-  });
+	data.value.sort((a, b) => {
+		if (a[columnDataKey] < b[columnDataKey]) {
+			return sortDirection === 'ascending' ? -1 : 1;
+		}
+		if (a[columnDataKey] > b[columnDataKey]) {
+			return sortDirection === 'ascending' ? 1 : -1;
+		}
+		return 0;
+	});
 };
 
 const onSort = ({ detail }) => {
-  const column = columns.value.find(c => c.columnDataKey === detail.columnDataKey.toLowerCase());
-  if (column.sortDirection === 'none') {
-    column.sortDirection = 'ascending';
-  } else {
-    column.sortDirection = column.sortDirection === 'ascending' ? 'descending' : 'none';
-  }
-  columns.value.forEach(c => {
-    if (c.columnDataKey !== column.columnDataKey) {
-      c.sortDirection = 'none';
-    }
-  });
-  sortDataByColumnKey(column.columnDataKey, column.sortDirection);
+	const column = columns.value.find(
+		(c) => c.columnDataKey === detail.columnDataKey.toLowerCase()
+	);
+	if (column.sortDirection === 'none') {
+		column.sortDirection = 'ascending';
+	} else {
+		column.sortDirection =
+			column.sortDirection === 'ascending' ? 'descending' : 'none';
+	}
+	columns.value.forEach((c) => {
+		if (c.columnDataKey !== column.columnDataKey) {
+			c.sortDirection = 'none';
+		}
+	});
+	sortDataByColumnKey(column.columnDataKey, column.sortDirection);
 };
 </script>
diff --git a/apps/vue-docs/docs/examples/components/date-picker/DatePickerExample.vue b/apps/vue-docs/docs/examples/components/date-picker/DatePickerExample.vue
index 334e4ddd36..3a761342f8 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/DatePickerExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/DatePickerExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="block-size: 460px">
-    <VDatePicker />
-  </div>
+	<div style="block-size: 460px">
+		<VDatePicker />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/DisabledExample.vue b/apps/vue-docs/docs/examples/components/date-picker/DisabledExample.vue
index 21366fb11a..ef39933110 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDatePicker label="Start date" disabled />
+	<VDatePicker label="Start date" disabled />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/ErrorTextExample.vue b/apps/vue-docs/docs/examples/components/date-picker/ErrorTextExample.vue
index 276965ecdd..9edeca3891 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/ErrorTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/ErrorTextExample.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="block-size: 460px">
-    <VDatePicker label="Start date" error-text="Please select a date for the event to start" />
-  </div>
+	<div style="block-size: 460px">
+		<VDatePicker
+			label="Start date"
+			error-text="Please select a date for the event to start"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/HelperTextExample.vue b/apps/vue-docs/docs/examples/components/date-picker/HelperTextExample.vue
index 3e22e146f3..5df0fdf91f 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/HelperTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/HelperTextExample.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="block-size: 460px">
-    <VDatePicker label="Start date" helper-text="Select a date for the event to start" />
-  </div>
+	<div style="block-size: 460px">
+		<VDatePicker
+			label="Start date"
+			helper-text="Select a date for the event to start"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/LabelExample.vue b/apps/vue-docs/docs/examples/components/date-picker/LabelExample.vue
index aca5986a28..a07bcfa17c 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/LabelExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="block-size: 460px">
-    <VDatePicker label="Start date" />
-  </div>
+	<div style="block-size: 460px">
+		<VDatePicker label="Start date" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/date-picker/ReadonlyExample.vue
index cde219f6bd..11b66ce912 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/ReadonlyExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDatePicker label="Start date" readonly />
+	<VDatePicker label="Start date" readonly />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-picker/ValueExample.vue b/apps/vue-docs/docs/examples/components/date-picker/ValueExample.vue
index 9a998187e6..a2522cac6b 100644
--- a/apps/vue-docs/docs/examples/components/date-picker/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-picker/ValueExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="block-size: 460px">
-    <VDatePicker v-model="value" label="Start date" />
-  </div>
+	<div style="block-size: 460px">
+		<VDatePicker v-model="value" label="Start date" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/DateRangePickerExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/DateRangePickerExample.vue
index 47ed8f281e..b4dad9bba2 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/DateRangePickerExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/DateRangePickerExample.vue
@@ -1,16 +1,16 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker
-      :start="start"
-      :end="end"
-      label="Date range"
-      @update:start="start = $event"
-      @update:end="end = $event"
-    />
-    <!-- In Vue 3 you can use v-model shorthand instead of @update:start and @update:end
+	<div style="block-size: 460px">
+		<VDateRangePicker
+			:start="start"
+			:end="end"
+			label="Date range"
+			@update:start="start = $event"
+			@update:end="end = $event"
+		/>
+		<!-- In Vue 3 you can use v-model shorthand instead of @update:start and @update:end
       <VDateRangePicker v-model:start="start" v-model:end="end" label="Date range" />
     -->
-  </div>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/DisabledExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/DisabledExample.vue
index 5e66f1d769..02f84ba708 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDateRangePicker label="Date range" disabled />
+	<VDateRangePicker label="Date range" disabled />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/ErrorTextExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/ErrorTextExample.vue
index e6b1c31055..46ce3454c0 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/ErrorTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/ErrorTextExample.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker label="Date range" error-text="Please select a valid date range" />
-  </div>
+	<div style="block-size: 460px">
+		<VDateRangePicker
+			label="Date range"
+			error-text="Please select a valid date range"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/HelperTextExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/HelperTextExample.vue
index 9eaf1260d8..6b9e9ee218 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/HelperTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/HelperTextExample.vue
@@ -1,7 +1,10 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker label="Date range" helper-text="Select a date range for the event" />
-  </div>
+	<div style="block-size: 460px">
+		<VDateRangePicker
+			label="Date range"
+			helper-text="Select a date range for the event"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/InAFormExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/InAFormExample.vue
index 1a2c985444..a931835571 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/InAFormExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/InAFormExample.vue
@@ -1,17 +1,17 @@
 <template>
-  <div style="block-size: 460px">
-    <form>
-      <VLayout column-spacing="small" column-basis="block">
-        <div>
-          <VDateRangePicker name="date" label="Date range" required />
-        </div>
-        <div class="buttons">
-          <VButton label="Reset" type="reset" />
-          <VButton label="Submit" appearance="filled" type="submit" />
-        </div>
-      </VLayout>
-    </form>
-  </div>
+	<div style="block-size: 460px">
+		<form>
+			<VLayout column-spacing="small" column-basis="block">
+				<div>
+					<VDateRangePicker name="date" label="Date range" required />
+				</div>
+				<div class="buttons">
+					<VButton label="Reset" type="reset" />
+					<VButton label="Submit" appearance="filled" type="submit" />
+				</div>
+			</VLayout>
+		</form>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -20,7 +20,7 @@ import { VButton, VDateRangePicker, VLayout } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .buttons {
-  display: flex;
-  gap: 12px;
+	display: flex;
+	gap: 12px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/LabelExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/LabelExample.vue
index d33efe38ba..3ac683bb9f 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/LabelExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker label="Date range" />
-  </div>
+	<div style="block-size: 460px">
+		<VDateRangePicker label="Date range" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/MaxExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/MaxExample.vue
index 13a2773037..67090a77fe 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/MaxExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/MaxExample.vue
@@ -1,7 +1,12 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker label="Date range" max="2023-06-20" start="2023-06-10" end="2023-06-15" />
-  </div>
+	<div style="block-size: 460px">
+		<VDateRangePicker
+			label="Date range"
+			max="2023-06-20"
+			start="2023-06-10"
+			end="2023-06-15"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/MinExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/MinExample.vue
index a300ebfbfb..bd80a5e043 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/MinExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/MinExample.vue
@@ -1,7 +1,12 @@
 <template>
-  <div style="block-size: 460px">
-    <VDateRangePicker label="Date range" min="2023-06-10" start="2023-06-15" end="2023-06-20" />
-  </div>
+	<div style="block-size: 460px">
+		<VDateRangePicker
+			label="Date range"
+			min="2023-06-10"
+			start="2023-06-15"
+			end="2023-06-20"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/date-range-picker/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/date-range-picker/ReadonlyExample.vue
index 8d8e8abd64..60042cc86c 100644
--- a/apps/vue-docs/docs/examples/components/date-range-picker/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/date-range-picker/ReadonlyExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDateRangePicker label="Date range" readonly />
+	<VDateRangePicker label="Date range" readonly />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/BlockSizeExample.vue b/apps/vue-docs/docs/examples/components/dialog/BlockSizeExample.vue
index aeeb632ddd..38027b7e28 100644
--- a/apps/vue-docs/docs/examples/components/dialog/BlockSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/BlockSizeExample.vue
@@ -1,7 +1,13 @@
 <template>
-  <div style="height: 250px">
-    <VDialog style="--dialog-max-block-size: 100px" icon="info" headline="Headline" subtitle="subtitle content" open />
-  </div>
+	<div style="height: 250px">
+		<VDialog
+			style="--dialog-max-block-size: 100px"
+			icon="info"
+			headline="Headline"
+			subtitle="subtitle content"
+			open
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/BodyExample.vue b/apps/vue-docs/docs/examples/components/dialog/BodyExample.vue
index 5b59cae28d..866ca2938e 100644
--- a/apps/vue-docs/docs/examples/components/dialog/BodyExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/BodyExample.vue
@@ -1,17 +1,22 @@
 <template>
-  <div style="height: 420px">
-    <VDialog style="--dialog-max-block-size: 360px" open headline="Dialog Content" subtitle="Dialog with body content">
-      <template #body>
-        <form style="margin-top: 24px">
-          <VLayout column-basis="block">
-            <VTextField label="Name" />
-            <VTextField label="Password" type="password" />
-            <VButton label="Login" appearance="filled" />
-          </VLayout>
-        </form>
-      </template>
-    </VDialog>
-  </div>
+	<div style="height: 420px">
+		<VDialog
+			style="--dialog-max-block-size: 360px"
+			open
+			headline="Dialog Content"
+			subtitle="Dialog with body content"
+		>
+			<template #body>
+				<form style="margin-top: 24px">
+					<VLayout column-basis="block">
+						<VTextField label="Name" />
+						<VTextField label="Password" type="password" />
+						<VButton label="Login" appearance="filled" />
+					</VLayout>
+				</form>
+			</template>
+		</VDialog>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/CloseEventExample.vue b/apps/vue-docs/docs/examples/components/dialog/CloseEventExample.vue
index 44ae851748..e50d84c5c4 100644
--- a/apps/vue-docs/docs/examples/components/dialog/CloseEventExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/CloseEventExample.vue
@@ -1,8 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VDialog ref="dialog" open headline="Returning Dialog" @close="handleClose" />
-    <VButton label="Close Dialog" @click="closeDialog" />
-  </div>
+	<div style="height: 230px">
+		<VDialog
+			ref="dialog"
+			open
+			headline="Returning Dialog"
+			@close="handleClose"
+		/>
+		<VButton label="Close Dialog" @click="closeDialog" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -12,11 +17,11 @@ import { ref } from 'vue';
 const dialog = ref<VDialog>(null);
 
 function handleClose(e) {
-  console.log(e.detail);
+	console.log(e.detail);
 }
 
 function closeDialog() {
-  dialog.value.$el.returnValue = 'Value';
-  dialog.value.close();
+	dialog.value.$el.returnValue = 'Value';
+	dialog.value.close();
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/CloseExample.vue b/apps/vue-docs/docs/examples/components/dialog/CloseExample.vue
index 594c4f6a4a..d61ef6f3a8 100644
--- a/apps/vue-docs/docs/examples/components/dialog/CloseExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/CloseExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div style="height: 230px">
-    <VDialog ref="dialog" open headline="Open Dialog" />
-    <VButton label="Close Dialog" @click="closeDialog" />
-  </div>
+	<div style="height: 230px">
+		<VDialog ref="dialog" open headline="Open Dialog" />
+		<VButton label="Close Dialog" @click="closeDialog" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,6 @@ import { ref } from 'vue';
 const dialog = ref<VDialog>(null);
 
 function closeDialog() {
-  dialog.value.close();
+	dialog.value.close();
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/DialogExample.vue b/apps/vue-docs/docs/examples/components/dialog/DialogExample.vue
index b42624abf6..8a42e4d90c 100644
--- a/apps/vue-docs/docs/examples/components/dialog/DialogExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/DialogExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="height: 230px">
-    <VDialog icon="info" headline="Headline" subtitle="subtitle" open />
-  </div>
+	<div style="height: 230px">
+		<VDialog icon="info" headline="Headline" subtitle="subtitle" open />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/DialogFormExample.vue b/apps/vue-docs/docs/examples/components/dialog/DialogFormExample.vue
index da3ec79657..1a682471ce 100644
--- a/apps/vue-docs/docs/examples/components/dialog/DialogFormExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/DialogFormExample.vue
@@ -1,14 +1,14 @@
 <template>
-  <div style="height: 230px">
-    <VDialog ref="dialog" headline="Open Dialog">
-      <template #main>
-        <form method="dialog">
-          <VButton type="submit" label="Submit" />
-        </form>
-      </template>
-    </VDialog>
-    <VButton label="Open Modal Dialog" @click="openDialog" />
-  </div>
+	<div style="height: 230px">
+		<VDialog ref="dialog" headline="Open Dialog">
+			<template #main>
+				<form method="dialog">
+					<VButton type="submit" label="Submit" />
+				</form>
+			</template>
+		</VDialog>
+		<VButton label="Open Modal Dialog" @click="openDialog" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +18,6 @@ import { ref } from 'vue';
 const dialog = ref<VDialog>(null);
 
 function openDialog() {
-  dialog.value.showModal();
+	dialog.value.showModal();
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/FooterExample.vue b/apps/vue-docs/docs/examples/components/dialog/FooterExample.vue
index 44fd08093f..d90594a58d 100644
--- a/apps/vue-docs/docs/examples/components/dialog/FooterExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/FooterExample.vue
@@ -1,18 +1,18 @@
 <template>
-  <div style="height: 250px">
-    <VDialog
-      open
-      headline="Dialog with footer"
-      subtitle="this is an example of the dialog with slotted buttons inside footer"
-    >
-      <template #footer>
-        <div class="demo-footer">
-          <VButton appearance="outlined" label="Cancel" />
-          <VButton appearance="filled" label="Action" />
-        </div>
-      </template>
-    </VDialog>
-  </div>
+	<div style="height: 250px">
+		<VDialog
+			open
+			headline="Dialog with footer"
+			subtitle="this is an example of the dialog with slotted buttons inside footer"
+		>
+			<template #footer>
+				<div class="demo-footer">
+					<VButton appearance="outlined" label="Cancel" />
+					<VButton appearance="filled" label="Action" />
+				</div>
+			</template>
+		</VDialog>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -21,9 +21,9 @@ import { VDialog, VButton } from '@vonage/vivid-vue';
 
 <style scoped>
 .demo-footer {
-  display: flex;
-  justify-content: flex-end;
-  column-gap: 8px;
-  margin-top: 16px;
+	display: flex;
+	justify-content: flex-end;
+	column-gap: 8px;
+	margin-top: 16px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/dialog/FullWidthBodyExample.vue b/apps/vue-docs/docs/examples/components/dialog/FullWidthBodyExample.vue
index 3b92b2d857..6a840f2d1d 100644
--- a/apps/vue-docs/docs/examples/components/dialog/FullWidthBodyExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/FullWidthBodyExample.vue
@@ -1,23 +1,45 @@
 <template>
-  <div style="height: 400px">
-    <VDialog open icon-placement="side" icon="info" headline="Dialog Headline" full-width-body>
-      <template #body>
-        <div style="margin-bottom: 24px">
-          <VProgress :min="0" :max="50" :value="12.5" shape="sharp" connotation="pacific" />
-        </div>
-        <VLayout column-basis="block" gutters="medium-inline">
-          <form>
-            <VLayout column-basis="block">
-              <VTextField label="Agent Name" placeholder="Search for an agent" icon="search-line" />
-              <VTextArea label="Additional Note (Optional)" />
-            </VLayout>
-          </form>
-        </VLayout>
-      </template>
-    </VDialog>
-  </div>
+	<div style="height: 400px">
+		<VDialog
+			open
+			icon-placement="side"
+			icon="info"
+			headline="Dialog Headline"
+			full-width-body
+		>
+			<template #body>
+				<div style="margin-bottom: 24px">
+					<VProgress
+						:min="0"
+						:max="50"
+						:value="12.5"
+						shape="sharp"
+						connotation="pacific"
+					/>
+				</div>
+				<VLayout column-basis="block" gutters="medium-inline">
+					<form>
+						<VLayout column-basis="block">
+							<VTextField
+								label="Agent Name"
+								placeholder="Search for an agent"
+								icon="search-line"
+							/>
+							<VTextArea label="Additional Note (Optional)" />
+						</VLayout>
+					</form>
+				</VLayout>
+			</template>
+		</VDialog>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { VDialog, VProgress, VLayout, VTextField, VTextArea } from '@vonage/vivid-vue';
+import {
+	VDialog,
+	VProgress,
+	VLayout,
+	VTextField,
+	VTextArea,
+} from '@vonage/vivid-vue';
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/GraphicExample.vue b/apps/vue-docs/docs/examples/components/dialog/GraphicExample.vue
index aea6c5736f..78cf7b22f2 100644
--- a/apps/vue-docs/docs/examples/components/dialog/GraphicExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/GraphicExample.vue
@@ -1,11 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VDialog open>
-      <template #graphic>
-        <img src="https://doodleipsum.com/40x40/hand-drawn?bg=7463D9&i=af462b28146d2ac91599602e083ddee5" />
-      </template>
-    </VDialog>
-  </div>
+	<div style="height: 230px">
+		<VDialog open>
+			<template #graphic>
+				<img
+					src="https://doodleipsum.com/40x40/hand-drawn?bg=7463D9&i=af462b28146d2ac91599602e083ddee5"
+				/>
+			</template>
+		</VDialog>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/dialog/HeadlineExample.vue
index e9210f1d1e..dd6a27e112 100644
--- a/apps/vue-docs/docs/examples/components/dialog/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/HeadlineExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="height: 230px">
-    <VDialog headline="Headline" open />
-  </div>
+	<div style="height: 230px">
+		<VDialog headline="Headline" open />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/IconExample.vue b/apps/vue-docs/docs/examples/components/dialog/IconExample.vue
index 8bb163f1e1..753aac6df7 100644
--- a/apps/vue-docs/docs/examples/components/dialog/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/IconExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="height: 230px">
-    <VDialog icon="info" open />
-  </div>
+	<div style="height: 230px">
+		<VDialog icon="info" open />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/IconPlacementExample.vue b/apps/vue-docs/docs/examples/components/dialog/IconPlacementExample.vue
index 1291ba9479..6c340c3190 100644
--- a/apps/vue-docs/docs/examples/components/dialog/IconPlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/IconPlacementExample.vue
@@ -1,7 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VDialog icon-placement="side" icon="info" headline="Dialog Headline" subtitle="subtitle content" open />
-  </div>
+	<div style="height: 230px">
+		<VDialog
+			icon-placement="side"
+			icon="info"
+			headline="Dialog Headline"
+			subtitle="subtitle content"
+			open
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/InlineMinMaxSizeExample.vue b/apps/vue-docs/docs/examples/components/dialog/InlineMinMaxSizeExample.vue
index 68a079c539..4ae71adc78 100644
--- a/apps/vue-docs/docs/examples/components/dialog/InlineMinMaxSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/InlineMinMaxSizeExample.vue
@@ -1,7 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VDialog icon="info" headline="Headline" subtitle="subtitle content" open style="--dialog-min-inline-size: 560px" />
-  </div>
+	<div style="height: 230px">
+		<VDialog
+			icon="info"
+			headline="Headline"
+			subtitle="subtitle content"
+			open
+			style="--dialog-min-inline-size: 560px"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/MainExample.vue b/apps/vue-docs/docs/examples/components/dialog/MainExample.vue
index a43f9fab5a..ba5284f3bd 100644
--- a/apps/vue-docs/docs/examples/components/dialog/MainExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/MainExample.vue
@@ -1,11 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VDialog open>
-      <template #main>
-        <div style="padding: 8px">Use main slot for your own layout and content</div>
-      </template>
-    </VDialog>
-  </div>
+	<div style="height: 230px">
+		<VDialog open>
+			<template #main>
+				<div style="padding: 8px">
+					Use main slot for your own layout and content
+				</div>
+			</template>
+		</VDialog>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/OpenExample.vue b/apps/vue-docs/docs/examples/components/dialog/OpenExample.vue
index e898ed92a6..0f7c80bf39 100644
--- a/apps/vue-docs/docs/examples/components/dialog/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/OpenExample.vue
@@ -1,8 +1,13 @@
 <template>
-  <div style="height: 230px">
-    <VButton label="Toggle Dialog Open" @click="open = !open" />
-    <VDialog headline="Headline" subtitle="subtitle" :open="open" @close="open = false" />
-  </div>
+	<div style="height: 230px">
+		<VButton label="Toggle Dialog Open" @click="open = !open" />
+		<VDialog
+			headline="Headline"
+			subtitle="subtitle"
+			:open="open"
+			@close="open = false"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/dialog/ReturnValueExample.vue b/apps/vue-docs/docs/examples/components/dialog/ReturnValueExample.vue
index 55ded84b33..62d77722bb 100644
--- a/apps/vue-docs/docs/examples/components/dialog/ReturnValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/ReturnValueExample.vue
@@ -1,16 +1,24 @@
 <template>
-  <div style="height: 250px">
-    <VDialog headline="Returning Dialog" :open="open" @close="open = false">
-      <template #footer>
-        <div class="demo-footer">
-          <VButton appearance="outlined" label="Cancel" @click="handleReturn('Cancel')" />
-          <VButton appearance="filled" label="Action" @click="handleReturn('Action')" />
-        </div>
-      </template>
-    </VDialog>
-    <div>Returned Value: {{ returnValue }}</div>
-    <VButton label="Open Dialog" @click="open = true" />
-  </div>
+	<div style="height: 250px">
+		<VDialog headline="Returning Dialog" :open="open" @close="open = false">
+			<template #footer>
+				<div class="demo-footer">
+					<VButton
+						appearance="outlined"
+						label="Cancel"
+						@click="handleReturn('Cancel')"
+					/>
+					<VButton
+						appearance="filled"
+						label="Action"
+						@click="handleReturn('Action')"
+					/>
+				</div>
+			</template>
+		</VDialog>
+		<div>Returned Value: {{ returnValue }}</div>
+		<VButton label="Open Dialog" @click="open = true" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -21,16 +29,16 @@ const open = ref(true);
 const returnValue = ref('');
 
 function handleReturn(value: string) {
-  returnValue.value = value;
-  open.value = false;
+	returnValue.value = value;
+	open.value = false;
 }
 </script>
 
 <style scoped>
 .demo-footer {
-  display: flex;
-  justify-content: flex-end;
-  column-gap: 8px;
-  margin-top: 8px;
+	display: flex;
+	justify-content: flex-end;
+	column-gap: 8px;
+	margin-top: 8px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/dialog/ShowExample.vue b/apps/vue-docs/docs/examples/components/dialog/ShowExample.vue
index 47030077de..38c05ac6e2 100644
--- a/apps/vue-docs/docs/examples/components/dialog/ShowExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/ShowExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div style="height: 230px">
-    <VDialog ref="dialog" headline="Open Dialog" />
-    <VButton label="Open Dialog" @click="openDialog" />
-  </div>
+	<div style="height: 230px">
+		<VDialog ref="dialog" headline="Open Dialog" />
+		<VButton label="Open Dialog" @click="openDialog" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,6 @@ import { ref } from 'vue';
 const dialog = ref<VDialog>(null);
 
 function openDialog() {
-  dialog.value.show();
+	dialog.value.show();
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/ShowModalExample.vue b/apps/vue-docs/docs/examples/components/dialog/ShowModalExample.vue
index be5ee205b9..330ad2c4fb 100644
--- a/apps/vue-docs/docs/examples/components/dialog/ShowModalExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/ShowModalExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div style="height: 230px">
-    <VDialog ref="dialog" headline="Open Dialog" />
-    <VButton label="Open Modal Dialog" @click="openDialog" />
-  </div>
+	<div style="height: 230px">
+		<VDialog ref="dialog" headline="Open Dialog" />
+		<VButton label="Open Modal Dialog" @click="openDialog" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +12,6 @@ import { ref } from 'vue';
 const dialog = ref<VDialog>(null);
 
 function openDialog() {
-  dialog.value.showModal();
+	dialog.value.showModal();
 }
 </script>
diff --git a/apps/vue-docs/docs/examples/components/dialog/SubtitleExample.vue b/apps/vue-docs/docs/examples/components/dialog/SubtitleExample.vue
index ebddc65225..9e3a16921e 100644
--- a/apps/vue-docs/docs/examples/components/dialog/SubtitleExample.vue
+++ b/apps/vue-docs/docs/examples/components/dialog/SubtitleExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="height: 230px">
-    <VDialog subtitle="subtitle content" open />
-  </div>
+	<div style="height: 230px">
+		<VDialog subtitle="subtitle content" open />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/divider/DecorativeElementExample.vue b/apps/vue-docs/docs/examples/components/divider/DecorativeElementExample.vue
index b37a046270..7a0795dee5 100644
--- a/apps/vue-docs/docs/examples/components/divider/DecorativeElementExample.vue
+++ b/apps/vue-docs/docs/examples/components/divider/DecorativeElementExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VLayout style="--layout-grid-template-columns: 1fr auto 1fr">
-    <VDivider role="presentation" class="flex-center-align" />
-    More Info
-    <VDivider role="presentation" class="flex-center-align" />
-  </VLayout>
+	<VLayout style="--layout-grid-template-columns: 1fr auto 1fr">
+		<VDivider role="presentation" class="flex-center-align" />
+		More Info
+		<VDivider role="presentation" class="flex-center-align" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
@@ -11,7 +11,7 @@ import { VLayout, VDivider } from '@vonage/vivid-vue';
 </script>
 <style scoped lang="scss">
 .flex-center-align {
-  display: flex;
-  align-items: center;
+	display: flex;
+	align-items: center;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/divider/HorizontalUseCaseExample.vue b/apps/vue-docs/docs/examples/components/divider/HorizontalUseCaseExample.vue
index 065eaf6492..860091811f 100644
--- a/apps/vue-docs/docs/examples/components/divider/HorizontalUseCaseExample.vue
+++ b/apps/vue-docs/docs/examples/components/divider/HorizontalUseCaseExample.vue
@@ -1,18 +1,18 @@
 <template>
-  <VCard>
-    <template #main>
-      <VLayout column-basis="block" gutters="small">
-        Choose the button you like best in this card :)
+	<VCard>
+		<template #main>
+			<VLayout column-basis="block" gutters="small">
+				Choose the button you like best in this card :)
 
-        <VDivider />
+				<VDivider />
 
-        <div class="demo-footer">
-          <VButton label="cancel" appearance="outlined" />
-          <VButton label="Submit" appearance="filled" />
-        </div>
-      </VLayout>
-    </template>
-  </VCard>
+				<div class="demo-footer">
+					<VButton label="cancel" appearance="outlined" />
+					<VButton label="Submit" appearance="filled" />
+				</div>
+			</VLayout>
+		</template>
+	</VCard>
 </template>
 
 <script setup lang="ts">
@@ -20,12 +20,12 @@ import { VButton, VLayout, VCard, VDivider } from '@vonage/vivid-vue';
 </script>
 <style scoped lang="scss">
 vvd3-card {
-  width: 400px;
+	width: 400px;
 }
 
 .demo-footer {
-  display: flex;
-  column-gap: 8px;
-  justify-content: flex-end;
+	display: flex;
+	column-gap: 8px;
+	justify-content: flex-end;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/divider/OrientationExample.vue b/apps/vue-docs/docs/examples/components/divider/OrientationExample.vue
index 3475c0bc14..84d99ff327 100644
--- a/apps/vue-docs/docs/examples/components/divider/OrientationExample.vue
+++ b/apps/vue-docs/docs/examples/components/divider/OrientationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VLayout gutters="small" column-basis="block">
-    <VDivider orientation="horizontal" />
-    <VDivider orientation="vertical" style="block-size: 40px" />
-  </VLayout>
+	<VLayout gutters="small" column-basis="block">
+		<VDivider orientation="horizontal" />
+		<VDivider orientation="vertical" style="block-size: 40px" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/divider/SimpleExample.vue b/apps/vue-docs/docs/examples/components/divider/SimpleExample.vue
index a139aa4e0c..1572f7b7e7 100644
--- a/apps/vue-docs/docs/examples/components/divider/SimpleExample.vue
+++ b/apps/vue-docs/docs/examples/components/divider/SimpleExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VDivider />
+	<VDivider />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/divider/VerticalUseCaseExample.vue b/apps/vue-docs/docs/examples/components/divider/VerticalUseCaseExample.vue
index 5f4e58c443..066a4235e4 100644
--- a/apps/vue-docs/docs/examples/components/divider/VerticalUseCaseExample.vue
+++ b/apps/vue-docs/docs/examples/components/divider/VerticalUseCaseExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VActionGroup appearance="fieldset">
-    <VButton icon="transfer-line" />
-    <VDivider orientation="vertical" />
-    <VButton icon="compose-line" />
-  </VActionGroup>
+	<VActionGroup appearance="fieldset">
+		<VButton icon="transfer-line" />
+		<VDivider orientation="vertical" />
+		<VButton icon="compose-line" />
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/ActionItemsExample.vue b/apps/vue-docs/docs/examples/components/empty-state/ActionItemsExample.vue
index 7b972d02f7..818146920e 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/ActionItemsExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/ActionItemsExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VEmptyState icon="phone-number-line" headline="No numbers">
-    You do not have any numbers yet.
-    <template #action-items>
-      <VButton shape="pill" label="Buy numbers" appearance="filled" />
-      <VButton shape="pill" label="Import numbers" appearance="outlined" />
-    </template>
-  </VEmptyState>
+	<VEmptyState icon="phone-number-line" headline="No numbers">
+		You do not have any numbers yet.
+		<template #action-items>
+			<VButton shape="pill" label="Buy numbers" appearance="filled" />
+			<VButton shape="pill" label="Import numbers" appearance="outlined" />
+		</template>
+	</VEmptyState>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/DefaultExample.vue b/apps/vue-docs/docs/examples/components/empty-state/DefaultExample.vue
index 0d65837a13..a62b63fa2c 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/DefaultExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VEmptyState>No results match your search criteria.</VEmptyState>
+	<VEmptyState>No results match your search criteria.</VEmptyState>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/EmptyStateExample.vue b/apps/vue-docs/docs/examples/components/empty-state/EmptyStateExample.vue
index cc07472908..5990c76dd1 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/EmptyStateExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/EmptyStateExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VEmptyState icon="search-line" headline="No results found">
-    No results match your search criteria.
-    <template #action-items>
-      <VButton shape="pill" label="Reset filters" appearance="outlined" />
-    </template>
-  </VEmptyState>
+	<VEmptyState icon="search-line" headline="No results found">
+		No results match your search criteria.
+		<template #action-items>
+			<VButton shape="pill" label="Reset filters" appearance="outlined" />
+		</template>
+	</VEmptyState>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/GraphicExample.vue b/apps/vue-docs/docs/examples/components/empty-state/GraphicExample.vue
index 6dd15bcc22..9253044b30 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/GraphicExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/GraphicExample.vue
@@ -1,38 +1,45 @@
 <template>
-  <VEmptyState icon="search-line" headline="No results found">
-    No results match your search criteria.
-    <template #graphic>
-      <svg slot="graphic" width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M18 12.8439C18 10.9148 19.0488 9.14033 20.7329 8.22005L34.0345 0.95148C35.645 -0.31716 37.5777 -0.31716 39.8325 0.95148L93.6251 30.1302C98.1346 32.6675 102 39.645 102 45.6711V104.346C102 108.152 100.546 110.184 98.4568 111.323L85.1139 119.267C83.5095 120.223 81.5211 120.245 79.8957 119.327L64.2609 110.49L35.0435 93.4917C18.6087 84.3854 18 82.5641 18 71.6365V12.8439Z"
-          fill="url(#paint0_linear_24236_6100)"
-        />
-        <path
-          d="M18 13.0146C18 10.699 20.4969 9.25057 22.4969 10.406L77.9876 42.4627C81.7074 44.6116 84 48.5904 84 52.8972V116.985C84 119.301 81.5031 120.749 79.5031 119.594L24.0124 87.5373C20.2926 85.3884 18 81.4096 18 77.1028V13.0146Z"
-          fill="#871EFF"
-        />
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M59.1721 82.1308C56.1289 83.4425 52.1663 83.0121 47.8266 80.5066C38.2026 74.9502 30.433 61.3295 30.433 50.1072C30.433 38.8849 38.2026 34.2358 47.8266 39.7922C57.4505 45.3486 65.2201 58.9693 65.2201 70.1915C65.2201 75.2682 63.6301 78.9998 60.9977 81.0499L70.2104 97.163C70.714 98.0438 70.708 98.99 70.197 99.2765C69.6861 99.563 68.8636 99.0812 68.36 98.2004L59.1721 82.1308ZM33.0311 51.6072C33.0311 42.0004 39.673 38.0847 47.8266 42.7922C55.9801 47.4996 62.622 59.0847 62.622 68.6915C62.622 73.4604 60.9853 76.8269 58.3395 78.4323C58.3237 78.4395 58.3081 78.4474 58.2928 78.456C58.2685 78.4696 58.2452 78.4848 58.2232 78.5014C55.5483 80.0553 51.8736 79.8432 47.8266 77.5066C39.673 72.7992 33.0311 61.214 33.0311 51.6072Z"
-          fill="white"
-        />
-        <defs>
-          <linearGradient
-            id="paint0_linear_24236_6100"
-            x1="98.733"
-            y1="87.2628"
-            x2="21.0553"
-            y2="87.2628"
-            gradientUnits="userSpaceOnUse"
-          >
-            <stop stop-color="#9DD2FE" />
-            <stop offset="1" stop-color="#8728FB" />
-          </linearGradient>
-        </defs>
-      </svg>
-    </template>
-  </VEmptyState>
+	<VEmptyState icon="search-line" headline="No results found">
+		No results match your search criteria.
+		<template #graphic>
+			<svg
+				slot="graphic"
+				width="120"
+				height="120"
+				viewBox="0 0 120 120"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M18 12.8439C18 10.9148 19.0488 9.14033 20.7329 8.22005L34.0345 0.95148C35.645 -0.31716 37.5777 -0.31716 39.8325 0.95148L93.6251 30.1302C98.1346 32.6675 102 39.645 102 45.6711V104.346C102 108.152 100.546 110.184 98.4568 111.323L85.1139 119.267C83.5095 120.223 81.5211 120.245 79.8957 119.327L64.2609 110.49L35.0435 93.4917C18.6087 84.3854 18 82.5641 18 71.6365V12.8439Z"
+					fill="url(#paint0_linear_24236_6100)"
+				/>
+				<path
+					d="M18 13.0146C18 10.699 20.4969 9.25057 22.4969 10.406L77.9876 42.4627C81.7074 44.6116 84 48.5904 84 52.8972V116.985C84 119.301 81.5031 120.749 79.5031 119.594L24.0124 87.5373C20.2926 85.3884 18 81.4096 18 77.1028V13.0146Z"
+					fill="#871EFF"
+				/>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M59.1721 82.1308C56.1289 83.4425 52.1663 83.0121 47.8266 80.5066C38.2026 74.9502 30.433 61.3295 30.433 50.1072C30.433 38.8849 38.2026 34.2358 47.8266 39.7922C57.4505 45.3486 65.2201 58.9693 65.2201 70.1915C65.2201 75.2682 63.6301 78.9998 60.9977 81.0499L70.2104 97.163C70.714 98.0438 70.708 98.99 70.197 99.2765C69.6861 99.563 68.8636 99.0812 68.36 98.2004L59.1721 82.1308ZM33.0311 51.6072C33.0311 42.0004 39.673 38.0847 47.8266 42.7922C55.9801 47.4996 62.622 59.0847 62.622 68.6915C62.622 73.4604 60.9853 76.8269 58.3395 78.4323C58.3237 78.4395 58.3081 78.4474 58.2928 78.456C58.2685 78.4696 58.2452 78.4848 58.2232 78.5014C55.5483 80.0553 51.8736 79.8432 47.8266 77.5066C39.673 72.7992 33.0311 61.214 33.0311 51.6072Z"
+					fill="white"
+				/>
+				<defs>
+					<linearGradient
+						id="paint0_linear_24236_6100"
+						x1="98.733"
+						y1="87.2628"
+						x2="21.0553"
+						y2="87.2628"
+						gradientUnits="userSpaceOnUse"
+					>
+						<stop stop-color="#9DD2FE" />
+						<stop offset="1" stop-color="#8728FB" />
+					</linearGradient>
+				</defs>
+			</svg>
+		</template>
+	</VEmptyState>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/empty-state/HeadlineExample.vue
index 792dff8ed9..ce57adf7cb 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/HeadlineExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VEmptyState headline="No results found" />
+	<VEmptyState headline="No results found" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/empty-state/IconExample.vue b/apps/vue-docs/docs/examples/components/empty-state/IconExample.vue
index bb880a2e4c..ecc827bfd0 100644
--- a/apps/vue-docs/docs/examples/components/empty-state/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/empty-state/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VEmptyState icon="search-line" />
+	<VEmptyState icon="search-line" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/fab/ConnotationExample.vue
index 659e3965ed..4a1019f626 100644
--- a/apps/vue-docs/docs/examples/components/fab/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/ConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VFab icon="plus-line" connotation="accent" />
-    <VFab icon="plus-line" connotation="cta" />
-  </div>
+	<div>
+		<VFab icon="plus-line" connotation="accent" />
+		<VFab icon="plus-line" connotation="cta" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/DisabledExample.vue b/apps/vue-docs/docs/examples/components/fab/DisabledExample.vue
index 2d60636eab..64b1fa0eaf 100644
--- a/apps/vue-docs/docs/examples/components/fab/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VFab icon="store-line" disabled />
+	<VFab icon="store-line" disabled />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/IconExample.vue b/apps/vue-docs/docs/examples/components/fab/IconExample.vue
index 1cf5b8281b..f6cf87ecc5 100644
--- a/apps/vue-docs/docs/examples/components/fab/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VFab icon="cart-line" aria-label="Shopping Cart" />
+	<VFab icon="cart-line" aria-label="Shopping Cart" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/IconWithLabelExample.vue b/apps/vue-docs/docs/examples/components/fab/IconWithLabelExample.vue
index d3b8bae942..d6507280d6 100644
--- a/apps/vue-docs/docs/examples/components/fab/IconWithLabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/IconWithLabelExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VFab icon="check-line" label="icon" />
-    <VFab icon="check-line" label="icon-trailing" icon-trailing />
-  </div>
+	<div>
+		<VFab icon="check-line" label="icon" />
+		<VFab icon="check-line" label="icon-trailing" icon-trailing />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/LabelExample.vue b/apps/vue-docs/docs/examples/components/fab/LabelExample.vue
index 00c9b09de6..940008e62b 100644
--- a/apps/vue-docs/docs/examples/components/fab/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VFab icon="cart-line" label="Add to cart" />
+	<VFab icon="cart-line" label="Add to cart" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/fab/SizeExample.vue b/apps/vue-docs/docs/examples/components/fab/SizeExample.vue
index ec1123e16d..ba4be30e88 100644
--- a/apps/vue-docs/docs/examples/components/fab/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/fab/SizeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VFab icon="thumbs-up-line" label="normal" size="normal" />
-    <VFab icon="thumbs-up-line" label="expanded" size="expanded" />
-  </div>
+	<div>
+		<VFab icon="thumbs-up-line" label="normal" size="normal" />
+		<VFab icon="thumbs-up-line" label="expanded" size="expanded" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue b/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue
index 2f1851b9ff..67df1f71e9 100644
--- a/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue
+++ b/apps/vue-docs/docs/examples/components/file-picker/FilePickerExample.vue
@@ -1,5 +1,11 @@
 <template>
-  <VFilePicker label="File Picker" helper-text="helper-text" max-file-size="0.1">Drag & Drop or click to upload</VFilePicker>
+	<VFilePicker
+		label="File Picker"
+		helper-text="helper-text"
+		max-file-size="0.1"
+	>
+		Drag & Drop or click to upload
+	</VFilePicker>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/header/ActionItemsExample.vue b/apps/vue-docs/docs/examples/components/header/ActionItemsExample.vue
index 883f71f1cb..52ba655d95 100644
--- a/apps/vue-docs/docs/examples/components/header/ActionItemsExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/ActionItemsExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VHeader>
-    <VButton slot="action-items" icon="twitter-mono" />
-    <VButton slot="action-items" icon="facebook-mono" />
-    <VButton slot="action-items" icon="heart-solid" />
-  </VHeader>
+	<VHeader>
+		<VButton slot="action-items" icon="twitter-mono" />
+		<VButton slot="action-items" icon="facebook-mono" />
+		<VButton slot="action-items" icon="heart-solid" />
+	</VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader, VButton } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/AlternateExample.vue b/apps/vue-docs/docs/examples/components/header/AlternateExample.vue
index 1c4204a273..43e8994246 100644
--- a/apps/vue-docs/docs/examples/components/header/AlternateExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/AlternateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VHeader alternate> Header content </VHeader>
+	<VHeader alternate> Header content </VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/AppContentExample.vue b/apps/vue-docs/docs/examples/components/header/AppContentExample.vue
index d20df1ee85..b5f219b3d4 100644
--- a/apps/vue-docs/docs/examples/components/header/AppContentExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/AppContentExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VHeader>
-    Header content
-    <main slot="app-content">
-      <VLayout gutters="small"> Application content </VLayout>
-    </main>
-  </VHeader>
+	<VHeader>
+		Header content
+		<main slot="app-content">
+			<VLayout gutters="small"> Application content </VLayout>
+		</main>
+	</VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader, VLayout } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/BaseExample.vue b/apps/vue-docs/docs/examples/components/header/BaseExample.vue
index 8beda8ca34..4eb6ea8edb 100644
--- a/apps/vue-docs/docs/examples/components/header/BaseExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/BaseExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VHeader class="v3header"> Header content </VHeader>
+	<VHeader class="v3header"> Header content </VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader } from '@vonage/vivid-vue';
 </script>
 <style scoped lang="scss">
 .v3header::part(base) {
-  background-color: var(--vvd-color-neutral-100);
+	background-color: var(--vvd-color-neutral-100);
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/header/BlockSizeExample.vue b/apps/vue-docs/docs/examples/components/header/BlockSizeExample.vue
index 8deb9bd538..a6627c4cf2 100644
--- a/apps/vue-docs/docs/examples/components/header/BlockSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/BlockSizeExample.vue
@@ -1,13 +1,13 @@
 <template>
-  <VHeader>
-    Header content
+	<VHeader>
+		Header content
 
-    <main slot="app-content">
-      <VLayout column-basis="block" gutters="medium">
-        <h1>Application content</h1>
-      </VLayout>
-    </main>
-  </VHeader>
+		<main slot="app-content">
+			<VLayout column-basis="block" gutters="medium">
+				<h1>Application content</h1>
+			</VLayout>
+		</main>
+	</VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader, VLayout } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/DefaultSlotExample.vue b/apps/vue-docs/docs/examples/components/header/DefaultSlotExample.vue
index 56285cf6a0..2fbff0992f 100644
--- a/apps/vue-docs/docs/examples/components/header/DefaultSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/DefaultSlotExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VHeader> Header content </VHeader>
+	<VHeader> Header content </VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/ElevationShadowExample.vue b/apps/vue-docs/docs/examples/components/header/ElevationShadowExample.vue
index 9da05cc3a5..e16b24dcae 100644
--- a/apps/vue-docs/docs/examples/components/header/ElevationShadowExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/ElevationShadowExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VHeader elevation-shadow> Header content </VHeader>
+	<VHeader elevation-shadow> Header content </VHeader>
 </template>
 <script setup lang="ts">
 import { VHeader } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/header/HeaderWithBannerExample.vue b/apps/vue-docs/docs/examples/components/header/HeaderWithBannerExample.vue
index fb0f58861c..908ba958bb 100644
--- a/apps/vue-docs/docs/examples/components/header/HeaderWithBannerExample.vue
+++ b/apps/vue-docs/docs/examples/components/header/HeaderWithBannerExample.vue
@@ -1,31 +1,40 @@
 <template>
-  <VHeader>
-    Header with Banner
+	<VHeader>
+		Header with Banner
 
-    <VBanner slot="app-content" text="Here's some information that you may find important!" />
+		<VBanner
+			slot="app-content"
+			text="Here's some information that you may find important!"
+		/>
 
-    <VLayout slot="app-content" column-basis="block" gutters="medium">
-      <h1>Page Header</h1>
+		<VLayout slot="app-content" column-basis="block" gutters="medium">
+			<h1>Page Header</h1>
 
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id
-        pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur
-        vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis
-        tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante
-        pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id
-        tortor at ornare.
-      </p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante
+				est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat,
+				gravida sed velit id, tempus tempus metus. Proin mollis auctor orci.
+				Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor
+				sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel
+				ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut
+				ligula faucibus ante pellentesque condimentum sit amet ac dui.
+				Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id
+				tortor at ornare.
+			</p>
 
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante est, ac porta sapien rutrum in. Fusce id
-        pulvinar massa. In est erat, gravida sed velit id, tempus tempus metus. Proin mollis auctor orci. Curabitur
-        vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor sodales. Vestibulum vel rutrum leo, a convallis
-        tellus. Aliquam vel ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut ligula faucibus ante
-        pellentesque condimentum sit amet ac dui. Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id
-        tortor at ornare.
-      </p>
-    </VLayout>
-  </VHeader>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis ante
+				est, ac porta sapien rutrum in. Fusce id pulvinar massa. In est erat,
+				gravida sed velit id, tempus tempus metus. Proin mollis auctor orci.
+				Curabitur vestibulum elementum imperdiet. Mauris ac nisl vel nisi auctor
+				sodales. Vestibulum vel rutrum leo, a convallis tellus. Aliquam vel
+				ultricies elit, eget malesuada orci. Praesent ut blandit nisl. Morbi ut
+				ligula faucibus ante pellentesque condimentum sit amet ac dui.
+				Suspendisse potenti. Ut et massa arcu. Pellentesque pellentesque id
+				tortor at ornare.
+			</p>
+		</VLayout>
+	</VHeader>
 </template>
 <script setup lang="ts">
 import { VLayout, VBanner, VHeader } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/icon/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/icon/ConnotationExample.vue
index 3c0b4a6ea6..a80273289b 100644
--- a/apps/vue-docs/docs/examples/components/icon/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/icon/ConnotationExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <VIcon name="heart-solid" connotation="accent" />
-    <VIcon name="heart-solid" connotation="announcement" />
-    <VIcon name="heart-solid" connotation="cta" />
-    <VIcon name="heart-solid" connotation="success" />
-    <VIcon name="heart-solid" connotation="alert" />
-    <VIcon name="heart-solid" connotation="information" />
-  </div>
+	<div>
+		<VIcon name="heart-solid" connotation="accent" />
+		<VIcon name="heart-solid" connotation="announcement" />
+		<VIcon name="heart-solid" connotation="cta" />
+		<VIcon name="heart-solid" connotation="success" />
+		<VIcon name="heart-solid" connotation="alert" />
+		<VIcon name="heart-solid" connotation="information" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/icon/DefaultExample.vue b/apps/vue-docs/docs/examples/components/icon/DefaultExample.vue
index da5b1f130f..9c9caa7c14 100644
--- a/apps/vue-docs/docs/examples/components/icon/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/icon/DefaultExample.vue
@@ -1,18 +1,18 @@
 <template>
-  <VIcon size="3">
-    <svg viewBox="0 0 24 24">
-      <path
-        fill="currentColor"
-        d="M6.11922 10.1706C5.8213 10.0548 5.49473 10.064 5.21134 10.1962 4.92796 10.3283 4.71098 10.5726 4.60814 10.8752 4.50529 11.1778 4.52501 11.514 4.66295 11.8098L7.61024 18.1303C8.43788 19.9052 9.90708 21.2924 11.6946 21.9868 13.4821 22.6812 15.4416 22.6259 17.1419 21.833L18.5366 21.1827C19.4417 20.7603 20.2431 20.1426 20.8882 19.3702 21.5333 18.5979 22.0073 17.6885 22.2792 16.7017L23.6271 11.8184C23.7189 11.5145 23.7087 11.1844 23.5983 10.8802 23.4878 10.5759 23.2832 10.3147 23.0168 10.1377 22.7339 9.96294 22.4024 9.89734 22.0836 9.95301 21.7647 10.0087 21.48 10.1818 21.2822 10.4405L19.4217 12.8724C19.3395 12.9796 19.2313 13.0626 19.1074 13.1135 18.9835 13.1643 18.848 13.1813 18.7137 13.1629 18.5793 13.1444 18.4507 13.0911 18.34 13.0081 18.2292 12.925 18.1401 12.8149 18.0809 12.6882L14.6545 5.34015C14.5165 5.04433 14.2717 4.81313 13.9737 4.69739 13.6758 4.58166 13.3492 4.59088 13.0658 4.72302 12.7825 4.85517 12.5655 5.09941 12.4626 5.40202 12.3598 5.70464 12.3795 6.04083 12.5175 6.33665L15.118 11.9135 14.4057 12.2457 11.4584 5.92523C11.3204 5.62941 11.0756 5.39821 10.7777 5.28247 10.4797 5.16674 10.1532 5.17596 9.86978 5.3081 9.5864 5.44024 9.36942 5.68449 9.26658 5.9871 9.16373 6.28972 9.18345 6.62591 9.32139 6.92173L12.2687 13.2422 11.5563 13.5744 8.9558 7.99748C8.81786 7.70166 8.57299 7.47045 8.27507 7.35472 7.97715 7.23899 7.65058 7.2482 7.36719 7.38035 7.08381 7.51249 6.86683 7.75674 6.76399 8.05935 6.66114 8.36196 6.68086 8.69816 6.8188 8.99397L9.41935 14.5709 8.70701 14.903 6.79995 10.8133C6.66201 10.5175 6.41714 10.2863 6.11922 10.1706zM17.3109 2.18607C17.4526 1.79684 17.883 1.59615 18.2722 1.73782 20.6132 2.58987 21.8202 5.17835 20.9682 7.51935 20.8265 7.90858 20.3961 8.10927 20.0069 7.9676 19.6177 7.82593 19.417 7.39555 19.5586 7.00632 20.1273 5.44379 19.3217 3.71607 17.7592 3.14736 17.3699 3.00569 17.1692 2.57531 17.3109 2.18607zM4.51646 19.5137C4.37479 19.9029 3.9444 20.1036 3.55517 19.9619 1.21417 19.1099.00714505 16.5214.859199 14.1804 1.00087 13.7912 1.43125 13.5905 1.82048 13.7322 2.20972 13.8738 2.41041 14.3042 2.26874 14.6934 1.70002 16.256 2.50567 17.9837 4.0682 18.5524 4.45743 18.6941 4.65812 19.1245 4.51646 19.5137zM17.0317 3.59159C16.6425 3.44992 16.2121 3.65061 16.0704 4.03984 15.9287 4.42908 16.1294 4.85946 16.5187 5.00113 17.2333 5.26124 17.6018 6.05143 17.3417 6.76607 17.2 7.15531 17.4007 7.58569 17.7899 7.72736 18.1792 7.86903 18.6095 7.66834 18.7512 7.2791 19.2947 5.78599 18.5248 4.13504 17.0317 3.59159zM5.75684 17.6599C5.61517 18.0492 5.18479 18.2499 4.79556 18.1082 3.30245 17.5647 2.5326 15.9138 3.07604 14.4207 3.21771 14.0315 3.6481 13.8308 4.03733 13.9724 4.42656 14.1141 4.62725 14.5445 4.48558 14.9337 4.22547 15.6484 4.59395 16.4386 5.30859 16.6987 5.69782 16.8403 5.89851 17.2707 5.75684 17.6599z"
-      />
-    </svg>
-  </VIcon>
+	<VIcon size="3">
+		<svg viewBox="0 0 24 24">
+			<path
+				fill="currentColor"
+				d="M6.11922 10.1706C5.8213 10.0548 5.49473 10.064 5.21134 10.1962 4.92796 10.3283 4.71098 10.5726 4.60814 10.8752 4.50529 11.1778 4.52501 11.514 4.66295 11.8098L7.61024 18.1303C8.43788 19.9052 9.90708 21.2924 11.6946 21.9868 13.4821 22.6812 15.4416 22.6259 17.1419 21.833L18.5366 21.1827C19.4417 20.7603 20.2431 20.1426 20.8882 19.3702 21.5333 18.5979 22.0073 17.6885 22.2792 16.7017L23.6271 11.8184C23.7189 11.5145 23.7087 11.1844 23.5983 10.8802 23.4878 10.5759 23.2832 10.3147 23.0168 10.1377 22.7339 9.96294 22.4024 9.89734 22.0836 9.95301 21.7647 10.0087 21.48 10.1818 21.2822 10.4405L19.4217 12.8724C19.3395 12.9796 19.2313 13.0626 19.1074 13.1135 18.9835 13.1643 18.848 13.1813 18.7137 13.1629 18.5793 13.1444 18.4507 13.0911 18.34 13.0081 18.2292 12.925 18.1401 12.8149 18.0809 12.6882L14.6545 5.34015C14.5165 5.04433 14.2717 4.81313 13.9737 4.69739 13.6758 4.58166 13.3492 4.59088 13.0658 4.72302 12.7825 4.85517 12.5655 5.09941 12.4626 5.40202 12.3598 5.70464 12.3795 6.04083 12.5175 6.33665L15.118 11.9135 14.4057 12.2457 11.4584 5.92523C11.3204 5.62941 11.0756 5.39821 10.7777 5.28247 10.4797 5.16674 10.1532 5.17596 9.86978 5.3081 9.5864 5.44024 9.36942 5.68449 9.26658 5.9871 9.16373 6.28972 9.18345 6.62591 9.32139 6.92173L12.2687 13.2422 11.5563 13.5744 8.9558 7.99748C8.81786 7.70166 8.57299 7.47045 8.27507 7.35472 7.97715 7.23899 7.65058 7.2482 7.36719 7.38035 7.08381 7.51249 6.86683 7.75674 6.76399 8.05935 6.66114 8.36196 6.68086 8.69816 6.8188 8.99397L9.41935 14.5709 8.70701 14.903 6.79995 10.8133C6.66201 10.5175 6.41714 10.2863 6.11922 10.1706zM17.3109 2.18607C17.4526 1.79684 17.883 1.59615 18.2722 1.73782 20.6132 2.58987 21.8202 5.17835 20.9682 7.51935 20.8265 7.90858 20.3961 8.10927 20.0069 7.9676 19.6177 7.82593 19.417 7.39555 19.5586 7.00632 20.1273 5.44379 19.3217 3.71607 17.7592 3.14736 17.3699 3.00569 17.1692 2.57531 17.3109 2.18607zM4.51646 19.5137C4.37479 19.9029 3.9444 20.1036 3.55517 19.9619 1.21417 19.1099.00714505 16.5214.859199 14.1804 1.00087 13.7912 1.43125 13.5905 1.82048 13.7322 2.20972 13.8738 2.41041 14.3042 2.26874 14.6934 1.70002 16.256 2.50567 17.9837 4.0682 18.5524 4.45743 18.6941 4.65812 19.1245 4.51646 19.5137zM17.0317 3.59159C16.6425 3.44992 16.2121 3.65061 16.0704 4.03984 15.9287 4.42908 16.1294 4.85946 16.5187 5.00113 17.2333 5.26124 17.6018 6.05143 17.3417 6.76607 17.2 7.15531 17.4007 7.58569 17.7899 7.72736 18.1792 7.86903 18.6095 7.66834 18.7512 7.2791 19.2947 5.78599 18.5248 4.13504 17.0317 3.59159zM5.75684 17.6599C5.61517 18.0492 5.18479 18.2499 4.79556 18.1082 3.30245 17.5647 2.5326 15.9138 3.07604 14.4207 3.21771 14.0315 3.6481 13.8308 4.03733 13.9724 4.42656 14.1141 4.62725 14.5445 4.48558 14.9337 4.22547 15.6484 4.59395 16.4386 5.30859 16.6987 5.69782 16.8403 5.89851 17.2707 5.75684 17.6599z"
+			/>
+		</svg>
+	</VIcon>
 
-  <VIcon size="3">
-    <img
-      src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.11922 10.1706C5.8213 10.0548 5.49473 10.064 5.21134 10.1962 4.92796 10.3283 4.71098 10.5726 4.60814 10.8752 4.50529 11.1778 4.52501 11.514 4.66295 11.8098L7.61024 18.1303C8.43788 19.9052 9.90708 21.2924 11.6946 21.9868 13.4821 22.6812 15.4416 22.6259 17.1419 21.833L18.5366 21.1827C19.4417 20.7603 20.2431 20.1426 20.8882 19.3702 21.5333 18.5979 22.0073 17.6885 22.2792 16.7017L23.6271 11.8184C23.7189 11.5145 23.7087 11.1844 23.5983 10.8802 23.4878 10.5759 23.2832 10.3147 23.0168 10.1377 22.7339 9.96294 22.4024 9.89734 22.0836 9.95301 21.7647 10.0087 21.48 10.1818 21.2822 10.4405L19.4217 12.8724C19.3395 12.9796 19.2313 13.0626 19.1074 13.1135 18.9835 13.1643 18.848 13.1813 18.7137 13.1629 18.5793 13.1444 18.4507 13.0911 18.34 13.0081 18.2292 12.925 18.1401 12.8149 18.0809 12.6882L14.6545 5.34015C14.5165 5.04433 14.2717 4.81313 13.9737 4.69739 13.6758 4.58166 13.3492 4.59088 13.0658 4.72302 12.7825 4.85517 12.5655 5.09941 12.4626 5.40202 12.3598 5.70464 12.3795 6.04083 12.5175 6.33665L15.118 11.9135 14.4057 12.2457 11.4584 5.92523C11.3204 5.62941 11.0756 5.39821 10.7777 5.28247 10.4797 5.16674 10.1532 5.17596 9.86978 5.3081 9.5864 5.44024 9.36942 5.68449 9.26658 5.9871 9.16373 6.28972 9.18345 6.62591 9.32139 6.92173L12.2687 13.2422 11.5563 13.5744 8.9558 7.99748C8.81786 7.70166 8.57299 7.47045 8.27507 7.35472 7.97715 7.23899 7.65058 7.2482 7.36719 7.38035 7.08381 7.51249 6.86683 7.75674 6.76399 8.05935 6.66114 8.36196 6.68086 8.69816 6.8188 8.99397L9.41935 14.5709 8.70701 14.903 6.79995 10.8133C6.66201 10.5175 6.41714 10.2863 6.11922 10.1706zM17.3109 2.18607C17.4526 1.79684 17.883 1.59615 18.2722 1.73782 20.6132 2.58987 21.8202 5.17835 20.9682 7.51935 20.8265 7.90858 20.3961 8.10927 20.0069 7.9676 19.6177 7.82593 19.417 7.39555 19.5586 7.00632 20.1273 5.44379 19.3217 3.71607 17.7592 3.14736 17.3699 3.00569 17.1692 2.57531 17.3109 2.18607zM4.51646 19.5137C4.37479 19.9029 3.9444 20.1036 3.55517 19.9619 1.21417 19.1099.00714505 16.5214.859199 14.1804 1.00087 13.7912 1.43125 13.5905 1.82048 13.7322 2.20972 13.8738 2.41041 14.3042 2.26874 14.6934 1.70002 16.256 2.50567 17.9837 4.0682 18.5524 4.45743 18.6941 4.65812 19.1245 4.51646 19.5137zM17.0317 3.59159C16.6425 3.44992 16.2121 3.65061 16.0704 4.03984 15.9287 4.42908 16.1294 4.85946 16.5187 5.00113 17.2333 5.26124 17.6018 6.05143 17.3417 6.76607 17.2 7.15531 17.4007 7.58569 17.7899 7.72736 18.1792 7.86903 18.6095 7.66834 18.7512 7.2791 19.2947 5.78599 18.5248 4.13504 17.0317 3.59159zM5.75684 17.6599C5.61517 18.0492 5.18479 18.2499 4.79556 18.1082 3.30245 17.5647 2.5326 15.9138 3.07604 14.4207 3.21771 14.0315 3.6481 13.8308 4.03733 13.9724 4.42656 14.1141 4.62725 14.5445 4.48558 14.9337 4.22547 15.6484 4.59395 16.4386 5.30859 16.6987 5.69782 16.8403 5.89851 17.2707 5.75684 17.6599z'%3E%3C/path%3E%3C/svg%3E"
-    />
-  </VIcon>
+	<VIcon size="3">
+		<img
+			src="data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M6.11922 10.1706C5.8213 10.0548 5.49473 10.064 5.21134 10.1962 4.92796 10.3283 4.71098 10.5726 4.60814 10.8752 4.50529 11.1778 4.52501 11.514 4.66295 11.8098L7.61024 18.1303C8.43788 19.9052 9.90708 21.2924 11.6946 21.9868 13.4821 22.6812 15.4416 22.6259 17.1419 21.833L18.5366 21.1827C19.4417 20.7603 20.2431 20.1426 20.8882 19.3702 21.5333 18.5979 22.0073 17.6885 22.2792 16.7017L23.6271 11.8184C23.7189 11.5145 23.7087 11.1844 23.5983 10.8802 23.4878 10.5759 23.2832 10.3147 23.0168 10.1377 22.7339 9.96294 22.4024 9.89734 22.0836 9.95301 21.7647 10.0087 21.48 10.1818 21.2822 10.4405L19.4217 12.8724C19.3395 12.9796 19.2313 13.0626 19.1074 13.1135 18.9835 13.1643 18.848 13.1813 18.7137 13.1629 18.5793 13.1444 18.4507 13.0911 18.34 13.0081 18.2292 12.925 18.1401 12.8149 18.0809 12.6882L14.6545 5.34015C14.5165 5.04433 14.2717 4.81313 13.9737 4.69739 13.6758 4.58166 13.3492 4.59088 13.0658 4.72302 12.7825 4.85517 12.5655 5.09941 12.4626 5.40202 12.3598 5.70464 12.3795 6.04083 12.5175 6.33665L15.118 11.9135 14.4057 12.2457 11.4584 5.92523C11.3204 5.62941 11.0756 5.39821 10.7777 5.28247 10.4797 5.16674 10.1532 5.17596 9.86978 5.3081 9.5864 5.44024 9.36942 5.68449 9.26658 5.9871 9.16373 6.28972 9.18345 6.62591 9.32139 6.92173L12.2687 13.2422 11.5563 13.5744 8.9558 7.99748C8.81786 7.70166 8.57299 7.47045 8.27507 7.35472 7.97715 7.23899 7.65058 7.2482 7.36719 7.38035 7.08381 7.51249 6.86683 7.75674 6.76399 8.05935 6.66114 8.36196 6.68086 8.69816 6.8188 8.99397L9.41935 14.5709 8.70701 14.903 6.79995 10.8133C6.66201 10.5175 6.41714 10.2863 6.11922 10.1706zM17.3109 2.18607C17.4526 1.79684 17.883 1.59615 18.2722 1.73782 20.6132 2.58987 21.8202 5.17835 20.9682 7.51935 20.8265 7.90858 20.3961 8.10927 20.0069 7.9676 19.6177 7.82593 19.417 7.39555 19.5586 7.00632 20.1273 5.44379 19.3217 3.71607 17.7592 3.14736 17.3699 3.00569 17.1692 2.57531 17.3109 2.18607zM4.51646 19.5137C4.37479 19.9029 3.9444 20.1036 3.55517 19.9619 1.21417 19.1099.00714505 16.5214.859199 14.1804 1.00087 13.7912 1.43125 13.5905 1.82048 13.7322 2.20972 13.8738 2.41041 14.3042 2.26874 14.6934 1.70002 16.256 2.50567 17.9837 4.0682 18.5524 4.45743 18.6941 4.65812 19.1245 4.51646 19.5137zM17.0317 3.59159C16.6425 3.44992 16.2121 3.65061 16.0704 4.03984 15.9287 4.42908 16.1294 4.85946 16.5187 5.00113 17.2333 5.26124 17.6018 6.05143 17.3417 6.76607 17.2 7.15531 17.4007 7.58569 17.7899 7.72736 18.1792 7.86903 18.6095 7.66834 18.7512 7.2791 19.2947 5.78599 18.5248 4.13504 17.0317 3.59159zM5.75684 17.6599C5.61517 18.0492 5.18479 18.2499 4.79556 18.1082 3.30245 17.5647 2.5326 15.9138 3.07604 14.4207 3.21771 14.0315 3.6481 13.8308 4.03733 13.9724 4.42656 14.1141 4.62725 14.5445 4.48558 14.9337 4.22547 15.6484 4.59395 16.4386 5.30859 16.6987 5.69782 16.8403 5.89851 17.2707 5.75684 17.6599z'%3E%3C/path%3E%3C/svg%3E"
+		/>
+	</VIcon>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/icon/IconExample.vue b/apps/vue-docs/docs/examples/components/icon/IconExample.vue
index 28adc3af11..a9fb0aca6b 100644
--- a/apps/vue-docs/docs/examples/components/icon/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/icon/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <p>I <VIcon name="heart-line" connotation="alert" /> VIVID!</p>
+	<p>I <VIcon name="heart-line" connotation="alert" /> VIVID!</p>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/icon/NameExample.vue b/apps/vue-docs/docs/examples/components/icon/NameExample.vue
index 2b560ba377..1a18d61161 100644
--- a/apps/vue-docs/docs/examples/components/icon/NameExample.vue
+++ b/apps/vue-docs/docs/examples/components/icon/NameExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VIcon name="profile-line" />
+	<VIcon name="profile-line" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/icon/SizeExample.vue b/apps/vue-docs/docs/examples/components/icon/SizeExample.vue
index b3f7c8ca8c..743fa8a657 100644
--- a/apps/vue-docs/docs/examples/components/icon/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/icon/SizeExample.vue
@@ -1,12 +1,18 @@
 <template>
-  <div>
-    <VIcon name="close-line" size="-6" />16px <VIcon name="close-line" size="-5" />20px
-    <VIcon name="close-line" size="-4" />24px <VIcon name="close-line" size="-3" />28px
-    <VIcon name="close-line" size="-2" />32px <VIcon name="close-line" size="-1" />36px
-    <VIcon name="close-line" size="0" />40px <VIcon name="close-line" size="1" />44px
-    <VIcon name="close-line" size="2" />48px <VIcon name="close-line" size="3" />52px
-    <VIcon name="close-line" size="4" />56px <VIcon name="close-line" size="5" />60px
-  </div>
+	<div>
+		<VIcon name="close-line" size="-6" />16px
+		<VIcon name="close-line" size="-5" />20px
+		<VIcon name="close-line" size="-4" />24px
+		<VIcon name="close-line" size="-3" />28px
+		<VIcon name="close-line" size="-2" />32px
+		<VIcon name="close-line" size="-1" />36px
+		<VIcon name="close-line" size="0" />40px
+		<VIcon name="close-line" size="1" />44px
+		<VIcon name="close-line" size="2" />48px
+		<VIcon name="close-line" size="3" />52px
+		<VIcon name="close-line" size="4" />56px
+		<VIcon name="close-line" size="5" />60px
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/AutoSizingExample.vue b/apps/vue-docs/docs/examples/components/layout/AutoSizingExample.vue
index 081bdff957..377a109aee 100644
--- a/apps/vue-docs/docs/examples/components/layout/AutoSizingExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/AutoSizingExample.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>
-    <VLayout auto-sizing="fit">
-      <VCard :elevation="2" text="fit" />
-      <VCard :elevation="2" text="fit" />
-    </VLayout>
-    <VLayout auto-sizing="fill">
-      <VCard :elevation="2" text="fill" />
-      <VCard :elevation="2" text="fill" />
-    </VLayout>
-  </div>
+	<div>
+		<VLayout auto-sizing="fit">
+			<VCard :elevation="2" text="fit" />
+			<VCard :elevation="2" text="fit" />
+		</VLayout>
+		<VLayout auto-sizing="fill">
+			<VCard :elevation="2" text="fill" />
+			<VCard :elevation="2" text="fill" />
+		</VLayout>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/ColumnBasisExample.vue b/apps/vue-docs/docs/examples/components/layout/ColumnBasisExample.vue
index 688e7b22b8..c2169733dd 100644
--- a/apps/vue-docs/docs/examples/components/layout/ColumnBasisExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/ColumnBasisExample.vue
@@ -1,30 +1,30 @@
 <template>
-  <div>
-    <VLayout gutters="small" column-basis="small">
-      <VCard :elevation="2" text="small" />
-      <VCard :elevation="2" text="small" />
-      <VCard :elevation="2" text="small" />
-      <VCard :elevation="2" text="small" />
-    </VLayout>
-    <VLayout gutters="small" column-basis="medium">
-      <VCard :elevation="2" text="medium" />
-      <VCard :elevation="2" text="medium" />
-      <VCard :elevation="2" text="medium" />
-      <VCard :elevation="2" text="medium" />
-    </VLayout>
-    <VLayout gutters="small" column-basis="large">
-      <VCard :elevation="2" text="large" />
-      <VCard :elevation="2" text="large" />
-      <VCard :elevation="2" text="large" />
-      <VCard :elevation="2" text="large" />
-    </VLayout>
-    <VLayout gutters="small" column-basis="block">
-      <VCard :elevation="2" text="block" />
-      <VCard :elevation="2" text="block" />
-      <VCard :elevation="2" text="block" />
-      <VCard :elevation="2" text="block" />
-    </VLayout>
-  </div>
+	<div>
+		<VLayout gutters="small" column-basis="small">
+			<VCard :elevation="2" text="small" />
+			<VCard :elevation="2" text="small" />
+			<VCard :elevation="2" text="small" />
+			<VCard :elevation="2" text="small" />
+		</VLayout>
+		<VLayout gutters="small" column-basis="medium">
+			<VCard :elevation="2" text="medium" />
+			<VCard :elevation="2" text="medium" />
+			<VCard :elevation="2" text="medium" />
+			<VCard :elevation="2" text="medium" />
+		</VLayout>
+		<VLayout gutters="small" column-basis="large">
+			<VCard :elevation="2" text="large" />
+			<VCard :elevation="2" text="large" />
+			<VCard :elevation="2" text="large" />
+			<VCard :elevation="2" text="large" />
+		</VLayout>
+		<VLayout gutters="small" column-basis="block">
+			<VCard :elevation="2" text="block" />
+			<VCard :elevation="2" text="block" />
+			<VCard :elevation="2" text="block" />
+			<VCard :elevation="2" text="block" />
+		</VLayout>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/ColumnSpacingExample.vue b/apps/vue-docs/docs/examples/components/layout/ColumnSpacingExample.vue
index 82050478ca..1d3a608add 100644
--- a/apps/vue-docs/docs/examples/components/layout/ColumnSpacingExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/ColumnSpacingExample.vue
@@ -1,21 +1,21 @@
 <template>
-  <div>
-    <VLayout gutters="small" column-spacing="small">
-      <VCard :elevation="2" text="small" />
-      <VCard :elevation="2" text="small" />
-      <VCard :elevation="2" text="small" />
-    </VLayout>
-    <VLayout gutters="small" column-spacing="medium">
-      <VCard :elevation="2" text="medium" />
-      <VCard :elevation="2" text="medium" />
-      <VCard :elevation="2" text="medium" />
-    </VLayout>
-    <VLayout gutters="small" column-spacing="large">
-      <VCard :elevation="2" text="large" />
-      <VCard :elevation="2" text="large" />
-      <VCard :elevation="2" text="large" />
-    </VLayout>
-  </div>
+	<div>
+		<VLayout gutters="small" column-spacing="small">
+			<VCard :elevation="2" text="small" />
+			<VCard :elevation="2" text="small" />
+			<VCard :elevation="2" text="small" />
+		</VLayout>
+		<VLayout gutters="small" column-spacing="medium">
+			<VCard :elevation="2" text="medium" />
+			<VCard :elevation="2" text="medium" />
+			<VCard :elevation="2" text="medium" />
+		</VLayout>
+		<VLayout gutters="small" column-spacing="large">
+			<VCard :elevation="2" text="large" />
+			<VCard :elevation="2" text="large" />
+			<VCard :elevation="2" text="large" />
+		</VLayout>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/GridTemplateColumnsExample.vue b/apps/vue-docs/docs/examples/components/layout/GridTemplateColumnsExample.vue
index 31f0951113..e76161f908 100644
--- a/apps/vue-docs/docs/examples/components/layout/GridTemplateColumnsExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/GridTemplateColumnsExample.vue
@@ -1,24 +1,37 @@
 <template>
-  <div>
-    <VLayout style="--layout-grid-template-columns: repeat(auto-fit, minmax(100px, 1fr))">
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-    </VLayout>
-    <VLayout style="--layout-grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))">
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-    </VLayout>
-    <VLayout style="--layout-grid-template-columns: 280px repeat(auto-fill, minmax(100px, 1fr))">
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-      <VCard :elevation="2" />
-    </VLayout>
-  </div>
+	<div>
+		<VLayout
+			style="
+				--layout-grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+			"
+		>
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+		</VLayout>
+		<VLayout
+			style="
+				--layout-grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+			"
+		>
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+		</VLayout>
+		<VLayout
+			style="
+				--layout-grid-template-columns: 280px
+					repeat(auto-fill, minmax(100px, 1fr));
+			"
+		>
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+			<VCard :elevation="2" />
+		</VLayout>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/GuttersBlockExample.vue b/apps/vue-docs/docs/examples/components/layout/GuttersBlockExample.vue
index d5fcd66567..ea9dce32a9 100644
--- a/apps/vue-docs/docs/examples/components/layout/GuttersBlockExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/GuttersBlockExample.vue
@@ -1,15 +1,15 @@
 <template>
-  <VLayout gutters="small-block">
-    <VCard :elevation="2" text="small-block" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="medium-block">
-    <VCard :elevation="2" text="medium-block" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="large-block">
-    <VCard :elevation="2" text="large-block" />
-  </VLayout>
+	<VLayout gutters="small-block">
+		<VCard :elevation="2" text="small-block" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="medium-block">
+		<VCard :elevation="2" text="medium-block" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="large-block">
+		<VCard :elevation="2" text="large-block" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/GuttersExample.vue b/apps/vue-docs/docs/examples/components/layout/GuttersExample.vue
index 0973527fd7..5fdaf3b831 100644
--- a/apps/vue-docs/docs/examples/components/layout/GuttersExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/GuttersExample.vue
@@ -1,19 +1,19 @@
 <template>
-  <VLayout>
-    <VCard :elevation="2" text="none" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="small">
-    <VCard :elevation="2" text="small" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="medium">
-    <VCard :elevation="2" text="medium" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="large">
-    <VCard :elevation="2" text="large" />
-  </VLayout>
+	<VLayout>
+		<VCard :elevation="2" text="none" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="small">
+		<VCard :elevation="2" text="small" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="medium">
+		<VCard :elevation="2" text="medium" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="large">
+		<VCard :elevation="2" text="large" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/GuttersInlineExample.vue b/apps/vue-docs/docs/examples/components/layout/GuttersInlineExample.vue
index d59a3a2388..de9e09653b 100644
--- a/apps/vue-docs/docs/examples/components/layout/GuttersInlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/GuttersInlineExample.vue
@@ -1,15 +1,15 @@
 <template>
-  <VLayout gutters="small-inline">
-    <VCard :elevation="2" text="small-inline" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="medium-inline">
-    <VCard :elevation="2" text="medium-inline" />
-  </VLayout>
-  <VDivider />
-  <VLayout gutters="large-inline">
-    <VCard :elevation="2" text="large-inline" />
-  </VLayout>
+	<VLayout gutters="small-inline">
+		<VCard :elevation="2" text="small-inline" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="medium-inline">
+		<VCard :elevation="2" text="medium-inline" />
+	</VLayout>
+	<VDivider />
+	<VLayout gutters="large-inline">
+		<VCard :elevation="2" text="large-inline" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/layout/LayoutExample.vue b/apps/vue-docs/docs/examples/components/layout/LayoutExample.vue
index b0ea49c5b0..13e0708fde 100644
--- a/apps/vue-docs/docs/examples/components/layout/LayoutExample.vue
+++ b/apps/vue-docs/docs/examples/components/layout/LayoutExample.vue
@@ -1,60 +1,78 @@
 <template>
-  <VLayout>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1015/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1016/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1018/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1019/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1055/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-    <VCard headline="Lorem ipsum" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-      <template #media>
-        <img
-          src="https://picsum.photos/id/1050/300/200"
-          alt="landscape"
-          style="width: 100%; height: 150px; object-fit: cover"
-        />
-      </template>
-    </VCard>
-  </VLayout>
+	<VLayout>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1015/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1016/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1018/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1019/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1055/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+		<VCard
+			headline="Lorem ipsum"
+			text="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+		>
+			<template #media>
+				<img
+					src="https://picsum.photos/id/1050/300/200"
+					alt="landscape"
+					style="width: 100%; height: 150px; object-fit: cover"
+				/>
+			</template>
+		</VCard>
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/CheckedExample.vue b/apps/vue-docs/docs/examples/components/menu-item/CheckedExample.vue
index 761f9fc407..054f09da6b 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/CheckedExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/CheckedExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-checked" />
-    <VMenu anchor="anchor-checked" open>
-      <VMenuItem role="menuitemcheckbox" checked text="Checked Menu item" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-checked" />
+		<VMenu anchor="anchor-checked" open>
+			<VMenuItem role="menuitemcheckbox" checked text="Checked Menu item" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/DisabledExample.vue b/apps/vue-docs/docs/examples/components/menu-item/DisabledExample.vue
index 1ac951628c..271bb6790c 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/DisabledExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-disabled" />
-    <VMenu anchor="anchor-disabled" open>
-      <VMenuItem disabled text="Disabled Menu item" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-disabled" />
+		<VMenu anchor="anchor-disabled" open>
+			<VMenuItem disabled text="Disabled Menu item" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/IconExample.vue b/apps/vue-docs/docs/examples/components/menu-item/IconExample.vue
index 30e6d18f59..404bf07bf3 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/IconExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-icon" />
-    <VMenu anchor="anchor-icon" open>
-      <VMenuItem icon="file-pdf-line" text="Export to PDF" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-icon" />
+		<VMenu anchor="anchor-icon" open>
+			<VMenuItem icon="file-pdf-line" text="Export to PDF" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/MenuItemExample.vue b/apps/vue-docs/docs/examples/components/menu-item/MenuItemExample.vue
index 7191836033..e869a5e8c7 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/MenuItemExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/MenuItemExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-menu-item" />
-    <VMenu anchor="anchor-menu-item" open>
-      <VMenuItem text="Menu item" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-menu-item" />
+		<VMenu anchor="anchor-menu-item" open>
+			<VMenuItem text="Menu item" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/RoleExample.vue b/apps/vue-docs/docs/examples/components/menu-item/RoleExample.vue
index f1bfb9bd35..e2495a18d2 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/RoleExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/RoleExample.vue
@@ -1,20 +1,20 @@
 <template>
-  <div style="text-align: center; height: 340px">
-    <span id="anchor-role" />
-    <VMenu anchor="anchor-role" open>
-      <VMenuItem role="menuitem" text="Menu item 1" />
-      <VMenuItem role="menuitem" text="Menu item 2" />
-      <VDivider />
-      <VMenuItem role="menuitemcheckbox" text="Checkbox 1" />
-      <VMenuItem role="menuitemcheckbox" text="Checkbox 2" />
-      <VDivider />
-      <VMenuItem role="menuitemradio" text="Radio 1.1" />
-      <VMenuItem role="menuitemradio" text="Radio 1.2" />
-      <VDivider />
-      <VMenuItem role="menuitemradio" text="Radio 2.1" />
-      <VMenuItem role="menuitemradio" text="Radio 2.2" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 340px">
+		<span id="anchor-role" />
+		<VMenu anchor="anchor-role" open>
+			<VMenuItem role="menuitem" text="Menu item 1" />
+			<VMenuItem role="menuitem" text="Menu item 2" />
+			<VDivider />
+			<VMenuItem role="menuitemcheckbox" text="Checkbox 1" />
+			<VMenuItem role="menuitemcheckbox" text="Checkbox 2" />
+			<VDivider />
+			<VMenuItem role="menuitemradio" text="Radio 1.1" />
+			<VMenuItem role="menuitemradio" text="Radio 1.2" />
+			<VDivider />
+			<VMenuItem role="menuitemradio" text="Radio 2.1" />
+			<VMenuItem role="menuitemradio" text="Radio 2.2" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/SecondaryTextExample.vue b/apps/vue-docs/docs/examples/components/menu-item/SecondaryTextExample.vue
index ef533108bc..c3257be58b 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/SecondaryTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/SecondaryTextExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 80px">
-    <span id="anchor-secondary-text" />
-    <VMenu anchor="anchor-secondary-text" open>
-      <VMenuItem text="menu item" text-secondary="secondary text" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 80px">
+		<span id="anchor-secondary-text" />
+		<VMenu anchor="anchor-secondary-text" open>
+			<VMenuItem text="menu item" text-secondary="secondary text" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/SubmenuExample.vue b/apps/vue-docs/docs/examples/components/menu-item/SubmenuExample.vue
index 7f276633e5..f26447e87e 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/SubmenuExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/SubmenuExample.vue
@@ -1,16 +1,16 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-submenu" />
-    <VMenu anchor="anchor-submenu" open>
-      <VMenuItem text="Menu item with Submenu">
-        <template #submenu>
-          <VMenu>
-            <VMenuItem text="Submenu item" />
-          </VMenu>
-        </template>
-      </VMenuItem>
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-submenu" />
+		<VMenu anchor="anchor-submenu" open>
+			<VMenuItem text="Menu item with Submenu">
+				<template #submenu>
+					<VMenu>
+						<VMenuItem text="Submenu item" />
+					</VMenu>
+				</template>
+			</VMenuItem>
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu-item/TextExample.vue b/apps/vue-docs/docs/examples/components/menu-item/TextExample.vue
index 6298956725..905e9d7c08 100644
--- a/apps/vue-docs/docs/examples/components/menu-item/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu-item/TextExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center; height: 60px">
-    <span id="anchor-text" />
-    <VMenu anchor="anchor-text" open>
-      <VMenuItem text="Menu item" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 60px">
+		<span id="anchor-text" />
+		<VMenu anchor="anchor-text" open>
+			<VMenuItem text="Menu item" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu/AnchorExample.vue b/apps/vue-docs/docs/examples/components/menu/AnchorExample.vue
index b86988f3b8..e356575420 100644
--- a/apps/vue-docs/docs/examples/components/menu/AnchorExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu/AnchorExample.vue
@@ -1,17 +1,28 @@
 <template>
-  <div style="height: 150px">
-    <VMenu :open="open1">
-      <template #anchor><VButton label="Toggle Menu" appearance="outlined" @click="open1 = !open1" /></template>
-      <VMenuItem text="Menu item 1" />
-      <VMenuItem text="Menu item 2" />
-    </VMenu>
+	<div style="height: 150px">
+		<VMenu :open="open1">
+			<template #anchor>
+				<VButton
+					label="Toggle Menu"
+					appearance="outlined"
+					@click="open1 = !open1"
+				/>
+			</template>
+			<VMenuItem text="Menu item 1" />
+			<VMenuItem text="Menu item 2" />
+		</VMenu>
 
-    <VButton ref="button" label="Toggle Menu" appearance="outlined" @click="open2 = !open2" />
-    <VMenu :anchor="$refs.button?.$el" :open="open2">
-      <VMenuItem text="Menu item 1" />
-      <VMenuItem text="Menu item 2" />
-    </VMenu>
-  </div>
+		<VButton
+			ref="button"
+			label="Toggle Menu"
+			appearance="outlined"
+			@click="open2 = !open2"
+		/>
+		<VMenu :anchor="$refs.button?.$el" :open="open2">
+			<VMenuItem text="Menu item 1" />
+			<VMenuItem text="Menu item 2" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu/MaxInlineSizeExample.vue b/apps/vue-docs/docs/examples/components/menu/MaxInlineSizeExample.vue
index d7e0b2e540..33d992f84d 100644
--- a/apps/vue-docs/docs/examples/components/menu/MaxInlineSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu/MaxInlineSizeExample.vue
@@ -1,10 +1,16 @@
 <template>
-  <div style="text-align: center; height: 150px">
-    <span id="anchor-max-inline-size" />
-    <VMenu anchor="anchor-max-inline-size" open style="--menu-max-inline-size: 300px">
-      <VMenuItem text="Lorem ipsum dolor sit amet, consectetur adipisicing elit" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 150px">
+		<span id="anchor-max-inline-size" />
+		<VMenu
+			anchor="anchor-max-inline-size"
+			open
+			style="--menu-max-inline-size: 300px"
+		>
+			<VMenuItem
+				text="Lorem ipsum dolor sit amet, consectetur adipisicing elit"
+			/>
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu/MenuExample.vue b/apps/vue-docs/docs/examples/components/menu/MenuExample.vue
index 2edb10a4eb..1d2f6b405e 100644
--- a/apps/vue-docs/docs/examples/components/menu/MenuExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu/MenuExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div style="text-align: center; height: 150px">
-    <span id="anchor-menu" />
-    <VMenu anchor="anchor-menu" open>
-      <VMenuItem text="Menu item 1" />
-      <VMenuItem text="Menu item 2" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 150px">
+		<span id="anchor-menu" />
+		<VMenu anchor="anchor-menu" open>
+			<VMenuItem text="Menu item 1" />
+			<VMenuItem text="Menu item 2" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu/MinInlineSizeExample.vue b/apps/vue-docs/docs/examples/components/menu/MinInlineSizeExample.vue
index e82134f62d..acccee9fc0 100644
--- a/apps/vue-docs/docs/examples/components/menu/MinInlineSizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu/MinInlineSizeExample.vue
@@ -1,10 +1,14 @@
 <template>
-  <div style="text-align: center; height: 150px">
-    <span id="anchor-min-inline-size" />
-    <VMenu anchor="anchor-min-inline-size" open style="--menu-min-inline-size: 300px">
-      <VMenuItem text="Menu Item" />
-    </VMenu>
-  </div>
+	<div style="text-align: center; height: 150px">
+		<span id="anchor-min-inline-size" />
+		<VMenu
+			anchor="anchor-min-inline-size"
+			open
+			style="--menu-min-inline-size: 300px"
+		>
+			<VMenuItem text="Menu Item" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/menu/PlacementExample.vue b/apps/vue-docs/docs/examples/components/menu/PlacementExample.vue
index 1abc7e7b69..33622d4145 100644
--- a/apps/vue-docs/docs/examples/components/menu/PlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/menu/PlacementExample.vue
@@ -1,11 +1,16 @@
 <template>
-  <div style="height: 150px">
-    <VButton ref="button" label="Toggle Menu" appearance="outlined" @click="open = !open" />
-    <VMenu :anchor="$refs.button?.$el" :open="open" placement="right-start">
-      <VMenuItem text="Menu item 1" />
-      <VMenuItem text="Menu item 2" />
-    </VMenu>
-  </div>
+	<div style="height: 150px">
+		<VButton
+			ref="button"
+			label="Toggle Menu"
+			appearance="outlined"
+			@click="open = !open"
+		/>
+		<VMenu :anchor="$refs.button?.$el" :open="open" placement="right-start">
+			<VMenuItem text="Menu item 1" />
+			<VMenuItem text="Menu item 2" />
+		</VMenu>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-disclosure/IconExample.vue b/apps/vue-docs/docs/examples/components/nav-disclosure/IconExample.vue
index 39d3f5bcd5..01bdf35d65 100644
--- a/apps/vue-docs/docs/examples/components/nav-disclosure/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-disclosure/IconExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VNav>
-    <VNavDisclosure label="1st level item" icon="profile">
-      <VNavItem href="#" text="2nd level item" />
-    </VNavDisclosure>
-  </VNav>
+	<VNav>
+		<VNavDisclosure label="1st level item" icon="profile">
+			<VNavItem href="#" text="2nd level item" />
+		</VNavDisclosure>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-disclosure/IconOnlyExample.vue b/apps/vue-docs/docs/examples/components/nav-disclosure/IconOnlyExample.vue
index 1ad5cca7cc..539ec5e166 100644
--- a/apps/vue-docs/docs/examples/components/nav-disclosure/IconOnlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-disclosure/IconOnlyExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VNav>
-    <VNavDisclosure icon="profile">
-      <VNavItem href="#" text="2nd level item" />
-    </VNavDisclosure>
-  </VNav>
+	<VNav>
+		<VNavDisclosure icon="profile">
+			<VNavItem href="#" text="2nd level item" />
+		</VNavDisclosure>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-disclosure/LabelExample.vue b/apps/vue-docs/docs/examples/components/nav-disclosure/LabelExample.vue
index 29284bd544..2aa57f5b6e 100644
--- a/apps/vue-docs/docs/examples/components/nav-disclosure/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-disclosure/LabelExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VNav>
-    <VNavDisclosure label="1st level item">
-      <VNavItem href="#" text="2nd level item" />
-    </VNavDisclosure>
-  </VNav>
+	<VNav>
+		<VNavDisclosure label="1st level item">
+			<VNavItem href="#" text="2nd level item" />
+		</VNavDisclosure>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-disclosure/OpenExample.vue b/apps/vue-docs/docs/examples/components/nav-disclosure/OpenExample.vue
index cb33839e75..6e3443d9d4 100644
--- a/apps/vue-docs/docs/examples/components/nav-disclosure/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-disclosure/OpenExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VNav>
-    <VNavDisclosure label="1st level item" open>
-      <VNavItem href="#" text="2nd level item" />
-    </VNavDisclosure>
-  </VNav>
+	<VNav>
+		<VNavDisclosure label="1st level item" open>
+			<VNavItem href="#" text="2nd level item" />
+		</VNavDisclosure>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-item/AriaCurrentExample.vue b/apps/vue-docs/docs/examples/components/nav-item/AriaCurrentExample.vue
index 1b1749f9a1..2eacf8e360 100644
--- a/apps/vue-docs/docs/examples/components/nav-item/AriaCurrentExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-item/AriaCurrentExample.vue
@@ -1,24 +1,24 @@
 <template>
-  <VNav>
-    <VNavItem
-      href="#"
-      text="Account"
-      :aria-current="selectedItem === 1 ? 'page' : undefined"
-      @click.prevent="selectedItem = 1"
-    />
-    <VNavItem
-      href="#"
-      text="Shop"
-      :aria-current="selectedItem === 2 ? 'page' : undefined"
-      @click.prevent="selectedItem = 2"
-    />
-    <VNavItem
-      href="#"
-      text="My Cart"
-      :aria-current="selectedItem === 3 ? 'page' : undefined"
-      @click.prevent="selectedItem = 3"
-    />
-  </VNav>
+	<VNav>
+		<VNavItem
+			href="#"
+			text="Account"
+			:aria-current="selectedItem === 1 ? 'page' : undefined"
+			@click.prevent="selectedItem = 1"
+		/>
+		<VNavItem
+			href="#"
+			text="Shop"
+			:aria-current="selectedItem === 2 ? 'page' : undefined"
+			@click.prevent="selectedItem = 2"
+		/>
+		<VNavItem
+			href="#"
+			text="My Cart"
+			:aria-current="selectedItem === 3 ? 'page' : undefined"
+			@click.prevent="selectedItem = 3"
+		/>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-item/IconExample.vue b/apps/vue-docs/docs/examples/components/nav-item/IconExample.vue
index daf5b9e0d8..8f1502b755 100644
--- a/apps/vue-docs/docs/examples/components/nav-item/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-item/IconExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VNav>
-    <VNavItem href="#" icon="profile" aria-label="Account" />
-  </VNav>
+	<VNav>
+		<VNavItem href="#" icon="profile" aria-label="Account" />
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-item/IconWithTextExample.vue b/apps/vue-docs/docs/examples/components/nav-item/IconWithTextExample.vue
index 4db162db28..982fb74504 100644
--- a/apps/vue-docs/docs/examples/components/nav-item/IconWithTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-item/IconWithTextExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VNav>
-    <VNavItem href="#" icon="profile" text="Account" />
-  </VNav>
+	<VNav>
+		<VNavItem href="#" icon="profile" text="Account" />
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav-item/TextExample.vue b/apps/vue-docs/docs/examples/components/nav-item/TextExample.vue
index e3fae5b512..d51d70f56b 100644
--- a/apps/vue-docs/docs/examples/components/nav-item/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav-item/TextExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VNav>
-    <VNavItem href="#" text="Account" />
-  </VNav>
+	<VNav>
+		<VNavItem href="#" text="Account" />
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav/DefaultExample.vue b/apps/vue-docs/docs/examples/components/nav/DefaultExample.vue
index 260d80227e..63915dc384 100644
--- a/apps/vue-docs/docs/examples/components/nav/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav/DefaultExample.vue
@@ -1,24 +1,24 @@
 <template>
-  <VNav>
-    <VNavItem
-      href="#"
-      text="1st level item"
-      :aria-current="selectedItem === 1 ? 'page' : undefined"
-      @click.prevent="selectedItem = 1"
-    />
-    <VNavItem
-      href="#"
-      text="1st level item"
-      :aria-current="selectedItem === 2 ? 'page' : undefined"
-      @click.prevent="selectedItem = 2"
-    />
-    <VNavItem
-      href="#"
-      text="1st level item"
-      :aria-current="selectedItem === 3 ? 'page' : undefined"
-      @click.prevent="selectedItem = 3"
-    />
-  </VNav>
+	<VNav>
+		<VNavItem
+			href="#"
+			text="1st level item"
+			:aria-current="selectedItem === 1 ? 'page' : undefined"
+			@click.prevent="selectedItem = 1"
+		/>
+		<VNavItem
+			href="#"
+			text="1st level item"
+			:aria-current="selectedItem === 2 ? 'page' : undefined"
+			@click.prevent="selectedItem = 2"
+		/>
+		<VNavItem
+			href="#"
+			text="1st level item"
+			:aria-current="selectedItem === 3 ? 'page' : undefined"
+			@click.prevent="selectedItem = 3"
+		/>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/nav/NavigationDisclosureExample.vue b/apps/vue-docs/docs/examples/components/nav/NavigationDisclosureExample.vue
index ecb100f6df..da8be92dda 100644
--- a/apps/vue-docs/docs/examples/components/nav/NavigationDisclosureExample.vue
+++ b/apps/vue-docs/docs/examples/components/nav/NavigationDisclosureExample.vue
@@ -1,28 +1,28 @@
 <template>
-  <VNav>
-    <VNavDisclosure label="1st level item" open>
-      <VNavItem
-        href="#"
-        text="2nd level item"
-        :aria-current="selectedItem === 1 ? 'page' : undefined"
-        @click.prevent="selectedItem = 1"
-      />
-      <VNavDisclosure label="2nd level item" open>
-        <VNavItem
-          href="#"
-          text="3rd level item"
-          :aria-current="selectedItem === 2 ? 'page' : undefined"
-          @click.prevent="selectedItem = 2"
-        />
-        <VNavItem
-          href="#"
-          text="3rd level item"
-          :aria-current="selectedItem === 3 ? 'page' : undefined"
-          @click.prevent="selectedItem = 3"
-        />
-      </VNavDisclosure>
-    </VNavDisclosure>
-  </VNav>
+	<VNav>
+		<VNavDisclosure label="1st level item" open>
+			<VNavItem
+				href="#"
+				text="2nd level item"
+				:aria-current="selectedItem === 1 ? 'page' : undefined"
+				@click.prevent="selectedItem = 1"
+			/>
+			<VNavDisclosure label="2nd level item" open>
+				<VNavItem
+					href="#"
+					text="3rd level item"
+					:aria-current="selectedItem === 2 ? 'page' : undefined"
+					@click.prevent="selectedItem = 2"
+				/>
+				<VNavItem
+					href="#"
+					text="3rd level item"
+					:aria-current="selectedItem === 3 ? 'page' : undefined"
+					@click.prevent="selectedItem = 3"
+				/>
+			</VNavDisclosure>
+		</VNavDisclosure>
+	</VNav>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/note/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/note/ConnotationExample.vue
index 830226b926..6fe498dbde 100644
--- a/apps/vue-docs/docs/examples/components/note/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/note/ConnotationExample.vue
@@ -1,11 +1,19 @@
 <template>
-  <div>
-    <VNote connotation="alert" icon="error-solid" headline="alert note" />
-    <VNote connotation="success" icon="check-circle-solid" headline="success note" />
-    <VNote connotation="warning" icon="warning-solid" headline="warning note" />
-    <VNote connotation="information" icon="info-solid" headline="information note" />
-    <VNote connotation="accent" icon="megaphone-solid" headline="accent note" />
-  </div>
+	<div>
+		<VNote connotation="alert" icon="error-solid" headline="alert note" />
+		<VNote
+			connotation="success"
+			icon="check-circle-solid"
+			headline="success note"
+		/>
+		<VNote connotation="warning" icon="warning-solid" headline="warning note" />
+		<VNote
+			connotation="information"
+			icon="info-solid"
+			headline="information note"
+		/>
+		<VNote connotation="accent" icon="megaphone-solid" headline="accent note" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/note/DefaultExample.vue b/apps/vue-docs/docs/examples/components/note/DefaultExample.vue
index 0478bfd632..8509073edd 100644
--- a/apps/vue-docs/docs/examples/components/note/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/note/DefaultExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VNote icon="home" headline="Note Headline" connotation="information">
-    <p>This is the text that explains about something important!</p>
-  </VNote>
+	<VNote icon="home" headline="Note Headline" connotation="information">
+		<p>This is the text that explains about something important!</p>
+	</VNote>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/note/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/note/HeadlineExample.vue
index 25f18b8ede..e591bed5ec 100644
--- a/apps/vue-docs/docs/examples/components/note/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/note/HeadlineExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNote headline="Headline Text" />
+	<VNote headline="Headline Text" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/note/IconExample.vue b/apps/vue-docs/docs/examples/components/note/IconExample.vue
index 104fd37fd2..7f643c51c6 100644
--- a/apps/vue-docs/docs/examples/components/note/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/note/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNote icon="home" />
+	<VNote icon="home" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/note/NoteExample.vue b/apps/vue-docs/docs/examples/components/note/NoteExample.vue
index fc6f5c9447..addf65c877 100644
--- a/apps/vue-docs/docs/examples/components/note/NoteExample.vue
+++ b/apps/vue-docs/docs/examples/components/note/NoteExample.vue
@@ -1,10 +1,15 @@
 <template>
-  <VNote connotation="success" icon="check-circle" headline="Pascal's theological argument">
-    Pascal argues that a rational person should live as though God exists and seek to believe in God. If God does not
-    actually exist, such a person will have only a finite loss (some pleasures, luxury, etc.), whereas if God does
-    exist, he stands to receive infinite gains (as represented by eternity in Heaven) and avoid infinite losses
-    (eternity in Hell).
-  </VNote>
+	<VNote
+		connotation="success"
+		icon="check-circle"
+		headline="Pascal's theological argument"
+	>
+		Pascal argues that a rational person should live as though God exists and
+		seek to believe in God. If God does not actually exist, such a person will
+		have only a finite loss (some pleasures, luxury, etc.), whereas if God does
+		exist, he stands to receive infinite gains (as represented by eternity in
+		Heaven) and avoid infinite losses (eternity in Hell).
+	</VNote>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/numberfield/AppearanceExample.vue
index c40fb323ec..91d69e5895 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/AppearanceExample.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="container">
-    <VNumberField placeholder="appearance" label="fieldset" appearance="fieldset" />
-    <VNumberField placeholder="appearance" label="ghost" appearance="ghost" />
-  </div>
+	<div class="container">
+		<VNumberField
+			placeholder="appearance"
+			label="fieldset"
+			appearance="fieldset"
+		/>
+		<VNumberField placeholder="appearance" label="ghost" appearance="ghost" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -11,8 +15,8 @@ import { VNumberField } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/numberfield/DisabledExample.vue b/apps/vue-docs/docs/examples/components/numberfield/DisabledExample.vue
index 28a942fa44..8d6ee55a0e 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/DisabledExample.vue
@@ -1,5 +1,10 @@
 <template>
-  <VNumberField disabled value="disabled" label="fieldset" appearance="fieldset" />
+	<VNumberField
+		disabled
+		value="disabled"
+		label="fieldset"
+		appearance="fieldset"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/HelperTextExample.vue b/apps/vue-docs/docs/examples/components/numberfield/HelperTextExample.vue
index 546953e178..693e32ae03 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/HelperTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/HelperTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField label="Helper text below" helper-text="Help text" />
+	<VNumberField label="Helper text below" helper-text="Help text" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/LabelExample.vue b/apps/vue-docs/docs/examples/components/numberfield/LabelExample.vue
index 4d2ba23402..7353112859 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField label="My Label" />
+	<VNumberField label="My Label" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/NumberFieldExample.vue b/apps/vue-docs/docs/examples/components/numberfield/NumberFieldExample.vue
index 771a13e000..7d87ee7395 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/NumberFieldExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/NumberFieldExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField maxlength="4" minlength="2" />
+	<VNumberField maxlength="4" minlength="2" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/PlaceholderExample.vue b/apps/vue-docs/docs/examples/components/numberfield/PlaceholderExample.vue
index c9c7fb682e..b71366d6d4 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/PlaceholderExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/PlaceholderExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField placeholder="My Placeholder" />
+	<VNumberField placeholder="My Placeholder" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/numberfield/ReadonlyExample.vue
index d2581dbf1b..f6d135dc5f 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/ReadonlyExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField readonly value="8" label="fieldset" appearance="fieldset" />
+	<VNumberField readonly value="8" label="fieldset" appearance="fieldset" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/ShapeExample.vue b/apps/vue-docs/docs/examples/components/numberfield/ShapeExample.vue
index 2fefca8e7b..1f47df2c07 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="container">
-    <VNumberField label="Pill" shape="pill" />
-    <VNumberField label="Rounded" shape="rounded" />
-  </div>
+	<div class="container">
+		<VNumberField label="Pill" shape="pill" />
+		<VNumberField label="Rounded" shape="rounded" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -11,8 +11,8 @@ import { VNumberField } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/numberfield/SuccessTextExample.vue b/apps/vue-docs/docs/examples/components/numberfield/SuccessTextExample.vue
index 46ffcf588d..a4ab3f18b0 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/SuccessTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/SuccessTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField label="Valid value" success-text="Great success" />
+	<VNumberField label="Valid value" success-text="Great success" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/numberfield/ValueExample.vue b/apps/vue-docs/docs/examples/components/numberfield/ValueExample.vue
index edd15a8e80..f2710bc06c 100644
--- a/apps/vue-docs/docs/examples/components/numberfield/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/numberfield/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VNumberField label="With default value" value="5" />
+	<VNumberField label="With default value" value="5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/pagination/NavIconsExample.vue b/apps/vue-docs/docs/examples/components/pagination/NavIconsExample.vue
index b5a0a9cbe6..76b4353370 100644
--- a/apps/vue-docs/docs/examples/components/pagination/NavIconsExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/NavIconsExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VPagination total="20" />
-    <VPagination total="20" nav-icons />
-  </div>
+	<div>
+		<VPagination total="20" />
+		<VPagination total="20" nav-icons />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/pagination/PaginationChangeExample.vue b/apps/vue-docs/docs/examples/components/pagination/PaginationChangeExample.vue
index 49b9fa6334..02879326ab 100644
--- a/apps/vue-docs/docs/examples/components/pagination/PaginationChangeExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/PaginationChangeExample.vue
@@ -1,6 +1,6 @@
 <template>
-  <VPagination total="20" @pagination-change="onPaginationChange" />
-  <div>{{ detail }}</div>
+	<VPagination total="20" @pagination-change="onPaginationChange" />
+	<div>{{ detail }}</div>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,7 @@ import { VPagination } from '@vonage/vivid-vue';
 import { ref } from 'vue';
 
 const detail = ref('');
-const onPaginationChange = e => {
-  detail.value = JSON.stringify(e.detail);
+const onPaginationChange = (e) => {
+	detail.value = JSON.stringify(e.detail);
 };
 </script>
diff --git a/apps/vue-docs/docs/examples/components/pagination/PaginationExample.vue b/apps/vue-docs/docs/examples/components/pagination/PaginationExample.vue
index c72a89131d..a64d4884e1 100644
--- a/apps/vue-docs/docs/examples/components/pagination/PaginationExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/PaginationExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VPagination total="10" />
+	<VPagination total="10" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/pagination/SelectedIndexExample.vue b/apps/vue-docs/docs/examples/components/pagination/SelectedIndexExample.vue
index 07be049eef..74a1ffd541 100644
--- a/apps/vue-docs/docs/examples/components/pagination/SelectedIndexExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/SelectedIndexExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VPagination total="20" selected-index="5" />
+	<VPagination total="20" selected-index="5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/pagination/SizeExample.vue b/apps/vue-docs/docs/examples/components/pagination/SizeExample.vue
index 9c36a2de30..ce6864db6a 100644
--- a/apps/vue-docs/docs/examples/components/pagination/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/SizeExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <VPagination size="super-condensed" total="20" />
-    <VPagination size="condensed" total="20" />
-    <VPagination size="normal" total="20" />
-  </div>
+	<div>
+		<VPagination size="super-condensed" total="20" />
+		<VPagination size="condensed" total="20" />
+		<VPagination size="normal" total="20" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/pagination/TotalExample.vue b/apps/vue-docs/docs/examples/components/pagination/TotalExample.vue
index 89ef36731e..7f91499317 100644
--- a/apps/vue-docs/docs/examples/components/pagination/TotalExample.vue
+++ b/apps/vue-docs/docs/examples/components/pagination/TotalExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VPagination total="20" />
+	<VPagination total="20" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/ConnotationExample.vue
index 8851baaf1e..b1c8916f4c 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/ConnotationExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <VProgressRing connotation="accent" />
-    <VProgressRing connotation="cta" />
-    <VProgressRing connotation="success" />
-    <VProgressRing connotation="alert" />
-  </div>
+	<div>
+		<VProgressRing connotation="accent" />
+		<VProgressRing connotation="cta" />
+		<VProgressRing connotation="success" />
+		<VProgressRing connotation="alert" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/DeterminateStateExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/DeterminateStateExample.vue
index d746bfe0f5..8a3325c9bb 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/DeterminateStateExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/DeterminateStateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgressRing min="0" max="50" value="12.5" />
+	<VProgressRing min="0" max="50" value="12.5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/IndeterminateExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/IndeterminateExample.vue
index 308da21017..506fcb4b4a 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/IndeterminateExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/IndeterminateExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VProgressRing min="0" max="50" />
-    <VProgressRing min="0" max="50" value="indeterminate" />
-  </div>
+	<div>
+		<VProgressRing min="0" max="50" />
+		<VProgressRing min="0" max="50" value="indeterminate" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/MinMaxExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/MinMaxExample.vue
index 78e57aa286..b0f44482f9 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/MinMaxExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/MinMaxExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
-    <VProgressRing min="0" max="50" value="12.5" />
-    <VProgressRing min="0" max="50" value="50" />
-    <VProgressRing min="0" max="100" value="50" />
-  </div>
+	<div>
+		<VProgressRing min="0" max="50" value="12.5" />
+		<VProgressRing min="0" max="50" value="50" />
+		<VProgressRing min="0" max="100" value="50" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/PausedExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/PausedExample.vue
index 25f4227f44..775fd51248 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/PausedExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/PausedExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgressRing min="0" max="50" value="25" paused />
+	<VProgressRing min="0" max="50" value="25" paused />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/ProgressRingExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/ProgressRingExample.vue
index 0ca5da7ce6..ab95d4a0e2 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/ProgressRingExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/ProgressRingExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgressRing />
+	<VProgressRing />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/SizeExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/SizeExample.vue
index 030aa9a565..2882d85e84 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/SizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/SizeExample.vue
@@ -1,17 +1,17 @@
 <template>
-  <div>
-    <VProgressRing min="0" max="50" value="50" size="-5" />
-    <VProgressRing min="0" max="50" value="50" size="-4" />
-    <VProgressRing min="0" max="50" value="50" size="-3" />
-    <VProgressRing min="0" max="50" value="50" size="-2" />
-    <VProgressRing min="0" max="50" value="50" size="-1" />
-    <VProgressRing min="0" max="50" value="50" size="0" />
-    <VProgressRing min="0" max="50" value="50" size="1" />
-    <VProgressRing min="0" max="50" value="50" size="2" />
-    <VProgressRing min="0" max="50" value="50" size="3" />
-    <VProgressRing min="0" max="50" value="50" size="4" />
-    <VProgressRing min="0" max="50" value="50" size="5" />
-  </div>
+	<div>
+		<VProgressRing min="0" max="50" value="50" size="-5" />
+		<VProgressRing min="0" max="50" value="50" size="-4" />
+		<VProgressRing min="0" max="50" value="50" size="-3" />
+		<VProgressRing min="0" max="50" value="50" size="-2" />
+		<VProgressRing min="0" max="50" value="50" size="-1" />
+		<VProgressRing min="0" max="50" value="50" size="0" />
+		<VProgressRing min="0" max="50" value="50" size="1" />
+		<VProgressRing min="0" max="50" value="50" size="2" />
+		<VProgressRing min="0" max="50" value="50" size="3" />
+		<VProgressRing min="0" max="50" value="50" size="4" />
+		<VProgressRing min="0" max="50" value="50" size="5" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress-ring/ValueExample.vue b/apps/vue-docs/docs/examples/components/progress-ring/ValueExample.vue
index 3ab95ca4ce..5f9180dafc 100644
--- a/apps/vue-docs/docs/examples/components/progress-ring/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress-ring/ValueExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <VProgressRing value="12.5" />
-    <VProgressRing value="45" />
-    <VProgressRing value="73" />
-    <VProgressRing value="100" />
-  </div>
+	<div>
+		<VProgressRing value="12.5" />
+		<VProgressRing value="45" />
+		<VProgressRing value="73" />
+		<VProgressRing value="100" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/progress/ConnotationExample.vue
index e775203c97..fc228841b1 100644
--- a/apps/vue-docs/docs/examples/components/progress/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/ConnotationExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VLayout>
-    <VProgress :min="0" :max="100" :value="25" connotation="accent" />
-    <VProgress :min="0" :max="100" :value="25" connotation="cta" />
-    <VProgress :min="0" :max="100" :value="25" connotation="success" />
-    <VProgress :min="0" :max="100" :value="25" connotation="alert" />
-    <VProgress :min="0" :max="100" :value="25" connotation="pacific" />
-  </VLayout>
+	<VLayout>
+		<VProgress :min="0" :max="100" :value="25" connotation="accent" />
+		<VProgress :min="0" :max="100" :value="25" connotation="cta" />
+		<VProgress :min="0" :max="100" :value="25" connotation="success" />
+		<VProgress :min="0" :max="100" :value="25" connotation="alert" />
+		<VProgress :min="0" :max="100" :value="25" connotation="pacific" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/DeterminateStateExample.vue b/apps/vue-docs/docs/examples/components/progress/DeterminateStateExample.vue
index 6e3705ede2..6982b3c162 100644
--- a/apps/vue-docs/docs/examples/components/progress/DeterminateStateExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/DeterminateStateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" :value="12.5" />
+	<VProgress :min="0" :max="50" :value="12.5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/IndeterminateExample.vue b/apps/vue-docs/docs/examples/components/progress/IndeterminateExample.vue
index 2f053796c2..6888ec9ab4 100644
--- a/apps/vue-docs/docs/examples/components/progress/IndeterminateExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/IndeterminateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" value="indeterminate" />
+	<VProgress :min="0" :max="50" value="indeterminate" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/MinMaxExample.vue b/apps/vue-docs/docs/examples/components/progress/MinMaxExample.vue
index 6e3705ede2..6982b3c162 100644
--- a/apps/vue-docs/docs/examples/components/progress/MinMaxExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/MinMaxExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" :value="12.5" />
+	<VProgress :min="0" :max="50" :value="12.5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/PausedExample.vue b/apps/vue-docs/docs/examples/components/progress/PausedExample.vue
index 42ef6d2a3c..0060b76f8b 100644
--- a/apps/vue-docs/docs/examples/components/progress/PausedExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/PausedExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" :value="25" paused />
+	<VProgress :min="0" :max="50" :value="25" paused />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/PausedIndeterminateExample.vue b/apps/vue-docs/docs/examples/components/progress/PausedIndeterminateExample.vue
index b092e089a1..535587782e 100644
--- a/apps/vue-docs/docs/examples/components/progress/PausedIndeterminateExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/PausedIndeterminateExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" value="indeterminate" paused />
+	<VProgress :min="0" :max="50" value="indeterminate" paused />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/ReverseExample.vue b/apps/vue-docs/docs/examples/components/progress/ReverseExample.vue
index 3abda096b3..20e7ba8d95 100644
--- a/apps/vue-docs/docs/examples/components/progress/ReverseExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/ReverseExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VLayout>
-    <VProgress :min="0" :max="50" :value="25" reverse />
-    <VProgress :min="0" :max="50" value="indeterminate" reverse />
-  </VLayout>
+	<VLayout>
+		<VProgress :min="0" :max="50" :value="25" reverse />
+		<VProgress :min="0" :max="50" value="indeterminate" reverse />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/ShapeExample.vue b/apps/vue-docs/docs/examples/components/progress/ShapeExample.vue
index da24ccd680..61b9d43574 100644
--- a/apps/vue-docs/docs/examples/components/progress/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VLayout>
-    <VProgress :min="0" :max="50" :value="25" shape="rounded" />
-    <VProgress :min="0" :max="50" :value="25" shape="sharp" />
-  </VLayout>
+	<VLayout>
+		<VProgress :min="0" :max="50" :value="25" shape="rounded" />
+		<VProgress :min="0" :max="50" :value="25" shape="sharp" />
+	</VLayout>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/progress/ValueExample.vue b/apps/vue-docs/docs/examples/components/progress/ValueExample.vue
index 6e3705ede2..6982b3c162 100644
--- a/apps/vue-docs/docs/examples/components/progress/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/progress/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VProgress :min="0" :max="50" :value="12.5" />
+	<VProgress :min="0" :max="50" :value="12.5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio-group/DisabledExample.vue b/apps/vue-docs/docs/examples/components/radio-group/DisabledExample.vue
index 0b469065a6..c89898d5a3 100644
--- a/apps/vue-docs/docs/examples/components/radio-group/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio-group/DisabledExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VRadioGroup label="Pick a number" name="number" disabled>
-    <VRadio label="1" value="1" checked />
-    <VRadio label="2" value="2" />
-    <VRadio label="3" value="3" />
-  </VRadioGroup>
+	<VRadioGroup label="Pick a number" name="number" disabled>
+		<VRadio label="1" value="1" checked />
+		<VRadio label="2" value="2" />
+		<VRadio label="3" value="3" />
+	</VRadioGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio-group/LabelExample.vue b/apps/vue-docs/docs/examples/components/radio-group/LabelExample.vue
index b098bc7432..b38e1b4c55 100644
--- a/apps/vue-docs/docs/examples/components/radio-group/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio-group/LabelExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VRadioGroup label="Pick a number" name="number">
-    <VRadio label="1" value="1" />
-    <VRadio label="2" value="2" />
-    <VRadio label="3" value="3" />
-  </VRadioGroup>
+	<VRadioGroup label="Pick a number" name="number">
+		<VRadio label="1" value="1" />
+		<VRadio label="2" value="2" />
+		<VRadio label="3" value="3" />
+	</VRadioGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio-group/OrientationExample.vue b/apps/vue-docs/docs/examples/components/radio-group/OrientationExample.vue
index 8933d95248..5d644a966a 100644
--- a/apps/vue-docs/docs/examples/components/radio-group/OrientationExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio-group/OrientationExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VRadioGroup label="Pick a number" name="number" orientation="vertical">
-    <VRadio label="1" value="1" />
-    <VRadio label="2" value="2" />
-    <VRadio label="3" value="3" />
-  </VRadioGroup>
+	<VRadioGroup label="Pick a number" name="number" orientation="vertical">
+		<VRadio label="1" value="1" />
+		<VRadio label="2" value="2" />
+		<VRadio label="3" value="3" />
+	</VRadioGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio-group/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/radio-group/ReadonlyExample.vue
index b77e8b45e4..5a702902b1 100644
--- a/apps/vue-docs/docs/examples/components/radio-group/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio-group/ReadonlyExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VRadioGroup label="Pick a number" name="number" readonly>
-    <VRadio label="1" value="1" checked />
-    <VRadio label="2" value="2" />
-    <VRadio label="3" value="3" />
-  </VRadioGroup>
+	<VRadioGroup label="Pick a number" name="number" readonly>
+		<VRadio label="1" value="1" checked />
+		<VRadio label="2" value="2" />
+		<VRadio label="3" value="3" />
+	</VRadioGroup>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio/CheckedExample.vue b/apps/vue-docs/docs/examples/components/radio/CheckedExample.vue
index 2cbbdea4dc..0b88f244ca 100644
--- a/apps/vue-docs/docs/examples/components/radio/CheckedExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio/CheckedExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VRadio checked />
+	<VRadio checked />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio/DisabledExample.vue b/apps/vue-docs/docs/examples/components/radio/DisabledExample.vue
index 82e464dc3a..b6d1cc8719 100644
--- a/apps/vue-docs/docs/examples/components/radio/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio/DisabledExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VRadio disabled />
-    <VRadio disabled checked />
-  </div>
+	<div>
+		<VRadio disabled />
+		<VRadio disabled checked />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio/LabelExample.vue b/apps/vue-docs/docs/examples/components/radio/LabelExample.vue
index 51ca7fc794..6b1528a135 100644
--- a/apps/vue-docs/docs/examples/components/radio/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VRadio label="A default radio" />
+	<VRadio label="A default radio" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/radio/ValueExample.vue b/apps/vue-docs/docs/examples/components/radio/ValueExample.vue
index 685cabfa49..a3f504134c 100644
--- a/apps/vue-docs/docs/examples/components/radio/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/radio/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VRadio value="my-value" />
+	<VRadio value="my-value" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue b/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue
index c0432a48a2..b629c3e0cb 100644
--- a/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue
+++ b/apps/vue-docs/docs/examples/components/range-slider/RangeSliderExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VRangeSlider
-    :start="start"
-    :end="end"
-    @update:start="start = $event"
-    @update:end="end = $event"
-  />
-  <!-- In Vue 3 you can use v-model shorthand instead of @update:start and @update:end
+	<VRangeSlider
+		:start="start"
+		:end="end"
+		@update:start="start = $event"
+		@update:end="end = $event"
+	/>
+	<!-- In Vue 3 you can use v-model shorthand instead of @update:start and @update:end
 		<VRangeSlider v-model:start="start" v-model:end="end" />
 	-->
 </template>
diff --git a/apps/vue-docs/docs/examples/components/select/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/select/AppearanceExample.vue
index 28cc1a32fd..990ee315ab 100644
--- a/apps/vue-docs/docs/examples/components/select/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/AppearanceExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container">
-    <VSelect appearance="ghost">
-      <VOption value="1" text="Option 1" selected />
-      <VOption value="2" text="Option 2" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect appearance="ghost">
+			<VOption value="1" text="Option 1" selected />
+			<VOption value="2" text="Option 2" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,6 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 120px;
+	block-size: 120px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/DefaultExample.vue b/apps/vue-docs/docs/examples/components/select/DefaultExample.vue
index eb1b51127b..8f5f1c8d17 100644
--- a/apps/vue-docs/docs/examples/components/select/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/DefaultExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect label="choose one option" class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect label="choose one option" class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/DisabledExample.vue b/apps/vue-docs/docs/examples/components/select/DisabledExample.vue
index 5a9648a0fb..e22da11bfa 100644
--- a/apps/vue-docs/docs/examples/components/select/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/DisabledExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VSelect disabled>
-    <VOption value="1" text="Option 1" />
-  </VSelect>
+	<VSelect disabled>
+		<VOption value="1" text="Option 1" />
+	</VSelect>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/select/HeightCSSVariableExample.vue b/apps/vue-docs/docs/examples/components/select/HeightCSSVariableExample.vue
index eb45cf774c..164f482da1 100644
--- a/apps/vue-docs/docs/examples/components/select/HeightCSSVariableExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/HeightCSSVariableExample.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="container">
-    <VSelect class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-      <VOption value="4" text="Option 4" />
-      <VOption value="5" text="Option 5" />
-      <VOption value="6" text="Option 6" />
-      <VOption value="7" text="Option 7" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+			<VOption value="4" text="Option 4" />
+			<VOption value="5" text="Option 5" />
+			<VOption value="6" text="Option 6" />
+			<VOption value="7" text="Option 7" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -18,10 +18,10 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 250px;
+	block-size: 250px;
 }
 .select {
-  width: 130px;
-  --select-height: 200px;
+	width: 130px;
+	--select-height: 200px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/IconExample.vue b/apps/vue-docs/docs/examples/components/select/IconExample.vue
index 11a2b21832..055b2e4d24 100644
--- a/apps/vue-docs/docs/examples/components/select/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/IconExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect label="choose one option" icon="search-line" class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect label="choose one option" icon="search-line" class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/LabelExample.vue b/apps/vue-docs/docs/examples/components/select/LabelExample.vue
index eb1b51127b..8f5f1c8d17 100644
--- a/apps/vue-docs/docs/examples/components/select/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/LabelExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect label="choose one option" class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect label="choose one option" class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/MultipleExample.vue b/apps/vue-docs/docs/examples/components/select/MultipleExample.vue
index 46c9b76312..9352942539 100644
--- a/apps/vue-docs/docs/examples/components/select/MultipleExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/MultipleExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect multiple label="choose how many options you want" class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect multiple label="choose how many options you want" class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/OpenExample.vue b/apps/vue-docs/docs/examples/components/select/OpenExample.vue
index 1d23246e79..c1896a8d5a 100644
--- a/apps/vue-docs/docs/examples/components/select/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/OpenExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect open class="select">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-      <VOption value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect open class="select">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+			<VOption value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/OptionLabelExample.vue b/apps/vue-docs/docs/examples/components/select/OptionLabelExample.vue
index 02c036875e..96a9f408d9 100644
--- a/apps/vue-docs/docs/examples/components/select/OptionLabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/OptionLabelExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect open class="select">
-      <VOption label="Custom Label 1" value="1" text="Option 1" />
-      <VOption label="Custom Label 2" value="2" text="Option 2" />
-      <VOption label="Custom Label 3" value="3" text="Option 3" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect open class="select">
+			<VOption label="Custom Label 1" value="1" text="Option 1" />
+			<VOption label="Custom Label 2" value="2" text="Option 2" />
+			<VOption label="Custom Label 3" value="3" text="Option 3" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 160px;
+	width: 160px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/ShapeExample.vue b/apps/vue-docs/docs/examples/components/select/ShapeExample.vue
index c4bca8d3dd..47dfc0f076 100644
--- a/apps/vue-docs/docs/examples/components/select/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/ShapeExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="container">
-    <VSelect shape="pill">
-      <VOption value="1" text="Option 1" />
-      <VOption value="2" text="Option 2" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect shape="pill">
+			<VOption value="1" text="Option 1" />
+			<VOption value="2" text="Option 2" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -13,6 +13,6 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 120px;
+	block-size: 120px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/UseCaseExample.vue b/apps/vue-docs/docs/examples/components/select/UseCaseExample.vue
index eaabb07292..7c12d242a4 100644
--- a/apps/vue-docs/docs/examples/components/select/UseCaseExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/UseCaseExample.vue
@@ -1,19 +1,15 @@
 <template>
-  <div class="container">
-    <VSelect
-      v-model="value"
-      label="country code"
-      :icon="flag"
-    >
-      <VOption
-        v-for="option in options"
-        :key="option.value"
-        :value="option.value"
-        :text="option.text"
-        :icon="option.icon"
-      />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect v-model="value" label="country code" :icon="flag">
+			<VOption
+				v-for="option in options"
+				:key="option.value"
+				:value="option.value"
+				:text="option.text"
+				:icon="option.icon"
+			/>
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -27,11 +23,13 @@ const options = [
 ];
 
 const value = ref('+1');
-const flag = computed(() => options.find((option) => option.value === value.value)!.icon);
+const flag = computed(
+	() => options.find((option) => option.value === value.value)!.icon
+);
 </script>
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/select/WidthExample.vue b/apps/vue-docs/docs/examples/components/select/WidthExample.vue
index 73c91e03ec..9e7e9dc32c 100644
--- a/apps/vue-docs/docs/examples/components/select/WidthExample.vue
+++ b/apps/vue-docs/docs/examples/components/select/WidthExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="container">
-    <VSelect label="choose one option" class="select">
-      <VOption value="1" text="Option 1: dogs" />
-      <VOption value="2" text="Option 2: cats" />
-      <VOption value="3" text="Option 3: dogs and cats" />
-    </VSelect>
-  </div>
+	<div class="container">
+		<VSelect label="choose one option" class="select">
+			<VOption value="1" text="Option 1: dogs" />
+			<VOption value="2" text="Option 2: cats" />
+			<VOption value="3" text="Option 3: dogs and cats" />
+		</VSelect>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +14,9 @@ import { VSelect, VOption } from '@vonage/vivid-vue';
 
 <style scoped>
 .container {
-  block-size: 230px;
+	block-size: 230px;
 }
 .select {
-  width: 150px;
+	width: 150px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/side-drawer/BasicExample.vue b/apps/vue-docs/docs/examples/components/side-drawer/BasicExample.vue
index ef51097fed..ca4bf63013 100644
--- a/apps/vue-docs/docs/examples/components/side-drawer/BasicExample.vue
+++ b/apps/vue-docs/docs/examples/components/side-drawer/BasicExample.vue
@@ -1,21 +1,23 @@
 <template>
-  <VSideDrawer open>
-    <VLayout gutters="small">
-      <p>Side Drawer content</p>
-    </VLayout>
+	<VSideDrawer open>
+		<VLayout gutters="small">
+			<p>Side Drawer content</p>
+		</VLayout>
 
-    <template #app-content>
-      <VLayout gutters="small">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </p>
-      </VLayout>
-    </template>
-  </VSideDrawer>
+		<template #app-content>
+			<VLayout gutters="small">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+					aliquip ex ea commodo consequat. Duis aute irure dolor in
+					reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+					pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+					culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</VLayout>
+		</template>
+	</VSideDrawer>
 </template>
 
 <script lang="ts" setup>
diff --git a/apps/vue-docs/docs/examples/components/side-drawer/CollapsibleExample.vue b/apps/vue-docs/docs/examples/components/side-drawer/CollapsibleExample.vue
index 2e23616d86..d2b551a6d4 100644
--- a/apps/vue-docs/docs/examples/components/side-drawer/CollapsibleExample.vue
+++ b/apps/vue-docs/docs/examples/components/side-drawer/CollapsibleExample.vue
@@ -1,41 +1,48 @@
 <template>
-  <div class="container">
-    <VSideDrawer class="drawer" :class="{ collapsed: !open }" open alternate>
-      <VLayout gutters="small" column-basis="block">
-        <VNav>
-          <VNavItem
-            class="item"
-            href="#"
-            :text="open ? 'Calls' : ''"
-            :data-label="open ? '' : 'Calls'"
-            icon="call-line"
-            :aria-current="selected === 'calls' ? 'page' : null"
-            @click.prevent="selected = 'calls'"
-          />
-          <VNavItem
-            class="item"
-            href="#"
-            :text="open ? 'Voicemail' : ''"
-            :data-label="open ? '' : 'Voicemail'"
-            icon="voicemail-line"
-            :aria-current="selected === 'voicemail' ? 'page' : null"
-            @click.prevent="selected = 'voicemail'"
-          />
-          <VNavItem
-            class="item"
-            href="#"
-            :text="open ? 'SMS' : ''"
-            :data-label="open ? '' : 'SMS'"
-            icon="chat-line"
-            :aria-current="selected === 'sms' ? 'page' : null"
-            @click.prevent="selected = 'sms'"
-          />
-        </VNav>
-      </VLayout>
-      <VLayout slot="app-content" gutters="medium"> Toggle the side drawer by clicking the FAB. </VLayout>
-      <VFab slot="app-content" class="fab" icon="menu-solid" @click="open = !open" />
-    </VSideDrawer>
-  </div>
+	<div class="container">
+		<VSideDrawer class="drawer" :class="{ collapsed: !open }" open alternate>
+			<VLayout gutters="small" column-basis="block">
+				<VNav>
+					<VNavItem
+						class="item"
+						href="#"
+						:text="open ? 'Calls' : ''"
+						:data-label="open ? '' : 'Calls'"
+						icon="call-line"
+						:aria-current="selected === 'calls' ? 'page' : null"
+						@click.prevent="selected = 'calls'"
+					/>
+					<VNavItem
+						class="item"
+						href="#"
+						:text="open ? 'Voicemail' : ''"
+						:data-label="open ? '' : 'Voicemail'"
+						icon="voicemail-line"
+						:aria-current="selected === 'voicemail' ? 'page' : null"
+						@click.prevent="selected = 'voicemail'"
+					/>
+					<VNavItem
+						class="item"
+						href="#"
+						:text="open ? 'SMS' : ''"
+						:data-label="open ? '' : 'SMS'"
+						icon="chat-line"
+						:aria-current="selected === 'sms' ? 'page' : null"
+						@click.prevent="selected = 'sms'"
+					/>
+				</VNav>
+			</VLayout>
+			<VLayout slot="app-content" gutters="medium">
+				Toggle the side drawer by clicking the FAB.
+			</VLayout>
+			<VFab
+				slot="app-content"
+				class="fab"
+				icon="menu-solid"
+				@click="open = !open"
+			/>
+		</VSideDrawer>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -48,32 +55,32 @@ const selected = ref('calls');
 
 <style lang="scss" scoped>
 .container {
-  /* for demo purposes */
-  block-size: 250px;
-  overflow: hidden;
+	/* for demo purposes */
+	block-size: 250px;
+	overflow: hidden;
 }
 
 .fab {
-  position: fixed;
-  inset: auto auto 8px 8px;
-  z-index: 2;
+	position: fixed;
+	inset: auto auto 8px 8px;
+	z-index: 2;
 }
 
 .drawer::part(base) {
-  transform: var(--demo-drawer-transform);
+	transform: var(--demo-drawer-transform);
 }
 
 .drawer {
-  --demo-drawer-transform: translateX(0);
-  --side-drawer-app-content-offset: 280px;
+	--demo-drawer-transform: translateX(0);
+	--side-drawer-app-content-offset: 280px;
 }
 
 .drawer.collapsed {
-  --demo-drawer-transform: translateX(calc(-100% + 70px));
-  --side-drawer-app-content-offset: 70px;
+	--demo-drawer-transform: translateX(calc(-100% + 70px));
+	--side-drawer-app-content-offset: 70px;
 
-  .item {
-    align-self: flex-end;
-  }
+	.item {
+		align-self: flex-end;
+	}
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/slider/DisabledExample.vue b/apps/vue-docs/docs/examples/components/slider/DisabledExample.vue
index 818dc7f5ef..a4a4952896 100644
--- a/apps/vue-docs/docs/examples/components/slider/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSlider disabled />
+	<VSlider disabled />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/MarkersExample.vue b/apps/vue-docs/docs/examples/components/slider/MarkersExample.vue
index 90c4ab6f65..cc2ec1d8f8 100644
--- a/apps/vue-docs/docs/examples/components/slider/MarkersExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/MarkersExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSlider markers />
+	<VSlider markers />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/MaxExample.vue b/apps/vue-docs/docs/examples/components/slider/MaxExample.vue
index 5845666436..f42eb18843 100644
--- a/apps/vue-docs/docs/examples/components/slider/MaxExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/MaxExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <div>
-      <VSlider v-model="slidervalue" max="100" :value="slidervalue" />
-    </div>
-    <div>
-      Current value: <span id="slidervalue">{{ slidervalue }}</span>
-    </div>
-  </div>
+	<div>
+		<div>
+			<VSlider v-model="slidervalue" max="100" :value="slidervalue" />
+		</div>
+		<div>
+			Current value: <span id="slidervalue">{{ slidervalue }}</span>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/MinExample.vue b/apps/vue-docs/docs/examples/components/slider/MinExample.vue
index e929275480..b3fbe653fb 100644
--- a/apps/vue-docs/docs/examples/components/slider/MinExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/MinExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <div>
-      <VSlider v-model="slidervalue" min="-5" :value="slidervalue" />
-    </div>
-    <div>
-      Current value: <span id="slidervalue">{{ slidervalue }}</span>
-    </div>
-  </div>
+	<div>
+		<div>
+			<VSlider v-model="slidervalue" min="-5" :value="slidervalue" />
+		</div>
+		<div>
+			Current value: <span id="slidervalue">{{ slidervalue }}</span>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/OrientationExample.vue b/apps/vue-docs/docs/examples/components/slider/OrientationExample.vue
index db0d760bc0..7da4fe6b92 100644
--- a/apps/vue-docs/docs/examples/components/slider/OrientationExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/OrientationExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSlider orientation="vertical" style="height: 100px" />
+	<VSlider orientation="vertical" style="height: 100px" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/SliderExample.vue b/apps/vue-docs/docs/examples/components/slider/SliderExample.vue
index 0afef21fc8..c6ccbe5527 100644
--- a/apps/vue-docs/docs/examples/components/slider/SliderExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/SliderExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSlider />
+	<VSlider />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/StepExample.vue b/apps/vue-docs/docs/examples/components/slider/StepExample.vue
index 2ceaf79de8..17d251b125 100644
--- a/apps/vue-docs/docs/examples/components/slider/StepExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/StepExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div>
-    <div>
-      <VSlider v-model="slidervalue" step="0.5" :value="slidervalue" />
-    </div>
-    <div>
-      Current value: <span id="slidervalue">{{ slidervalue }}</span>
-    </div>
-  </div>
+	<div>
+		<div>
+			<VSlider v-model="slidervalue" step="0.5" :value="slidervalue" />
+		</div>
+		<div>
+			Current value: <span id="slidervalue">{{ slidervalue }}</span>
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/slider/ValueExample.vue b/apps/vue-docs/docs/examples/components/slider/ValueExample.vue
index 1ffbf03f38..f735543df4 100644
--- a/apps/vue-docs/docs/examples/components/slider/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/slider/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSlider value="5" />
+	<VSlider value="5" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/split-button/WithMenu.vue b/apps/vue-docs/docs/examples/components/split-button/WithMenu.vue
index 756ca16290..9c83130053 100644
--- a/apps/vue-docs/docs/examples/components/split-button/WithMenu.vue
+++ b/apps/vue-docs/docs/examples/components/split-button/WithMenu.vue
@@ -1,12 +1,21 @@
 <template>
-  <div style="height: 150px">
-    <VSplitButton ref="splitButton" appearance="filled" label="A default split button" @indicator-click="open = !open">
-      <VMenu :anchor="splitButton?.$el.indicator" placement="bottom-end" :open="open">
-        <VMenuItem text="Menu item 1" />
-        <VMenuItem text="Menu item 2" />
-      </VMenu>
-    </VSplitButton>
-  </div>
+	<div style="height: 150px">
+		<VSplitButton
+			ref="splitButton"
+			appearance="filled"
+			label="A default split button"
+			@indicator-click="open = !open"
+		>
+			<VMenu
+				:anchor="splitButton?.$el.indicator"
+				placement="bottom-end"
+				:open="open"
+			>
+				<VMenuItem text="Menu item 1" />
+				<VMenuItem text="Menu item 2" />
+			</VMenu>
+		</VSplitButton>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -16,4 +25,3 @@ import { ref } from 'vue';
 const splitButton = ref(null);
 const open = ref(true);
 </script>
-
diff --git a/apps/vue-docs/docs/examples/components/split-button/WithTooltip.vue b/apps/vue-docs/docs/examples/components/split-button/WithTooltip.vue
index 34d8d0331a..c67c56459c 100644
--- a/apps/vue-docs/docs/examples/components/split-button/WithTooltip.vue
+++ b/apps/vue-docs/docs/examples/components/split-button/WithTooltip.vue
@@ -1,9 +1,14 @@
 <template>
-  <div style="height: 100px; text-align: center">
-    <VSplitButton ref="splitButton" appearance="filled" icon="compose-line" aria-label="Write a new message">
-      <VTooltip :anchor="splitButton?.$el.action" text="Write a new message" />
-    </VSplitButton>
-  </div>
+	<div style="height: 100px; text-align: center">
+		<VSplitButton
+			ref="splitButton"
+			appearance="filled"
+			icon="compose-line"
+			aria-label="Write a new message"
+		>
+			<VTooltip :anchor="splitButton?.$el.action" text="Write a new message" />
+		</VSplitButton>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -12,4 +17,3 @@ import { ref } from 'vue';
 
 const splitButton = ref(null);
 </script>
-
diff --git a/apps/vue-docs/docs/examples/components/switch/BasicExample.vue b/apps/vue-docs/docs/examples/components/switch/BasicExample.vue
index 412edff396..e983154e7e 100644
--- a/apps/vue-docs/docs/examples/components/switch/BasicExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/BasicExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch />
+	<VSwitch />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/CheckedExample.vue b/apps/vue-docs/docs/examples/components/switch/CheckedExample.vue
index 2482a77678..9334096857 100644
--- a/apps/vue-docs/docs/examples/components/switch/CheckedExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/CheckedExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch v-model="value" />
+	<VSwitch v-model="value" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/switch/ConnotationExample.vue
index d3e9404e1e..aeca480f9a 100644
--- a/apps/vue-docs/docs/examples/components/switch/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/ConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VSwitch connotation="primary" checked />
-  <VSwitch connotation="cta" checked />
-  <VSwitch connotation="success" checked />
-  <VSwitch connotation="alert" checked />
+	<VSwitch connotation="primary" checked />
+	<VSwitch connotation="cta" checked />
+	<VSwitch connotation="success" checked />
+	<VSwitch connotation="alert" checked />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/DisabledExample.vue b/apps/vue-docs/docs/examples/components/switch/DisabledExample.vue
index 05f2cac549..76f1b0727a 100644
--- a/apps/vue-docs/docs/examples/components/switch/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch disabled />
+	<VSwitch disabled />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/LabelExample.vue b/apps/vue-docs/docs/examples/components/switch/LabelExample.vue
index 0464b5c415..75eb8cd419 100644
--- a/apps/vue-docs/docs/examples/components/switch/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch label="Vivid Switch" />
+	<VSwitch label="Vivid Switch" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/NameExample.vue b/apps/vue-docs/docs/examples/components/switch/NameExample.vue
index 8bd82f7a46..1660cb60f4 100644
--- a/apps/vue-docs/docs/examples/components/switch/NameExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/NameExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch name="my-name" />
+	<VSwitch name="my-name" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/switch/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/switch/ReadonlyExample.vue
index 1d65eccbfe..6470da9ade 100644
--- a/apps/vue-docs/docs/examples/components/switch/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/ReadonlyExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VSwitch readonly />
-    <VSwitch readonly checked />
-  </div>
+	<div>
+		<VSwitch readonly />
+		<VSwitch readonly checked />
+	</div>
 </template>
 <script setup lang="ts">
 import { VSwitch } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/switch/ValueExample.vue b/apps/vue-docs/docs/examples/components/switch/ValueExample.vue
index c748cb0a75..c8ccd4c2d1 100644
--- a/apps/vue-docs/docs/examples/components/switch/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/switch/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VSwitch value="my-value" />
+	<VSwitch value="my-value" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tab/DisabledExample.vue b/apps/vue-docs/docs/examples/components/tab/DisabledExample.vue
index 013f8a7c1c..35e5cb3fd1 100644
--- a/apps/vue-docs/docs/examples/components/tab/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/tab/DisabledExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTabs>
-    <VTab id="tab" disabled label="Disabled Tab" />
-    <VTabPanel />
-  </VTabs>
+	<VTabs>
+		<VTab id="tab" disabled label="Disabled Tab" />
+		<VTabPanel />
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tab/IconExample.vue b/apps/vue-docs/docs/examples/components/tab/IconExample.vue
index fc6c1fbeaa..492037d3df 100644
--- a/apps/vue-docs/docs/examples/components/tab/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/tab/IconExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTabs>
-    <VTab id="tab" icon="chat-line" aria-label="tab" />
-    <VTabPanel />
-  </VTabs>
+	<VTabs>
+		<VTab id="tab" icon="chat-line" aria-label="tab" />
+		<VTabPanel />
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tab/IconWithLabelExample.vue b/apps/vue-docs/docs/examples/components/tab/IconWithLabelExample.vue
index d64cafd540..5dbdda54f6 100644
--- a/apps/vue-docs/docs/examples/components/tab/IconWithLabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/tab/IconWithLabelExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTabs>
-    <VTab id="tab" icon="chat-line" label="Tab" />
-    <VTabPanel />
-  </VTabs>
+	<VTabs>
+		<VTab id="tab" icon="chat-line" label="Tab" />
+		<VTabPanel />
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tab/LabelExample.vue b/apps/vue-docs/docs/examples/components/tab/LabelExample.vue
index 29e481eaf4..7a033a3e4c 100644
--- a/apps/vue-docs/docs/examples/components/tab/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/tab/LabelExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTabs>
-    <VTab id="tab" label="Tab" />
-    <VTabPanel />
-  </VTabs>
+	<VTabs>
+		<VTab id="tab" label="Tab" />
+		<VTabPanel />
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tabs/ActiveidExample.vue b/apps/vue-docs/docs/examples/components/tabs/ActiveidExample.vue
index 1a0a4eb8ea..cdcd9df9eb 100644
--- a/apps/vue-docs/docs/examples/components/tabs/ActiveidExample.vue
+++ b/apps/vue-docs/docs/examples/components/tabs/ActiveidExample.vue
@@ -1,34 +1,34 @@
 <template>
-  <VTabs activeid="entrees">
-    <VTab id="apps" label="Appetizers" />
-    <VTab id="entrees" label="Entrees" />
-    <VTab id="desserts" label="Desserts" />
-    <VTabPanel>
-      <ol>
-        <li>Stuffed artichokes</li>
-        <li>Bruschetta</li>
-        <li>Oven-baked polenta</li>
-        <li>Salami and Fig Crostini with Ricotta</li>
-        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Mushroom-Sausage Ragù</li>
-        <li>Tomato Bread Soup with Steamed Mussels</li>
-        <li>Grilled Fish with Artichoke Caponata</li>
-        <li>Celery Root and Mushroom Lasagna</li>
-        <li>Osso Buco with Citrus Gremolata</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Tiramisu</li>
-        <li>Spumoni</li>
-        <li>Limoncello and Ice Cream with Biscotti</li>
-      </ol>
-    </VTabPanel>
-  </VTabs>
+	<VTabs activeid="entrees">
+		<VTab id="apps" label="Appetizers" />
+		<VTab id="entrees" label="Entrees" />
+		<VTab id="desserts" label="Desserts" />
+		<VTabPanel>
+			<ol>
+				<li>Stuffed artichokes</li>
+				<li>Bruschetta</li>
+				<li>Oven-baked polenta</li>
+				<li>Salami and Fig Crostini with Ricotta</li>
+				<li>Rosemary-Potato Focaccia with Goat Cheese</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Mushroom-Sausage Ragù</li>
+				<li>Tomato Bread Soup with Steamed Mussels</li>
+				<li>Grilled Fish with Artichoke Caponata</li>
+				<li>Celery Root and Mushroom Lasagna</li>
+				<li>Osso Buco with Citrus Gremolata</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Tiramisu</li>
+				<li>Spumoni</li>
+				<li>Limoncello and Ice Cream with Biscotti</li>
+			</ol>
+		</VTabPanel>
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tabs/OrientationExample.vue b/apps/vue-docs/docs/examples/components/tabs/OrientationExample.vue
index f41bdcb120..4ff3d238ec 100644
--- a/apps/vue-docs/docs/examples/components/tabs/OrientationExample.vue
+++ b/apps/vue-docs/docs/examples/components/tabs/OrientationExample.vue
@@ -1,34 +1,34 @@
 <template>
-  <VTabs activeid="entrees" orientation="vertical">
-    <VTab id="apps" label="Appetizers" />
-    <VTab id="entrees" label="Entrees" />
-    <VTab id="desserts" label="Desserts" />
-    <VTabPanel>
-      <ol>
-        <li>Stuffed artichokes</li>
-        <li>Bruschetta</li>
-        <li>Oven-baked polenta</li>
-        <li>Salami and Fig Crostini with Ricotta</li>
-        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Mushroom-Sausage Ragù</li>
-        <li>Tomato Bread Soup with Steamed Mussels</li>
-        <li>Grilled Fish with Artichoke Caponata</li>
-        <li>Celery Root and Mushroom Lasagna</li>
-        <li>Osso Buco with Citrus Gremolata</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Tiramisu</li>
-        <li>Spumoni</li>
-        <li>Limoncello and Ice Cream with Biscotti</li>
-      </ol>
-    </VTabPanel>
-  </VTabs>
+	<VTabs activeid="entrees" orientation="vertical">
+		<VTab id="apps" label="Appetizers" />
+		<VTab id="entrees" label="Entrees" />
+		<VTab id="desserts" label="Desserts" />
+		<VTabPanel>
+			<ol>
+				<li>Stuffed artichokes</li>
+				<li>Bruschetta</li>
+				<li>Oven-baked polenta</li>
+				<li>Salami and Fig Crostini with Ricotta</li>
+				<li>Rosemary-Potato Focaccia with Goat Cheese</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Mushroom-Sausage Ragù</li>
+				<li>Tomato Bread Soup with Steamed Mussels</li>
+				<li>Grilled Fish with Artichoke Caponata</li>
+				<li>Celery Root and Mushroom Lasagna</li>
+				<li>Osso Buco with Citrus Gremolata</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Tiramisu</li>
+				<li>Spumoni</li>
+				<li>Limoncello and Ice Cream with Biscotti</li>
+			</ol>
+		</VTabPanel>
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tabs/TabsExample.vue b/apps/vue-docs/docs/examples/components/tabs/TabsExample.vue
index 80fdcb9213..e65e681c67 100644
--- a/apps/vue-docs/docs/examples/components/tabs/TabsExample.vue
+++ b/apps/vue-docs/docs/examples/components/tabs/TabsExample.vue
@@ -1,34 +1,34 @@
 <template>
-  <VTabs activeid="apps">
-    <VTab id="apps" label="Appetizers" />
-    <VTab id="entrees" label="Entrees" />
-    <VTab id="desserts" label="Desserts" />
-    <VTabPanel>
-      <ol>
-        <li>Stuffed artichokes</li>
-        <li>Bruschetta</li>
-        <li>Oven-baked polenta</li>
-        <li>Salami and Fig Crostini with Ricotta</li>
-        <li>Rosemary-Potato Focaccia with Goat Cheese</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Mushroom-Sausage Ragù</li>
-        <li>Tomato Bread Soup with Steamed Mussels</li>
-        <li>Grilled Fish with Artichoke Caponata</li>
-        <li>Celery Root and Mushroom Lasagna</li>
-        <li>Osso Buco with Citrus Gremolata</li>
-      </ol>
-    </VTabPanel>
-    <VTabPanel>
-      <ol>
-        <li>Tiramisu</li>
-        <li>Spumoni</li>
-        <li>Limoncello and Ice Cream with Biscotti</li>
-      </ol>
-    </VTabPanel>
-  </VTabs>
+	<VTabs activeid="apps">
+		<VTab id="apps" label="Appetizers" />
+		<VTab id="entrees" label="Entrees" />
+		<VTab id="desserts" label="Desserts" />
+		<VTabPanel>
+			<ol>
+				<li>Stuffed artichokes</li>
+				<li>Bruschetta</li>
+				<li>Oven-baked polenta</li>
+				<li>Salami and Fig Crostini with Ricotta</li>
+				<li>Rosemary-Potato Focaccia with Goat Cheese</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Mushroom-Sausage Ragù</li>
+				<li>Tomato Bread Soup with Steamed Mussels</li>
+				<li>Grilled Fish with Artichoke Caponata</li>
+				<li>Celery Root and Mushroom Lasagna</li>
+				<li>Osso Buco with Citrus Gremolata</li>
+			</ol>
+		</VTabPanel>
+		<VTabPanel>
+			<ol>
+				<li>Tiramisu</li>
+				<li>Spumoni</li>
+				<li>Limoncello and Ice Cream with Biscotti</li>
+			</ol>
+		</VTabPanel>
+	</VTabs>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/tag-group/DefaultSlotExample.vue b/apps/vue-docs/docs/examples/components/tag-group/DefaultSlotExample.vue
index 1397b03293..0ee23e6b0d 100644
--- a/apps/vue-docs/docs/examples/components/tag-group/DefaultSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag-group/DefaultSlotExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VTagGroup>
-    <VTag label="first tag" />
-    <VTag label="second tag" />
-    <VTag label="third tag" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="first tag" />
+		<VTag label="second tag" />
+		<VTag label="third tag" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag-group/RemovableExample.vue b/apps/vue-docs/docs/examples/components/tag-group/RemovableExample.vue
index c7c6c7207d..3b79b6e7b1 100644
--- a/apps/vue-docs/docs/examples/components/tag-group/RemovableExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag-group/RemovableExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VTagGroup>
-    <VTag label="first tag" removable />
-    <VTag label="second tag" removable />
-    <VTag label="third tag" removable />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="first tag" removable />
+		<VTag label="second tag" removable />
+		<VTag label="third tag" removable />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag-group/SelectableUseCaseExample.vue b/apps/vue-docs/docs/examples/components/tag-group/SelectableUseCaseExample.vue
index 95ae9d3061..0e16948feb 100644
--- a/apps/vue-docs/docs/examples/components/tag-group/SelectableUseCaseExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag-group/SelectableUseCaseExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VTagGroup>
-    <VTag label="first tag" selectable selected />
-    <VTag label="second tag" selectable />
-    <VTag label="third tag" selectable selected />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="first tag" selectable selected />
+		<VTag label="second tag" selectable />
+		<VTag label="third tag" selectable selected />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/tag/AppearanceExample.vue
index 9e0c0de982..68d7a2eb30 100644
--- a/apps/vue-docs/docs/examples/components/tag/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/AppearanceExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTagGroup>
-    <VTag label="subtle" appearance="subtle" />
-    <VTag label="duotone" appearance="duotone" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="subtle" appearance="subtle" />
+		<VTag label="duotone" appearance="duotone" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/ConnotationExample.vue b/apps/vue-docs/docs/examples/components/tag/ConnotationExample.vue
index b05190f716..5d1aada82c 100644
--- a/apps/vue-docs/docs/examples/components/tag/ConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/ConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTagGroup>
-    <VTag label="accent" appearance="subtle" connotation="accent" />
-    <VTag label="cta" appearance="subtle" connotation="cta" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="accent" appearance="subtle" connotation="accent" />
+		<VTag label="cta" appearance="subtle" connotation="cta" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/DisabledExample.vue b/apps/vue-docs/docs/examples/components/tag/DisabledExample.vue
index 963810d62f..bb709fb288 100644
--- a/apps/vue-docs/docs/examples/components/tag/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/DisabledExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTagGroup>
-    <VTag label="disabled" disabled />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="disabled" disabled />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/DuotoneTagWithConnotationExample.vue b/apps/vue-docs/docs/examples/components/tag/DuotoneTagWithConnotationExample.vue
index 31210857ac..0703da1adf 100644
--- a/apps/vue-docs/docs/examples/components/tag/DuotoneTagWithConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/DuotoneTagWithConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTagGroup>
-    <VTag label="accent" appearance="duotone" connotation="accent" />
-    <VTag label="cta" appearance="duotone" connotation="cta" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="accent" appearance="duotone" connotation="accent" />
+		<VTag label="cta" appearance="duotone" connotation="cta" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/IconExample.vue b/apps/vue-docs/docs/examples/components/tag/IconExample.vue
index 1517b35741..362073753a 100644
--- a/apps/vue-docs/docs/examples/components/tag/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/IconExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTagGroup>
-    <VTag label="icon" icon="pin-line" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="icon" icon="pin-line" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/LabelExample.vue b/apps/vue-docs/docs/examples/components/tag/LabelExample.vue
index e79b5cab92..b32db9e1fd 100644
--- a/apps/vue-docs/docs/examples/components/tag/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/LabelExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTagGroup>
-    <VTag label="tag" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="tag" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/RemovableExample.vue b/apps/vue-docs/docs/examples/components/tag/RemovableExample.vue
index 4fd925979d..44a054b33e 100644
--- a/apps/vue-docs/docs/examples/components/tag/RemovableExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/RemovableExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTagGroup>
-    <VTag label="removable" removable />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="removable" removable />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/SelectableExample.vue b/apps/vue-docs/docs/examples/components/tag/SelectableExample.vue
index 37a718b5e9..3f3ce27c1f 100644
--- a/apps/vue-docs/docs/examples/components/tag/SelectableExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/SelectableExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTagGroup>
-    <VTag label="selectable" selectable selected />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="selectable" selectable selected />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/ShapeExample.vue b/apps/vue-docs/docs/examples/components/tag/ShapeExample.vue
index bb26eb80a4..2fff7f62e7 100644
--- a/apps/vue-docs/docs/examples/components/tag/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTagGroup>
-    <VTag label="rounded" shape="rounded" />
-    <VTag label="pill" shape="pill" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="rounded" shape="rounded" />
+		<VTag label="pill" shape="pill" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTag, VTagGroup } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tag/SubtleTagWithConnotationExample.vue b/apps/vue-docs/docs/examples/components/tag/SubtleTagWithConnotationExample.vue
index 4a56c4e674..4490971d1a 100644
--- a/apps/vue-docs/docs/examples/components/tag/SubtleTagWithConnotationExample.vue
+++ b/apps/vue-docs/docs/examples/components/tag/SubtleTagWithConnotationExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTagGroup>
-    <VTag label="accent" appearance="subtle" connotation="accent" />
-    <VTag label="cta" appearance="subtle" connotation="cta" />
-  </VTagGroup>
+	<VTagGroup>
+		<VTag label="accent" appearance="subtle" connotation="accent" />
+		<VTag label="cta" appearance="subtle" connotation="cta" />
+	</VTagGroup>
 </template>
 <script setup lang="ts">
 import { VTagGroup, VTag } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/DefaultExample.vue b/apps/vue-docs/docs/examples/components/text-area/DefaultExample.vue
index 4e4bb6bbd0..83cbf9722c 100644
--- a/apps/vue-docs/docs/examples/components/text-area/DefaultExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/DefaultExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea v-model="currentValue" label="Label" rows="2" />
+	<VTextArea v-model="currentValue" label="Label" rows="2" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/DisabledExample.vue b/apps/vue-docs/docs/examples/components/text-area/DisabledExample.vue
index d8cb6f61df..fa609972a7 100644
--- a/apps/vue-docs/docs/examples/components/text-area/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/DisabledExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea disabled label="fieldset" />
+	<VTextArea disabled label="fieldset" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/HelperTextExample.vue b/apps/vue-docs/docs/examples/components/text-area/HelperTextExample.vue
index 339aeca0c5..34607477cd 100644
--- a/apps/vue-docs/docs/examples/components/text-area/HelperTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/HelperTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea label="Helper text below" helper-text="Help text" />
+	<VTextArea label="Helper text below" helper-text="Help text" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/LabelExample.vue b/apps/vue-docs/docs/examples/components/text-area/LabelExample.vue
index cd7315b4cc..34bb39fb8c 100644
--- a/apps/vue-docs/docs/examples/components/text-area/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea label="My Label" />
+	<VTextArea label="My Label" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/PlaceholderExample.vue b/apps/vue-docs/docs/examples/components/text-area/PlaceholderExample.vue
index 51aaa9cc39..526c8b9a79 100644
--- a/apps/vue-docs/docs/examples/components/text-area/PlaceholderExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/PlaceholderExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea placeholder="My Placeholder" />
+	<VTextArea placeholder="My Placeholder" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/text-area/ReadonlyExample.vue
index d370a1ccd1..53c2417bc8 100644
--- a/apps/vue-docs/docs/examples/components/text-area/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/ReadonlyExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea v-model="currentValue" readonly label="fieldset" />
+	<VTextArea v-model="currentValue" readonly label="fieldset" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/ResizeExample.vue b/apps/vue-docs/docs/examples/components/text-area/ResizeExample.vue
index 80f82ae9cf..a820217062 100644
--- a/apps/vue-docs/docs/examples/components/text-area/ResizeExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/ResizeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTextArea v-model="defaultTextArea" />
-  <VTextArea v-model="verticalTextArea" resize="vertical" />
-  <VTextArea v-model="horizontalTextArea" resize="horizontal" />
-  <VTextArea v-model="bothDirectionTextArea" resize="both" />
+	<VTextArea v-model="defaultTextArea" />
+	<VTextArea v-model="verticalTextArea" resize="vertical" />
+	<VTextArea v-model="horizontalTextArea" resize="horizontal" />
+	<VTextArea v-model="bothDirectionTextArea" resize="both" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/RowsExample.vue b/apps/vue-docs/docs/examples/components/text-area/RowsExample.vue
index 6186b342e2..35e6a2b25f 100644
--- a/apps/vue-docs/docs/examples/components/text-area/RowsExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/RowsExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTextArea v-model="rowOne" rows="1" />
-  <VTextArea v-model="rowTwo" rows="2" />
-  <VTextArea v-model="rowThree" rows="3" />
+	<VTextArea v-model="rowOne" rows="1" />
+	<VTextArea v-model="rowTwo" rows="2" />
+	<VTextArea v-model="rowThree" rows="3" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/SuccessTextExample.vue b/apps/vue-docs/docs/examples/components/text-area/SuccessTextExample.vue
index 2818ef75d8..b84b407932 100644
--- a/apps/vue-docs/docs/examples/components/text-area/SuccessTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/SuccessTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea label="Success text below" success-text="Success text" />
+	<VTextArea label="Success text below" success-text="Success text" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-area/ValueExample.vue b/apps/vue-docs/docs/examples/components/text-area/ValueExample.vue
index 8a02edd2bb..f037eb380e 100644
--- a/apps/vue-docs/docs/examples/components/text-area/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-area/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextArea v-model="currentValue" />
+	<VTextArea v-model="currentValue" />
 </template>
 <script setup lang="ts">
 import { VTextArea } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/text-field/AppearanceExample.vue b/apps/vue-docs/docs/examples/components/text-field/AppearanceExample.vue
index 7b78b92a4c..0a1a15c513 100644
--- a/apps/vue-docs/docs/examples/components/text-field/AppearanceExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/AppearanceExample.vue
@@ -1,8 +1,12 @@
 <template>
-  <div>
-    <VTextField placeholder="appearance" label="fieldset" appearance="fieldset" />
-    <VTextField placeholder="appearance" label="ghost" appearance="ghost" />
-  </div>
+	<div>
+		<VTextField
+			placeholder="appearance"
+			label="fieldset"
+			appearance="fieldset"
+		/>
+		<VTextField placeholder="appearance" label="ghost" appearance="ghost" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/CharacterCountExample.vue b/apps/vue-docs/docs/examples/components/text-field/CharacterCountExample.vue
index 8603ee2a46..ff4faf1614 100644
--- a/apps/vue-docs/docs/examples/components/text-field/CharacterCountExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/CharacterCountExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField label="Char count example" char-count maxlength="15" />
+	<VTextField label="Char count example" char-count maxlength="15" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/DisabledExample.vue b/apps/vue-docs/docs/examples/components/text-field/DisabledExample.vue
index 454877d807..c011fa076b 100644
--- a/apps/vue-docs/docs/examples/components/text-field/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/DisabledExample.vue
@@ -1,5 +1,11 @@
 <template>
-  <VTextField v-model="value" disabled icon="chat-line" label="fieldset" appearance="fieldset" />
+	<VTextField
+		v-model="value"
+		disabled
+		icon="chat-line"
+		label="fieldset"
+		appearance="fieldset"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/ErrorTextExample.vue b/apps/vue-docs/docs/examples/components/text-field/ErrorTextExample.vue
index c3c3925319..4cc2946a6c 100644
--- a/apps/vue-docs/docs/examples/components/text-field/ErrorTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/ErrorTextExample.vue
@@ -1,5 +1,9 @@
 <template>
-  <VTextField label="Enter some text" value="some text" error-text="Please take this seriously" />
+	<VTextField
+		label="Enter some text"
+		value="some text"
+		error-text="Please take this seriously"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/HelperTextExample.vue b/apps/vue-docs/docs/examples/components/text-field/HelperTextExample.vue
index 67c58039f9..c67e5c373c 100644
--- a/apps/vue-docs/docs/examples/components/text-field/HelperTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/HelperTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField label="Helper text below" helper-text="Help text" />
+	<VTextField label="Helper text below" helper-text="Help text" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/IconExample.vue b/apps/vue-docs/docs/examples/components/text-field/IconExample.vue
index ac3c0525f1..9e5d900d0e 100644
--- a/apps/vue-docs/docs/examples/components/text-field/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/IconExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField icon="search-line" label="Search..." />
+	<VTextField icon="search-line" label="Search..." />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/InFormExample.vue b/apps/vue-docs/docs/examples/components/text-field/InFormExample.vue
index 40b6a1d153..e911274be0 100644
--- a/apps/vue-docs/docs/examples/components/text-field/InFormExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/InFormExample.vue
@@ -1,21 +1,21 @@
 <template>
-  <form method="post" action="">
-    <VLayout column-spacing="small" column-basis="block">
-      <VTextField
-        required
-        label="Add email"
-        placeholder="e.g. john@doe.dev"
-        type="email"
-        name="email"
-        autocomplete="email"
-        icon="search"
-        maxlength="30"
-        char-count
-        style="justify-self: flex-start"
-      />
-      <VButton label="Submit" appearance="filled" type="submit" />
-    </VLayout>
-  </form>
+	<form method="post" action="">
+		<VLayout column-spacing="small" column-basis="block">
+			<VTextField
+				required
+				label="Add email"
+				placeholder="e.g. john@doe.dev"
+				type="email"
+				name="email"
+				autocomplete="email"
+				icon="search"
+				maxlength="30"
+				char-count
+				style="justify-self: flex-start"
+			/>
+			<VButton label="Submit" appearance="filled" type="submit" />
+		</VLayout>
+	</form>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/LabelExample.vue b/apps/vue-docs/docs/examples/components/text-field/LabelExample.vue
index 5ef0935741..403063a470 100644
--- a/apps/vue-docs/docs/examples/components/text-field/LabelExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/LabelExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField label="My Label" />
+	<VTextField label="My Label" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/PlaceholderExample.vue b/apps/vue-docs/docs/examples/components/text-field/PlaceholderExample.vue
index d8f9dad254..ec09832369 100644
--- a/apps/vue-docs/docs/examples/components/text-field/PlaceholderExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/PlaceholderExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField placeholder="My Placeholder" />
+	<VTextField placeholder="My Placeholder" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/ReadonlyExample.vue b/apps/vue-docs/docs/examples/components/text-field/ReadonlyExample.vue
index c8a8d331ea..daa0a94a9d 100644
--- a/apps/vue-docs/docs/examples/components/text-field/ReadonlyExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/ReadonlyExample.vue
@@ -1,5 +1,11 @@
 <template>
-  <VTextField v-model="value" readonly icon="chat-line" label="fieldset" appearance="fieldset" />
+	<VTextField
+		v-model="value"
+		readonly
+		icon="chat-line"
+		label="fieldset"
+		appearance="fieldset"
+	/>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/ShapeExample.vue b/apps/vue-docs/docs/examples/components/text-field/ShapeExample.vue
index 09e49303e4..ab5c67fe82 100644
--- a/apps/vue-docs/docs/examples/components/text-field/ShapeExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/ShapeExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VTextField label="Pill" shape="pill" />
-    <VTextField label="Rounded" shape="rounded" />
-  </div>
+	<div>
+		<VTextField label="Pill" shape="pill" />
+		<VTextField label="Rounded" shape="rounded" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/SuccessTextExample.vue b/apps/vue-docs/docs/examples/components/text-field/SuccessTextExample.vue
index 16003954c2..0170a20631 100644
--- a/apps/vue-docs/docs/examples/components/text-field/SuccessTextExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/SuccessTextExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField label="Username" value="Vlad" success-text="Valid username" />
+	<VTextField label="Username" value="Vlad" success-text="Valid username" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/text-field/ValueExample.vue b/apps/vue-docs/docs/examples/components/text-field/ValueExample.vue
index 8ad2bf210b..fdc186c375 100644
--- a/apps/vue-docs/docs/examples/components/text-field/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/text-field/ValueExample.vue
@@ -1,5 +1,5 @@
 <template>
-  <VTextField v-model="value" label="With default value" />
+	<VTextField v-model="value" label="With default value" />
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/time-picker/ValueExample.vue b/apps/vue-docs/docs/examples/components/time-picker/ValueExample.vue
index 1c1aa2dc7e..2a3da9c7bc 100644
--- a/apps/vue-docs/docs/examples/components/time-picker/ValueExample.vue
+++ b/apps/vue-docs/docs/examples/components/time-picker/ValueExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="block-size: 360px">
-    <VTimePicker v-model="value" label="Start time" />
-  </div>
+	<div style="block-size: 360px">
+		<VTimePicker v-model="value" label="Start time" />
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/toggletip/ActionItemsExample.vue b/apps/vue-docs/docs/examples/components/toggletip/ActionItemsExample.vue
index d983f49046..9fac118e48 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/ActionItemsExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/ActionItemsExample.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="example-container">
-    <VButton id="button7" icon="help-solid" shape="pill" />
-    <VToggletip anchor="button7">
-      This is a toggletip with action items
-      <template #action-items>
-        <VButton appearance="outlined" label="Action" shape="pill" />
-        <VButton appearance="filled" label="Action" shape="pill" />
-      </template>
-    </VToggletip>
-  </div>
+	<div class="example-container">
+		<VButton id="button7" icon="help-solid" shape="pill" />
+		<VToggletip anchor="button7">
+			This is a toggletip with action items
+			<template #action-items>
+				<VButton appearance="outlined" label="Action" shape="pill" />
+				<VButton appearance="filled" label="Action" shape="pill" />
+			</template>
+		</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -17,8 +17,8 @@ import { VButton, VToggletip } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  display: flex;
-  align-items: center;
+	height: 200px;
+	display: flex;
+	align-items: center;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/toggletip/AlternateExample.vue b/apps/vue-docs/docs/examples/components/toggletip/AlternateExample.vue
index 67e774ceb8..fcc6af36f8 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/AlternateExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/AlternateExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VButton id="button5" icon="help-solid" shape="pill" />
-    <VToggletip anchor="button5" alternate>An alternate toggletip</VToggletip>
-  </div>
+	<div>
+		<VButton id="button5" icon="help-solid" shape="pill" />
+		<VToggletip anchor="button5" alternate>An alternate toggletip</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue b/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue
index 9304de9e7f..db3f72ffe4 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/AnchorExample.vue
@@ -1,16 +1,16 @@
 <template>
-  <div>
-    <VToggletip>
-      <template #anchor><VButton icon="help-solid" shape="pill" /></template>
-      My anchor is a slot
-    </VToggletip>
+	<div>
+		<VToggletip>
+			<template #anchor><VButton icon="help-solid" shape="pill" /></template>
+			My anchor is a slot
+		</VToggletip>
 
-    <VButton id="button1" icon="help-solid" shape="pill" />
-    <VToggletip anchor="button1">My anchor is an ID</VToggletip>
+		<VButton id="button1" icon="help-solid" shape="pill" />
+		<VToggletip anchor="button1">My anchor is an ID</VToggletip>
 
-    <VButton ref="button" icon="help-solid" shape="pill" />
-    <VToggletip :anchor="button?.$el">My anchor is a reference</VToggletip>
-  </div>
+		<VButton ref="button" icon="help-solid" shape="pill" />
+		<VToggletip :anchor="button?.$el">My anchor is a reference</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/toggletip/HeadlineExample.vue b/apps/vue-docs/docs/examples/components/toggletip/HeadlineExample.vue
index e667d2510a..0c36cd5489 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/HeadlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/HeadlineExample.vue
@@ -1,8 +1,10 @@
 <template>
-  <div class="example-container">
-    <VButton id="button4" icon="help-solid" shape="pill" />
-    <VToggletip anchor="button4" headline="This is the headline"> This is the content </VToggletip>
-  </div>
+	<div class="example-container">
+		<VButton id="button4" icon="help-solid" shape="pill" />
+		<VToggletip anchor="button4" headline="This is the headline">
+			This is the content
+		</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -11,8 +13,8 @@ import { VButton, VToggletip } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 100px;
-  display: flex;
-  align-items: center;
+	height: 100px;
+	display: flex;
+	align-items: center;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/toggletip/OpenExample.vue b/apps/vue-docs/docs/examples/components/toggletip/OpenExample.vue
index c8e23d78fb..dff01fb28b 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/OpenExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/OpenExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <div>
-    <VButton id="button3" icon="help-solid" shape="pill" />
-    <VToggletip anchor="button3" open>I'm open by default</VToggletip>
-  </div>
+	<div>
+		<VButton id="button3" icon="help-solid" shape="pill" />
+		<VToggletip anchor="button3" open>I'm open by default</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/vue-docs/docs/examples/components/toggletip/PlacementExample.vue b/apps/vue-docs/docs/examples/components/toggletip/PlacementExample.vue
index 9349d36c7a..276ec239ec 100644
--- a/apps/vue-docs/docs/examples/components/toggletip/PlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/toggletip/PlacementExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="example-container">
-    <VButton id="button6" icon="help-solid" shape="pill" />
+	<div class="example-container">
+		<VButton id="button6" icon="help-solid" shape="pill" />
 
-    <VToggletip anchor="button6" placement="top">top</VToggletip>
-    <VToggletip anchor="button6" placement="right">right</VToggletip>
-    <VToggletip anchor="button6" placement="bottom">bottom</VToggletip>
-    <VToggletip anchor="button6" placement="left">left</VToggletip>
-  </div>
+		<VToggletip anchor="button6" placement="top">top</VToggletip>
+		<VToggletip anchor="button6" placement="right">right</VToggletip>
+		<VToggletip anchor="button6" placement="bottom">bottom</VToggletip>
+		<VToggletip anchor="button6" placement="left">left</VToggletip>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -15,9 +15,9 @@ import { VButton, VToggletip } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+	height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/tooltip/AnchorExample.vue b/apps/vue-docs/docs/examples/components/tooltip/AnchorExample.vue
index 71eb79e6bc..cf5e63f7e1 100644
--- a/apps/vue-docs/docs/examples/components/tooltip/AnchorExample.vue
+++ b/apps/vue-docs/docs/examples/components/tooltip/AnchorExample.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="example-container">
-    <VTooltip text="I'm a tooltip">
-      <template #anchor><VButton icon="help-line" shape="pill" /></template>
-    </VTooltip>
-    <VButton id="buttonAnchor" icon="help-line" shape="pill" />
-    <VTooltip anchor="buttonAnchor" text="I'm a tooltip" />
-    <VButton ref="button" icon="help-line" shape="pill" />
-    <VTooltip :anchor="button?.$el" text="My anchor is an HTMLElement" />
-  </div>
+	<div class="example-container">
+		<VTooltip text="I'm a tooltip">
+			<template #anchor><VButton icon="help-line" shape="pill" /></template>
+		</VTooltip>
+		<VButton id="buttonAnchor" icon="help-line" shape="pill" />
+		<VTooltip anchor="buttonAnchor" text="I'm a tooltip" />
+		<VButton ref="button" icon="help-line" shape="pill" />
+		<VTooltip :anchor="button?.$el" text="My anchor is an HTMLElement" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -19,7 +19,7 @@ const button = ref<typeof VButton | null>(null);
 
 <style lang="scss" scoped>
 .example-container {
-  text-align: center;
-  height: 100px;
+	text-align: center;
+	height: 100px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/tooltip/InlineExample.vue b/apps/vue-docs/docs/examples/components/tooltip/InlineExample.vue
index 1a883a442a..3eb3e13457 100644
--- a/apps/vue-docs/docs/examples/components/tooltip/InlineExample.vue
+++ b/apps/vue-docs/docs/examples/components/tooltip/InlineExample.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="example-container">
-    <VButton id="buttonInlineExample" icon="info-line" shape="pill" />
-    <VTooltip anchor="buttonInlineExample" text="My inline size is 200px" style="--tooltip-inline-size: 200px" />
-  </div>
+	<div class="example-container">
+		<VButton id="buttonInlineExample" icon="info-line" shape="pill" />
+		<VTooltip
+			anchor="buttonInlineExample"
+			text="My inline size is 200px"
+			style="--tooltip-inline-size: 200px"
+		/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -11,7 +15,7 @@ import { VTooltip, VButton } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  text-align: center;
-  height: 100px;
+	text-align: center;
+	height: 100px;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/tooltip/PlacementExample.vue b/apps/vue-docs/docs/examples/components/tooltip/PlacementExample.vue
index eed7936ab0..c411b3535e 100644
--- a/apps/vue-docs/docs/examples/components/tooltip/PlacementExample.vue
+++ b/apps/vue-docs/docs/examples/components/tooltip/PlacementExample.vue
@@ -1,11 +1,15 @@
 <template>
-  <div class="example-container">
-    <VButton id="placementButton" appearance="outlined" label="This is an anchor" />
-    <VTooltip anchor="placementButton" text="right" placement="right" />
-    <VTooltip anchor="placementButton" text="left" placement="left" />
-    <VTooltip anchor="placementButton" text="top" placement="top" />
-    <VTooltip anchor="placementButton" text="bottom" placement="bottom" />
-  </div>
+	<div class="example-container">
+		<VButton
+			id="placementButton"
+			appearance="outlined"
+			label="This is an anchor"
+		/>
+		<VTooltip anchor="placementButton" text="right" placement="right" />
+		<VTooltip anchor="placementButton" text="left" placement="left" />
+		<VTooltip anchor="placementButton" text="top" placement="top" />
+		<VTooltip anchor="placementButton" text="bottom" placement="bottom" />
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -14,9 +18,9 @@ import { VTooltip, VButton } from '@vonage/vivid-vue';
 
 <style lang="scss" scoped>
 .example-container {
-  height: 150px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+	height: 150px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 </style>
diff --git a/apps/vue-docs/docs/examples/components/tree-item/DisabledExample.vue b/apps/vue-docs/docs/examples/components/tree-item/DisabledExample.vue
index 0a1c7b6676..dff6b0f06b 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/DisabledExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/DisabledExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item" disabled />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item" disabled />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeItem, VTreeView } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-item/ExpandedExample.vue b/apps/vue-docs/docs/examples/components/tree-item/ExpandedExample.vue
index f4d9cdc3f4..b9f1d20293 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/ExpandedExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/ExpandedExample.vue
@@ -1,11 +1,11 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item" expanded>
-      <template #item>
-        <VTreeItem text="Tree Item 1 - 1" />
-      </template>
-    </VTreeItem>
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item" expanded>
+			<template #item>
+				<VTreeItem text="Tree Item 1 - 1" />
+			</template>
+		</VTreeItem>
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeView, VTreeItem } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-item/IconExample.vue b/apps/vue-docs/docs/examples/components/tree-item/IconExample.vue
index 0137019948..b86d3e4022 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/IconExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/IconExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item" icon="chat-line" />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item" icon="chat-line" />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeView, VTreeItem } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-item/ItemSlotExample.vue b/apps/vue-docs/docs/examples/components/tree-item/ItemSlotExample.vue
index 8fe9191696..ec705a259c 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/ItemSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/ItemSlotExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item 1">
-      <template #item>
-        <VTreeItem slot="item" text="Tree Item 1 - 1" />
-      </template>
-    </VTreeItem>
-    <VTreeItem text="Tree Item 2" />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item 1">
+			<template #item>
+				<VTreeItem slot="item" text="Tree Item 1 - 1" />
+			</template>
+		</VTreeItem>
+		<VTreeItem text="Tree Item 2" />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeItem, VTreeView } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-item/SelectedExample.vue b/apps/vue-docs/docs/examples/components/tree-item/SelectedExample.vue
index 1b9813a598..04ccdad637 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/SelectedExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/SelectedExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item" selected />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item" selected />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeView, VTreeItem } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-item/TextExample.vue b/apps/vue-docs/docs/examples/components/tree-item/TextExample.vue
index 46cd18bab4..e03fd1b91c 100644
--- a/apps/vue-docs/docs/examples/components/tree-item/TextExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-item/TextExample.vue
@@ -1,7 +1,7 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item" />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item" />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeItem, VTreeView } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-view/DefaultSlotExample.vue b/apps/vue-docs/docs/examples/components/tree-view/DefaultSlotExample.vue
index 1fb16f6efa..bed7519083 100644
--- a/apps/vue-docs/docs/examples/components/tree-view/DefaultSlotExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-view/DefaultSlotExample.vue
@@ -1,8 +1,8 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item 1" />
-    <VTreeItem text="Tree Item 2" />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item 1" />
+		<VTreeItem text="Tree Item 2" />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeView, VTreeItem } from '@vonage/vivid-vue';
diff --git a/apps/vue-docs/docs/examples/components/tree-view/NestedTreeExample.vue b/apps/vue-docs/docs/examples/components/tree-view/NestedTreeExample.vue
index c6d66f9c3e..797d4c8e73 100644
--- a/apps/vue-docs/docs/examples/components/tree-view/NestedTreeExample.vue
+++ b/apps/vue-docs/docs/examples/components/tree-view/NestedTreeExample.vue
@@ -1,12 +1,12 @@
 <template>
-  <VTreeView>
-    <VTreeItem text="Tree Item 1">
-      <template #item>
-        <VTreeItem text="Tree Item 1 - 1" />
-      </template>
-    </VTreeItem>
-    <VTreeItem text="Tree Item 2" />
-  </VTreeView>
+	<VTreeView>
+		<VTreeItem text="Tree Item 1">
+			<template #item>
+				<VTreeItem text="Tree Item 1 - 1" />
+			</template>
+		</VTreeItem>
+		<VTreeItem text="Tree Item 2" />
+	</VTreeView>
 </template>
 <script setup lang="ts">
 import { VTreeView, VTreeItem } from '@vonage/vivid-vue';