feat(focusgroup): DLT-3285 add v-dt-focusgroup directive for declarative roving tabindex

apps/dialtone-documentation/docs/.vuepress/theme/components/Navbar.vue

@@ -314,7 +314,7 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const isActiveLink = (link) => {
   // For Design System, check all related paths (same as useSidebarItems.js)
   if (link === '/dialtone/') {
-    const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/dialtone/'];
+    const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/dialtone/', '/functions-and-utilities/'];
     return designSystemPaths.some(p => route.path.includes(p));
   }
   // For other links, use simple path matching

apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue

@@ -130,7 +130,7 @@ const route = useRoute();
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/theme/composables/useSidebarItems.js

@@ -9,7 +9,7 @@ import { usePageData } from 'vuepress/client';
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/design/', '/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/design/', '/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/theme/layouts/Layout.vue

@@ -83,7 +83,7 @@ const isMobile = ref(false);
  */
 function detectTopLevelGroup(path) {
   // Map routes to top-level groups
-  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/'];
+  const designSystemPaths = ['/components/', '/utilities/', '/tokens/', '/guides/', '/about/', '/functions-and-utilities/'];
 
   if (designSystemPaths.some(p => path.includes(p))) {
     return 'dialtone';

apps/dialtone-documentation/docs/.vuepress/views/UiKitsOverview.vue

@@ -25,37 +25,8 @@
             </div>
           </dt-stack>
           <dt-stack direction="row" gap="50" class="d-ai-center">
-            <svg
-              class="d-icon d-icon--size-200"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-            >
-              <path
-                d="M4.61824 20.4293L4.00072 3.92089C3.98032 3.37568 4.397 2.91362 4.93974
-                2.87959L18.9352 2.00199C19.4877 1.96735 19.9635 2.38859 19.998 2.94286C19.9993
-                2.96374 20 2.98466 20 3.00558V20.9945C20 21.5498 19.5513 22 18.9978 22C18.9828
-                22 18.9678 21.9997 18.9528 21.999L5.57482 21.3962C5.0538 21.3727 4.6378 20.9522
-                4.61824 20.4293Z"
-                fill="#FF4785"
-              />
-              <path
-                d="M15.8555 4.42657L15.9531 2.14956L17.9154 2L17.9999 4.34821C18.0028
-                4.42993 17.9369 4.49849 17.8527 4.50135C17.8166 4.50257 17.7813 4.49135
-                17.7529 4.46968L16.9962 3.89144L16.1003 4.55068C16.0331 4.6001 15.9374
-                4.58735 15.8864 4.5222C15.865 4.49478 15.854 4.46096 15.8555 4.42657ZM13.346
-                9.44092C13.346 9.82708 16.0275 9.642 16.3875 9.37075C16.3875 6.74106 14.9328
-                5.3592 12.2692 5.3592C9.60547 5.3592 8.11304 6.76256 8.11304 8.8676C8.11304
-                12.5339 13.2137 12.604 13.2137 14.6038C13.2137 15.1652 12.9304 15.4985 12.3069
-                15.4985C11.4946 15.4985 11.1735 15.096 11.2112 13.7278C11.2112 13.4309 8.11304
-                13.3384 8.01859 13.7278C7.77806 17.0436 9.90773 18 12.3447 18C14.7062 18 16.5575
-                16.779 16.5575 14.5687C16.5575 10.6393 11.3813 10.7446 11.3813 8.79743C11.3813
-                8.00804 11.9858 7.90279 12.3447 7.90279C12.7226 7.90279 13.4026 7.96739 13.346
-                9.44092Z"
-                fill="white"
-              />
-            </svg>
-            <span class="d-fs-125 d-fw-semibold d-fc-secondary">View in Storybook</span>
+            <dt-icon name="storybook-color" size="200" />
+            <dt-text kind="label" size="200" strength="medium" tone="secondary">Storybook</dt-text>
           </dt-stack>
         </dt-stack>
       </a>

apps/dialtone-documentation/docs/_data/site-nav.json

@@ -923,7 +923,7 @@
         ],
         "/functions-and-utilities/": [
           {
-            "text": "Functions",
+            "text": "Vue Utilities",
             "link": "/functions-and-utilities/",
             "icon": "code"
           }

apps/dialtone-documentation/docs/_data/vue-utilities.json

@@ -0,0 +1,43 @@
+{
+  "directives": [
+    {
+      "name": "v-dt-focusgroup",
+      "description": "Roving tabindex for composite widgets — arrow-key cycling, looping, memory, and disabled-item handling",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/directives-focusgroup--docs"
+    },
+    {
+      "name": "v-dt-mode",
+      "description": "Scope descendant design tokens to a light, dark, or inverted color palette",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/directives-mode--docs"
+    },
+    {
+      "name": "v-dt-tooltip",
+      "description": "Attach a tooltip to any element without a wrapper component",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/directives-tooltip--docs"
+    },
+    {
+      "name": "v-dt-scrollbar",
+      "description": "Replace native scrollbars with a styled overlay that auto-hides",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/directives-scrollbar--docs"
+    }
+  ],
+  "functions": [
+    {
+      "name": "Date and Time",
+      "description": "Format dates, relative timestamps, and durations with i18n locale support",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/functions-date-and-time--docs"
+    }
+  ],
+  "utilities": [
+    {
+      "name": "DtLazyShow",
+      "description": "Defer child rendering until first shown — reduces initial mount cost for popovers and modals",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/utilities-lazy-show--docs"
+    },
+    {
+      "name": "Localization",
+      "description": "Singleton i18n manager that localizes strings across all Dialtone components",
+      "storybook": "https://dialtone.dialpad.com/vue/next/?path=/docs/utilities-localization--docs"
+    }
+  ]
+}

apps/dialtone-documentation/docs/functions-and-utilities/index.md

@@ -1,17 +1,72 @@
 ---
-title: Functions
-description: Reusable JavaScript helper functions for common development tasks
+title: Vue Utilities
+description: Consumer-facing directives and utilities exported by Dialtone Vue.
 thumb: true
 ---
 
-<div class="d-ba d-bar16 d-py-200 d-mbs-400 d-ta-center d-fc-muted d-headline--xxl">
-  <dt-empty-state
-    :size="300"
-    header-text="TBD"
-    class="d-w100p"
-  >
-    <template #icon="{ iconSize }">
-      <dt-icon name="box" :size="iconSize" class="d-fc-tertiary" />
-    </template>
-  </dt-empty-state>
-</div>
+## Directives
+
+Behavioral plugins that attach to any element — add keyboard navigation, color modes, tooltips, and more.
+
+<table class="d-table dialtone-doc-table">
+  <thead>
+    <tr>
+      <th>Directive</th>
+      <th>Description</th>
+      <th class="d-ta-right">Docs</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="item in directives" :key="item.name" valign="baseline">
+      <th scope="row"><dt-text as="code" kind="code" size="100" class="d-docsite-code">{{ item.name }}</dt-text></th>
+      <td>{{ item.description }}</td>
+      <td class="d-ta-right"><dt-button kind="muted" importance="outlined" size="sm" target="_blank" :href="item.storybook"><template #startIcon="{ iconSize }"><dt-icon name="storybook-color" :size="iconSize" /></template>Storybook</dt-button></td>
+    </tr>
+  </tbody>
+</table>
+
+## Functions
+
+Stateless helpers for formatting and transforming data.
+
+<table class="d-table dialtone-doc-table">
+  <thead>
+    <tr>
+      <th>Function</th>
+      <th>Description</th>
+      <th class="d-ta-right">Docs</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="item in functions" :key="item.name" valign="baseline">
+      <th scope="row">{{ item.name }}</th>
+      <td>{{ item.description }}</td>
+      <td class="d-ta-right"><dt-button kind="muted" importance="outlined" size="sm" target="_blank" :href="item.storybook"><template #startIcon="{ iconSize }"><dt-icon name="storybook-color" :size="iconSize" /></template>Storybook</dt-button></td>
+    </tr>
+  </tbody>
+</table>
+
+## Utilities
+
+Foundational modules for rendering optimization and internationalization.
+
+<table class="d-table dialtone-doc-table">
+  <thead>
+    <tr>
+      <th>Utility</th>
+      <th>Description</th>
+      <th class="d-ta-right">Docs</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr v-for="item in utilities" :key="item.name" valign="baseline">
+      <th scope="row">{{ item.name }}</th>
+      <td>{{ item.description }}</td>
+      <td class="d-ta-right"><dt-button kind="muted" importance="outlined" size="sm" target="_blank" :href="item.storybook"><template #startIcon="{ iconSize }"><dt-icon name="storybook-color" :size="iconSize" /></template>Storybook</dt-button></td>
+    </tr>
+  </tbody>
+</table>
+
+<script setup>
+import { directives, functions, utilities } from '@data/vue-utilities.json';
+</script>