diff --git a/docs/.vuepress/baseComponents/ComponentVueApi.vue b/docs/.vuepress/baseComponents/ComponentVueApi.vue
index 9a88afcc21..68ff228bf7 100644
--- a/docs/.vuepress/baseComponents/ComponentVueApi.vue
+++ b/docs/.vuepress/baseComponents/ComponentVueApi.vue
@@ -44,6 +44,8 @@ const docProps = ComponentDocs.find(f => f.displayName.toLowerCase() === formatt
       description: item?.description,
       type: item?.type?.name,
       defaultValue: item?.defaultValue?.value,
+      values: item?.values,
+      required: item?.required,
     };
   });
 
diff --git a/docs/.vuepress/baseComponents/ComponentVueApiTable.vue b/docs/.vuepress/baseComponents/ComponentVueApiTable.vue
index 4c60ebd6e5..c11fcc9126 100644
--- a/docs/.vuepress/baseComponents/ComponentVueApiTable.vue
+++ b/docs/.vuepress/baseComponents/ComponentVueApiTable.vue
@@ -29,14 +29,24 @@
     </thead>
     <tbody>
       <tr
-        v-for="({ name, description, type, defaultValue }) in sortedTableDataByName"
+        v-for="({ name, description, type, defaultValue, values, required }) in sortedTableDataByName"
         :key="name"
       >
         <th
           scope="row"
           class="d-ff-mono d-fc-purple-400 d-fw-normal d-fs-100"
-          v-text="name"
-        />
+        >
+          <dt-stack gap="300">
+            <div>{{ name }}</div>
+            <div
+              v-if="required"
+              class="d-fc-critical"
+            >
+              required
+            </div>
+          </dt-stack>
+        </th>
+
         <td
           class="d-ff-mono d-fs-100 vue-api-table"
         >
@@ -46,8 +56,23 @@
           >
             <markdown-render :markdown="description" />
             <span v-if="type">
-              <dt-badge>{{ type }}</dt-badge>
+              Type: <dt-badge>{{ type }}</dt-badge>
             </span>
+            <dt-stack
+              v-if="values"
+              direction="row"
+              class="d-ai-center d-fw-wrap"
+              gap="300"
+            >
+              Values:
+              <dt-badge
+                v-for="value in values"
+
+                :key="`${name} ${value}`"
+              >
+                {{ value }}
+              </dt-badge>
+            </dt-stack>
           </div>
         </td>
         <td
@@ -86,16 +111,23 @@ const withDefault = computed(() => {
 const sortedTableDataByName = computed(() => {
   if (!props.tableData) return null;
 
-  return sortDataByKey([...props.tableData], 'name');
+  return sortDataByKey([...props.tableData], 'name', 'required');
 });
 
-const sortDataByKey = (data, key) => {
+const sortDataByKey = (data, nameKey, requiredKey) => {
+  // eslint-disable-next-line complexity
   return data.sort((a, b) => {
-    if (a[key] < b[key]) {
+    const aIsRequired = !!a[requiredKey];
+    const bIsRequired = !!b[requiredKey];
+
+    // always have required at top
+    if (aIsRequired && !bIsRequired) {
       return -1;
-    }
-    if (a[key] > b[key]) {
+    } else if (!aIsRequired && bIsRequired) {
       return 1;
+    } else {
+      if (a[nameKey] < b[nameKey]) return -1;
+      if (a[nameKey] > b[nameKey]) return 1;
     }
     return 0;
   });
diff --git a/docs/components/stack.md b/docs/components/stack.md
index 68ead57c16..0a1d3ab5ff 100644
--- a/docs/components/stack.md
+++ b/docs/components/stack.md
@@ -94,7 +94,7 @@ storybook: https://vue.dialpad.design/?path=/story/components-stack--default
 
 ```html
 <section class="d-stack d-stack--row d-stack--gap-300">
-  <div>Stack item 1</div> 
+  <div>Stack item 1</div>
   <div>
     <div>Stack item 2</div>
     <div class="d-stack d-stack--row-reverse d-stack--gap-600">
@@ -105,6 +105,10 @@ storybook: https://vue.dialpad.design/?path=/story/components-stack--default
 </section>
 ```
 
+## Vue API
+
+<component-vue-api component-name="stack" />
+
 ## Classes
 
 <component-class-table component-name="stack"></component-class-table>
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index f2e0ce9a44..bf180238f7 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -76,6 +76,20 @@ Add `d-tablist--inverted` when you want to display tabs on a darker background.
 <div class="d-tablist d-tablist--inverted">…</div>
 ```
 
+## Vue API
+
+### Tab Group
+
+<component-vue-api component-name="tabgroup" />
+
+### Tab Panel
+
+<component-vue-api component-name="tabpanel" />
+
+### Tab
+
+<component-vue-api component-name="tab" />
+
 ## Classes
 
 <component-class-table component-name="tabs" />
diff --git a/docs/components/tooltip.md b/docs/components/tooltip.md
index 23b92c4878..d86cc11dde 100644
--- a/docs/components/tooltip.md
+++ b/docs/components/tooltip.md
@@ -60,6 +60,10 @@ No arrow direction is assigned by default. You must select a direction. Twelve d
   </div>
 </div>
 
+## Vue API
+
+<component-vue-api component-name="tooltip" />
+
 ## Classes
 
 <component-class-table component-name="tooltip" />
diff --git a/docs/components/validation-messages.md b/docs/components/validation-messages.md
index 1a08303830..79b7d69f53 100644
--- a/docs/components/validation-messages.md
+++ b/docs/components/validation-messages.md
@@ -64,3 +64,7 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
   :validationMessages='[{"message":"Critical validation message","type":"warning"}]'
 />
 ```
+
+## Vue API
+
+<component-vue-api component-name="validationmessages" />
diff --git a/package-lock.json b/package-lock.json
index f66097a91a..04f695d932 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "@dialpad/conventional-changelog-angular": "^1.1.1",
         "@dialpad/dialtone-combinator": "^0.3.1",
         "@dialpad/dialtone-icons": "vue3",
-        "@dialpad/dialtone-vue": "^3.43.0",
+        "@dialpad/dialtone-vue": "^3.46.1",
         "@dialpad/postcss-responsive-variations": "^1.1.3",
         "@dialpad/semantic-release-changelog-json": "^1.0.0",
         "@docsearch/js": "^3.3.2",
@@ -1103,9 +1103,9 @@
       }
     },
     "node_modules/@dialpad/dialtone": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-7.16.0.tgz",
-      "integrity": "sha512-NcWH1jH27XKMkHgOFb4r0jeKmXUOJ6NhRR1LaWN/uKw1vW0/ml/C3onTTdwPzpw+hhM0dAEx8N9dOx0WaZUtrA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-7.17.0.tgz",
+      "integrity": "sha512-ymhqIFwbBFEvRPGKrKxCuzafztxWL4raZ4howPN4eg01FaHb2qtBU1Muv+dAf7sn/gHPHZlXP/KCzFDDoFUivQ==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -1132,9 +1132,9 @@
       }
     },
     "node_modules/@dialpad/dialtone-vue": {
-      "version": "3.44.1",
-      "resolved": "https://registry.npmjs.org/@dialpad/dialtone-vue/-/dialtone-vue-3.44.1.tgz",
-      "integrity": "sha512-e97IVYeLqeGm21Mfta3apMp3hKOLqGPBnAwBFUgJ7Wffq8r7Q3sP/TD5xmsaB9EXh2Z/JOsZlyhl5TUk00PtJg==",
+      "version": "3.46.1",
+      "resolved": "https://registry.npmjs.org/@dialpad/dialtone-vue/-/dialtone-vue-3.46.1.tgz",
+      "integrity": "sha512-WtpQmRKa8wgjBea4QxhxWFyw9Vn4n2IDuqx2Gp1wEmp4NT1udDpPCJJOp7qYvRJjtbT2WrCobJaDW/kY71uvaA==",
       "dev": true,
       "dependencies": {
         "@dialpad/dialtone-icons": "vue3",
@@ -1147,7 +1147,7 @@
         "node": ">= 16"
       },
       "peerDependencies": {
-        "@dialpad/dialtone": ">=7.16",
+        "@dialpad/dialtone": ">=7.17",
         "vue": ">=3.2"
       }
     },
@@ -30374,9 +30374,9 @@
       }
     },
     "@dialpad/dialtone": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-7.16.0.tgz",
-      "integrity": "sha512-NcWH1jH27XKMkHgOFb4r0jeKmXUOJ6NhRR1LaWN/uKw1vW0/ml/C3onTTdwPzpw+hhM0dAEx8N9dOx0WaZUtrA==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/@dialpad/dialtone/-/dialtone-7.17.0.tgz",
+      "integrity": "sha512-ymhqIFwbBFEvRPGKrKxCuzafztxWL4raZ4howPN4eg01FaHb2qtBU1Muv+dAf7sn/gHPHZlXP/KCzFDDoFUivQ==",
       "dev": true,
       "peer": true,
       "requires": {
@@ -30398,9 +30398,9 @@
       "requires": {}
     },
     "@dialpad/dialtone-vue": {
-      "version": "3.44.1",
-      "resolved": "https://registry.npmjs.org/@dialpad/dialtone-vue/-/dialtone-vue-3.44.1.tgz",
-      "integrity": "sha512-e97IVYeLqeGm21Mfta3apMp3hKOLqGPBnAwBFUgJ7Wffq8r7Q3sP/TD5xmsaB9EXh2Z/JOsZlyhl5TUk00PtJg==",
+      "version": "3.46.1",
+      "resolved": "https://registry.npmjs.org/@dialpad/dialtone-vue/-/dialtone-vue-3.46.1.tgz",
+      "integrity": "sha512-WtpQmRKa8wgjBea4QxhxWFyw9Vn4n2IDuqx2Gp1wEmp4NT1udDpPCJJOp7qYvRJjtbT2WrCobJaDW/kY71uvaA==",
       "dev": true,
       "requires": {
         "@dialpad/dialtone-icons": "vue3",
diff --git a/package.json b/package.json
index ac1d6e4fdc..657a916bc5 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "@dialpad/conventional-changelog-angular": "^1.1.1",
     "@dialpad/dialtone-combinator": "^0.3.1",
     "@dialpad/dialtone-icons": "vue3",
-    "@dialpad/dialtone-vue": "^3.43.0",
+    "@dialpad/dialtone-vue": "^3.46.1",
     "@dialpad/postcss-responsive-variations": "^1.1.3",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@docsearch/js": "^3.3.2",