{"id":2340312,"date":"2024-06-05T05:32:59","date_gmt":"2024-06-05T12:32:59","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2340312"},"modified":"2024-10-24T14:52:26","modified_gmt":"2024-10-24T21:52:26","slug":"whats-new-in-calcite-design-system-june-2024","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024","title":{"rendered":"What\u2019s New in Calcite Design System (June 2024)"},"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,774062],"industry":[],"product":[36601],"class_list":["post-2340312","blog","type-blog","status-publish","format-standard","hentry","category-announcements","category-developers","tag-calcite-design-system","tag-whats-new-june-2024","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":4271,"user_firstname":"Julie","user_lastname":"Powell","nickname":"Julie Powell","user_nicename":"julie-powell","display_name":"Julie Powell","user_email":"julie_powell@esri.com","user_url":"","user_registered":"2018-03-02 00:15:51","user_description":"Julie Powell is Principal Product Manager for Esri's web development technologies. She works to ensure developers can be successful in building state of the art, purposeful solutions using ArcGIS software. \r\nJulie brings 20 years of experience working with global leaders such as Hewlett-Packard and Esri, delivering a variety of software solutions for both the enterprise and consumer markets.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/03\/PhotoRoom-20220321_101413-3-213x200.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"Explore some of the latest updates to Calcite Design System, including new components and improvements to help you build a user-friendly UI\/UX.","flexible_content":[{"acf_fc_layout":"image","image":{"ID":2360562,"id":2360562,"title":"Banner_large","filename":"Banner_large-1.png","filesize":1539877,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\/banner_large-4","alt":"Calcite's June release includes Carousel, Tile, enhanced validation, slider customizations, and much more to fit your apps and mapping apps.","author":"309572","description":"","caption":"","name":"banner_large-4","status":"inherit","uploaded_to":2340312,"date":"2024-06-03 14:56:58","modified":"2024-10-24 21:52:21","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":1920,"height":1080,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","large-width":1920,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1-1536x864.png","1536x1536-width":1536,"1536x1536-height":864,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","2048x2048-width":1920,"2048x2048-height":1080,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1-826x465.png","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png","wide_image-width":1920,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Learn all about the key updates in Calcite Design System that we\u2019ve recently released!<\/p>\n<p>Calcite enables you to build beautiful, user-friendly, and consistent experiences across applications with minimal effort. Since March, we\u2019ve made important improvements to components that facilitate responsive app development, introduced new components, and made many updates worth exploring. Read on to explore some of the highlights since March.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Carousel and Carousel Item<\/h2>\n<p>The new <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel\/\">Carousel<\/a> and <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel-item\/\">Carousel Item<\/a> components enable display and navigation between a set of related items.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"border: 1px solid #D3D3D3;margin-left: auto;margin-right: auto\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/4f61fdd4-2671-4b05-9ef0-43426b848ec3\" alt=\"Carousel and Carousel Item components with the autoplay attribute\" width=\"680px\" height=\"310px\" \/><\/p>\n<p>Carousel can be used to display onboarding tips, or display messaging, media, or other related content. They can be presented within a <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/modal\/\">Modal<\/a> or <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/popover\/\">Popover<\/a> for a fleeting workflow, or within a <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/block\/\">Block<\/a> or <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/panel\/\">Panel<\/a> for a static experience.<\/p>\n<div>Carousel and Carousel Item also provide autoplay with the <code>autoplay<\/code> property. When initialized, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel\/\">Carousel<\/a> will automatically rotate through its <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel-item\/\">Carousel Items<\/a>. Explore additional resources on <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel\/#autoplay\">Carousel&#8217;s autoplay<\/a>, and <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/carousel\/#best-practices\">Carousel best practices and recommendations<\/a>.<\/div>\n<div><\/div>\n"},{"acf_fc_layout":"content","content":"<h2>Tile redesign<\/h2>\n<p>The <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/tile\/\">Tile<\/a> component is useful for presenting information in a compact, consistent format. We recently redesigned Tile to streamline workflows, provide selection support, and two new slots, where non-actionable content can be placed at the top and bottom of the component.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"width: 628px;height: 382px;margin-left: auto;margin-right: auto\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/d0b4abd9-1ca2-4afc-b3c4-24d3273ef51f\" alt=\"Tile component with Chips slotted into content-top and content-bottom showing new and available resources respectively.\" \/><\/p>\n<p>You can display multiple Tiles using the new <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/tile-group\/\">Tile Group<\/a> component. Tile Group enables responsive design by providing multiple scales of the component, accessed via a\u00a0<code>scale<\/code> property.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"width: 680px;height: 247px;margin-left: auto;margin-right: auto\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/0e441919-fc64-42be-9ba0-d90bc7bc2ca9\" alt=\"Tile Group component containing multiple Tiles that can be selected.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Enhanced validation<\/h2>\n<p>In March <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/calcite-design-system-february-2024-update\/\">we announced form validation support<\/a>. Over the last few months we&#8217;ve enhanced capabilities around validation.<\/p>\n<p>Now form components provide helpful feedback indicating why an element&#8217;s value is invalid. This enhancement can be used in variety of use cases, such as <code>patternMismatch<\/code>, where the user has provided a pattern that fails. To communicate the error with the entry, the form components can display an error message, icon, and status.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"width: 470px;height: 350px;padding: 0.5rem;border: 1px solid #D3D3D3;border-radius: 0.5rem\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/0fbe28f6-e620-4be3-835d-b898ac735760\" alt=\"Validate form components on blur and on form submission while supplying a custom icon and message.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Slider customization<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/slider\/\">Slider<\/a> handle text can be dynamically updated in response to changes in the component. For instance, the handle text can be updated when the component&#8217;s value hits certain thresholds.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" style=\"margin-left: auto;margin-right: auto;padding: 1rem;border: 1px solid #d3d3d3\" title=\"Slider with the label dynamically changing as the value changes.\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/60022782\/f5c1973a-a507-4946-b980-f63d91c1d7d3\" alt=\"Slider with the label dynamically changing as the value changes.\" \/><\/p>\n<p>Additionally, you can configure which part of the component&#8217;s rail is highlighted relative to its handle \u2013 either spanning from the start to the current value, or from the value to its end.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"padding: 1rem;border: 1px solid #D3D3D3\" title=\"Sliders with fill placement positions of start and end.\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/60022782\/c74c48f7-5c48-4cbc-b342-7f1b4954303b\" alt=\"Sliders with fill placement positions of start and end.\" width=\"592px\" height=\"290px\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2><code>readOnly<\/code> and <code>download<\/code> support<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/input-time-zone\/\">Input Time Zone<\/a> and <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/combobox\/\">Combobox<\/a> were enhanced with support for the native <code>readOnly<\/code> property. When specified, the values can be selected, but not modified, preventing unwanted changes.<\/p>\n<p>Additionally, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/button\/\">Button<\/a> supports the native <code>download<\/code> property, where when coupled with the <code>href<\/code> property and accessed will download the specified resource. The new offering matches native behavior and enhances functionality.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"padding: 1rem;border: 1px solid #D3D3D3\" title=\"Display Combobox and Input Time Zone and their values to users with the readOnly property.\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/6bd0ca57-d8ef-4b75-891b-0691d80abf7e\" alt=\"Display Combobox and Input Time Zone and their values to users with the readOnly property.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2 id=\"avatar-background-color-generation\" class=\"group relative s:flex s:flex-nowrap\">Avatar background color generation<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/avatar\/\">Avatar<\/a>\u00a0now ensures different backgrounds are generated for similar values specified in its\u00a0<code>username<\/code>,\u00a0<code>fullName<\/code>, and\u00a0<code>userId<\/code>\u00a0properties using a randomly generated accessible background color.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"padding: 0.5rem;border: 1px solid #D3D3D3;border-radius: 0.5rem\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/0c6be6ee-5e31-475b-8469-196ea51c155f\" alt=\"Avatar color generation is randomly generated regardless of similarity in username, full name, or user id.\" \/><\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Accessibility improvements<\/h2>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list\/\">List<\/a> and <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item\/\">List Items<\/a> provide support sorting for assistive technology and keyboard users with <code>dragEnabled<\/code>. To move a List Item focus on the component&#8217;s drag, or handle, button and press the <code>space<\/code> key to activate sorting. To move the item to a new position in the List, use the arrow keys for placement.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" class=\"aligncenter\" style=\"width: 474px;height: 171px;padding: 0.5rem;border: 1px solid #D3D3D3;border-radius: 0.5rem\" src=\"https:\/\/github.com\/Esri\/calcite-design-system\/assets\/5023024\/e7774fbb-8165-4f27-8fe5-071a5c8860ff\" alt=\"Move a List's List Item using the space and arrow keys.\" \/><\/p>\n<p><a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list\/\">List<\/a> was updated with multiple slotted actions via keyboard. Where multiple <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/action\/\">Actions<\/a> are slotted into a <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/list-item\/\">List Item<\/a> using the <code>\"actions-start\"<\/code> and <code>\"actions-end\"<\/code> slots, the Actions supplied are accessible via keyboard.<\/p>\n<p>Additionally, <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/components\/combobox\/\">Combobox<\/a> provides support to VoiceOver keyboard navigation so users can navigate into the component&#8217;s input and manually enter values.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Explore more<\/h2>\n<p>Calcite\u2019s releases contain many additional features, bug fixes, and breaking changes that are not mentioned in this blog post. Explore the <a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/summaries\/2024-05\">May summary notes<\/a>, and in particular the\u00a0<a href=\"https:\/\/developers.arcgis.com\/calcite-design-system\/releases\/summaries\/2024-05\/#changes-since-february-2024\">changes since February 2024<\/a>\u00a0for a full list of capabilities offered in Calcite.<\/p>\n"},{"acf_fc_layout":"content","content":"<h2>Join us at the 2024 Esri UC<\/h2>\n<p>Learn more about\u00a0<a href=\"https:\/\/www.esri.com\/en-us\/about\/events\/uc\/overview\">Esri User Conference<\/a>, and explore our Calcite technical session, <a href=\"https:\/\/uc2024.esri.com\/flow\/esri\/24uc\/eventportal\/page\/detailed-agenda\/session\/1703277705104001QMUf\">Faster Web Development with ArcGIS Web Components.<\/a><\/p>\n<p>The session will bring ArcGIS experiences into an app with a few lines of code. You will learn how to create a compelling web mapping app with maximum productivity when combining Calcite Design System and ArcGIS Maps SDK for JavaScript components and capabilities. We&#8217;ll discuss brand-new web components in the ArcGIS Maps SDK for JavaScript, how to build a web app from scratch, key concepts, syntax, accessibility, and design best practices.<\/p>\n<p style=\"text-align: center\"><img decoding=\"async\" src=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/uc24-general-banner-2100x134-a.jpg\" alt=\"Join us at the 2024 Esri User Conference July 15 through 19, 2024 in San Diego, California.\" \/><\/p>\n"}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_small-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.png"},"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>What\u2019s New in Calcite Design System (June 2024)<\/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\/whats-new-in-calcite-design-system-june-2024\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What\u2019s New in Calcite Design System (June 2024)\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\" \/>\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=\"2024-10-24T21:52:26+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=\"6 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\/whats-new-in-calcite-design-system-june-2024#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\"},\"author\":{\"name\":\"Kitty Hurley\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8\"},\"headline\":\"What\u2019s New in Calcite Design System (June 2024)\",\"datePublished\":\"2024-06-05T12:32:59+00:00\",\"dateModified\":\"2024-10-24T21:52:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\"},\"wordCount\":8,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"Calcite Design System\",\"whats new june 2024\"],\"articleSection\":[\"Announcements\",\"Developers\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\",\"name\":\"What\u2019s New in Calcite Design System (June 2024)\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2024-06-05T12:32:59+00:00\",\"dateModified\":\"2024-10-24T21:52:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What\u2019s New in Calcite Design System (June 2024)\"}]},{\"@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":"What\u2019s New in Calcite Design System (June 2024)","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\/whats-new-in-calcite-design-system-june-2024","og_locale":"en_US","og_type":"article","og_title":"What\u2019s New in Calcite Design System (June 2024)","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2024-10-24T21:52:26+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024"},"author":{"name":"Kitty Hurley","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1d3e2f690ee8951f6625010e5b55aee8"},"headline":"What\u2019s New in Calcite Design System (June 2024)","datePublished":"2024-06-05T12:32:59+00:00","dateModified":"2024-10-24T21:52:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["Calcite Design System","whats new june 2024"],"articleSection":["Announcements","Developers"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024","name":"What\u2019s New in Calcite Design System (June 2024)","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2024-06-05T12:32:59+00:00","dateModified":"2024-10-24T21:52:26+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"What\u2019s New in Calcite Design System (June 2024)"}]},{"@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 5, 2024","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/developers\/announcements\/whats-new-in-calcite-design-system-june-2024","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/05\/Banner_large-1.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":15,"filter":"raw"},{"term_id":774062,"name":"whats new june 2024","slug":"whats-new-june-2024","term_group":0,"term_taxonomy_id":774062,"taxonomy":"post_tag","description":"","parent":0,"count":31,"filter":"raw"}],"category_data":[{"term_id":37101,"name":"Announcements","slug":"announcements","term_group":0,"term_taxonomy_id":37101,"taxonomy":"category","description":"","parent":0,"count":1964,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":423,"filter":"raw"}],"product_data":[{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":763,"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\/2340312","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=2340312"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2340312\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2340312"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2340312"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2340312"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2340312"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2340312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}