@esri/calcite-components 1.5.0-next.2 → 1.5.0-next.21

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
@@ -11,7 +11,7 @@ import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "..
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
@@ -356,7 +356,7 @@ export class InputDatePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   /**
@@ -512,6 +512,7 @@ export class InputDatePicker {
     deactivateFocusTrap(this);
     this.restoreInputFocus();
     this.focusOnOpen = false;
+    this.datePickerEl.reset();
   }
   commitValue() {
     const { focusedInput, value } = this;

package/dist/collection/components/input-date-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -9,9 +9,9 @@ import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "..
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { connectLocalized, defaultNumberingSystem, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
+import { addLocalizedTrailingDecimalZeros, BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -131,7 +131,7 @@ export class InputNumber {
         return;
       }
       const isShiftTabEvent = event.shiftKey && event.key === "Tab";
-      if (supportedKeys.includes(event.key) && (!event.shiftKey || isShiftTabEvent)) {
+      if (supportedKeys.includes(event.key) || isShiftTabEvent) {
         if (event.key === "Enter") {
           this.emitChangeIfUserModified();
         }
@@ -234,18 +234,23 @@ export class InputNumber {
         numberingSystem: this.numberingSystem,
         useGrouping: this.groupSeparator
       };
-      const sanitizedValue = sanitizeNumberString(
-      // no need to delocalize a string that ia already in latn numerals
-      (this.numberingSystem && this.numberingSystem !== "latn") || defaultNumberingSystem !== "latn"
-        ? numberStringFormatter.delocalize(value)
-        : value);
+      const isValueDeleted = this.previousValue?.length > value.length || this.value?.length > value.length;
+      const hasTrailingDecimalSeparator = value.charAt(value.length - 1) === ".";
+      const sanitizedValue = hasTrailingDecimalSeparator && isValueDeleted ? value : sanitizeNumberString(value);
       const newValue = value && !sanitizedValue
         ? isValidNumber(this.previousValue)
           ? this.previousValue
           : ""
         : sanitizedValue;
-      const newLocalizedValue = numberStringFormatter.localize(newValue);
-      this.localizedValue = newLocalizedValue;
+      let newLocalizedValue = numberStringFormatter.localize(newValue);
+      if (origin !== "connected" && !hasTrailingDecimalSeparator) {
+        newLocalizedValue = addLocalizedTrailingDecimalZeros(newLocalizedValue, newValue, numberStringFormatter);
+      }
+      // adds localized trailing decimal separator
+      this.localizedValue =
+        hasTrailingDecimalSeparator && isValueDeleted
+          ? `${newLocalizedValue}${numberStringFormatter.decimal}`
+          : newLocalizedValue;
       this.setPreviousNumberValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && this.value !== newValue;
@@ -417,7 +422,7 @@ export class InputNumber {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.childNumberEl?.focus();
   }
   /** Selects the text of the component's `value`. */

package/dist/collection/components/input-number/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.js

@@ -1,14 +1,14 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -243,7 +243,7 @@ export class InputText {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.childEl?.focus();
   }
   /** Selects the text of the component's `value`. */

package/dist/collection/components/input-text/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-time-picker/input-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
@@ -9,7 +9,7 @@ import { guid } from "../../utils/guid";
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
 import { formatTimeString, isValidTime, localizeTimeString, toISOTimeString } from "../../utils/time";
@@ -353,7 +353,7 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   /**

package/dist/collection/components/input-time-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   toggleIcon: "toggle-icon"

package/dist/collection/components/label/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

package/dist/collection/components/label/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.js

@@ -1,12 +1,12 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { CSS_UTILITY } from "../../utils/resources";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
 /** Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. */
@@ -96,7 +96,7 @@ export class Link {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusElement(this.childEl);
   }
   static get is() { return "calcite-link"; }

package/dist/collection/components/list/list.css

@@ -157,6 +157,11 @@
   border-collapse: collapse;
 }
 
+.stack {
+  --calcite-stack-padding-inline: 0;
+  --calcite-stack-padding-block: 0;
+}
+
 ::slotted(calcite-list-item) {
   margin-block-end: 1px;
   --tw-shadow: 0 1px 0 var(--calcite-ui-border-3);
@@ -174,11 +179,8 @@
   position: sticky;
   inset-block-start: 0px;
   z-index: var(--calcite-app-z-index-sticky);
+  background-color: var(--calcite-ui-foreground-1);
 }
 .sticky-pos th {
   padding: 0px;
-}
-
-calcite-filter {
-  margin-block-end: 1px;
 }

package/dist/collection/components/list/list.js

@@ -1,23 +1,26 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h } from "@stencil/core";
 import { debounce } from "lodash-es";
-import { toAriaBoolean } from "../../utils/dom";
+import { slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
 import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 import { MAX_COLUMNS } from "../list-item/resources";
 import { getListItemChildren, updateListItemChildren } from "../list-item/utils";
-import { CSS, debounceTimeout } from "./resources";
+import { CSS, debounceTimeout, SLOTS } from "./resources";
+import { SLOTS as STACK_SLOTS } from "../stack/resources";
 const listItemSelector = "calcite-list-item";
 const parentSelector = "calcite-list-item-group, calcite-list-item";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
  * @slot - A slot for adding `calcite-list-item` elements.
+ * @slot filter-actions-start - A slot for adding actionable `calcite-action` elements before the filter component.
+ * @slot filter-actions-end - A slot for adding actionable `calcite-action` elements after the filter component.
  */
 export class List {
   constructor() {
@@ -32,6 +35,12 @@ export class List {
     this.handleDefaultSlotChange = (event) => {
       updateListItemChildren(getListItemChildren(event));
     };
+    this.handleFilterActionsStartSlotChange = (event) => {
+      this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleFilterActionsEndSlotChange = (event) => {
+      this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
+    };
     this.setActiveListItem = () => {
       const { enabledListItems } = this;
       if (!enabledListItems.some((item) => item.active)) {
@@ -58,12 +67,15 @@ export class List {
         this.calciteListFilter.emit();
       }
     };
-    this.handleFilter = (event) => {
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+      this.performFilter();
+    };
+    this.handleFilterChange = (event) => {
       event.stopPropagation();
-      const { filteredItems, value } = event.currentTarget;
-      this.filteredData = filteredItems;
+      const { value } = event.currentTarget;
       this.filterText = value;
-      this.updateListItems(true);
+      this.updateFilteredData(true);
     };
     this.getItemData = () => {
       return this.listItems.map((item) => ({
@@ -159,10 +171,15 @@ export class List {
     this.selectionMode = "none";
     this.selectionAppearance = "icon";
     this.dataForFilter = [];
+    this.hasFilterActionsStart = false;
+    this.hasFilterActionsEnd = false;
   }
   handleFilterEnabledChange() {
     this.updateListItems();
   }
+  async handleFilterTextChange() {
+    this.performFilter();
+  }
   handleSelectionAppearanceChange() {
     this.updateListItems();
   }
@@ -176,6 +193,7 @@ export class List {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
     listItems.forEach((listItem) => {
@@ -186,16 +204,16 @@ export class List {
     this.updateSelectedItems(true);
   }
   handleCalciteInternalListItemSelect(event) {
+    event.stopPropagation();
     const target = event.target;
     const { listItems, selectionMode } = this;
-    listItems.forEach((listItem) => {
-      if (selectionMode === "single" || selectionMode === "single-persist") {
-        listItem.selected = listItem === target;
-      }
-    });
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
     this.updateSelectedItems();
   }
-  handleCalciteListItemClose() {
+  handleCalciteInternalListItemChange(event) {
+    event.stopPropagation();
     this.updateListItems(true);
   }
   //--------------------------------------------------------------------------
@@ -220,12 +238,6 @@ export class List {
   }
   componentDidLoad() {
     setComponentLoaded(this);
-    const { filterEl } = this;
-    const filteredItems = filterEl?.filteredItems;
-    if (filteredItems) {
-      this.filteredData = filteredItems;
-    }
-    this.updateListItems();
   }
   // --------------------------------------------------------------------------
   //
@@ -234,8 +246,8 @@ export class List {
   // --------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    await componentFocusable(this);
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -243,10 +255,10 @@ export class List {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
-    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, value: filterText,
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd } = this;
+    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: STACK_SLOTS.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.filterEl = el) }))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+      ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: STACK_SLOTS.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
   filterElements({ el, filteredItems, visibleParents }) {
     const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
@@ -264,6 +276,25 @@ export class List {
       visibleParents
     });
   }
+  updateFilteredData(emit = false) {
+    const { filterEl } = this;
+    if (!filterEl) {
+      return;
+    }
+    if (filterEl.filteredItems) {
+      this.filteredData = filterEl.filteredItems;
+    }
+    this.updateListItems(emit);
+  }
+  async performFilter() {
+    const { filterEl, filterText } = this;
+    if (!filterEl) {
+      return;
+    }
+    filterEl.value = filterText;
+    await filterEl.filter(filterText);
+    this.updateFilteredData();
+  }
   static get is() { return "calcite-list"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -527,7 +558,9 @@ export class List {
   }
   static get states() {
     return {
-      "dataForFilter": {}
+      "dataForFilter": {},
+      "hasFilterActionsStart": {},
+      "hasFilterActionsEnd": {}
     };
   }
   static get events() {
@@ -588,6 +621,9 @@ export class List {
     return [{
         "propName": "filterEnabled",
         "methodName": "handleFilterEnabledChange"
+      }, {
+        "propName": "filterText",
+        "methodName": "handleFilterTextChange"
       }, {
         "propName": "selectionMode",
         "methodName": "handleSelectionAppearanceChange"
@@ -622,8 +658,8 @@ export class List {
         "capture": false,
         "passive": false
       }, {
-        "name": "calciteListItemClose",
-        "method": "handleCalciteListItemClose",
+        "name": "calciteInternalListItemChange",
+        "method": "handleCalciteInternalListItemChange",
         "target": undefined,
         "capture": false,
         "passive": false

package/dist/collection/components/list/resources.js

@@ -1,13 +1,18 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   container: "container",
   table: "table",
   scrim: "scrim",
+  stack: "stack",
   tableContainer: "table-container",
   sticky: "sticky-pos"
 };
 export const debounceTimeout = 0;
+export const SLOTS = {
+  filterActionsStart: "filter-actions-start",
+  filterActionsEnd: "filter-actions-end"
+};

package/dist/collection/components/list-item/list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";
@@ -12,7 +12,7 @@ import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 const focusMap = new Map();
 const listSelector = "calcite-list";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
@@ -23,11 +23,6 @@ import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../
  */
 export class ListItem {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.closeClickHandler = () => {
       this.closed = true;
       this.calciteListItemClose.emit();
@@ -186,10 +181,14 @@ export class ListItem {
       this.focusCell(null, false);
     }
   }
-  handleSelectedChange(value) {
-    if (value) {
-      this.calciteInternalListItemSelect.emit();
-    }
+  handleClosedChange() {
+    this.emitCalciteInternalListItemChange();
+  }
+  handleDisabledChange() {
+    this.emitCalciteInternalListItemChange();
+  }
+  handleSelectedChange() {
+    this.calciteInternalListItemSelect.emit();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -229,7 +228,7 @@ export class ListItem {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
     const focusIndex = focusMap.get(parentListEl);
     if (typeof focusIndex === "number") {
@@ -326,6 +325,14 @@ export class ListItem {
         [CSS.nestedContainerHidden]: openable && !open
       } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  emitCalciteInternalListItemChange() {
+    this.calciteInternalListItemChange.emit();
+  }
   setSelectionDefaults() {
     const { parentListEl, selectionMode, selectionAppearance } = this;
     if (!parentListEl) {
@@ -779,6 +786,24 @@ export class ListItem {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "calciteInternalListItemChange",
+        "name": "calciteInternalListItemChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -806,6 +831,12 @@ export class ListItem {
     return [{
         "propName": "active",
         "methodName": "activeHandler"
+      }, {
+        "propName": "closed",
+        "methodName": "handleClosedChange"
+      }, {
+        "propName": "disabled",
+        "methodName": "handleDisabledChange"
       }, {
         "propName": "selected",
         "methodName": "handleSelectedChange"

package/dist/collection/components/list-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.1
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.21
  */
 export const CSS = {
   container: "container",