Introducing Dialtone 10
Francis Rupert
New and improved composition, theming, color, typography, and layout, plus refreshed components, rebuilt documentation, and migration guidance.
What's New
Updates, progress and planning for all things Dialtone.
Introducing DtTextList: Semantic Text Lists
Francis Rupert
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.
Introducing DtBox: The Surface and Spacing Primitive
Francis Rupert
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.
Introducing v-dt-focustrap: Declarative Focus Trapping
Francis Rupert
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.
Introducing v-dt-focusgroup: Declarative Keyboard Navigation
Francis Rupert
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.
Migrating Space Tokens to Size Tokens
Francis Rupert
Space and size tokens are unified into a single --dt-size-* system. Includes an automated migration tool. Space tokens are deprecated.
Guide: Replacing Hard-Coded or Base tokens for Chart Tokens
Federico Sarassola
Step-by-step guide for replacing hard-coded chart colors with Dialtone's semantic chart tokens in CSS, Google Charts, and Vue components.
Breaking change in postcss-responsive-variations plugin
Nina Repetto
Responsive variations switch from max-width to min-width media queries, enabling mobile-first design. Migration steps and plugin setup instructions included.
Vue 3 input components v-model breaking change
Brad Paugh
Dialtone Vue 3 input components now use modelValue instead of value and checked props, aligning with Vue 3 standards for v-model.
Recipe class renames (POSSIBLE BREAKING CHANGE)
Brad Paugh
Recipe CSS classes renamed for consistency with the rest of Dialtone components. Only affects projects that reference recipe internals directly.
Component class renames (POSSIBLE BREAKING CHANGE)
Brad Paugh
Internal Dialtone Vue component CSS classes renamed to follow standard conventions. Only affects projects that override Dialtone component CSS directly.
Dialtone Vue is now fully tree-shakeable (BREAKING CHANGE)
Nina Repetto
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 and HTML examples on Documentation site
Julio Ortega
Vue component examples are now available directly on the Dialtone documentation site, unifying Storybook and the main docs site experience.
Dialtone theming released! (BREAKING CHANGE)
Brad Paugh
Dialtone now supports multiple themes including T-Mobile and Marketing. Breaking change — theme tokens must now be imported separately from @dialpad/dialtone/css.
New search in the tokens page and new empty state component
Nina Repetto
Tokens page redesigned with search, copy support, and category sidebar. New Empty State component introduced for handling no-data scenarios.
Promoted Dialtone 9 to latest
Tico Ortega
Dialtone 9 is now the default — install with @latest. Migration guide linked for those not yet on v9.
Added Tree-shaking support for dialtone-vue and dialtone-icons
Tico Ortega
Dialtone Vue gains tree-shaking support, significantly reducing bundle size. New import patterns and direct dialtone-icons usage introduced.
Updated Text Styles naming convention
Yorbi Barriento
Typography tokens renamed for consistency across Figma, CSS utilities, and CSS variables. Backwards-compatible — migration to the new convention encouraged.
Dialtone 9 released and published with @next tag
Tico Ortega
Dialtone 9 consolidates all packages into the @dialpad/dialtone mono-package, published under the @next tag. Migration steps from v8 included.
Deprecated icons, new tooltip directive
Brad Paugh
Old Dialtone icons removed November 13th — migrate to the new icon set. Introduces the v-dt-tooltip directive for simple tooltip usage.
Dialtone 8 released and promoted to the main branch
Brad Paugh
Dialtone 8 is now on the main branch, featuring design tokens, theming support, dark mode, and multi-platform consistency. Migration guide included.
Dialtone Vue - upgrade to Vite, Jest, and Storybook 7.0
Brad Paugh
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 - breaking change
Brad Paugh
Avatar HTML/CSS structure updated in v7.16.0 — requires new wrapper divs for initials and icon modes. Vue component users are unaffected.
Badge update - breaking change
Brad Paugh
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.
Release of our new blog!
Brad Paugh
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 Tuesday, October 20, 2026