{"id":2967605,"date":"2026-06-02T10:00:18","date_gmt":"2026-06-02T17:00:18","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2967605"},"modified":"2026-06-02T14:17:08","modified_gmt":"2026-06-02T21:17:08","slug":"calcite-design-system-whats-new-in-5-1","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","title":{"rendered":"Calcite Design System: What&#8217;s New in 5.1"},"author":309572,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37101,738191],"tags":[759512,781006],"industry":[],"product":[36601],"class_list":["post-2967605","blog","type-blog","status-publish","format-standard","hentry","category-announcements","category-developers","tag-calcite-design-system","tag-whats-new-june-2026","product-developers"],"acf":{"authors":[{"ID":309572,"user_firstname":"Kitty","user_lastname":"Hurley","nickname":"Kitty Hurley","user_nicename":"khurley","display_name":"Kitty Hurley","user_email":"khurley@esri.com","user_url":"https:\/\/www.github.com\/geospatialem","user_registered":"2022-05-04 21:30:59","user_description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"},{"ID":372022,"user_firstname":"Isaac","user_lastname":"Braun","nickname":"Isaac Braun","user_nicename":"ibraun","display_name":"Isaac Braun","user_email":"ibraun@esri.com","user_url":"","user_registered":"2025-05-27 15:34:49","user_description":"Isaac is a Product Engineer based in Redlands, CA who is passionate about crafting intuitive and beautiful user experiences. Working in web development since 2020, he joined the Calcite Design System team at Esri in 2025. Beyond software, he enjoys playing piano and singing, woodworking, playing video games, taking photos, cycling, and exploring the outdoors.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/headshot-e1748456851258-261x261.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"Explore what's new in June 2026 to Calcite Design System, including initiatives and improvements to help you build a user-friendly UI\/UX.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2968536,"id":2968536,"title":"5-1_Card_826x465","filename":"5-1_Card_826x465.png","filesize":324711,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\/5-1_card_826x465","alt":"","author":"372022","description":"","caption":"","name":"5-1_card_826x465","status":"inherit","uploaded_to":2967605,"date":"2026-06-01 23:13:17","modified":"2026-06-01 23:13:17","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":826,"height":465,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","large-width":826,"large-height":465,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","1536x1536-width":826,"1536x1536-height":465,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","2048x2048-width":826,"2048x2048-height":465,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","wide_image-width":826,"wide_image-height":465}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Learn all about the key updates in Calcite Design System recently released with 5.1 with the latest functionality offered since 5.0 (February 2026), including:<\/p>\n<ul>\n<li><a href=\"#action\">Action enhancements<\/a><\/li>\n<li><a href=\"#carousel\">Carousel&#8217;s top pagination positioning<\/a><\/li>\n<li><a href=\"#combobox\">Combobox&#8217;s alternative selection appearance<\/a><\/li>\n<li><a href=\"#list\">List usability enhancements<\/a><\/li>\n<li><a href=\"#tooltip\">Tooltip&#8217;s usability improvements<\/a><\/li>\n<li><a href=\"#dropdown\">Dropdown configuration options<\/a><\/li>\n<li><a href=\"#contrast\">Enhanced dark mode color contrast<\/a><\/li>\n<li><a href=\"#archive\">Archived documentation site<\/a><\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"action\">Action enhancements<\/h2>\n<p>Action-named components offer additional configuration options for developers to support more use cases, including the ability to always display <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/action\/\">Actions<\/a> outside of an overflow menu within an <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/action-bar\">Action Bar<\/a> regardless of its width.<\/p>\n<h3>Prevent Actions from collapsing in an overflow menu<\/h3>\n<p>Actions can be configured to accommodate more workflows within Action Bar, always displaying outside of an overview menu regardless of the width of the parent component. Actions can be configured by either:<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#action-groups-overflowactionsdisabled-property\">Setting a property on Action Group<\/a>, where all child Actions are prevented from displaying of an overflow menu<\/li>\n<li><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#actions-overflowdisabled-property\">Specifying a property on individual Actions<\/a>, where named Actions will be prevented from displaying in an overflow menu<\/li>\n<\/ul>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/885b74e85e075f180dae0448cbddc1d2\/4ef49\/action-group-overflow-actions-disabled-property.png\" alt=\"Action Bar with overflow menus on the first two Action Groups and overflowActionsDisabled set on the last Action Group\" \/><figcaption>Action Bar with the component&#8217;s last Action Group&#8217;s content omitted from an overflow menu when specifying the <code>overflowActionsDisabled<\/code> property.<\/figcaption><\/figure>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/4fbc9c2bc584414bfc5eae1c6124c16d\/4cdf7\/action-overflow-disabled.png\" alt=\"Action Bar with two Actions, Add and Save disabled from overflowing into the menu\" \/><figcaption>Action Bar with two Actions, &#8220;Add&#8221; and &#8220;Save&#8221;, omitted from the component&#8217;s overflow menu when specified with the <code>overflowDisabled<\/code> property.<\/figcaption><\/figure>\n<h3>Action Bar&#8217;s placement configurations<\/h3>\n<p>Action Bar offers more placement configurations providing more flexibility in your apps, while supporting more individuals with the ability to add a customized label and support <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/resources\/localization\/#right-to-left-rtl\">right-to-left (RTL) locales<\/a>, including:<\/p>\n<ul>\n<li>A new slot to add Actions to the start of the component<\/li>\n<li>A label to support content in the new slot, providing context to assistive technologies<\/li>\n<li>A boolean property to specify the location of the component&#8217;s expand\/collapse button<\/li>\n<\/ul>\n<figure style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/513ebee1686341800d320635de4516cf\/01267\/actionbar-expandposition-actionsslot.png\" alt=\"Various configurations of Action Bar's expandPosition property set to start and end and depicted support when the direction is set to right-to-left adjusting the Actions and their placement in the component.\" \/><figcaption>Action Bar offers additional positioning configuration of Actions to support more use cases in your apps.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"carousel\">Carousel&#8217;s top pagination positioning<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel\/\">Carousel<\/a> offers <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#carousels-paginationposition-property\">additional configuration of its pagination element<\/a>, where the navigation controls can display at the top of the component. The new pagination control placement offering can be useful in scenarios where content may extend vertically beyond the viewport.<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/d8fdc678c2877e55a2a613ab046b41cb\/ef916\/carousel-pagination-position-property.png\" alt=\"Weather center app with a Carousel of weather conditions. Pagination controls are displayed above the Carousel content by setting paginationPosition to top.\" \/><figcaption>Carousel&#8217;s pagination allows more configuration of its pagination, where it can be placed at the top of the component for scenarios where content may contain larger amounts of content vertically in apps.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"combobox\">Combobox&#8217;s alternative selection appearance<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/combobox\/\">Combobox<\/a> supports an <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#comboboxs-selectionappearance-property\">alternative approach of communicating selected Combobox Items<\/a>\u00a0through a highlighted background and stronger font styling, instead of the default selection icons. The new appearance matches that of <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/autocomplete\/\">Autocomplete<\/a>, providing more flexibility in visual configuration and consistency when used alongside other components, such as Autocomplete.<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/ab4741949c16c23d2cfcda77534c4e03\/4cdf7\/combobox-selection-appearance.png\" alt=\"Combobox with its dropdown open and one item selected, having selectionAppearance set to highlight.\" \/><figcaption>Combobox offers more flexibility over the selection appearance of Combobox Items through an alternate highlighted configuration.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"list\">List usability enhancements<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list\/\">List<\/a> offers increased configurability and refined visual behaviors, providing a more clear and informative user experience.<\/p>\n<h3>Add context to Lists without List Items<\/h3>\n<p>When a List has no List Items to display, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#lists-empty-content-slot\">custom placeholder content can be added<\/a> in its place, ensuring users understand the current state of the List. The placeholder content is especially useful for Lists with drag-and-drop enabled, allowing the visible drop zone to be expanded and clearly communicated.<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/5a34ed39efaa4aa2411a02ee4652df82\/4cdf7\/list-empty-content-slot.png\" alt=\"A todo list next to an empty completed list. The completed tasks list displays a slotted notice in the empty-content slot with a title and message prompting users to drag completed tasks into the list.\" \/><figcaption>List supports displaying custom placeholder content when there are no List Items available, for example when dragging to-do items between lists.<\/figcaption><\/figure>\n<h3>List Item Group&#8217;s sticky header<\/h3>\n<p>Lists now <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#list-item-groups-sticky-headings\">have a sticky header<\/a> when specifying a <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item-group\/\">List Item Group<\/a>, where the group will remain visible at the top of the screen when scrolling through the List and child <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item\/\">List Items<\/a>. When subsequent List Item Groups are present, the sticky header will remain at the top of the component.<\/p>\n<figure style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/5c2bc5e55006c7c29d00600fd5856088\/list-item-group-sticky-headings.gif\" alt=\"A List being scrolled, while its Group Headings stay sticky at the top\" \/><figcaption>List Item&#8217;s group headers stay stuck to the top of the List, ensuring context is maintained.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"tooltip\">Tooltip&#8217;s usability improvements<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/tooltip\/\">Tooltip<\/a> supports more configurations and scenarios through <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#add-scale-property-to-various-components\">smaller and larger scale options<\/a> and the ability to <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#tooltips-pointerdisabled-property\">disable the caret pointer<\/a> associated with the reference element.<\/p>\n<p>The scales bring consistency with other components and support use in more situations, for example, utilizing the small scale to help the Tooltip not interfere with other elements in the interface. Removing the pointer can be useful for certain user experiences where the pointer interferes with other elements or the desired spacing.<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/0e7ad72ee9819731a1b637527872440b\/4cdf7\/tooltip-pointer-disabled.png\" alt=\"Tooltip used as a link title in a small scale and no caret pointer\" \/><figcaption>Tooltip&#8217;s scale and removed pointer options can be used to create more unique use cases.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"dropdown\">Dropdown configuration options<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/dropdown\/\">Dropdown<\/a> provides more control over <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#dropdowns-placement-and-referenceelement-additions\">how and where the component is opened<\/a>, allowing for more complex use cases and customization.<\/p>\n<h3>Improved setup configuration<\/h3>\n<p>Dropdown is configurable with a reference element, which informs where the component is positioned and toggles its open state. Previously, this behavior was handled by a trigger slot, which is now deprecated and planned for removal in version 7.0. Unlike the trigger slot, the reference element can be set programmatically to any HTML element or virtual element, allowing for more complex markup and supporting use cases such as context menus or input field suggestions.<\/p>\n<h3>Additional placement options<\/h3>\n<p>Dropdown offers more options for placement relative to its reference element, supporting more workflows where specific placement is necessary for the ideal user experience. The most notable offerings allow for placement on the sides of the reference element as opposed to the common bottom and top placements.<\/p>\n<figure><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/developers.arcgis.com\/calcite-design-system\/static\/7a1f024e672f082f97ed0ce8de7ee8c2\/4cdf7\/dropdown-placement-reference-element.png\" alt=\"An open Dropdown placed to the right of an Action component that is set as its reference element.\" \/><figcaption>Dropdown supports more workflows through additional placement options and reference element flexibility.<\/figcaption><\/figure>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"contrast\">Enhanced dark mode color contrast<\/h2>\n<p>In 5.1, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/v5-1\/#dark-mode-contrast-improvements\">enhanced color contrast<\/a> is provided in dark mode across interactive states when combined with the mode&#8217;s inverse text color. The enhanced contrast ratios exceed WCAG&#8217;s 1.4.6: Contrast (Enhanced) (Level AAA) of 7 to 1:<\/p>\n<table>\n<caption hidden=\"\">Enhanced dark mode color contrast<\/caption>\n<thead>\n<tr>\n<th style=\"text-align: center\" scope=\"col\"><strong>CSS variable name<\/strong><\/th>\n<th style=\"text-align: center\" scope=\"col\"><strong>v5.0 HEX code<\/strong><\/th>\n<th style=\"text-align: center\" scope=\"col\"><strong>v5.1 HEX code<\/strong><\/th>\n<\/tr>\n<\/thead>\n<tbody style=\"--_swatch-height: 64px\">\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-brand-hover<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #007ac2;color: #141414;text-align: center;align-content: center\">#007AC2<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #40b9ff;color: #141414;text-align: center;align-content: center\">#40B9FF<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-brand-press<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #00619b;color: #141414;text-align: center;align-content: center\">#00619B<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #80d1ff;color: #141414;text-align: center;align-content: center\">#80D1FF<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-info-hover<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #3db8ff;color: #141414;text-align: center;align-content: center\">#3DB8FF<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #40b9ff;color: #141414;text-align: center;align-content: center\">#40B9FF<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\">\n<p style=\"text-align: center\"><code>--calcite-color-status-info-press<\/code><\/p>\n<\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #009af2;color: #141414;text-align: center;align-content: center\">#009AF2<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #80d1ff;color: #141414;text-align: center;align-content: center\">#80D1FF<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-success-hover<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #3bed52;color: #141414;text-align: center;align-content: center\">#3BED52<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #6df278;color: #141414;text-align: center;align-content: center\">#6<wbr \/>D<wbr \/>F278<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-success-press<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #44ed51;color: #141414;text-align: center;align-content: center\">#44ED51<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #9df2a3;color: #141414;text-align: center;align-content: center\">#9DF2A3<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-warning-hover<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #ffb54d;color: #141414;text-align: center;align-content: center\">#FFB54D<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #ffaf4f;color: #141414;text-align: center;align-content: center\">#FFAF4F<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-warning-press<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #ff9500;color: #141414;text-align: center;align-content: center\">#FF9500<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #ffc47d;color: #141414;text-align: center;align-content: center\">#FFC47D<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-danger-hover<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #ff0015;color: #141414;text-align: center;align-content: center\">#FF0015<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #fe7863;color: #141414;text-align: center;align-content: center\">#FE7863<\/div>\n<\/td>\n<\/tr>\n<tr>\n<th style=\"text-align: center\" scope=\"row\"><code>--calcite-color-status-danger-press<\/code><\/th>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #d90012;color: #141414;text-align: center;align-content: center\">#D90012<\/div>\n<\/td>\n<td>\n<div style=\"height: var(--_swatch-height);background-color: #fe9989;color: #141414;text-align: center;align-content: center\">#<wbr \/>FE9989<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"archive\">Archived documentation site<\/h2>\n<p>Starting with version 3.3, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/archive\/\">archived versions of Calcite&#8217;s developer documentation<\/a> are available for reference and historical purposes. If you are using an older version of Calcite or ArcGIS Maps SDK for JavaScript, these archived sites can be referenced in addition to the latest releases.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/archive-doc.png\" alt=\"Calcite Design System's archived documentation page\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>2026 Developer &amp; Technology Summit Recordings<\/h2>\n<p>Technical session recordings from the 2026 Developer &amp; Technology Summit are now available, including the following Calcite-featured offerings:<\/p>\n<ul>\n<li><a href=\"https:\/\/mediaspace.esri.com\/media\/t\/1_otp3tpfn\/394319663\">ArcGIS Maps SDK for JavaScript: App Development with Components, Part 3: User Experience<\/a><\/li>\n<li><a href=\"https:\/\/mediaspace.esri.com\/media\/t\/1_b3ivoyjz\/394319663\">ArcGIS Maps SDK for JavaScript: App Development with Components, Part 4: Extending and Styling<\/a><\/li>\n<li><a href=\"https:\/\/mediaspace.esri.com\/media\/t\/1_cm4xeay4\/394319663\">Building Accessible Web Apps with ArcGIS Maps SDK for JavaScript and Calcite<\/a><\/li>\n<li><a href=\"https:\/\/mediaspace.esri.com\/media\/t\/1_vpcilb9m\/394319663\">Eyes on Design: The Art and Science of Creating Intuitive Interfaces<\/a><\/li>\n<\/ul>\n<p>To explore more recordings, visit the <a href=\"https:\/\/www.esri.com\/en-us\/about\/events\/devtech\/agenda\/proceedings\">Developer &amp; Technology conference proceedings page<\/a>.<\/p>\n<h2>2026 User Conference<\/h2>\n<p>Attending the <a href=\"https:\/\/www.esri.com\/en-us\/about\/events\/uc\/overview\">User Conference<\/a> in San Diego next month? Visit with Calcite team members, where we&#8217;ll be located in the showcase&#8217;s Developer Technologies section next to the ArcGIS Maps SDK for JavaScript kiosk.<\/p>\n"}],"show_article_image":false,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Card_826x465.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Banner_1920x1080.png","related_articles":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Calcite Design System: What&#039;s New in 5.1<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Calcite Design System: What&#039;s New in 5.1\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-02T21:17:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\"},\"author\":{\"name\":\"Kitty Hurley\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8\"},\"headline\":\"Calcite Design System: What&#8217;s New in 5.1\",\"datePublished\":\"2026-06-02T17:00:18+00:00\",\"dateModified\":\"2026-06-02T21:17:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\"},\"wordCount\":7,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Calcite Design System\",\"what\u2019s new june 2026\"],\"articleSection\":[\"Announcements\",\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\",\"name\":\"Calcite Design System: What's New in 5.1\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2026-06-02T17:00:18+00:00\",\"dateModified\":\"2026-06-02T21:17:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Calcite Design System: What&#8217;s New in 5.1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8\",\"name\":\"Kitty Hurley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg\",\"caption\":\"Kitty Hurley\"},\"description\":\"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.\",\"sameAs\":[\"https:\/\/www.github.com\/geospatialem\",\"https:\/\/www.linkedin.com\/in\/khurley\",\"https:\/\/x.com\/geospatialem\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/khurley\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Calcite Design System: What's New in 5.1","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","og_locale":"en_US","og_type":"article","og_title":"Calcite Design System: What's New in 5.1","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2026-06-02T21:17:08+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1"},"author":{"name":"Kitty Hurley","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8"},"headline":"Calcite Design System: What&#8217;s New in 5.1","datePublished":"2026-06-02T17:00:18+00:00","dateModified":"2026-06-02T21:17:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1"},"wordCount":7,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Calcite Design System","what\u2019s new june 2026"],"articleSection":["Announcements","Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","name":"Calcite Design System: What's New in 5.1","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2026-06-02T17:00:18+00:00","dateModified":"2026-06-02T21:17:08+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Calcite Design System: What&#8217;s New in 5.1"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8","name":"Kitty Hurley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/03\/Esri_Day2_PSCC2024_H_0127-e1710789483673-261x261.jpg","caption":"Kitty Hurley"},"description":"Kitty is a Principal Product Engineer with Calcite Design System, passionate about expanding access to the web and maps for broader audiences. She is dedicated to creating inclusive, user-friendly web experiences that connect people and places through innovative design and technology. Outside of work, Kitty enjoys exploring the wilderness of Minnesota and has a goal to visit every major league baseball stadium across America.","sameAs":["https:\/\/www.github.com\/geospatialem","https:\/\/www.linkedin.com\/in\/khurley","https:\/\/x.com\/geospatialem"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/khurley"}]}},"text_date":"June 2, 2026","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-whats-new-in-5-1","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/05\/5-1_Banner_1920x1080.png","primary_product":"Developers","tag_data":[{"term_id":759512,"name":"Calcite Design System","slug":"calcite-design-system","term_group":0,"term_taxonomy_id":759512,"taxonomy":"post_tag","description":"","parent":0,"count":16,"filter":"raw"},{"term_id":781006,"name":"what\u2019s new june 2026","slug":"whats-new-june-2026","term_group":0,"term_taxonomy_id":781006,"taxonomy":"post_tag","description":"","parent":0,"count":7,"filter":"raw"}],"category_data":[{"term_id":37101,"name":"Announcements","slug":"announcements","term_group":0,"term_taxonomy_id":37101,"taxonomy":"category","description":"","parent":0,"count":2018,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":436,"filter":"raw"}],"product_data":[{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":772,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=developers","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2967605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/309572"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2967605"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2967605\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2967605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2967605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2967605"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2967605"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2967605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}