What's New in Calcite Design System 3.2 (June 2025)

Learn all about the key updates in Calcite Design System that we’ve recently released with 3.2!

Since 3.0, we’ve made important improvements to component interactive states, provided consistency across components, introduced new functionality, and made many updates worth exploring.

Read on to explore some of the highlights since February, including:

• Select all option in Combobox
• Input Time Picker masking
• Enhanced component interactive states
• Resizing usability improvements
• Block and List Item’s new expanded property
• Action Bar’s floating property
• Localization update
• Color contrast improvements

Select all option in Combobox

Combobox now includes the option to include a “Select all” checkbox when multiple options are enabled. When toggled, the “Select all” checkbox will select or unselect its child Combobox Items. When some, but not all Combobox Items are selected, the “Select all” checkbox will display in a mixed state.

Input Time Picker masking

Input Time Picker now offers input masking so users can adjust the component’s value via keyboard through the hour, minutes, seconds, and meridiem. The component’s functionality has been enhanced to better accommodate keyboard users and use cases. With the usability improvements the Input Time Picker now opens when the user interacts with the component’s chevron via mouse.

Enhanced component interactive states

Calcite continues its initiative to audit and update interactive states across the design system, focusing on providing consistent, accessible, and expected feedback for user interactions including hover, press, and focus. These interactive state updates ensure each component provides clear visual cues for all interactive states, improving component usability and accessibility for all users.

Resizing usability improvements

Shell Panel now offers improved usability via its resizable property, making it easier to discover and resize Panels in your apps with a full length resizable handle. Resizing can be achieved via keyboard and mouse, also providing a sufficient hit area to accommodate more users.

Additionally, Panels can now be resized when displayMode is "float", providing more flexibility with your layout and user experience.

Block and List Item’s new expanded property

The Block and List Item components now offer a new expanded property, deprecating their open properties. The new property offering provides clarity and consistency across components.

Action Bar’s floating property

The new floating property for Action Bar now provides the same floating appearance and overflow menu behavior as Action Pad. The change deprecates the Action Pad component, in favor of Action Bar.

Localization update

When specifying the Nynorsk locale (“nn” or “nn-NO”), it will now default to Norwegian string translations (“no”) instead of English. This is similar to the existing behavior of other locales where there are no specified string translations, such as Spanish – United States (“es-US”).

Learn more about Language and region fallback and how to supply your own string translations using the messageOverrides property.

Color contrast improvements

Switch‘s contrast has been enhanced, exceeding the Web Content Accessibility Guidelines Success Criterion 1.4.1: Use of Color. The accessibility and usability improvements provide more color contrast to more audiences.

Additionally, components using the warning color now offer additional color contrast in both light and dark modes. The warning color displays in components where kind is "warning", and when Rating‘s average is specified.

Explore what’s new

For a full list of changes, visit Calcite’s May 2025 summary notes, which also lists changes since 3.0, including new functionality and bug fixes.

Join us at the 2025 User Conference

Learn more about 2025 Esri User Conference, and explore our Calcite technical session, ArcGIS Maps SDK for JavaScript Building an App with Components.

The session provides a guide for building web apps using the web components available with ArcGIS Maps SDK for JavaScript and Calcite Design System. Starting from a web map, learn how to add mapping capabilities, charts, UI design elements, and more to make a responsive, cohesive, and informative experience. Find out how to combine Calcite and the SDK components and capabilities to create a compelling web mapping app with maximum productivity.

You can also visit with Calcite team members throughout the week at Calcite’s booth, located in the showcase’s Web Development section.