Changelog for 3.0

February 2025

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)

Compatibility

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

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