Introducing DtBox: The Surface and Spacing Primitive
New low-level component for token-constrained surfaces. Replaces manual CSS utility composition for padding, background, border, shadow, radius, and sizing with validated props. Completes the primitive triad alongside DtText and DtStack.
Introducing v-dt-focustrap: Declarative Focus Trapping
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
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
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
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
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
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)
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)
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)
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
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)
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
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
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
Dialtone Vue gains tree-shaking support, significantly reducing bundle size. New import patterns and direct dialtone-icons usage introduced.
Updated Text Styles naming convention
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
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
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
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
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
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
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!
Launch of the Dialtone What's New blog. Covers new icon components, overview pages, small toggle size, presence component, and team news.