@esri/calcite-components 3.2.0-next.8 → 3.2.0

package/dist/components/calcite-list/customElement.d.ts

@@ -11,26 +11,38 @@ import { MoveTo } from '../calcite-sort-handle/interfaces';
 import { ListItem } from '../calcite-list-item/customElement.js';
 import { Filter } from '../calcite-filter/customElement.js';
 import { SelectionAppearance } from './resources';
-import { ListDragDetail, ListDisplayMode, ListMoveDetail } from './interfaces';
+import { ListDragDetail, ListDisplayMode } from './interfaces';
 
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
- * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` 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.
- * @slot filter-no-results - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.
+ * @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` 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.
+ * @slot [filter-no-results] - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.
  */
 export declare class List extends LitElement {
     /** When provided, the method will be called to determine whether the element can move from the list. */
     canPull: (detail: ListDragDetail) => boolean;
     /** When provided, the method will be called to determine whether the element can be added from another list. */
     canPut: (detail: ListDragDetail) => boolean;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
-    /** When `true`, `calcite-list-item`s are sortable via a draggable button. */
+    /**
+     * When `true`, `calcite-list-item`s are sortable via a draggable button.
+     *
+     * @default false
+     */
     dragEnabled: boolean;
-    /** When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. */
+    /**
+     * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s.
+     *
+     * @default false
+     */
     filterEnabled: boolean;
     /**
      * Specifies a function to handle filtering.
@@ -50,17 +62,9 @@ export declare class List extends LitElement {
     filterProps: string[];
     /** Text for the component's filter input field. */
     filterText: string;
-    /**
-     * The currently filtered `calcite-list-item` data.
-     *
-     * @readonly
-     */
+    /** The currently filtered `calcite-list-item` data. */
     readonly filteredData: ItemData[];
-    /**
-     * The currently filtered `calcite-list-item`s.
-     *
-     * @readonly
-     */
+    /** The currently filtered `calcite-list-item`s. */
     readonly filteredItems: HTMLCalciteListItemElement[];
     /**
      * The list's group identifier.
@@ -76,6 +80,8 @@ export declare class List extends LitElement {
      * `"static"` does not allow interaction styling and pointer changes on hover
      *
      * The `"static"` value should only be used when `selectionMode` is `"none"`.
+     *
+     * @default "interactive"
      */
     interactionMode: InteractionMode;
     /**
@@ -86,22 +92,14 @@ export declare class List extends LitElement {
      * @required
      */
     label: string;
-    /** When `true`, a busy indicator is displayed. */
-    loading: boolean;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * When `true`, a busy indicator is displayed.
      *
-     * @private
+     * @default false
      */
-    private messages: {
-        filterEnabled: string;
-        total: string;
-    } & import('@arcgis/components-controllers').T9nMeta<{
-        filterEnabled: string;
-        total: string;
-    }>;
+    loading: boolean;
+    /** Use this property to override individual strings used by the component. */
+    messageOverrides?: typeof this.messages._overrides;
     /**
      * Specifies the nesting behavior of `calcite-list-item`s, where
      *
@@ -111,19 +109,24 @@ export declare class List extends LitElement {
      *
      *  The parent component's behavior should follow throughout its child elements.
      *
+     * @default "flat"
      */
     displayMode: ListDisplayMode;
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem: NumberingSystem;
-    /** Specifies the size of the component. */
-    scale: Scale;
     /**
-     * The currently selected items.
+     * Specifies the size of the component.
      *
-     * @readonly
+     * @default "m"
      */
+    scale: Scale;
+    /** The currently selected items. */
     readonly selectedItems: HTMLCalciteListItemElement[];
-    /** Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border). */
+    /**
+     * Specifies the selection appearance - `"icon"` (displays a checkmark or dot) or `"border"` (displays a border).
+     *
+     * @default "icon"
+     */
     selectionAppearance: SelectionAppearance;
     /**
      * Specifies the selection mode of the component, where:
@@ -135,24 +138,33 @@ export declare class List extends LitElement {
      * `"single-persist"` allows one selection and prevents de-selection, and
      *
      * `"none"` does not allow any selections.
+     *
+     * @default "none"
      */
     selectionMode: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>;
     /**
      * Sets focus on the component's first focusable element.
      *
-     * @returns {Promise<void>}
+     * @returns
      */
     setFocus(): Promise<void>;
     /** Fires when the component's selected items have changed. */
-    readonly calciteListChange: TargetedEvent<this, undefined>;
+    readonly calciteListChange: TargetedEvent<this, void>;
     /** Fires when the component's dragging has ended. */
     readonly calciteListDragEnd: TargetedEvent<this, ListDragDetail>;
     /** Fires when the component's dragging has started. */
     readonly calciteListDragStart: TargetedEvent<this, ListDragDetail>;
     /** Fires when the component's filter has changed. */
-    readonly calciteListFilter: TargetedEvent<this, undefined>;
-    /** Fires when the component's item order changes. */
-    readonly calciteListOrderChange: TargetedEvent<this, ListDragDetail>;
+    readonly calciteListFilter: TargetedEvent<this, void>;
     /** Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy. */
     readonly calciteListMoveHalt: TargetedEvent<this, ListDragDetail>;
+    /** Fires when the component's item order changes. */
+    readonly calciteListOrderChange: TargetedEvent<this, ListDragDetail>;
+    private messages: {
+        filterEnabled: string;
+        total: string;
+    } & import('@arcgis/lumina/controllers').T9nMeta<{
+        filterEnabled: string;
+        total: string;
+    }>;
 }

package/dist/components/calcite-list/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.8 */
+v3.2.0 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -35,8 +35,6 @@ const SLOTS = {
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
 const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
 class List extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.dragSelector = listItemSelector;
@@ -50,7 +48,7 @@ class List extends LitElement {
     });
     this.updateListItems = debounce(() => {
       this.updateGroupItems();
-      const { selectionAppearance, selectionMode, interactionMode, dragEnabled, el, filterEl, moveToItems, displayMode, scale } = this;
+      const { selectionAppearance, selectionMode, interactionMode, dragEnabled, el, filterEl, moveToItems, displayMode, scale, defaultSlotEl } = this;
       const items = Array.from(this.el.querySelectorAll(listItemSelector));
       items.forEach((item) => {
         item.scale = scale;
@@ -83,10 +81,14 @@ class List extends LitElement {
       this.setActiveListItem();
       this.updateSelectedItems();
       this.setUpSorting();
+      if (defaultSlotEl) {
+        updateListItemChildren(defaultSlotEl);
+      }
     }, DEBOUNCE.nextTick);
     this.visibleItems = [];
     this.willFilterEmit = false;
     this.willPerformFilter = false;
+    this.messages = useT9n({ blocking: true });
     this.dataForFilter = [];
     this.hasFilterActionsEnd = false;
     this.hasFilterActionsStart = false;
@@ -99,7 +101,6 @@ class List extends LitElement {
     this.filteredItems = [];
     this.interactionMode = "interactive";
     this.loading = false;
-    this.messages = useT9n({ blocking: true });
     this.displayMode = "flat";
     this.scale = "m";
     this.selectedItems = [];
@@ -110,8 +111,8 @@ class List extends LitElement {
     this.calciteListDragEnd = createEvent({ cancelable: false });
     this.calciteListDragStart = createEvent({ cancelable: false });
     this.calciteListFilter = createEvent({ cancelable: false });
-    this.calciteListOrderChange = createEvent({ cancelable: false });
     this.calciteListMoveHalt = createEvent({ cancelable: false });
+    this.calciteListOrderChange = createEvent({ cancelable: false });
     this.listen("calciteInternalListItemToggle", this.handleCalciteListItemToggle);
     this.listen("calciteInternalFocusPreviousItem", this.handleCalciteInternalFocusPreviousItem);
     this.listen("calciteInternalListItemActive", this.handleCalciteInternalListItemActive);
@@ -125,7 +126,7 @@ class List extends LitElement {
     this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
   }
   static {
-    this.properties = { assistiveText: [16, { state: true }], dataForFilter: [16, { state: true }], hasFilterActionsEnd: [16, { state: true }], hasFilterActionsStart: [16, { state: true }], hasFilterNoResults: [16, { state: true }], moveToItems: [16, { state: true }], hasActiveFilter: [16, { state: true }], showNoResultsContainer: [16, { state: true }], canPull: [0, { attribute: false }], canPut: [0, { attribute: false }], disabled: [7, { reflect: true, type: Boolean }], dragEnabled: [7, { reflect: true, type: Boolean }], filterEnabled: [7, { reflect: true, type: Boolean }], filterPredicate: [0, { attribute: false }], filterLabel: [3, { reflect: true }], filterPlaceholder: [3, { reflect: true }], filterProps: [0, { attribute: false }], filterText: [3, { reflect: true }], filteredData: [0, { attribute: false }], filteredItems: [0, { attribute: false }], group: [3, { reflect: true }], interactionMode: [3, { reflect: true }], label: 1, loading: [7, { reflect: true, type: Boolean }], messageOverrides: [0, { attribute: false }], displayMode: [3, { reflect: true }], numberingSystem: 1, scale: [3, { reflect: true }], selectedItems: [0, { attribute: false }], selectionAppearance: [3, { reflect: true }], selectionMode: [3, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], moveToItems: [16, {}, { state: true }], hasActiveFilter: [16, {}, { state: true }], showNoResultsContainer: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -136,22 +137,9 @@ class List extends LitElement {
   get showNoResultsContainer() {
     return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
   }
-  // #endregion
-  // #region Public Methods
-  /**
-   * Emits a `calciteListMoveHalt` event.
-   *
-   * @private
-   * @param dragDetail
-   */
   putFailed(dragDetail) {
     this.calciteListMoveHalt.emit(dragDetail);
   }
-  /**
-   * Sets focus on the component's first focusable element.
-   *
-   * @returns {Promise<void>}
-   */
   async setFocus() {
     await componentFocusable(this);
     if (this.filterEnabled) {
@@ -171,11 +159,6 @@ class List extends LitElement {
   async load() {
     this.handleInteractionModeWarning();
   }
-  /**
-   * TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code
-   *
-   * @param changes
-   */
   willUpdate(changes) {
     if (changes.has("filterText") || changes.has("filterProps") || changes.has("filterPredicate")) {
       this.performFilter();
@@ -192,8 +175,6 @@ class List extends LitElement {
     this.disconnectObserver();
     disconnectSortableComponent(this);
   }
-  // #endregion
-  // #region Private Methods
   handleListItemChange() {
     this.willPerformFilter = true;
     this.updateListItems();
@@ -239,15 +220,17 @@ class List extends LitElement {
     event.stopPropagation();
   }
   handleSortReorder(event) {
-    if (this.parentListEl) {
+    if (this.parentListEl || event.defaultPrevented) {
       return;
     }
+    event.preventDefault();
     this.handleReorder(event);
   }
   handleSortMove(event) {
-    if (this.parentListEl) {
+    if (this.parentListEl || event.defaultPrevented) {
       return;
     }
+    event.preventDefault();
     this.handleMove(event);
   }
   handleCalciteInternalListItemSelect(event) {
@@ -312,9 +295,6 @@ class List extends LitElement {
   onDragEnd(detail) {
     this.calciteListDragEnd.emit(detail);
   }
-  onDragMove({ relatedEl }) {
-    relatedEl.expanded = true;
-  }
   onDragStart(detail) {
     detail.dragEl.sortHandleOpen = false;
     this.calciteListDragStart.emit(detail);
@@ -327,8 +307,7 @@ class List extends LitElement {
   setParentList() {
     this.parentListEl = this.el.parentElement?.closest(listSelector);
   }
-  handleDefaultSlotChange(event) {
-    updateListItemChildren(event.target);
+  handleDefaultSlotChange() {
     if (this.parentListEl) {
       this.calciteInternalListDefaultSlotChange.emit();
     }
@@ -430,6 +409,9 @@ class List extends LitElement {
     filterEl.filterProps = effectiveFilterProps;
     this.filterAndUpdateData();
   }
+  setDefaultSlotEl(el) {
+    this.defaultSlotEl = el;
+  }
   setFilterEl(el) {
     this.filterEl = el;
     this.performFilter();
@@ -609,11 +591,9 @@ class List extends LitElement {
       oldIndex
     });
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filterLabel, hasFilterActionsStart, hasFilterActionsEnd, effectiveFilterProps } = this;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div><div aria-live=polite data-test-id=no-results-container .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.container)}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} .value=${filterText} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite data-test-id=no-results-container .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;

package/dist/components/calcite-list-item/customElement.d.ts

@@ -11,51 +11,58 @@ import { List } from '../calcite-list/customElement.js';
 import { ListDisplayMode } from '../calcite-list/interfaces';
 
 /**
- * @slot - A slot for adding `calcite-list`, `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.
- * @slot content-start - A slot for adding non-actionable elements before the label and description of the component.
- * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
- * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.
- * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
- * @slot content-bottom - A slot for adding content below the component's `label` and `description`.
+ * @slot  - A slot for adding `calcite-list`, `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.
+ * @slot [content-start] - A slot for adding non-actionable elements before the label and description of the component.
+ * @slot [content] - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
+ * @slot [content-end] - A slot for adding non-actionable elements after the label and description of the component.
+ * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the content of the component.
+ * @slot [content-bottom] - A slot for adding content below the component's `label` and `description`.
  */
 export declare class ListItem extends LitElement {
-    /** When `true`, a close button is added to the component. */
+    /**
+     * When `true`, a close button is added to the component.
+     *
+     * @default false
+     */
     closable: boolean;
-    /** When `true`, hides the component. */
+    /**
+     * When `true`, hides the component.
+     *
+     * @default false
+     */
     closed: boolean;
     /** A description for the component. Displays below the label text. */
     description: string;
-    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     *
+     * @default false
+     */
     disabled: boolean;
-    /** When `true`, the item is not draggable. */
+    /**
+     * When `true`, the item is not draggable.
+     *
+     * @default false
+     */
     dragDisabled: boolean;
-    /** When `true`, the item is expanded to show child components. */
+    /**
+     * When `true`, the item is expanded to show child components.
+     *
+     * @default false
+     */
     expanded: boolean;
     /** The label text of the component. Displays above the description text. */
     label: string;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Made into a prop for testing purposes only
-     *
-     * @private
-     */
-    private messages: Partial<{
-        close: string;
-        expand: string;
-        collapse: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        close: string;
-        expand: string;
-        collapse: string;
-    }>;
     /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
     metadata: Record<string, unknown>;
     /**
      * When `true`, the item is open to show child components.
      *
      * @deprecated Use `expanded` prop instead.
+     * @default false
      */
     get open(): boolean;
     set open(value: boolean);
@@ -63,13 +70,26 @@ export declare class ListItem extends LitElement {
      * Specifies the size of the component.
      *
      * @internal
-     * */
+     * @default "m"
+     */
     scale: Scale;
-    /** When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected. */
+    /**
+     * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
+     *
+     * @default false
+     */
     selected: boolean;
-    /** When `true`, displays and positions the sort handle. */
+    /**
+     * When `true`, displays and positions the sort handle.
+     *
+     * @default false
+     */
     sortHandleOpen: boolean;
-    /** When `true`, the component's content appears inactive. */
+    /**
+     * When `true`, the component's content appears inactive.
+     *
+     * @default false
+     */
     unavailable: boolean;
     /** The component's value. */
     value: any;
@@ -82,17 +102,26 @@ export declare class ListItem extends LitElement {
     /** Sets focus on the component. */
     setFocus(): Promise<void>;
     /** Fires when the close button is clicked. */
-    readonly calciteListItemClose: TargetedEvent<this, undefined>;
+    readonly calciteListItemClose: TargetedEvent<this, void>;
     /** Fires when the component is selected. */
-    readonly calciteListItemSelect: TargetedEvent<this, undefined>;
+    readonly calciteListItemSelect: TargetedEvent<this, void>;
     /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
-    readonly calciteListItemSortHandleBeforeClose: TargetedEvent<this, undefined>;
+    readonly calciteListItemSortHandleBeforeClose: TargetedEvent<this, void>;
     /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteListItemSortHandleBeforeOpen: TargetedEvent<this, undefined>;
+    readonly calciteListItemSortHandleBeforeOpen: TargetedEvent<this, void>;
     /** Fires when the sort handle is closed and animation is complete. */
-    readonly calciteListItemSortHandleClose: TargetedEvent<this, undefined>;
+    readonly calciteListItemSortHandleClose: TargetedEvent<this, void>;
     /** Fires when the sort handle is open and animation is complete. */
-    readonly calciteListItemSortHandleOpen: TargetedEvent<this, undefined>;
+    readonly calciteListItemSortHandleOpen: TargetedEvent<this, void>;
     /** Fires when the open button is clicked. */
-    readonly calciteListItemToggle: TargetedEvent<this, undefined>;
+    readonly calciteListItemToggle: TargetedEvent<this, void>;
+    private messages: Partial<{
+        close: string;
+        expand: string;
+        collapse: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        close: string;
+        expand: string;
+        collapse: string;
+    }>;
 }