October 2024 Summary

Updates since 2.9

New components and initiatives

• Dialog
• Global configuration

Dialog

Introducing Calcite's newest component, Dialog. Dialog is designed for presenting focused interactions, tasks, or workflows to a user. Dialogs can be configured to suit a variety of use cases and interface needs, ranging from brief informational prompts to complex multi-step workflows. For instance, engaging users with onboarding or instructional content, or interrupting a workflow to present a choice or provide guidance.

Some use cases of Dialog may take the form of page-blocking interactions, where the modal property should be used, and a Scrim will be positioned behind the component to prevent interaction with the main content. For more information, visit Dialog's modal behavior.

The component's placement can be specified via the placement property, and offers styles where the component's placement can be further customized with its offset via the --calcite-dialog-offset-x and --calcite-dialog-offset-y CSS properties.

Dialog also offers a widthScale to specify the visual sizing, dragEnabled and resizable to drag and resize the component respectively, content slots, and provides accessibility features such as focus order and keyboard navigation.

1
2
3
4
5
6
7
8
9
10
<calcite-dialog open width-scale="s" heading="Unsaved changes" placement="top" drag-enabled resizable>
  <p>Are you sure you want to continue?</p>
  <p>There are unsaved changes, and if you proceed the changes will be lost.</p>
  <calcite-button slot="footer-start" appearance="outline" kind="neutral">
    Cancel
  </calcite-button>
  <calcite-button slot="footer-end">
    Proceed without saving
  </calcite-button>
</calcite-dialog>

Global configuration

Global configuration assists with client troubleshooting and detects and communicates the current version of Calcite for developers. Global configuration also provides context on component deprecations, and identifies alternative approaches and which major version the component is planned for removal. To learn more, explore Core concepts.

Detect the version

Since 2.10, developers can use the calciteConfig global variable to detect the Calcite version at runtime.

1
window.addEventListener("load", () => console.log(window.calciteConfig.version));

Log messages

Since 2.11, component deprecations are logged to the console by default. Developers can opt to remove messaging from production environments and builds using calciteConfig:

1
2
3
var calciteConfig = {
  logLevel: "off"
};

Feature enhancements

• Component CSS variables
• Popover's flipPlacements and Block's menuFlipPlacement
• List Item's unavailable property
• Tooltip improvements
• List's filterProps property
• Alert's timer improvements
• Slider improvements
• Combobox improvements
• Color Picker's value improvement
• Segmented Control with icon only
• Panel and Flow Item's slots
• Table's selectionDisplay property
• Dropdown's spacing
• Input Time Picker improvements
• Shell Panel's displayMode
• Carousel's display improvements
• Input Time Zone improvements

Component CSS variables

Calcite Design System is working towards support of component tokens, which allow for component customization via CSS variables. Some components already offer customization for designers and developers, and additional configuration with component CSS variables will be supported in future releases.

Some new variables include:

• Accordion Item's --calcite-accordion-item-background-color
• Avatar's --calcite-avatar-background-color and --calcite-avatar-corner-radius
• Dialog and Panel's background color with --calcite-dialog-background-color and --calcite-panel-background-color respectively
• Input's prefix and suffix sizings with --calcite-input-prefix-size and --calcite-input-suffix-size respectively
• Text Area's --calcite-text-area-min-height and --calcite-text-area-max-height

1
2
3
4
5
6
7
8
<style>
  #feedback-notes {
    --calcite-text-area-min-height: 5rem;
    --calcite-text-area-max-height: 10rem;
  }
</style>

<calcite-text-area id="feedback-notes" max-length="500"></calcite-text-area>

Popover's flipPlacements and Block's menuFlipPlacement

Popover now offers a flipPlacements property in tandem with its placement property, and Block provides menuPlacement and menuFlipPlacement properties to set different initial component placement and alter the placement when interacting with your UI.

1
2
3
4
5
6
7
8
<calcite-popover placement="bottom" heading="About this data" label="About this data" reference-element="popover-button" closable>
  ...
</calcite-popover>

<script>
  const popoverEl = document.getElementById("sample-popover");
  popoverEl.flipPlacements = ["leading", "trailing"];
</script>

List Item's unavailable property

List Item now offers an unavailable property. When enabled, unavailable makes the component's content appear inactive, while allowing users the ability to navigate to the List Item. Designers and developers can also supply additional context, such as why interaction is limited on the component. This differs from the component's disabled property, where interaction is prevented.

1
2
3
4
5
6
7
8
9
10
11
<calcite-list>
  <calcite-block heading="Summarize data" open>
    <calcite-list-item label="Summarize data points" value="analysis">
      <calcite-icon icon="analysis" slot="content-start"></calcite-icon>
    </calcite-list-item>
    <calcite-list-item unavailable label="Summarize raster within" value="raster-within-sum">
      <calcite-icon icon="raster-analysis" slot="content-start"></calcite-icon>
      <calcite-action id="info-tooltip" slot="actions-end" icon="lock" text="Not currently available"></calcite-action>
    </calcite-list-item>
  </calcite-block>
</calcite-list>

Tooltip improvements

Tooltip now correctly animates along the x-axis upon transitioning to the open state for the first time. Additionally, Button and Action now invoke Tooltips on mobile devices using tap, when a user interacts via touch. This feature enhancement adds more UI interactions for users across more devices in your apps.

List's filterProps property

List now provides a filterProps property to specify which properties to filter when using filterEnabled, where one or multiple property values can be used to filter. If not set, all properties will be matched including label, description, metadata, and value.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<calcite-list filter-enabled filter-placeholder="Filter waypoints">
  <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
  </calcite-list-item>
  <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
  </calcite-list-item>
  <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
  </calcite-list-item>
  <calcite-list-item label="Estuaries" description="Where the river meets the sea." value="estuaries">
  </calcite-list-item>
</calcite-list>

<script>
  const listEl = document.querySelector("calcite-list")
  listEl.filterProps = ["label"];
</script>

Alert's timer improvements

When autoClose is present, Alert now pauses the timer when the component is in focus. This improvement provides additional support to the previously offered pausing while hovering over the component via mouse.

Slider improvements

Slider now ensures that only integers can be selected when the snap property is true and step property is set to an integer. Additionally, text within the component can no longer be unintentionally highlighted.

1
2
3
4
5
<calcite-label>
    Rating
    <calcite-slider value="1.5" label-ticks max-label="5" min-label="0" ticks=".5" max="5" snap>
    </calcite-slider>
</calcite-label>

Combobox improvements

Combobox Item's description, shortHeading properties and content-end slot

Combobox Item now offers description and shortHeading properties. Where description provides additional context to an item, and shortHeading can represent the item in a compact format when the Combobox is closed. A new content-end slot has also been introduced for adding non-actionable elements after the component's content, such as an Avatar.

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
<calcite-combobox placeholder="Select a character" short-heading="Short">
  <calcite-combobox-item
    value="Bilbo Baggins"
    text-label="Bilbo Baggins"
    description="A strange and wonderful hobbit"
    short-heading="BB"
   >
    <calcite-avatar thumbnail="../images/bilbo.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
  <calcite-combobox-item
    value="Frodo Baggins"
    text-label="Frodo Baggins"
    description="The Ring-Bearer"
    short-heading="FB"
  >
    <calcite-avatar thumbnail="../images/frodo.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
  <calcite-combobox-item
    value="Gandalf"
    text-label="Gandalf"
    description="Some guy with insane fireworks"
    short-heading="GTG"
  >
    <calcite-avatar thumbnail="../images/gandalf.jpg" slot="content-end">content-end</calcite-avatar>
  </calcite-combobox-item>
</calcite-combobox>

Combobox Item's metadata property support

Combobox now features a metadata property, which allows users to provide additional information for items that can be used when filtering.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<calcite-combobox placeholder="Select an animal">
    <calcite-combobox-item value="Lion" text-label="Lion" class="cat"></calcite-combobox-item>
    <calcite-combobox-item value="Tiger" text-label="Tiger" class="cat"></calcite-combobox-item>
    <calcite-combobox-item value="Wolf" text-label="Wolf" class="dog"></calcite-combobox-item>
    <calcite-combobox-item value="Coyote" text-label="Coyote" class="dog"></calcite-combobox-item>
</calcite-combobox>

<script>
  const cats = document.querySelectorAll(".cat");
  const dogs = document.querySelectorAll(".dog");

  cats.forEach(element => {
    element.metadata = { type: 'cat', sound: 'roar' };
  });

  dogs.forEach(element => {
    element.metadata = { type: 'dog', sound: 'howl' };
  });
</script>

Combobox filter text value accessible

Combobox's filter text value is now able to be accessed with the new filterText property.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<p>Filter text: <span id="filter-text"></span></p>
<calcite-label>
  Sport
  <calcite-combobox placeholder="Select a sport" id="combobox">
    <calcite-combobox-item value="Soccer" text-label="Soccer"></calcite-combobox-item>
    <calcite-combobox-item value="Football" text-label="Football"></calcite-combobox-item>
    <calcite-combobox-item value="Disc Golf" text-label="Disc Golf"></calcite-combobox-item>
    <calcite-combobox-item value="Tennis" text-label="Tennis"></calcite-combobox-item>
    <calcite-combobox-item value="Pond Hockey" text-label="Pond Hockey"></calcite-combobox-item>
  </calcite-combobox>
</calcite-label>

<script>
const combobox = document.getElementById("combobox")
const filterText = document.getElementById("filter-text")

combobox.addEventListener("calciteComboboxFilterChange", function () {
  filterText.textContent = combobox.filterText;
})
</script>

Color Picker's value improvement

Color Picker will now immediately apply a hex value that has been pasted into the component's input. This change creates an expected behavior and improved user experience.

Segmented Control with icon only

Segmented Control now supports use cases where only an icon is present on a Segmented Control Item. The spacing around the icons is now consistent when there's no text content provided or when there's a value, but no text content.

1
2
3
4
5
6
7
8
9
<calcite-label>
  Marker style
  <calcite-segmented-control>
      <calcite-segmented-control-item value="circle" icon-start="circle"></calcite-segmented-control-item>
      <calcite-segmented-control-item value="square" icon-start="square" checked></calcite-segmented-control-item>
      <calcite-segmented-control-item value="triangle" icon-start="triangle"></calcite-segmented-control-item>
      <calcite-segmented-control-item value="plus" icon-start="diamond"></calcite-segmented-control-item>
  </calcite-segmented-control>
</calcite-label>

Panel and Flow Item's slots

Panel and Flow Item now offer a content-top slot for adding content above the default slot positioned below the action-bar slot, and a content-bottom slot for adding content below the default slot but above the footer. Additionally, Panel now features an alerts slot for placing Alert components within the Panel.

Table's selectionDisplay property

Table now includes a selectionDisplay property that allows the removal of the selection chip and clear button from above the component. This addition provides a solution to the use case where selectionMode is "single", but the presence of the chip could cause confusion as it implied that a user could select multiple options.

Table before selectionDisplay property	Table with selectionDisplay of "none"

Dropdown's spacing

Dropdown Group, Dropdown and Dropdown Item include additional icon spacing for consistency across the design system, improving nested indentations and visual hierarchy.

Dropdown components before the enhancement	Dropdown components with improved nested indentations

Input Time Picker improvements

Input Time Picker's popup dialog now closes when its value is empty and a user clicks outside of the component.

Shell Panel's displayMode

Shell Panel now offers two new displayMode's of "float-content" and "float-all". Where "float-content" does not display at full height with content separately detached from the Action Bar on the top of centered content. While "float-all" is detached from the Panel and Action Bar on top of centered content.

The change deprecates Shell Center Row and Shell Panel's displayMode's "float" value - use "float-content" instead. Learn more on Shell Center Row's deprecation.

Shell Panel's display-mode="float-content"	Shell Panel's display-mode="float-all"

Carousel's display improvements

Carousel now includes support for high Carousel Item counts by adjusting automatically to the number shown as the component's container width changes. The update is consistent with other components, such as Pagination.

Input Time Zone improvements

Input Time Zone includes multiple improvements improving its usability, including:

• The ability to display the region when mode is set to "region"
• A new search icon is added to the component's placeholder text
• Refinement to the component's open and close event order to ensure proper timings before, during, and after it has been opened and closed

1
<calcite-input-time-zone mode="region"></calcite-input-time-zone>

Accessibility and internationalization improvements

Since May Calcite has included additional accessibility and internationalization enhancements and improvements to reach wider audiences. Explore accessibility and localization resources to learn more.

• Action Bar's messageOverrides
• Tree support improvement
• Improved Input error context
• Dropdown opens via arrow keys
• Accordion Item's focus support
• Input Time Picker locale improvements
• Input Date Picker locale improvements

Action Bar's messageOverrides

Action Bar's collapse menu now offers messageOverrides to adopt for more users. The property allows developers to provide additional context to assistive technologies (AT) without altering the visual appearance to the component's "Collapse" or "Expand" text. Designers and developers can now adjust the visual label with expand and collapse while also supporting the label, and not affecting the visual state via expandLabel and collapseLabel.

1
2
3
4
5
const actionBarEl = document.getElementById("example-action-bar");
actionBarEl.messageOverrides = {
  expandLabel: "Expand accordion sample menu bar",
  collapseLabel: "Collapse accordion sample menu bar"
}

Tree support improvement

Accessibility improvements are now offered when Tree has a selectionMode of "ancestors", where the accompanying checkbox was refactored to an icon and the component's context is provided to AT via a new label property.

1
2
3
4
5
6
7
8
<calcite-tree selection-mode="ancestors">
    <calcite-tree-item label="Midwest Group">Midwest
      <calcite-tree slot="children">
        <calcite-tree-item>Great Lakes</calcite-tree-item>
        <calcite-tree-item>Northwoods</calcite-tree-item>
      </calcite-tree>
    </calcite-tree-item>
</calcite-tree>

Improved Input error context

Error message context to Input-based components is now supported to AT when the components status is reported as "invalid". The additional context provides more support to users that may have visual or cognitive impairments relying on AT to convey an error is present and more action is needed before form submission. Components with error announcements to AT include:

• Combobox
• Input Date Picker
• Input Number
• Input Text
• Input Time Picker
• Input
• Radio Button Group
• Segmented Control
• Select
• Text Area

Dropdown opens via arrow keys

When Dropdown is not open, the arrow up and arrow down keys support opening the component, where the arrow up key will focus on the first Dropdown Item and arrow down on the last item. If there is a selected item either arrow key will shift focus to the first selected item.

Accordion Item's focus support

Accordion Item now supports the setFocus method, where developers can shift focus to the component in their UI.

1
2
3
const accordionItemEl = document.getElementById("example-accordion-item");
const btnFocus = document.getElementById("shift-focus-button");
btnFocus.addEventListener("click", () => accordionItemEl.setFocus());

Input Time Picker locale improvements

Input Time Picker includes a fix for the Korean locale, properly displaying the meridiem, in English referred to as "a.m." and "p.m.".

Input Date Picker locale improvements

Input Date Picker includes additional support for the Bosnian (bs) and Italian - Switzerland (it-CH) locales, where the component was previously cleared erroneously.

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 May, which ensure components align with evolving design standards and consistency, but may visually change in apps.

• Block improvements
• Color Picker improvements
• Combobox changes
• Loader's new type
• Panel and Flow Item's slots
• Split Button's styles
• Table improvements
• Tile changes
• Tree icon improvements

Block improvements

Block now provides default padding of "0.75rem" for consistency in spacing across the design system. Additionally, Block Section has removed the status property in favor of the new iconStart and iconEnd properties for further icon customization in your apps.

Color Picker improvements

Color Picker's scope size has been reduced to "14px" circles, ensuring it matches the slider height across all scales for consistency. Additionally, when the alphaChannel is not in use, the sampled color swatch is now adjusted to match the size of the saved color swatches "20px" for small scale and "24px" for medium scale.

Before (No alpha-channel with larger sample swatch and scope)	After (No alpha-channel with smaller sample swatch and scope)

Combobox changes

When searching Combobox's matching terms are now highlighted for easier identification. Custom values are now appended to the top of the dropdown list, and the keyboard navigation focus order has been refined when selectionMode is set to "multiple", improving the user experience.

Loader's new type

An option of "determinate-value" was added to Loader's type property. The new type displays a percent sign alongside the value, where a user is provided with context on the percentage rather than a specific count in some use cases for improved usability.

Panel and Flow Item's slots

The footer of both Panel and Flow Item were refactored to include footer-start and footer-end slots. This change allows the Dialog component to have the same functionality as the deprecated Modal component.

Split Button's styles

Split Button now has matching styles for its divider across all appearance types for better visual consistency.

Table improvements

The select all checkbox in the Table header was visually always selected previously when selection-mode was set to "multiple". The checkbox selection has been improved to properly reflect the different selection states of the component.

Before (Unclear select all state)	After (Clear select all state)

Tile changes

Tile has been updated to properly contain slotted content that previously over-extended the boundaries of the component. The spacing for content slotted into the "content-top" and "content-bottom" slots is now more consistent when the component is used without an accompanying heading, description, or icon.

Before (Content over-extending)	After (Content contained)

Before (Uneven spacing)	After (Even spacing)

Tree icon improvements

Tree's selection affordance now uses icons instead of checkboxes when selectionMode property is set to "ancestors".

Before (Checkboxes)	After (Icons)

New deprecations

Calcite now tracks deprecations in changelogs to better equip designers and developers prior to major releases and future removal. Explore Calcite's global configuration to assist with troubleshooting, and learn more about deprecations.

• Modal deprecation
• Shell Center Row deprecation
• Action's compact property deprecation
• Checkbox and Radio Button's guid property deprecation

Modal deprecation

Modal was deprecated in 2.11, use the Dialog component instead. Learn more about Dialog including its usage, configuration, and support.

Shell Center Row deprecation

Shell Center Row was deprecated in 2.11. Use Shell Panel's displayMode property set to "float-content" or "float-all" instead.

Action's compact property deprecation

Action's compact property was deprecated in 2.11, consider alternative components and configurations based on use cases.

Checkbox and Radio Button's guid property deprecation

The guid property for the Checkbox and Radio Button components has been deprecated in 2.13, use a unique id attribute instead.

Changes since May 2024

A full list of changes since May include:

• Features
• Bug fixes
• Performance improvements
• Deprecations

Features

• Include version in global config (#9536) (86eefb0), closes #8848
• Provide info message on stamped version instead of warning (#9739) (b25cb7b)
• accordion, accordion-item: Add component tokens (#9861) (48f7f08)
• action, action-bar, action-group, action-menu, action-pad: Add component tokens (#10058) (de96c24)
• action-group, block, panel: Add menuPlacement and menuFlipPlacements properties (#10249) (5ba3112)
• action-menu, combobox, dropdown, input-date-picker, popover: allow logical placements for flipPlacements property. #8825 (#9490) (45aabaa)
• action-bar, action-pad: add expandLabel and collapseLabel to messages (#9497) (12407eb), closes #5539
• color-picker, color-picker-hex-input: Add input auto commit, blur and auto select enhancements. (#9701) (b2be625)
• combobox, combobox-item:
  • Add description, shortHeading props and content-end slot (#9771) (78eb555)
  • Add metadata support for filtering (#9819) (5de7787)
• dialog, panel: Add css properties for background-color (#10387) (d725293)
• input, input-number, input-text: Add prefix and suffix width css tokens (#10206) (7a6ee82)
• input-date-picker, input-time-picker: support form validation for min/max constraints (#9677) (38fd878), closes #8065 #9282
• panel, flow-item:
  • Add footer-start and footer-end slots (#9374) (3def3ea), closes #8981
  • Add "alerts" slot (#9778) (8b9b820)
  • Add beforeClose property (#9770) (aefd3cb)
  • Add scale property (#9730) (27c597e)
• popover, action: Add component tokens (#10253) (80e8112)
• accordion-item: Update component tokens (ca932b5)
• alert:
  • Add queue property to prioritize the ordering of alerts when opened (#10029) (3aa47a4)
  • Add component tokens (#10218) (550427b)
  • Apply --calcite-alert-corner-radius to internal close button (#10388) (f50c170)
• avatar: Add component tokens (#10280) (f8f881b)
• block: add icon start/end properties (deprecate icon slot and status), add actions-end slot (deprecate control), add content-start (#9535) (7117c6b), closes #4932
• checkbox: Add component tokens (#10221) (1d87dcf)
• chip:
  • Enhance multi-select group affordance (#9286) (fd150e1)
  • Add component tokens (#10179) (ff82570)
• color-picker: adjust thumb and color preview sizes to follow updated spec (#9523) (41dc551), closes #9412
• color-picker-hex-input: auto apply new color after typing/pasting hex code (#9561) (8b34583), closes #7057
• carousel: Improve support for high item counts (#10315) (6ad2612)
• combobox:
  • add filterText prop (#9654) (01d01de), closes #7212
  • highlight filter matches (#9425) (0d538c8), closes #9026
  • Append custom values to top of dropdown (#9817) (bd55097)
• combobox-item:
  • Apply heading color according to updated spec (#9883) (9f642ff)
  • Add heading property (deprecates textLabel) and add label property (#9987) (90920a0)
• dialog:
  • Add padding to default slot (#9871) (9d89d1d)
  • Adds new dialog component and deprecates the modal component (#9751) (0111c23)
  • Add CSS variables to offset the position (#9904) (660f0c5)
  • Add escapeDisabled property (#10081) (1ca8fba)
  • Add outsideCloseDisabled property (#9978) (f1d89b9)
  • Add resizable and dragEnabled properties (#9804) (e3e499e)
• filter: adds ability to match only specific filter data properties (#9541) (137d9ae), closes #5063
• handle: Add component tokens (#10262) (5e73b44)
• icon:
  • Type icon names (#9650) (7513f3a)
  • Add component tokens (#10062) (34d5689)
• input-time-zone:
  • add offsetStyle prop (#9426) (dbc6c81), closes #8716
  • Display selected time zone country in region mode selection (#9988) (1575729)
• list: add filterProps property to specify which properties to filter against (#9622) (a253c00), closes #9619
• list-item: Add unavailable property (#10377) (9332733)
• loader: Add determinate-value type (#9957) (7f21726)
• panel:
  • Add --calcite-panel-content-space style (#10117) (0e3ebcb)
  • Improve panel header layout (#10446) (12f1476)
• popover: Apply component tokens to arrow (#10386) (2d19268)
• progress: Add component tokens (#10267) (8c1259f)
• shell-panel: Deprecate "float" displayMode and add "float-content" and float-all (#9795) (bf93728)
• split-button: add placement and flipPlacements property (#9548) (bc2c2c6), closes #9542
• table: Update multiple selection iconography (#10125) (f2b2016)
• text-area: Add component tokens (#10343) (d2504b7)
• tooltip:
  • Support touch events (#9487) (633706b)
  • Allow focusing and clicking on interactive elements within a tooltip (#9914) (a3c144c)

Bug fixes

• Ensure beforeOpen/open and beforeClose/close events emit properly (#9958) (7e2764f)
• Fix issue in Firefox where disabled elements were incorrectly enabled when a sibling was enabled (#9710) (cd4d52c)
• Fix regression causing open/close events from emitting in proper order (#9560) (fa5b415), closes #9559
• Improve browser check to resolve SSR errors (#9897) (bdb225b)

• Properly set aria attributes on components (#10404) (864f3e3)
• Remove aria-disabled from components where necessary (#10374) (4f8c16c)

• Widen icon type to allow string (#9915) (44138b1)
• deps: Move @types/sortablejs as a dependency so the public types resolve properly (#9786) (3d47c52)
• combobox, input-date-picker, input-number, input-text, input-time-picker, input, radio-button-group, segmented-control, select, text-area: Use toAriaBoolean in aria-invalid attribute to provide valid AT error messaging (#10079) (78bc096)
• dialog, flow-item: Slotted closable panels should not close the component (#10130) (ce2513d)
• input, combobox, input-date-picker, input-number, input-text, input-time-picker, radio-button-group, segmented-control, select, text-area: Provide clear field error messaging for AT (#9880) (46ad7d2)
• input, input-number, input-text: No longer set focus when a validation message is clicked (#10008) (529bb5a)
• input-date-picker, date-picker: ensure day selection doesn't activate the previous day in certain scenarios (#9424) (ab77212), closes #9422
• input-date-picker, input-time-picker: focus input element on setFocus (#9584) (c7b8a68)
• list, filter: Fix sync between list items and filtered data (#10342) (9a66601)
• panel, flow-item:
  • Fix footer-padding CSS prop regression (#9757) (f935790)
  • Prevent footer slots from conflicting with each other (#9856) (cffaff8)
• accordion-item: Align focus styles across browsers (#9944) (2e29b42)
• action: Prefer disabled in favor of aria-disabled (#10367) (1895c07)
• action-pad:
  • Fix horizontal action group alignment (#10359) (7b03745)
  • Update layout on action-group elements slotted after initialization (#10355) (cf139fa)
• alert:
  • pause auto-close alert when link focused (#9503) (fa9a829), closes #5960
  • Properly form a queue of alerts (#10032) (b24d6ac)
• block:
  • add accessible label for slotted controls (#9502) (a9054d5), closes #8037
  • Remove top padding when no heading is defined (#9782) (704f5df)
• block-section:
  • restore block toggling when clicking on the header switch (#9472) (519a11c), closes #9454 #9194
  • adjust text hierarchy (#9580) (801152c), closes #6905
  • Apply missing CSS class to start/end icon (#9688) (2169ed2)
• card: Properly handle slotted elements (#10378) (99a7148)
• carousel:
  • Prevent unexpected keyboard autoplay activation (#9621) (f674964), closes #9620
  • Prevent duplicate animation when navigating via keyboard (#9848) (cfdbd44)
• color-picker: Prevent text selection when using color sliders/field (#10043) (ab33e4d)
• combobox:
  • fix navigating initially when multiple items are selected (#9613) (5d9509b), closes #6776
  • no longer hides input when a selected item chip is focused (#9625) (24c45b3), closes #6750
  • only open when text exists and filtered items are present (#9618) (9a7f443), closes #9617
  • open the component when typing within it (#9543) (ab09c71), closes #9401
  • allow arrow selection of entered text (#9629) (df5e654), closes #9614
  • Update placeholder-icon color (#9956) (d916ca4)
  • Correctly select an item with selection-mode=‘single-persist’ when items have the same values (5401ea6)
• combobox-item: Tweak center content font-weight and spacing (#9818) (a67c4af)
• dialog:
  • Fix menu positioning when when overlayPositioning is 'fixed' and menuOpen is true (#9891) (4390177)
  • Fix escapeDisabled when the escape key is pressed on the panel (#10097) (9a5f1f1)
  • Allow shell to be slotted inside (#10118) (ea3a6de)
  • Only prevent default on escape key when escapeDisabled is true (#10336) (0083630)
• dropdown: Open dropdown on ArrowDown & ArrowUp keys (#10264) (98548e4)
• filter: Fix setFocus method (#10149) (f4a959a)
• flow-item:
  • fix inverted footer start/end slots (#9681) (69cd6a5), closes #8981
  • Set closed property to true when internal panel is closed (#9715) (f7d2a4f)
• input-date-picker:
  • Ensure initial value is in range (#9894) (7d05134)
  • Fix selection for the "bs" and "it-CH" locales (#9976) (368d9e2)
• input-date-picker: Prevent console error when using a lang (#10162) (e7bf604)
• input-number: Restore decimal input mode default (#9741) (1165dca)
• input-time-zone:
  • Translate region names (#9940) (f975adb)
  • Fix region mode labeling and value mapping (#10345) (cf36299)
  • Fix region mode quirks after update (#10413) (c137d1f)
• label: Prevent focusing and toggling elements slotted within a label when a text selection occurs (#9990) (49d6ae1)
• list:
  • fix mobile device dragging with nested lists (#9573) (6f466aa), closes #9521
  • enable dragging on list items contained within a list that supports dragEnabled (#9660) (5010ef9), closes #9662
• list-item:
  • hide nested list items by default (#9474) (fb06ef9), closes #9400
  • Improve focus outline appearance (#9653) (b3d2cb2), closes #7538
  • improve list item outline (#9675) (b8c2fff), closes #7538
  • Prevent scrolling when item is focused. (#9948) (eab1e06)
• pagination: use semantic internal elements (#9479) (b70d7d9), closes #7804
• panel:
  • prevent menu actions from being clipped in Safari (#9488) (29eb4ce), closes #8028
  • Correct footer padding and layout (#9868) (1e02ece)
  • Define heading and description line height (#10085) (5478eb9)
  • Initially closed panel should be hidden (#10308) (46de96b)
• popover:
  • correct border radius on close button (#9485) (d0fba56), closes #8208
  • Update focus trap elements on mutation observer (#10357) (725254a)
• radio-button-group: Remove blank clickable space outside of label (#9793) (4cc24a0)
• segmented-control:
  • Make check state update correctly (#9733) (602c922)
  • Honor appearance, layout and scale when items are added after initialization (#10368) (98177f0)
• shell:
  • Fix resizing a slotted shell-panel when clicking to resize (#9846) (326001c)
  • Update shell to correctly position calcite shell panel at shell's bottom (#9748) (5959db7)
  • Fix z-index of slotted popover elements (#10325) (7fe1601)
• slider:
  • Prevent text selection when using the slider (#10073) (04bf325)
  • Resolve step & snap floating point precision (#10148) (613bc47)
• stepper-item: Update component to take full width when parent's layout is "vertical" (#10009) (03a5a30)
• tab-title: Adjust hover styling for bordered Tab Title (#9867) (a77cd27)
• tabs:
  • Handle tab close events that remove the associated tab-title and tab elements from the DOM (#9768) (bda619c)
  • Update tab title indicator display (#9666) (5f0914b)
• text-area: Ensure border-color token doesn't override invalid styles (#10390) (699e166)
• tile:
  • expose selected property (#9583) (d15f667), closes #9582
  • Center align contentTop and contentBottom slots when alignment prop equals "center" (#9732) (1a8393b)
  • Center align slot's text when alignment is equal to center (#9773) (8611bfc)
• time-picker: Render meridiem first for korean locale (#9842) (897f924)
• tooltip:
  • Allow focusing on a reference element and then clicking on a tooltip (#9878) (dfca2d4)
  • Closed tooltips should not reappear (#10420) (a2f3925)
• tree,tree-item: Replace checkbox with div and a11y attributes (#9849) (b1ac951)

Performance improvements

• input-time-zone: Improve memory footprint by leveraging browser cache and releasing utils after their use (#9945) (a3d2141)

Deprecations

• checkbox, radio-button: Deprecate 'guid' properties (#10445) (9729ccf)

Compatibility

The 4.31 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 2.12.0. In your application, we recommend using the same version or any minor version greater than ^2.12.0.

If you are using version 4.30 it is recommended to use Calcite's 2.8.5, or any minor version greater than ^2.8.5.