October 2023 Summary

Updates since 1.4

New components

Calcite has added new components to enhance and support your UI, which include:

• Table
• Meter
• Input Time Zone
• Sheet

Table

Table and related components Table Header, Table Row, and Table Cell provide an effective way of organizing complex data and content in your application organized by row and column.

For larger amounts of data, pagination can be enabled with pageSize, which will keep the table-header and table-footer slots visible while Table Rows are paginated. Additionally, the component's support selections when selectionMode is set to "single" or "multiple", which displays the current number of selected Table Rows with the ability to clear selections.

To ensure assistive technologies can accurately associate cells and their content Table Rows should be slotted into the applicable table-header or table-footer slot.

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
<calcite-table caption="Acme's Regional hiking trails" bordered>
  <calcite-table-row slot="table-header">
    <calcite-table-header heading="Hiking trail" description="Designated routes"></calcite-table-header>
    <calcite-table-header heading="Season" description="(all, summer, winter)"></calcite-table-header>
    <calcite-table-header heading="Terrain type" description="(paved, gravel)"></calcite-table-header>
    <calcite-table-header heading="Length" description="(in miles)"></calcite-table-header>
  </calcite-table-row>
  <calcite-table-row>
    <calcite-table-cell>Prairie Loop</calcite-table-cell>
    <calcite-table-cell>All seasons</calcite-table-cell>
    <calcite-table-cell>Paved</calcite-table-cell>
    <calcite-table-cell>2.2 miles</calcite-table-cell>
  </calcite-table-row>
  <calcite-table-row>
    <calcite-table-cell>Trout Brook</calcite-table-cell>
    <calcite-table-cell>Summer</calcite-table-cell>
    <calcite-table-cell>Gravel</calcite-table-cell>
    <calcite-table-cell>1.5 miles</calcite-table-cell>
  </calcite-table-row>
  <calcite-table-row>
    <calcite-table-cell>Interpretive</calcite-table-cell>
    <calcite-table-cell>All seasons</calcite-table-cell>
    <calcite-table-cell>Gravel</calcite-table-cell>
    <calcite-table-cell>0.4 miles</calcite-table-cell>
  </calcite-table-row>
  <calcite-table-row>
    <calcite-table-cell>Deer Valley</calcite-table-cell>
    <calcite-table-cell>All seasons</calcite-table-cell>
    <calcite-table-cell>Gravel and Paved</calcite-table-cell>
    <calcite-table-cell>2.3 miles</calcite-table-cell>
  </calcite-table-row>
</calcite-table>

Meter

Meter can be used to represent an available quantity of a measurable unit, such as the amount of storage used on a hard drive. It can also communicate significant quantity thresholds that could impact a user's experience.

The component accepts min values of less than zero, and may have max values of greater than or less than one hundred. Meter's value can fluctuate, and when fillType is "range" can convey meaning through the low and high properties.

There are also customized label properties available with rangeLabels, which include valueLabelType and rangeLabelType, that can be configured as "units" or "percent".

1
<calcite-meter label="Completed projects" value="15" range-labels value-label></calcite-meter>

Input Time Zone

Input Time Zone is an input-driven component enabling a user to select from a list of worldwide time zones. Where no value is provided, the user's time zone will be selected by default.

1
<calcite-input-time-zone></calcite-input-time-zone>

Sheet

Sheet provides an ephermeral container for focused workflows and tasks with a page-blocking Scrim container. The component can be used when providing focused content, short dialogues, and to contain Navigation and Menu regions.

It's use should command the user's attention for a focused task, such as navigating menus, which prevent interaction with the UI while open before it is dismissed. For additional considerations, explore Sheet's recommendations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<calcite-sheet label="Application menu" id="example-sheet">
  <calcite-panel closable heading="Application menu" id="example-panel">
    <calcite-menu layout="vertical" label="Application menu">
      <calcite-menu-item icon-start="car" text="Cars"></calcite-menu-item>
        <calcite-menu-item icon-start="road-sign" text="Trucks">
        <calcite-menu-item icon-start="trucking-time" slot="submenu-item" text="Local"></calcite-menu-item>
        <calcite-menu-item icon-start="trucking-distance" slot="submenu-item" text="Regional">
      </calcite-menu-item>
      </calcite-menu-item>
        <calcite-menu-item icon-start="plane" text="Airplanes"></calcite-menu-item>
        <calcite-menu-item icon-start="biking" text="Bicycles"></calcite-menu-item>
    </calcite-menu>
  </calcite-panel>
</calcite-sheet>

Responsive Design

Calcite is working towards a responsive design initiative across all components. Some components now have responsive design in mind to support more workflows, devices, and use cases, which include:

• Alert
• Pagination

Alert

Alert is scalable across large and smaller devices, where queued alerts and Actions slotted in "actions-end" will be reallocated to the bottom of the component at smaller resolutions.

Pagination

Pagination is scalable across large and smaller devices, whether you are designing an app for desktop, within additional components, or with mobile in mind.

Component functionality

Enhancements to support component functionality are now available, which include:

• Input Time Picker supports fractional seconds
• Combobox single persist selection
• Input Number integer property
• Color Picker rounded focus outline
• Block scrolling support

Input Time Picker supports fractional seconds

Input Time Picker has been extended to include millisecond support in it's display, which can also be edited.

1
<calcite-input-time-picker step="0.01" value="10:37:09.50"></calcite-input-time-picker>

Input Number integer property

Input Number now supports integers only with the integer boolean. When true, the property restricts the component to integer numbers only and disables exponential notation.

1
2
3
4
5
<!-- Only integers (value is 55) -->
<calcite-input-number integer value="5.5"></calcite-input-number>

<!-- Floats allowed (value is 5.5)-->
<calcite-input-number value="5.5"></calcite-input-number>

Combobox single persist selection

Combobox contains a new selectionMode, where one item is allowed and required. When specified requires the user to select one Combobox Item from the component.

1
2
3
4
5
6
7
8
9
10
<calcite-combobox placeholder="Select a field" selection-mode="single-persist">
    <calcite-combobox-item value="Natural Resources" text-label="Natural Resources"></calcite-combobox-item>
    <calcite-combobox-item value="Agriculture" text-label="Agriculture"></calcite-combobox-item>
    <calcite-combobox-item value="Forestry" text-label="Forestry"></calcite-combobox-item>
    <calcite-combobox-item value="Mining" text-label="Mining"></calcite-combobox-item>
    <calcite-combobox-item value="Business" text-label="Business"></calcite-combobox-item>
    <calcite-combobox-item value="Education" text-label="Education"></calcite-combobox-item>
    <calcite-combobox-item value="Utilities" text-label="Utilities"></calcite-combobox-item>
    <calcite-combobox-item value="Transportation" text-label="Transportation"></calcite-combobox-item>
</calcite-combobox>

Color Picker rounded focus outline

Color Picker's focus outline for thumb displays has been updated to a rounded shape.

Block scrolling support

Block now support custom scrolling, which can be defined to fit your app's needs.

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
<style>
  calcite-block {
  height: 200px; /* Specify a height to your use case */
  overflow: hidden;
}
.scroll-block-container {
  height: 100%;
  overflow-y: scroll;
}
</style>
  <calcite-block heading="Layers" open>
    <div class="scroll-block-container">
      <calcite-list selection-mode="multiple">
        <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
          <calcite-action slot="actions-end" icon="layer" text="Trails layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
          <calcite-action slot="actions-end" icon="layer" text="Waterfalls layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
          <calcite-action slot="actions-end" icon="layer" text="Rivers layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Estuaries" description="Where the river meets the sea." value="estuaries">
          <calcite-action slot="actions-end" icon="layer" text="Estuaries layer"></calcite-action>
        </calcite-list-item>
      </calcite-list>
    </div>
  </calcite-block>

Accessibility and Localization

Calcite continues to ensure the applications and experiences you create are usable by a wide range of audiences leveraging the W3C Accessibility Standards. Since May, Calcite has added additional accessibility enhancements and resources to support you in developing web applications, which include:

• Checkbox target size
• Text Area character limit provided to AT users
• Action Group context provided to AT users

Checkbox target size

Checkbox now includes support for WCAG Success Criterion 2.5.8: Target Size (Minimum) Level AA of a 24 by 24 CSS pixel hitbox optimized for touch users.

Text Area character limit provided to AT users

Text Area now provides context to assistive technology (AT) when the component's character count is exceeded when the maxLength value is exceeded by the user, where AT will provide the current character length and reference the maximum character limit.

Action Group context provided to AT users

Action Group now provides group content with its label property, enabling you to support more users in your apps.

1
2
3
4
5
6
7
<calcite-action-bar>
  <calcite-action-group label="Editing">
    <calcite-action text="Home" icon="home"></calcite-action>
    <calcite-action text="Styles" icon="add-in-edit"></calcite-action>
  </calcite-action-group>
  <calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-bar>

Additional context also be achieved for the last group in Action Bar and Action Pad with the actionsEndGroupLabel property, like so:

1
2
3
4
5
6
7
<calcite-action-pad actions-end-group-label="More options are available">
  <calcite-action-group label="Editing">
    <calcite-action text="Home" icon="home"></calcite-action>
    <calcite-action text="Styles" icon="add-in-edit"></calcite-action>
  </calcite-action-group>
  <calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-pad>

Changes since May 2023

A full list of changes since May, include:

• Features
• Bug fixes

Features

• Allow sharing focus trap stacks via configuration global (#7334) (934a19f)
• Automatically import and define Calcite Components when importing their React wrapper (#7185) (bf0ff67)
• Improve focus behavior in components (#7277) (ad9fbca)
• action-bar, action-pad, action-group: Add label properties for group context (#7415) (b34f36d)
• block, block-section: Add setFocus method (#7208) (35d4bbb)
• block, input-time-picker, notice: adds open, close, beforeOpen, and beforeClose events for consistent event handling (#7494) (04ce758), closes #5056
• flow, flow-item: Allow calciteFlowItemBack event to be cancelled (#7855) (b74b4df), closes #7869
• input-date-picker, input-time-picker: add status property (#7915) (4d53346), closes #5723 #4276
• panel, flow-item: add support for collapsing content (#7857) (855754d), closes #7498
• action-bar: Add "actions-end" slot (deprecates "bottom-actions") (#7435) (1bf14ff)
• action-group:
  • Adds overlayPositioning property. (#7366) (ca9f35a)
  • add css custom properties to define gap and padding when layout is "grid" (#7763) (b9bd0de), closes #7380
• action-menu: Add appearance property to configure trigger appearance (#7867) (36ceaf1)
• alert: make component responsive (#7755) (66222b5), closes #6673
• block: Improve block's content layout to allow scrolling (#7367) (ecbf17b)
• checkbox: add WCAG AA recommended minimum 24px square hotspot optimized for touch users (#7773) (f13e2c4), closes #6692
• color-picker: Replaces thumb focus outline to rounded (#7378) (d803980)
• combobox: Add "single-persist" selection mode (#7583) (dab06a3)
• filter: Add filter method (#7127) (5a4283f)
• flow:
  • Adds setFocus method (#7252) (2472c58)
  • Add support for custom flow-item elements (#7608) (197adfe)
  • Split up custom flow item interfaces (#7666) (6c22e7c)
• input-date-picker: Normalize year to current century for user typed values only (#7638) (a1db718)
• input-number: Add integer property (#7646) (cd66a6d)
• input-time-picker: Support fractional seconds (#7532) (c2bf34b)
• input-time-zone:
  • Add input-time-zone component (#6947) (87bd496)
  • add max-items support (#7705) (c698c27), closes #7738
  • add time zone offset and name mode (#7913) (80bd6ae), closes #7430
• list:
  • Add slots for filter actions (#7183) (da07ab1)
  • Add support for dragging items. (#7109) (7324f70)
  • add newIndex and oldIndex event details to calciteListOrderChange event (#7874) (0d5cc20), closes #7875
• menu-item: Update spacing and icon layout (#7381) (5659671)
• meter: Add meter component (#7401) (47163ed)
• navigation-logo: Increase font-size of heading with no description (#7081) (355e101)
• pagination: enable responsive layout (#7722) (933a910), closes #6687
• sheet:
  • Add sheet component (#7561) (f12a393)
  • Update default widths (#7617) (47d2c0b)
• shell: Add "sheets" slot (#7579) (e798765)
• switch: Updates focus outline to be rounded (#7390) (2616b82)
• table: Add table and related components (#7607) (b067e72)
• text-area:
  • Provide additional context for AT users when character limit exceeds on form submission (#7299) (c5678eb)
  • Provide additional context for AT users when character limit exceeds (#7412) (c1af3c7)

Bug fixes

• Add drag styles for improved UX (#7644) (afbb764)
• Ensure mouse events are blocked only when components are disabled (#7031) (308ccda), closes #7022
• Ensure mouse events are blocked for disabled components in Firefox (#7107) (271d985)
• Ensure label only focuses the first labelable child (#7553) (426159c)
• Fix open/close event emitting in Safari (#7551) (a68b053)
• Fix SSR build error caused by browser-sniffing util (#7461) (e5381fa)
• hydrate: Fix errors caused by message bundle fetch attempts during prerendering (#7002) (c482a7f), closes #7001
• Make sure components are defined in environments like in codesandbox (#7632) (7005cce)
• Prevent vitetest/ssr errors due to defining components on the server (#7521) (046672e)
• Remove style modifying all host components with hidden attribute (#7346) (3103e2f)
• Resolve vite errors due to using expressions in dynamic imports (#7671) (b4c1038)
• accordion, accordion-item:
  • icon-position, icon-type, selection-mode and scale can now be set as props or attributes (#7191) (2b09aba)
  • Improve a11y (#7560) (b5170b6)
• action-bar, action-pad: Add native tooltip to expand action (#7452) (9673ef7)
• block, block-section: Improve a11y (#7557) (1f44f6b)
• button, card, fab, inline-editable: Provides context to AT users when loading (#7257) (df33eda)
• combobox, dropdown, input-date-picker, input-time-picker, popover, tooltip: Prevent repositioning from affecting other floating components (#7178) (1b02dae)
• input, input-number:
  • Allows numeric characters. (#7213) (739f0af)
  • Allow typing decimal separator in Firefox for arabic locale (#7173) (595e6f2)
  • No longer removes trailing decimal separator (#7159) (01535cf)
  • Correctly sanitize numbers when pasting string with "e" (#7648) (b8bc11c)
• input-date-picker, input-time-picker: Do not show dropdown affordance when read-only (#7559) (5a3f19c)
• list, sortable-list, value-list: Emit calciteListOrderChange when dragging between lists (#7614) (4653581)
• navigation-logo, navigation-user: Prevent inheriting line-height (#7011) (e8cb96b), closes #7010
• radio-button, radio-button-group: Prevent emitting events when selecting a checked radio button (#7102) (77fcc81)
• accordion: Restore accordion-items working with accordion across shadow DOM (#7466) (bedb5db)
• accordion-item: Support items working across shadowDOM (#7035) (6378e35), closes #6167
• action: Correctly focus the button after rendering updates. (#7255) (40fe2ce)
• action-bar:
  • No longer delegates focus when clicked on non-focusable region (#7310) (1a9c15c)
  • Restore "bottom-actions" slot functionality. (#7535) (3aa9afa)
  • Improve overflowing horizontal actions. (#7877) (52f2d2a), closes #7881
  • overflow actions when overflowActionsDisabled is set to false (#7873) (3dcceb0), closes #7891
• action-group: Honor flex-grow on slotted actions (#7690) (0777234)
• action-menu: update active selection to not use the action's active property (#7911) (50f85f1), closes #7910
• alert:
  • Sets autoCloseDuration to "medium" by default (#7157) (1b9a8ed)
  • Update alert queue when an alert is removed from the DOM (#7189) (edd59eb)
  • regression fix to restore calciteAlertBeforeOpen and calciteAlertOpen event emitting (#7767) (6bbae35), closes #7757
• block:
  • Loader now appears for all loading cases (#7303) (5af3600)
  • Removes extra loading indicator (#7239) (a334a75)
  • Defaults the status icon to scale="s" (#7503) (e1aee99)
  • Provide textual name on collapse and expansion to AT (#7652) (85bd71b)
• button: provides context for AT users when used as reference element for collapsible content (#7658) (50cb3a6), closes #6033
• card: Ensure teardown logic is called when disconnected (#7289) (d07e322)
• chip: Disconnect mutation observer when component is disconnected from the DOM (#7418) (412e5fb)
• chip-group: Add existence checks (#7487) (33225a7)
• color-picker:
  • Prevent hue slider thumb from wrapping when dragged near/past the edge (#7009) (2d14a16), closes #7004 #2841
  • Fix pasting hex with leading # character (#7030) (1c8f3d7), closes #4072 /github.com/Esri/calcite-design-system/pull/5189#issue-1344620750
  • Draw slider thumbs within bounds (#7398) (2f37854)
  • Fix opacity slider keyboard nudging (#7400) (2b4f7c3)
  • Maintains correct numbering system when entering invalid RGB value (#7327) (8d2a3a5)
  • Update value when alphaChannel is toggled (#7563) (1f753dd)
• combobox:
  • Restore toggling of single-select combobox items (#7044) (bb8df53), closes #4738 #3074 #4738
  • Add space after grouped items (#7302) (b1580c7)
  • Prevents navigation list with Space key (#7505) (58e2ff2)
  • Prevent deselecting items via keyboard in "single-persist" mode (#7634) (4f5f8b0)
  • Update combobox height to follow design spec (#7558) (ec08845)
  • clears input value on blur (#7721) (e04cc4e), closes #2162
  • fix filtering to avoid showing unrelated items (#7704) (b6d32f3), closes #6814
• date-picker: Set start of week to monday in zh-CN (#7578) (7e385cb)
• dropdown:
  • Prevents navigating dropdown items with Tab key (#7527) (3ea658d)
  • support dispatching enter key event on dropdown trigger (#7752) (ba92463), closes #5689
• dropdown-item: Provides accessible label when href is not parsed (#7316) (966b83d)
• dropdown-group: set selectionMode on slotted dropdown-item children (#7897) (aa0731a), closes #7707
• flow:
  • Call setFocus() on back button click (#7285) (9102aa4)
  • Catch error when beforeBack promise is rejected (#7601) (cb70671)
• flow-item: Use a native tooltip for the back button (#7442) (f38167b)
• input: Fix clearable from throwing an error when value is undefined (#7476) (633c2cd)
• input-date-picker:
  • Fix showing the placeholder when resetting the value (#7156) (8d60ffd)
  • Provides placeholder text context for AT users (#7320) (31e0ba2)
  • Reset active date picker date after closing (#7219) (91b2a1b)
  • Apply default numbering system to avoid browser inferring from locale (#7682) (3e1ed2d)
• input-time-picker:
  • Ensure dynamic date/time locale config imports are compatible with bundlers that require static import paths (#6990) (9aa094a), closes #7019
  • Resolve dayjs type error (#7037) (7cb1445), closes #6990
  • Allow en-us and other supported lowercase locale codes (#7038) (3fdee43), closes #7036
  • Only load valid dayjs locale files and fallback to base lang when region code is unsupported (#7049) (d6a99d5), closes #7040
• input-time-zone: Prevent items from being deselected (#7661) (c2dd436)
• link: Adds outline-offset to avoid overlapping with text. (#7342) (c30db4e)
• list:
  • Filter nested children correctly (#6989) (67ca03b), closes #6574
  • No longer has incorrect border width (a810943)
  • Changing filterText property will now update filtered items (#7133) (a9c0bce)
  • Update selectedItems property on all item selection changes (#7204) (da048f6)
  • Fix keyboard navigation after a list item's disabled or closed property changes (#7275) (91d28eb)
  • Fix keyboard navigation when filterEnabled is true (#7385) (41a2e42)
  • Add missing drag handle locale strings (#7462) (2b5463e)
  • Fixes dragging nested list items (#7555) (c25f7b3)
  • Stop emitting calciteListChange when a list-item is disabled or closed. (#7624) (7008463)
  • Remove unnecessary z-index (#7678) (1f4cd97)
• list-item:
  • Improve item toggle behavior (#7016) (004d0ee), closes #7017
  • Always emit calciteListItemSelect on activation (#7058) (cdbc35e)
  • Do not call preventDefault on enter key within slotted actions (#7684) (c3261f0)
• loader: Tweak loading animations to work in Safari (#7564) (2103654)
• menu: Ensure role type is compatible with Stencil's HTMLAttributes interface (#6993) (0231983), closes #7000
• menu-item:
  • Ensure icon displays when href is populated (#7028) (ad25cbe), closes #7027
  • Ensure correct order of rendered icons (#7098) (fd344e9), closes #7097
  • Prevent duplicate border in nested vertical menu-items (#7387) (186a738)
• modal:
  • Catch error when beforeClose promise is rejected (#7600) (70405d0)
  • Handle removal of open attribute and prevent multiple beforeClose calls (#7470) (f31588f)
  • calciteModalClose should emit on close button click (#7680) (796bf90)
• navigation: label is no longer a required property (#7084) (ba2bd4d)
• panel:
  • Remove double border styling when content isn't provided (#7368) (91a0610)
  • Add native tooltip to close button. (#7434) (70b45cf)
  • Allow panel content to take full height. (#7454) (b6bf54f)
  • Correct header and action-bar z-indexing display issues (#7440) (db7eac7)
  • Fix heading border when only text content is slotted (#7491) (7704400)
• progress: Completes animation for dir="rtl" (#7511) (c5d6ada)
• radio-button-group: No longer focus first radio button on label click and adds setFocus method. (#7050) (4267b8c)
• radio-button: Focuses first focusable radio-button element in group. (#7152) (dd7ec60)
• rating: Adds focus outline on click (#7341) (af30073)
• scrim:
  • Responsively set the scale of the loading spinner (#7182) (72c5943)
  • Update loader scale on resize of component. (#7419) (24e7f70)
  • Handle slotted children correctly (#7477) (c5ce008)
  • Render text content inside scrim (#7509) (643ce5d)
• segmented-control: Refresh items when added dynamically (#7567) (2e36eb3)
• select: allow setting an option value to an empty string (#7769) (adca6ec), closes #4032
• sheet:
  • calciteSheetClose should emit on scrim click (#7685) (6ae963e)
  • Update shadow style in display-mode="float" (#7664) (851bedb)
• slider:
  • Prevent excessive tick rendering (#7421) (c799409)
  • Numbers remain on one line for locales with space group separators (#7472) (2747b22)
  • Rerender ticks when prop is modified (#7439) (20058a9)
• split-button: Update divider and borders to follow design spec (#7568) (8df59ab)
• stepper: improves AT Users experience with screen readers (#7691) (071dec7), closes #5602
• switch: Fix for focus outline style in certain cases (#7414) (217324f)
• tab-nav:
  • Justify centered tab-titles evenly to extend across the width of tab-nav (#7047) (8ef0421), closes #7025 #7026
  • update indicator position when tab icon changes (#7768) (cb877b3), closes #6821
• tab-title:
  • Tabs center when set to layout="center" (#7026) (0bd677b), closes #7025
  • Add full focus outline to closable tab button in high contrast mode (#7272) (d812d17)
• table:
  • Allow wrapping text in table-header and table-cell (#7665) (15cb2bf)
  • Fix selection display in RTL (#7907) (b4c8508), closes #7903
• time-picker: Focus corresponding input when nudge buttons are clicked (#7650) (9c7d846)
• tooltip:
  • Improve component timing (#7172) (106f5d2)
  • Avoid extra before open/close event emitting (#7422) (dbb6818)
  • Deprecate the label property due to the description coming from the component's content (#7247) (7934d75)
  • Emits close and beforeClose events when container is set to display:none (#7258) (60a4683)
  • Ensure --calcite-app-z-index-tooltip is applied (#7345) (a9a7072)
• tree:
  • Selects all child items when selection-mode is set to ancestors (#7518) (f1eef84)
  • Improve keyboard navigation (#7618) (826a5cb)
  • update tree selection per design spec (#7852) (06b3594), closes #6971
  • fix tree keyboard selection issue (#7908) (53d6c12), closes #7898
• tree-item:
  • Ensure expanded tree-item is displayed when expanded and made visible (#7216) (3c0fbf5)
  • Move focus outline to item label area (#7581) (1327cef)
  • Updates state when selection changes programmatically for selection-mode="ancestors" (#7572) (40758c5)

Compatibility

The 4.28 release of the ArcGIS Maps SDK for JavaScript supports Calcite version 1.9.2. If you are using version 4.27 it is recommended to use Calcite's 1.4.2 release.