February 2025 Summary

Updates since 2.13

3.0 breaking changes

Version 3.0 includes breaking changes, which may require updates to applications. Breaking changes are introduced to improve stability, reliability, and consistency across Calcite Design System.

For the comprehensive list of all breaking changes, explore 3.0 breaking changes below.

• Removed components
• Removed properties
• List usability improvements
• Angular wrapper removal
• Imports
• IntelliSense
• Flow Item DOM removal
• React boolean

Removed components

In version 3.0, the Pick List and Value List components have been removed. Use the List component instead.

The Pick List and Value List components have been deprecated since version 1.0 in January 2023. Removed components include:

• Pick List
• Pick List Group
• Pick List Item
• Value List
• Value List Group
• Value List Item

Removed properties

Some deprecated component properties have been removed for consistency across components, including:

• Action Group's layout property, which is now inherited from its parent Action Pad or Action Bar's layout property
• Color Picker's hideChannels, hideHex, and hideSaved in favor of channelsDisabled, hexDisabled, saveDisabled properties
• Shell Panel's detachedHeighScale and detached properties and the --calcite-shell-panel-detached-max-height CSS variable with heightScale and displayMode properties
• Table's zebra property, where the striped property should be used
• The guid property for Checkbox and Radio Button, where a unique id can be used in its place

List usability improvements

List includes consistency and overall UI improvements including:

• Component sizing using the scale property
• Updated padding and spacing with the selectionMode and selectionAppearance properties
• Font sizes and consistency with selectionAppearance and displayMode properties

Developers may need to:

• Customize or remove padding using CSS to handle default content padding
• Accommodate nesting behavior with display-mode="nested", which displays List Items under their parent element

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<calcite-list selection-mode="multiple" display-mode="nested" label="Park features">
  <calcite-list-item open label="Trails" value="trails">
    <calcite-list-item selected label="Hiking trails" value="hiking-trails"></calcite-list-item>
    <calcite-list-item label="Multi-use trails" value="multi-use-trails"></calcite-list-item>
    <calcite-list-item label="Boardwalks" value="boardwalks"></calcite-list-item>
    <calcite-list-item label="Interpretive trails" value="interpretive-trails">
      <calcite-list-item label="Quarry loop" value="quarry-loop" ></calcite-list-item>
      <calcite-list-item label="Sundance trail" value="sundance-trail" ></calcite-list-item>
    </calcite-list-item>
  </calcite-list-item>
  <calcite-list-item label="Waterfalls" value="waterfalls"></calcite-list-item>
  <calcite-list-item label="Rivers" value="rivers">
    <calcite-list-item label="Kettle River" value="kettle-river"></calcite-list-item>
    <calcite-list-item label="Cane Creek" value="cane-creek"></calcite-list-item>
  </calcite-list-item>
  <calcite-list-item label="Estuaries" value="estuaries"></calcite-list-item>
</calcite-list>

displayMode and selectionMode types	Version 2.x	Version 3.0
display-mode="nested" and selection-mode="none"
display-mode="nested" and selection-mode="single"
display-mode="nested" and selection-mode="multiple"

Angular wrapper removal

Angular developers no longer need to install a wrapper; they can now use Calcite directly in their applications. Learn more about Framework integration.

Imports

Calcite has made changes under the hood to ensure stability, consistency, and support for your apps. You may have different imports or setup as you migrate your apps to 3.0. To learn more, visit Get started with custom elements.

1
2
3
4
5
6
7
8
9
// Version 3.0 imports
import "@esri/calcite-components/dist/components/calcite-button";
import "@esri/calcite-components/dist/components/calcite-icon";
import "@esri/calcite-components/dist/components/calcite-slider";

// Version 2.x imports
import "@esri/calcite-components/dist/components/calcite-button.js";
import "@esri/calcite-components/dist/components/calcite-icon.js";
import "@esri/calcite-components/dist/components/calcite-slider.js";

IntelliSense

The Visual Studio IntelliSense location has been updated to align with Calcite documentation and support standards. The previous location is still supported, but is deprecated for future removal. To setup IntelliSense, add the following to the .vscode/settings.json file in your project:

1
2
3
4
5
6
7
8
9
10
11
12
// Updated IntelliSense path
"html.customData": [
  "./node_modules/@esri/calcite-components/dist/docs/vscode.html-custom-data.json"
],
"css.customData": [
  "./node_modules/@esri/calcite-components/dist/docs/vscode.css-custom-data.json"
]

// Deprecated IntelliSense path
"html.customData": [
  "./node_modules/@esri/calcite-components/dist/extras/vscode-data.json"
]

Flow Item DOM removal

Flow Items are no longer removed from the DOM when creating additional items. Now, the component offers a selected property to define which item is active and visible. To remove elements from the DOM, use the component's remove() method.

For additional examples, refer to Flow's samples to get started.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const flowEl = document.querySelector("calcite-flow");

function createFlowItem(event, title) {
  const newFlowItemEl = document.createElement("calcite-flow-item");

  // Remove the element from the DOM when interacting with the "back" button
  newFlowItemEl.addEventListener("calciteFlowItemBack", () => {
    newFlowItemEl.remove();
  });

  newFlowItemEl.heading = title;

  // When appending the item, set all items `selected` to `false`, and
  // Set the new item's `selected` to `true`
  flowEl.append(newFlowItemEl);
  const flowItemEls = document.querySelectorAll("calcite-flow-item");
  flowItemEls.forEach(item => item.selected = false);
  newFlowItemEl.selected = true;
}

React boolean

Prior to version 3.0, passing boolean attributes to Calcite's React components converted the values to strings due to compatibility issues with web components. As of version 3.0, boolean attributes now behave as expected and can be passed as true or false, replacing the previous workaround of using true and undefined. For more on this, visit Boolean attributes.

Visual changes

Calcite Design System aims to improve design consistency and usability, however some changes, while not breaking, result in visual changes. Below are a list of changes since 2.13, which ensure components align with evolving design standards and consistency, but may visually change in apps.

• List keyboard dragging between Lists
• Loader design improvements
• Color Picker usability
• Date Picker appearance

List keyboard dragging between Lists

List now supports dragging between different Lists for mouse and keyboard users. The component now offers a menu when interacting with a List Item to move its position within the current List, or with other Lists containing the same group value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<calcite-shell>
  <calcite-shell-panel slot="panel-start">
    <calcite-panel heading="Drag List Items between Lists example">
      <calcite-block open heading="Places to visit" description="Where we'd like to go" icon-start="map">
        <calcite-list drag-enabled group="places-group" label="Places to visit">
          <calcite-list-item label="Narnia" description="Land full of forests and valleys" value="narnia"></calcite-list-item>
          <calcite-list-item label="Kings Landing" description="Capitol of the Seven Kingdoms" value="kings-landing"></calcite-list-item>
          <calcite-list-item label="Neverland" description="Where you never have to grow up" value="neverland"></calcite-list-item>
        </calcite-list>
      </calcite-block>
      <calcite-block open heading="Visited places" description="Where we've been" icon-start="tour">
        <calcite-list drag-enabled group="places-group" label="Visited places">
          <calcite-list-item label="Gotham City" description="Home to Wayne Industries" value="gotham-city"></calcite-list-item>
          <calcite-list-item label="The Shire" description="Adventure at your fingertips" value="the-shire"></calcite-list-item>
          <calcite-list-item label="Hogsmeade" description="Grab a butterbeer at the Three Broomsticks" value="hogsmeade"></calcite-list-item>
        </calcite-list>
      </calcite-block>
    </calcite-panel>
  </calcite-shell-panel>
  <calcite-panel heading="Content"></calcite-panel>
</calcite-shell>

Loader design improvements

Loader has enhanced design improvements for your UI emphasizing the component in its default state, and simplifying its look and feel when set to inline.

Type	Version 2.x	Version 3.0
default
inline

Color Picker usability

Color Picker now maintains a consistent UI across all scales and supports responsiveness upon resizing when setting the component's CSS inline-size.

scale consistency

Version 2.x	Version 3.0

Responsive support

1
2
3
4
5
6
<style>
  #responsive-comp {
    inline-size: 35%;
  }
</style>
<calcite-color-picker id="responsive-comp"></calcite-color-picker>

Date Picker appearance

The Date Picker component includes many new UI improvements, such as when range is specified, the component displays two calendars in the layout. Additionally, month selection can now be changed via a native select menu.

1
<calcite-input-date-picker range></calcite-input-date-picker>

New components and initiatives

• Autocomplete component
• Block Group component
• Focus color token
• Dialog tokens
• Tab Title icon color for iconStart and iconEnd
• Consistent width and height properties

Autocomplete component

Introducing the new Autocomplete component, which enhances text input by allowing developers to display dynamic suggestions as users type. The component provides a structured way to present predictive search results, while supporting configuration on how suggestions are fetched, populated, and managed.

Developers can listen for the calciteAutocompleteTextInput event to trigger an asynchronous search, update the list of suggestions, and open the component's dropdown when results are available.

When a user selects an option, the calciteAutocompleteChange event fires, allowing further customization, such as populating the input field with a selected value or triggering an action. Users can navigate suggestions using the keyboard with ArrowUp, ArrowDown and selecting an item by pressing Enter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<form class="locate-form" style="padding: 1rem">
  <calcite-label layout="inline">
    Where in the world is Carmen Sandiego? 🌎
    <calcite-autocomplete scale="m" class="locator-autocomplete" name="location" style="width:50%"></calcite-autocomplete>
  </calcite-label>
</form>

<script type="module">
  import { suggestLocations } from "https://js.arcgis.com/4.31/@arcgis/core/rest/locator.js";

  async function getSuggestions(locatorAutocomplete, controller) {
    locatorAutocomplete.open = true;
    const response = await suggestLocations(
      "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer",
      { text: locatorAutocomplete.inputValue },
      { signal: controller.signal }
    );

    if (controller.aborted) return;
    locatorAutocomplete.querySelectorAll(".temporary").forEach((el) => el.remove());

    if (!response.length) {
      const noResults = document.createElement("calcite-notice");
      noResults.className = "temporary";
      noResults.open = true;
      noResults.kind = "danger";
      noResults.icon = "exclamation-mark-triangle";
      noResults.innerHTML = `<div slot="title">No results</div><div slot="message">Try something else</div>`;
      noResults.slot = "content-top";
      locatorAutocomplete.appendChild(noResults);
    } else {
      response.slice(0, 5).forEach((location) => {
        const item = document.createElement("calcite-autocomplete-item");
        item.className = "temporary";
        item.value = location.magicKey;
        item.heading = location.text;
        locatorAutocomplete.appendChild(item);
      });
    }
  }

  document.querySelectorAll(".locator-autocomplete").forEach((locatorAutocomplete) => {
    let controller;

    locatorAutocomplete.addEventListener("calciteAutocompleteTextInput", async (event) => {
      if (!event.target.inputValue) return;
      if (controller) controller.abort();
      controller = new AbortController();
      await getSuggestions(locatorAutocomplete, controller);
    });

    locatorAutocomplete.addEventListener("calciteAutocompleteChange", (event) => {
      const selected = [...locatorAutocomplete.querySelectorAll("calcite-autocomplete-item")].find(
        (item) => item.value === event.target.value
      );
      locatorAutocomplete.inputValue = selected?.heading;
    });
  });
</script>

Block Group component

Block Group is a new component that enables drag-and-drop reordering of grouped Block elements, providing a consistent way to manage sortable content. When the component specifies dragEnabled and other Block Group's have the same group value, child Blocks are sortable.

This release improves sorting consistency with List and List Item components, while streamlining Calcite's API by deprecating the dragHandle property on Block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<calcite-shell>
  <calcite-shell-panel slot="panel-end" width-scale="l">
    <calcite-panel heading="Task Manager">
      <p>📅 Today's Tasks</p>
      <calcite-block-group drag-enabled group="tasks" label="Today's Tasks">
        <calcite-block collapsible heading="🚀 Launch New Website" description="Final review before going live">
          <div slot="header-menu-actions">
            <calcite-action text="More Info" icon="information" text-enabled></calcite-action>
          </div>
          <calcite-label>
            Status
            <calcite-segmented-control width="full">
              <calcite-segmented-control-item value="Not Started">Not Started</calcite-segmented-control-item>
              <calcite-segmented-control-item checked value="In Progress">In Progress</calcite-segmented-control-item>
              <calcite-segmented-control-item value="Completed">Completed</calcite-segmented-control-item>
            </calcite-segmented-control>
          </calcite-label>
          <calcite-label>
            Progress
            <calcite-slider min="0" max="100" value="75"></calcite-slider>
          </calcite-label>
        </calcite-block>
        <calcite-block collapsible heading="📦 Ship Orders" description="Prepare and dispatch today's shipments">
          <calcite-notice open>
            <div slot="message">Reminder: Express shipping orders are due by 3 PM! 🚚</div>
          </calcite-notice>
        </calcite-block>
      </calcite-block-group>
      <p>📝 Upcoming Tasks</p>
      <calcite-block-group drag-enabled group="tasks" label="Upcoming Tasks">
        <calcite-block collapsible heading="📊 Weekly Report" description="Compile and submit performance metrics">
          <div slot="header-menu-actions">
            <calcite-action text="More Info" icon="information" text-enabled></calcite-action>
          </div>
          <calcite-label>
            Status
            <calcite-segmented-control width="full">
              <calcite-segmented-control-item value="Not Started">Not Started</calcite-segmented-control-item>
              <calcite-segmented-control-item checked value="In Progress">In Progress</calcite-segmented-control-item>
              <calcite-segmented-control-item value="Completed">Completed</calcite-segmented-control-item>
            </calcite-segmented-control>
          </calcite-label>
          <calcite-label>
            Completion
            <calcite-slider min="0" max="100" value="40"></calcite-slider>
          </calcite-label>
        </calcite-block>
        <calcite-block collapsible heading="📅 Schedule Team Meeting" description="Coordinate schedules for the next check-in">
          <calcite-notice open>
            <div slot="message">Availability poll needed—check with the team by EOD! 📅</div>
          </calcite-notice>
        </calcite-block>
      </calcite-block-group>
    </calcite-panel>
  </calcite-shell-panel>
  <calcite-panel heading="App Overview"></calcite-panel>
</calcite-shell>

Focus color token

A new global token, --calcite-color-focus, is available for designers and developers to customize the focus color. The CSS variable allows customization on the focus color in an application, such as supporting a component's kind in its focus color.

1
2
3
4
5
6
7
<style>
  calcite-button[kind="danger"] {
    --calcite-color-focus:var(--calcite-color-status-danger);
  }
</style>
<calcite-button>brand</calcite-button>
<calcite-button kind="danger">danger</calcite-button>

Dialog tokens

Dialog now offers additional configuration for customization in your apps with component tokens. Component tokens provide component-level overrides and allow customization of the component on the web via CSS variables. They can be set at the document's :root to override all components in an application, or directly to a specified component instance. Explore Dialog's CSS variables to learn more.

1
2
3
4
5
6
7
8
9
10
11
#my-custom-dialog {
  --calcite-dialog-background-color: var(--calcite-color-background);
  --calcite-action-background-color: var(--calcite-color-brand);
  --calcite-action-background-color-hover: var(--calcite-color-brand-hover);
  --calcite-action-background-color-pressed: var(--calcite-color-brand-pressed);
  --calcite-action-text-color: #000000;
  --calcite-action-text-color-pressed: #000000;
  --calcite-action-text-color-hover: #000000;
  --calcite-panel-header-background-color: var(--calcite-color-brand);
  --calcite-panel-footer-background-color: var(--calcite-color-border-3);
}

Tab Title icon color for iconStart and iconEnd

Tab Title now supports component tokens for iconStart and iconEnd, allowing developers to style each icon independently. This enhancement provides greater design flexibility, allowing configuration to differentiate icons within a Tab Title.

1
2
3
4
5
6
7
8
9
<style>
  calcite-tab-title {
    --calcite-tab-icon-color-start: blue;
    --calcite-tab-icon-color-end: green;
  }
</style>
<calcite-tab-title icon-start="home" icon-end="chevron-down">
  Dashboard
</calcite-tab-title>

Consistent width and height properties

Calcite has simplified its sizing properties with the width and height properties. Components will now use values of "s", "m", "l", "auto", "full" for width and "s", "m", "l" for height. The update deprecates the widthScale and heightScale properties in promoting consistency, improving responsiveness, and eliminating redundant sizing patterns.

The updated components include Button, Dialog, Dropdown, Notice, Segmented Control, Select, Sheet, Shell Panel, and Split Button.

Feature enhancements

• Time Picker 24-hour format
• Time Picker calciteTimePickerChange event
• Sheet's resizable property
• List custom filtering with filterPredicate
• Combobox filtering
• Form validation support for Rating and Slider
• Close Dialogs in visual order
• Slider label wrapping
• Inline Editable adds tooltips to controls
• Text Area's limitText property
• Input, Input Text, and Text Area's spellCheck property

Time Picker 24-hour format

Time Picker provides support for a 24-hour format using the hourFormat property, offering users more flexibility when selecting times and better compatibility with global time conventions.

Time Picker calciteTimePickerChange event

Time Picker now emits a calciteTimePickerChange event whenever the selected time changes. This event provides a reliable way to track and respond to user input in real time, enhancing interactivity in time-based workflows.

Sheet resizable property

Sheet features a resizable property, allowing users to adjust its height and width dynamically depending on position.

List custom filtering with filterPredicate

List offers a filterPredicate property, allowing developers to define custom filtering logic. This provides more control over search behavior, enabling more advanced filtering options such as partial matches, or case insensitivity.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<calcite-list id="example-list" filter-enabled>
  <calcite-list-item value="frodo" label="Frodo Baggins" description="The ring bearer"></calcite-list-item>
  <calcite-list-item value="bilbo" label="Bilbo Baggins" description="The ring finder"></calcite-list-item>
    <calcite-list-item value="gollum" label="Gollum" description="A former hobbit"></calcite-list-item>
  <calcite-list-item value="gandalf" label="Gandalf The Grey" description="A Wizard"></calcite-list-item>
</calcite-list>

<script>
  const listEl = document.getElementById("example-list");

  listEl.filterPredicate = (item) => {
    if (listEl.filterText === "smeagol") {
      return item.value === "gollum";
    }

    if (listEl.filterText === "fireworks") {
      return item.value === "gandalf";
    }

    return true;
  };
</script>

Combobox filtering

Combobox allows the filterProps property to filtering by the textLabel only. This change improves filtering accuracy by letting developers specify whether searches apply to value, textLabel, or both.

1
2
3
4
5
6
7
8
9
10
11
<calcite-combobox open>
  <calcite-combobox-item id="pineapple" text-label="Pinepple" description="Tropical Fruit" value="tropical"></calcite-combobox-item>
  <calcite-combobox-item id="strawberry" text-label="Strawberry" description="Temperate Fruit" value="temperate"></calcite-combobox-item>
  <calcite-combobox-item id="spinach" text-label="Spinach" description="Leafy Green Vegetable" value="leafy"></calcite-combobox-item>
  <calcite-combobox-item id="carrot" text-label="Carrot" description="Root Vegetable" value="root"></calcite-combobox-item>
</calcite-combobox>

<script>
  const comboboxEl = document.querySelector("calcite-combobox");
  comboboxEl.filterProps = ["textLabel"];
</script>

Form validation support for Rating and Slider

Rating and Slider provide support for form validation with the required and validationMessage properties, allowing developers to enforce user input requirements and provide clear feedback in their applications.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form>
  <h1>Example Form</h1>

  <calcite-label>
    Temperature:
    <calcite-slider required value="0" min="0" max="100" precise ticks="25" label-ticks label-handles
        max-label="Low temperature" min-label="High temperature" fill-placement="start" name="slider" validation-message="A value is required">
    </calcite-slider>
  </calcite-label>

  <calcite-label>
    Rate your experience:
    <calcite-rating required name="rating" validation-message="A rating is required"></calcite-rating>
  </calcite-label>


  <calcite-button type="submit">Submit</calcite-button>
</form>

Close Dialogs in visual order

Dialog now closes in visual order when multiple Dialogs are open and the Esc key is pressed. Instead of closing in the order they were opened, the most recently opened Dialog will now close first.

Slider label wrapping

Slider labels now wrap text properly, ensuring readability in cases where labels are long or the available space is constrained. This fixes an issue where long label text could cause the slider handle to be positioned off of the slider track.

Inline Editable adds tooltips to controls

Inline Editable includes tooltips for its controls, providing users more context for each control.

Text Area's limitText property

Text Area offers the option to strictly enforce the maxLength property when limitText is enabled, preventing users from being able to enter or paste text beyond the set limit.

Input, Input Text, and Text Area's spellCheck property

The new spellCheck property allows developers to enable or disable spellchecking for Text Area, Input, and Input Text, which aligns with native HTML behavior. This provides greater control over text validation, especially in cases where non-dictionary words (e.g., unique names or codes) should not be flagged as misspelled.

Accessibility and internationalization improvements

• Norwegian locale support
• Non-modal Dialog support for focusTrapDisabled
• Meter's high contrast support
• List's filterLabel property
• Navigation Logo usability improvements
• Chip's closeOnDelete keyboard close

Norwegian locale support

The Norwegian locale code has changed to no from nb. The nb locale is deprecated and will be removed in the future. However, the nb locale is still available so applications using it will continue to receive support for Norwegian until its removal. To learn more, visit Calcite's supported languages.

1
2
3
4
5
<!-- Norwegian locale support -->
<calcite-button lang="no" loading>Hei</calcite-button>

<!-- Deprecated Norwegian locale support -->
<calcite-button lang="nb" loading>Hei</calcite-button>

Non-modal Dialog support for focusTrapDisabled

Non-modal Dialogs can now prevent focus trapping to support more use cases. When focusTrapDisabled is specified in non-modal configurations the component will allow focus outside of the component, where the user can acknowledge or accept the Dialog to dismiss it, or continue to interact with other aspects of the UI.

Explore focus and no keyboard trap to learn more.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<calcite-dialog heading="Cookie notice" open placement="bottom-end" focus-trap-disabled>
  <div slot="content-bottom">
    Read the <calcite-link>cookie policy</calcite-link> or the <calcite-link>privacy policy
    </calcite-link> for more information.</div>
    <p>
      By accepting all cookies or browsing this site, you agree to the storing of cookies on your device to assist
      Acme Co. in analyzing visitor behavior, improving your experience, and delivering tailored advertising on and
      off our sites.
    </p>
    <p>
      Manage cookies here or at the bottom of any page.
    </p>
  <calcite-button slot="footer-start" appearance="outline" kind="neutral">
      Decline all
  </calcite-button>
  <calcite-button slot="footer-start" kind="neutral">
      Customize
  </calcite-button>
  <calcite-button slot="footer-end">
      Accept all cookies
  </calcite-button>
</calcite-dialog>

Meter's high contrast support

Meter offers high contrast support when users have the high contrast setting enabled on Windows operating systems. The component displays its value to support more users. Learn more about high contrast.

List's filterLabel property

When filtering content you can now specify what context is read back to assistive technologies using List's filterLabel property. When specified, its value serves as an accessible name for the filter's input field, offering additional context to assistive technology users. This behavior is similar to how the filterPlaceholder property provides context for visual users.

1
2
3
4
5
6
7
8
<calcite-list label="Trails" filter-enabled filter-label="Search for trails">
  <calcite-list-item label="Hiking trails" value="hiking-trails">
  </calcite-list-item>
  <calcite-list-item label="Snowshoeing trails" value="snowshoeing-trails">
  </calcite-list-item>
  <calcite-list-item label="Biking trails" value="biking-trails">
  </calcite-list-item>
</calcite-list>

Navigation Logo usability improvements

Navigation Logo offers support for non-actionable scenarios where no href is specified. Now, the component provides more appropriate roles, where when no link is provided the component is rendered as a <div>, and when a link is supplied is rendered as an <a>.

1
2
3
4
5
6
7
<!-- Navigation Logo rendered as a div -->
<calcite-navigation-logo slot="logo" heading="A view of the estuary" description="20 years of change where the river meets the sea">
</calcite-navigation-logo>

<!-- Navigation Logo rendered as an anchor -->
<calcite-navigation-logo href="https://a-great-homepage.com" slot="logo" heading="A view of the estuary" description="20 years of change where the river meets the sea">
</calcite-navigation-logo>

Chip's closeOnDelete keyboard close

Chip provides support to workflows where the component can be removed using the delete and backspace keys with the closeOnDelete property. While closable can remove the component when the component's close button is active or pressed, closeOnDelete provides more functionality for your UI and support for keyboard users.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<calcite-chip-group label="demo-group-label" selection-mode="single-persist">
  <calcite-chip label="CSV" icon="file-csv" closable close-on-delete value="CSV">
      CSV
  </calcite-chip>
  <calcite-chip label="Excel" icon="file-excel" closable close-on-delete value="Excel">
      Excel
  </calcite-chip>
  <calcite-chip label="KML" selected icon="file-kml" closable close-on-delete value="KML">
      KML
  </calcite-chip>
  <calcite-chip label="Text" icon="file-text" closable close-on-delete value="Text">
      Text
  </calcite-chip>
  <calcite-chip label="PDF" icon="file-pdf" closable close-on-delete value="PDF">
      PDF
  </calcite-chip>
</calcite-chip-group>

Changes since October 2024

Below is a full list of changes since October, which include:

• Breaking changes
• Features
• Bug fixes
• Performance improvements
• Deprecations
• Code refactoring

Breaking changes

• list, list-item, list-item-group, filter: The spacing changes affect content in the actions-start slot in addition to other rendered elements. Some styling updates may need to be applied to slotted actions or other adjustments based on the new scales.
• tokens: Size and Space token values have changed. Line Height tokens exported for JS and ES6 are now unitless.
• color-picker: The default width and height of the color-picker have been updated. Developers should review and adjust their layouts to accommodate these changes.
• list: Choose a displayMode of "nested" or "flat" according to space and nesting requirements.
• chip: The label property is now required and value is optional.
• radio-button: Removes the deprecated property guid from calcite-radio-button.
• progress: Refactors progress to use the value range of 0-100. Developers will need to provide a function to map existing values or use the updated range.
• shell-panel: Removes the following deprecated properties from calcite-shell-panel: detachedHeightScale, detached and the --calcite-shell-panel-detached-max-height CSS property.
• color-picker: Removes the following deprecated properties from calcite-color-picker: hideChannels, hideHex and hideSaved.
• action-group: Removes the deprecated layout property by converting it to an internal property.
• table: Removes the deprecated property zebra from calcite-table.
• checkbox: Removes the deprecated guid property from calcite-checkbox.
• combobox, dropdown, input-date-picker, input-time-picker, split-button: Components will no longer close automatically when disabled. Developers relying on this behavior will also need to update the open property as well.
• combobox, list: Filtering will no longer include item values by default. If value-filtering is desired, developers will need to configure items' metadata property.
• modal: This should not require changes, but we are including this in the breaking change release due to the different modal configurations that could be impacted by the default position change.
• input-time-zone: Developers using messageOverrides will need to make sure they do not reference removed entries.
• block: The component's label property is a required property and heading is an optional property.
• list: The component's label property is required to provide context between lists when dragging.
• For a consistent development experience, components now convert null to undefined, so developers will need to update code with strict null checks
• Components remain directly consumable, with no wrapper needed.
• floating-ui elements no longer take up space when closed (#10241)
• list: Modifies the component's keyboard sorting experience by using a dropdown menu to move list items. The ListItem dragSelected property and calciteListItemDragHandleChange event have been removed due to no longer being relevant.
• flow, flow-item: The new selected property on calcite-flow-item must be used to define which calcite-flow-item is shown.
• pick-list, pick-list-group, pick-list-item, value-list, value-list-group, value-list-item: Use the List component instead.
• action-bar, action-pad: When slotting actions within the component you must now set textEnabled on them if necessary.

Features

• accordion-item: Custom header and content spacing tokens (#10721) (fafd4d3)
• accordion-item: Stretch slotted actions to fill its height (#9250) (bf9c64f)
• accordion-item: Update token naming schema (#11070) (386355b)
• Add default focus color token (#10512) (92a2be0)
• autocomplete: Add autocomplete component (#10562) (cdacddd)
• autocomplete: Add scrollContentTo method and automatically scroll when navigating items via keyboard (#11153) (848bacd)
• autocomplete: Highlight text matching the inputValue (#11155) (5736082)
• block-group, block: Add block-group component (#11319) (3f77c6b)
• block-section: Add component tokens (#11032) (a7a99b1)
• block: Add component tokens (#11014) (5514944)
• block: Add required label property and mark heading as optional (#10739) (fcdfff0)
• button: Add component tokens (#10358) (7fb506f)
• chip: Add closeOnDelete prop (#10877) (0fab4a5)
• color-picker: Enable responsive layout (#10904) (289a431)
• color-picker: Update color field dimensions (#10903) (d951531)
• combobox-item, combobox-item-group: Update padding indentation for nested groups & items (#10847) (c6ef5e3)
• combobox-item: Add support for content-start slot (#11250) (82b96fa)
• combobox-item: Update selection state according to spec (#10945) (d834ed7)
• combobox, input-time-zone: Highlight text matches consistently (#11193) (d94f099)
• combobox: Add filterProps (#11180) (8c04175)
• date-picker: Add component tokens (#11380) (85125dd)
• Deprecate widthScale/heightScale in favor of width/height (#10786) (4c62b68)
• dialog, modal, popover, input-date-picker, input-time-picker, sheet: Support stacked component sequential closing with escape (#9231) (c0c5a1c)
• dialog, modal, popover, sheet: Add options prop to customize focus-trap (#11453) (9c2c677)
• dialog: Add 'custom-content' slot (#11072) (35897db)
• dialog: Add focusTrapDisabled property for non-modal dialogs (#11362) (44f486c)
• filter: Add label property (#11001) (942ad17)
• flow, flow-item: Add component tokens (#11365) (a69460f)
• flow, flow-item: Avoids removing flow-items from the DOM and adds selected property (#9390) (96648f5)
• graph: Add component tokens (#11355) (0a54e2f)
• icon: Add preload property (#10926) (49f9e3d)
• inline-editable: Add component tokens (#11357) (e37f8ae)
• input-date-picker, date-picker: Improve date picking experience (#8402) (d03bfa6)
• input-time-picker: Add hour-format property (#10997) (7468887)
• input,input-text,text-area: Support spellcheck property (#10489) (83912f3)
• input: Add component tokens (#10820) (ee926db)
• input: Improve display of resize handle for type textarea (#10866) (94072e6)
• label: Add component tokens (#10688) (f998840)
• link: Add component tokens (#10689) (9985b51)
• list-item: Add iconStart, iconEnd and iconFlipRtl props (#11004) (a639c78)
• list-item: Extend bottom border to include actions-start slot (#11116) (7a5764a)
• list-item: Update single-select icons (#10858) (feb1af6)
• list, list-item, list-item-group, filter: Add scales, update padding and spacing, update font sizes (#10853) (17b51f3)
• list, list-item, list-item-group: Add component tokens (#10669) (997b7da)
• list, list-item: Add non-interactive option to remove hover/pointer changes. (#10473) (cb4a464)
• list: Add displayMode property to choose between flat and nested lists (#10852) (41283df)
• list: Add filterLabel property (#11002) (1c2811d)
• list: Add filterPredicate property to handle custom filtering (#11044) (57a68b9)
• list: Require label for context when dragging between lists (#10702) (4696d76)
• list: Support moving between different lists via keyboard (#10480) (ed2c91d)
• loader: Add component tokens (#10979) (2b4c0bf)
• loader: Update loader to adhere to the latest spec (#10851) (76d34bf)
• menu-item: Add component tokens (#10654) (7178050)
• menu-item: Enhance component's interactive states (#10933) (01d7bbf)
• navigation-logo: Add component tokens (#10582) (a0b84e1)
• navigation-logo: Enable interactive states only when href is specified (#11202) (5ac17ef)
• navigation-user: Add component tokens (#10608) (6cdb98e)
• navigation: Add component tokens (#10644) (729e487)
• notice: Add component tokens (#11042) (2fb8715)
• pagination: Add component tokens (#11157) (f5354cd)
• pagination: Enhance component's interactive states (#10485) (739ca76)
• pagination: Remove gap at start and end of component. (#10523) (021a8f2)
• panel: Add component tokens (#10822) (dfbe3cd)
• panel: Control panel header action tokens (#11300) (f9f6abd)
• rating, slider: Add validation message to support form error handling (#10621) (b632449)
• rating: Add component tokens (#11150) (f23a319)
• segmented-control, segmented-control-item: Add component tokens (#11359) (91fcb70)
• select: Add component tokens (#11178) (262cf84)
• sheet: Add resizable property (#10521) (e599ae0)
• slider: Add component tokens (#10716) (ce740a7)
• stepper-item: Update component's active state background color (#10487) (4e0afa4)
• stepper-item: Update component's active state background color. (#10475) (b5eac59)
• switch: Add component tokens (#10647) (b339e26)
• tab-title: Add icon start/end custom CSS prop (#10871) (cb556cc)
• text-area: Add limitText prop to prevent input beyond max-length (#11440) (2cfc1c9)
• tile: Add design tokens (#10476) (11c7f1f)
• time-picker: Expose calciteTimePickerChange event (#11214) (6ebaed9)
• tooltip: Add component tokens (#10687) (3bf79eb)
• tree,tree-item: Update indentation (#10990) (3406ea6)

Bug fixes

• accordion-item: Fix rendering tied to named-slot content (#10447) (1a7ee66)
• accordion-item: Split header content padding (#10865) (03b2372)
• accordion-item: Stretch slotted actions only (#11082) (be90d1a)
• action-bar, action-pad: Do not modify text-enabled on slotted actions unless expanded is toggled (#9554) (6768696)
• action-group, input, menu: Fix setFocus issues in Chrome 128+ (#10676) (954a71d)
• action-menu: Fix toggle logic when action-menu is reconnected (#11139) (064d783)
• action: Active styles present with transparent appearance (#10988) (cab16f0)
• action: Component in transparent active mode should use -hover (#11075) (6d46017)
• action: Create localized template for aria-label (#10969) (cd53fd0)
• action: Disabled styles (#10987) (9d6572b)
• action: Reflect the icon property (#11282) (8b986d7)
• alert: Add public --calcite-alert-offset-size css token (#10872) (4085025)
• Allow custom Calcite CSS properties in style object type (#11051) (6148cf1)
• autocomplete: Allow hiding icon (#11239) (3f854e7)
• autocomplete: Fix item key functionality (#11191) (36c138a)
• autocomplete: Handle focusing when item is clicked and reset inputValue on form reset (#11099) (bc3e88f)
• autocomplete: Ignore disabled items when navigating via keyboard (#11242) (4230e28)
• block: Fix rendering tied to named-slot content (#10449) (deab4fe)
• block: Label property should not be required (#10833) (60058f4)
• Bundle-in non-ESM dependencies (#10766) (9994dc0)
• button, dialog, dropdown, notice, select, sheet, shell-panel, split-button: Fix width types (#10937) (2a4e4e4)
• carousel: Ensure correct autoplay display and animation (#11338) (21fe6c3)
• carousel: Improve Carousel navigation display (#11439) (20a3ea8)
• checkbox: Ensure that border shows in high contrast mode (#10823) (6f270cf)
• chip: Fix inverse close color (#11363) (3c25b44)
• chip: Provide label context to assistive technologies (#10888) (2e57ab2)
• color-picker: Ensure shorthand hex is expanded regardless of alpha channel presence (#11188) (9839ef0)
• color-picker: Fix error caused by initial value with a different format (#11351) (2cf9d2b)
• combobox-item-group: Cascade scale from combobox (#10908) (2ef562e)
• combobox-item: Fix icon color css override (#10874) (a712f17)
• combobox-item: Fix rendering tied to named-slot content (#10450) (b10dfc4)
• combobox-item: Replace type-enforced deprecated + required textLabel prop with runtime warning (#10855) (3faad7d)
• combobox, dropdown: Honor max-items when it matches total items (#10971) (ba8cfb4)
• combobox, input-time-zone: Fix initial item selection delay (#11326) (61f8c70)
• combobox, list: Stop filtering on value by default (#10791) (0e87519)
• combobox, stepper, table: Respect user hidden attribute (#10983) (531663e)
• combobox: Ensure disabled items get proper scale (#11400) (1df2476)
• combobox: Fix accessibility when an item's heading or label changes (#11289) (d4c842c)
• combobox: Fix sporadic change event emitted on initialization (#10952) (242fc49)
• combobox: Improve prop update times (#11383) (218c576)
• combobox: Include groups in filtering (#10511) (15cde1b)
• combobox: Update internal state after custom value is added (#11405) (f6d6052)
• combobox: Use heading as fallback for UI labels (#10879) (aa4b5cc)
• combobx: Display selected item when initally opened (#11427) (ccffc03)
• date-picker: Fix year-select width logic (#11071) (3f6ccc0)
• date-picker: No longer disable min/max value month in select menu (#11350) (42492b5)
• date-picker: Remove outline for header actions (#11369) (dcd22f6)
• dialog, modal, popover, sheet: Restore deactivating focus traps on outside click (#11058) (e0352b8)
• dialog, modal, popover: Add type to focusTrapOptions prop (#11481) (acb0f4d)
• dialog, panel: Prevent beforeClose from being invoked during initialization (#11038) (18ddcbe)
• dialog, panel: Restore relative positioning in content area (#10749) (0e02adc)
• dialog: Fix error when initially opened (#10868) (5f266a3)
• dialog: No longer modifies slotted panels background color (#11052) (0df6201)
• dialog: No longer modify slotted panels background color (#11074) (b72e050)
• dialog: Toggle focus-trap on DOM connect and disconnect (#11429) (58bebb7)
• dialog: Update content background color to match modal (#10856) (f63fd4a)
• docs: Add docs package export (#11221) (56cd26d)
• docs: Use updated translation bundle paths to generate translations.json (#11219) (6b676e4)
• dropdown-item: Keep focus ring when selected dropdown item is hovered (#10951) (a6bd8fa)
• dropdown: Avoid showing scroller when max-items equals items (#11480) (dc8f1d0)
• filter: Remove unnecessary inline margin from internal label element (#10963) (38b6470)
• Fix core transitions across components (#10836) (7451e6d)
• Fix open/close event emitting of initially open components (#11306) (06dd8f7)
• Floating ui elements set max-content for inline-size (#11095) (45dec17)
• Floating-ui elements no longer take up space when closed (#10241) (04524bb)
• flow-item: Fix TS error caused by FlowItemLike type (#10802) (2195f42)
• flow: Process items on loaded (#11364) (f208514)
• flow: Set focus on the selected flow item (#11127) (7709f2a)
• form: Add ariaHidden property to the hidden form input (#11418) (f88d4ce)
• inline-editable: Add tooltips for controls (#10538) (d30bafb)
• inline-editable: Fix cancel workflow (#11046) (2b1cf65)
• inline-editable: Fix rendering tied to default slot content (#10456) (50ede48)
• input-date-picker, input-time-picker, modal, sheet: Closes on escape when focusTrap is disabled (#10578) (0cd3e1f)
• input-date-picker, modal, tile-select: Avoid using refs that have been nulled (#11090) (a8d6141)
• input-date-picker: Remove hardcoded strings (#10741) (04a5310)
• input-time-picker: Retain focus inside the input when clicked (#10729) (34ffd20)
• input-time-zone: Add workaround for Factory time zone error in Chrome (#10964) (7de454f)
• input-time-zone: Ensure name-mode displays IANA time zone identifiers (#10923) (0923504)
• input-time-zone: Keep selection in sync when item-related props are set along with value (#11166) (6100abd)
• input-time-zone: Remove debugging log messages (#11106) (71471fd)
• input, input-number, input-text: Should not set slotted actions to be disabled (#10458) (6ed32c6)
• input, input-text, input-number: Restore handling of autofocus global attribute (#11118) (57b9aac)
• input: Avoid styling on non-reflected attributes (#11089) (8cfe146)
• input: Correctly apply placeholder styles (#11107) (fb38f87)
• input: Fix broken selector (#10973) (94e7f80)
• input: Fix clipping for type=file with Japanese locale (#11205) (0b099bd)
• input: Update files property on input event when type="file" (#11262) (42cce75)
• link: Fix underline animation (#10835) (345c318)
• list-item: Correct spacing errors in medium and large scales (#10962) (adb3203)
• list-item: Ensure consistent focus border color by referencing updated tokens (#11130) (00c5031)
• list-item: Fix selection indicator placement in RTL (#11288) (2239ee8)
• list-item: Improve drag handle spacing (#11156) (7bfe22a)
• list-item: Reflect the sortHandleOpen property (#11323) (62bfc88)
• list, list-item: Ensure change and select events are emitted after state is updated (#11079) (8b6bde0)
• list, sort-handle: Disable sort-handle when no move to items are present and item count is one (#11073) (b288f68)
• list: Don't require filterEnabled for filterPredicate usage (#11109) (4f4d79b)
• list: Drag event properties newIndex and oldIndex should only reflect list item indexes (#11402) (5915ff5)
• list: Fix issue where last call to debounced update filter logic would override args from previous calls (#11064) (ba38a7e)
• list: Include groups in filtering (#10664) (4fba1c8)
• list: Only focus on row when clicking a list item (#11310) (c4d3689)
• list: Update child list components when scale property changes (#10935) (7f71157)
• meter: Add fill style for high-contrast mode (#11392) (4e1ed10)
• modal: Fix issue caused by early opening logic calls (#11498) (8a43e73)
• modal: Fix rendering tied to named-slot content (#10469) (879779b)
• modal: Use fixed positioning on host to prevent Safari from clipping content in certain layouts (#9545) (cda8331)
• notice: Fix rendering tied to named-slot content (#10453) (90b4e55)
• panel: Add correct heading and description line height and alignment (#10944) (6a74411)
• popover, tooltip: Change display to contents (#11384) (7d974de)
• popover, tooltip: Drop relative-positioning to reduce risk of clipping (#11373) (e834d10)
• popover, tooltip: Skip ref setup logic on component removal (#11132) (88416b8)
• Popover: Popover reopens when trigger is clicked and autoClose = true (#10842) (9b309e7)
• Prevent transpilation issues by using this to reference static props (#11088) (e70fae5)
• progress: Convert value range to 0-100 (#10622) (a5f6767)
• segmented-control: Ensure change event emits after item update (#10818) (4133b6d)
• sheet: Fix rounded corners when displayMode="float" (#11086) (ada2a22)
• sheet: Remove some margin (#11103) (2d4cf91)
• shell-center-row: Ensure deprecation warning doesn’t show when using standalone shell or shell-panel (#10561) (0655f8f)
• shell-center-row: Fix rendering tied to named-slot content (#10451) (ba0b99a)
• shell-panel: Fix visual issues in displayMode="float-all" (#11410) (85af56d)
• slider: Avoid breaking thumb label on edges (#10922) (0d3fee0)
• sort-handle: Adjust icon color (#10663) (f09c62f)
• sort-handle: Fix dragging in Firefox (#11279) (64a92f0)
• sort-handle: Pass scale to handle action (#10942) (590cdbd)
• stepper-item: Keep initial focus on newly selected item (#11482) (430fbab)
• t9n: Make TypeScript inline .json type imports (#10804) (19822fd)
• table, table-row: Improve programmatic Table Row selection behavior (#11237) (69c6dab)
• table: Fix bordered styling in Firefox (#11466) (eaf21f3)
• text-area: Make readOnly prop writable (#11218) (cef861e)
• tile-group: Keep selection icon size consistent for large tiles (#11215) (0f5d196)
• tile: Allow percentage inline-size on slotted content to be based on host (#11283) (9b08055)
• tile: Wrap overflowing text content (#11213) (3640f19)
• time-picker: Display correct localized hour based on hour-format when no value is set (#11200) (5172e8e)
• tip: Fix rendering tied to named-slot content (#10470) (9a11aeb)
• tokens: Correct space and size tokens (#10727) (13c2df8)
• tooltip, popover: Honor prevented events (#11278) (28904e2)
• tooltip: Fix closeOnClick property in Safari (#10737) (2967622)
• tree, tree-item: Fix rendering tied to named-slot content (#10462) (80128f1)
• tree: Ensures lines length is accurate (#11036) (d27385c)
• tree: Fix has-children logic (#11347) (971b3b9)
• tree: Render lines correctly in RTL direction (#11346) (346a5cd)
• Use explicit module imports for dayjs (#11030) (03e02e5)
• Use inert on host elements instead of aria-hidden when host element is hidden (#11056) (e1014f4)
• utils/dom: Fix getModeName function to support auto mode (#10683) (98fe7f8)

Performance improvements

• combobox: Fix initialization performance regression (#11265) (8d6d848)

Deprecations

• action: Deprecate tokens (#10986) (b2df2c9)
• dialog: Deprecate the content slot (35897db)
• notice: Deprecate --calcite-notice-width token (#11212) (fe711cd)

Code refactoring

• action-group: Remove deprecated layout property (#10792) (77c16ef)
• checkbox: Remove deprecated guid property (#10797) (f4c395d)
• chip: Make label property required and value optional (#10787) (f95d23e)
• color-picker: Remove deprecated properties (#10790) (00e8ede)
• combobox, dropdown, input-date-picker, input-time-picker, split-button: Avoid modifying open based on disabled prop (#10793) (953740d)
• Drop Angular wrapper (#10675) (f663794)
• input-time-zone: Drop obsolete time zone translations (#10747) (f70041b)
• Migrate to Lumina (#10482) (9bffc3f)
• pick-list, pick-list-group, pick-list-item, value-list, value-list-group, value-list-item: Remove deprecated components. (#10653) (ddfdeeb)
• radio-button: Remove deprecated guid property (#10799) (4a3f199)
• shell-panel: Remove deprecated properties (#10794) (fd73980)
• table: Remove deprecated zebra property (#10795) (ef1e219)