Updates, progress and planning for all things Dialtone.
New component pair for bulleted, numbered, and custom-markered text lists. Replaces d-ls-*/d-lst-* utility composition with validated props, semantic ul/ol rendering, automatic nested-marker progression, and a marker slot that accepts icons, emoji, or any content.
New low-level component for token-constrained surfaces. Replaces manual CSS utility composition for padding, background, border, shadow, radius, sizing, and simple positioning with validated props. Completes the primitive triad alongside DtText and DtStack.
New Vue directive for focus trapping. Trap Tab/Shift+Tab within dialogs, popovers, and overlays with a single attribute — configurable initial focus, boundary wrapping, and focus restoration built in.
New Vue directive for roving tabindex. Add arrow-key cycling, looping, memory, and disabled-item handling to any composite widget with a single attribute — no keyboard event handlers required.
Space and size tokens are unified into a single --dt-size-* system. Includes an automated migration tool. Space tokens are deprecated.
Step-by-step guide for replacing hard-coded chart colors with Dialtone's semantic chart tokens in CSS, Google Charts, and Vue components.
Responsive variations switch from max-width to min-width media queries, enabling mobile-first design. Migration steps and plugin setup instructions included.
Dialtone Vue 3 input components now use modelValue instead of value and checked props, aligning with Vue 3 standards for v-model.
Recipe CSS classes renamed for consistency with the rest of Dialtone components. Only affects projects that reference recipe internals directly.
Internal Dialtone Vue component CSS classes renamed to follow standard conventions. Only affects projects that override Dialtone component CSS directly.
Avatar, Badge, and Empty State now use icon slots instead of name props. Breaking change in v9.77.0 — icon-left and icon-right props removed.
Vue component examples are now available directly on the Dialtone documentation site, unifying Storybook and the main docs site experience.
Dialtone now supports multiple themes including T-Mobile and Marketing. Breaking change — theme tokens must now be imported separately from @dialpad/dialtone/css.
Tokens page redesigned with search, copy support, and category sidebar. New Empty State component introduced for handling no-data scenarios.
Dialtone 9 is now the default — install with @latest. Migration guide linked for those not yet on v9.
Dialtone Vue gains tree-shaking support, significantly reducing bundle size. New import patterns and direct dialtone-icons usage introduced.
Typography tokens renamed for consistency across Figma, CSS utilities, and CSS variables. Backwards-compatible — migration to the new convention encouraged.
Dialtone 9 consolidates all packages into the @dialpad/dialtone mono-package, published under the @next tag. Migration steps from v8 included.
Old Dialtone icons removed November 13th — migrate to the new icon set. Introduces the v-dt-tooltip directive for simple tooltip usage.
Dialtone 8 is now on the main branch, featuring design tokens, theming support, dark mode, and multi-platform consistency. Migration guide included.
Dialtone Vue migrates from webpack to Vite, Mocha to Jest, and upgrades to Storybook 7.0. Includes a small breaking change for Vue 2 CSS imports.
Avatar HTML/CSS structure updated in v7.16.0 — requires new wrapper divs for initials and icon modes. Vue component users are unaffected.
Badge component redesigned with new type and kind props, icon support, and semantic variants. Breaking changes in Dialtone v7.9.0. Avatar and combobox also updated.
Launch of the Dialtone What's New blog. Covers new icon components, overview pages, small toggle size, presence component, and team news.
What's New documentation last updated Friday, September 4, 2026