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
display
of "nested" or "flat" according to space and nesting requirements.Mode - chip: The
label
property is now required andvalue
is optional. - radio-button: Removes the deprecated property
guid
fromcalcite-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
:detached
,Height Scale detached
and the--calcite-shell-panel-detached-max-height
CSS property. - color-picker: Removes the following deprecated properties from
calcite-color-picker
:hide
,Channels hide
andHex hide
.Saved - action-group: Removes the deprecated
layout
property by converting it to an internal property. - table: Removes the deprecated property
zebra
fromcalcite-table
. - checkbox: Removes the deprecated
guid
property fromcalcite-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
message
will need to make sure they do not reference removed entries.Overrides - block: The component's
label
property is a required property andheading
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
toundefined
, 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
drag
property andSelected calcite
event have been removed due to no longer being relevant.List Item Drag Handle Change - flow, flow-item: The new
selected
property oncalcite-flow-item
must be used to define whichcalcite-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
text
on them if necessary.Enabled
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
close
prop (#10877) (0fab4a5)On Delete - 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
filter
(#11180) (8c04175)Props - 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
limit
prop to prevent input beyond max-length (#11440) (2cfc1c9)Text - tile: Add design tokens (#10476) (11c7f1f)
- time-picker: Expose
calcite
event (#11214) (6ebaed9)Time Picker Change - 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
set
issues in Chrome 128+ (#10676) (954a71d)Focus - 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
text
prop with runtime warning (#10855) (3faad7d)Label - 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
focus
prop (#11481) (acb0f4d)Trap Options - dialog, panel: Prevent
before
from being invoked during initialization (#11038) (18ddcbe)Close - 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
filter
forEnabled filter
usage (#11109) (4f4d79b)Predicate - list: Drag event properties
new
andIndex old
should only reflect list item indexes (#11402) (5915ff5)Index - 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
display
(#11086) (ada2a22)Mode="float" - sheet: Remove some margin (#11103) (2d4cf91)
- shell-center-row: Ensure deprecation warning doesn’t show when using standalone
shell
orshell-panel
(#10561) (0655f8f) - shell-center-row: Fix rendering tied to named-slot content (#10451) (ba0b99a)
- shell-panel: Fix visual issues in
display
(#11410) (85af56d)Mode="float-all" - 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
read
prop writable (#11218) (cef861e)Only - 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
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 ondisabled
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
.