@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.80

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

@@ -1,182 +1,190 @@
 /// <reference path="../../index.d.ts" />
-import { default as Sortable } from 'sortablejs';
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { InteractionMode, Scale, SelectionMode } from '../interfaces';
-import { ItemData } from '../calcite-list-item/interfaces';
-import { SortableComponent } from '../../utils/sortableComponent';
-import { NumberingSystem } from '../../utils/locale';
-import { SortMenuItem } 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 { ListDisplayMode, ListDragDetail } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { InteractionMode, Scale, SelectionMode } from "../interfaces.js";
+import type { ItemData } from "../calcite-list-item/interfaces.js";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { ListItem } from "../calcite-list-item/customElement.js";
+import type { SelectionAppearance } from "./resources.js";
+import type { ListDisplayMode, ListDragDetail } from "./interfaces.js";
 
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
+ * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
  * @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 | "clone";
-    /** 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.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * 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.
-     *
-     * @default false
-     */
-    filterEnabled: boolean;
-    /**
-     * Specifies a function to handle filtering.
-     *
-     * @example
-     * myList.filterPredicate = (myListItem) => {
-     *   // returns true to show the list item if some condition is met
-     *   return myListItem.label.includes("someValue");
-     * };
-     */
-    filterPredicate?: (item: HTMLCalciteListItemElement) => boolean;
-    /** Specifies an accessible name for the filter input field. */
-    filterLabel: string;
-    /** Placeholder text for the component's filter input field. */
-    filterPlaceholder: string;
-    /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`). */
-    filterProps: string[];
-    /** Text for the component's filter input field. */
-    filterText: string;
-    /** The currently filtered `calcite-list-item` data. */
-    readonly filteredData: ItemData[];
-    /** The currently filtered `calcite-list-item`s. */
-    readonly filteredItems: HTMLCalciteListItemElement[];
-    /**
-     * The list's group identifier.
-     *
-     * To drag elements from one list into another, both lists must have the same group value.
-     */
-    group?: string;
-    /**
-     * Specifies the interaction mode of the component.
-     *
-     * `"interactive"` allows interaction styling and pointer changes on hover
-     *
-     * `"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;
-    /**
-     * Specifies an accessible name for the component.
-     *
-     * When `dragEnabled` is `true` and multiple list sorting is enabled with `group`, specifies the component's name for dragging between lists.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    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
-     *
-     * `"flat"` displays `calcite-list-item`s in a uniform list, and
-     *
-     * `"nested"` displays `calcite-list-item`s under their parent element.
-     *
-     *  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.
-     *
-     * @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).
-     *
-     * @default "icon"
-     */
-    selectionAppearance: Extract<"icon" | "border", SelectionAppearance>;
-    /**
-     * Specifies the selection mode of the component, where:
-     *
-     * `"multiple"` allows any number of selections,
-     *
-     * `"single"` allows only one selection,
-     *
-     * `"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>;
-    /**
-     * When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.
-     *
-     * @default false
-     */
-    sortDisabled: boolean;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     * @returns
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component's selected items have changed. */
-    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, void>;
-    /**
-     * Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.
-     *
-     * @deprecated in v3.3.0, removal target v6.0.0 - No longer necessary.
-     */
-    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;
-    }>;
-}
+export abstract class List extends LitElement {
+  /** When provided, the method will be called to determine whether the element can move from the list. */
+  accessor canPull: (detail: ListDragDetail) => boolean | "clone";
+  /** When provided, the method will be called to determine whether the element can be added from another list. */
+  accessor canPut: (detail: ListDragDetail) => boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the nesting behavior of `calcite-list-item`s, where
+   *
+   * `"flat"` displays `calcite-list-item`s in a uniform list, and
+   *
+   * `"nested"` displays `calcite-list-item`s under their parent element.
+   *
+   *  The parent component's behavior should follow throughout its child elements.
+   *
+   * @default "flat"
+   */
+  accessor displayMode: ListDisplayMode;
+  /**
+   * When `true`, `calcite-list-item`s are sortable via a draggable button.
+   *
+   * @default false
+   */
+  accessor dragEnabled: boolean;
+  /** The currently filtered `calcite-list-item` data. */
+  get filteredData(): ItemData[];
+  /** The currently filtered `calcite-list-item`s. */
+  get filteredItems(): ListItem[];
+  /**
+   * 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
+   */
+  accessor filterEnabled: boolean;
+  /** Specifies an accessible name for the filter input field. */
+  accessor filterLabel: string;
+  /** Specifies placeholder text for the component's filter input field. */
+  accessor filterPlaceholder: string;
+  /**
+   * Specifies a function to handle filtering.
+   *
+   * @example
+   * myList.filterPredicate = (myListItem) => {
+   *   // returns true to show the list item if some condition is met
+   *   return myListItem.label.includes("someValue");
+   * };
+   */
+  accessor filterPredicate: ((item: ListItem) => boolean) | undefined;
+  /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, and the `calcite-list-item-group`'s `heading`). */
+  accessor filterProps: string[];
+  /**
+   * Text for the component's filter input field.
+   *
+   * @default ""
+   */
+  accessor filterText: string;
+  /**
+   * The component's group identifier.
+   *
+   * To drag elements from one list into another, both lists must have the same group value.
+   */
+  accessor group: string | undefined;
+  /**
+   * Specifies the interaction mode of the component, where
+   *
+   * `"interactive"` allows interaction styling and pointer changes on hover,
+   *
+   * `"static"` does not allow interaction styling and pointer changes on hover -
+   *
+   * the `"static"` value should only be used when `selectionMode` is `"none"`.
+   *
+   * @default "interactive"
+   */
+  accessor interactionMode: InteractionMode;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * When `dragEnabled` is `true` and multiple list sorting is enabled with `group`, specifies the component's name for dragging between lists.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      filterEnabled?: string;
+      total?: string;
+  };
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** The currently selected items. */
+  get selectedItems(): ListItem[];
+  /**
+   * Specifies the selection appearance, where
+   *
+   * `"icon"` displays a checkmark or dot,
+   *
+   * `"border"` [Deprecated] - Use `"highlight"` instead - displays a border, or
+   *
+   * `"highlight"` displays background highlight.
+   *
+   * @default "icon"
+   */
+  accessor selectionAppearance: Extract<"icon" | "border" | "highlight", SelectionAppearance>;
+  /**
+   * Specifies the selection mode of the component, where:
+   *
+   * `"multiple"` allows any number of selections,
+   *
+   * `"single"` allows only one selection,
+   *
+   * `"single-persist"` allows one selection and prevents de-selection, and
+   *
+   * `"none"` does not allow any selections.
+   *
+   * @default "none"
+   */
+  accessor selectionMode: Extract<"none" | "multiple" | "single" | "single-persist", SelectionMode>;
+  /**
+   * When `true`, and a `group` is defined, `calcite-list-item`s are no longer sortable.
+   *
+   * @default false
+   */
+  accessor sortDisabled: boolean;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component's selected items have changed. */
+  readonly calciteListChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's dragging has ended. */
+  readonly calciteListDragEnd: import("@arcgis/lumina").TargetedEvent<this, ListDragDetail>;
+  /** Fires when the component's dragging has started. */
+  readonly calciteListDragStart: import("@arcgis/lumina").TargetedEvent<this, ListDragDetail>;
+  /** Fires when the component's filter has changed. */
+  readonly calciteListFilter: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /**
+   * Fires when a user attempts to move an element using the sort menu and 'canPut' or 'canPull' returns falsy.
+   *
+   * @deprecated in v3.3.0, removal target v6.0.0 - No longer necessary.
+   */
+  readonly calciteListMoveHalt: import("@arcgis/lumina").TargetedEvent<this, ListDragDetail>;
+  /** Fires when the component's item order changes. */
+  readonly calciteListOrderChange: import("@arcgis/lumina").TargetedEvent<this, ListDragDetail>;
+  readonly "@eventTypes": {
+    calciteListChange: List["calciteListChange"]["detail"];
+    calciteListDragEnd: List["calciteListDragEnd"]["detail"];
+    calciteListDragStart: List["calciteListDragStart"]["detail"];
+    calciteListFilter: List["calciteListFilter"]["detail"];
+    calciteListMoveHalt: List["calciteListMoveHalt"]["detail"];
+    calciteListOrderChange: List["calciteListOrderChange"]["detail"];
+  };
+}

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

@@ -1,20 +1,23 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as slotChangeHasAssignedElement, m as getRootNode } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { s as slotChangeHasAssignedElement, h as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { b as listItemSelector, i as isListItem, l as listSelector, u as updateListItemChildren, c as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils2.js";
+import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
 import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
-import { S as SLOTS$1 } from "../../chunks/resources.js";
+import { S as SLOTS$1 } from "../../chunks/resources7.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
   table: "table",
@@ -30,7 +33,7 @@ const SLOTS = {
   filterActionsStart: "filter-actions-start",
   filterActionsEnd: "filter-actions-end"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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))}.container-height{block-size:100%}.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 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([scale=s]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xs)}: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))}.container-height{block-size:100%}.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}::slotted(:is(calcite-action[slot=filter-actions-start],calcite-action[slot=filter-actions-end])){gap:var(--calcite-internal-list-action-spacing);align-self:center}::slotted(calcite-action[slot=filter-actions-start]){margin-inline-start:var(--calcite-internal-list-action-spacing)}::slotted(calcite-action[slot=filter-actions-end]){margin-inline-end:var(--calcite-internal-list-action-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
 const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
 class List extends LitElement {
   constructor() {
@@ -51,6 +54,7 @@ class List extends LitElement {
     this.willPerformFilter = false;
     this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.dataForFilter = [];
     this.hasFilterActionsEnd = false;
     this.hasFilterActionsStart = false;
@@ -59,6 +63,7 @@ class List extends LitElement {
     this.disabled = false;
     this.dragEnabled = false;
     this.filterEnabled = false;
+    this.filterText = "";
     this.filteredData = [];
     this.filteredItems = [];
     this.interactionMode = "interactive";
@@ -102,12 +107,18 @@ class List extends LitElement {
   get showNoResultsContainer() {
     return this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length;
   }
-  async setFocus(options) {
-    return this.focusSetter(() => this.filterEnabled ? this.filterEl : this.focusableItems.find((listItem) => listItem.active), options);
+  get effectiveFilterProps() {
+    if (!this.filterProps) {
+      return ["description", "label", "metadata", "heading"];
+    }
+    return this.filterProps.filter((prop) => prop !== "el");
   }
   emitOrderChangeEvent(detail) {
     this.calciteListOrderChange.emit(detail);
   }
+  async setFocus(options) {
+    return this.focusSetter(() => this.filterEnabled ? this.filterEl : this.focusableItems.find((listItem) => listItem.active), options);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.connectObserver();
@@ -129,9 +140,6 @@ class List extends LitElement {
       this.handleListItemChange();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.disconnectObserver();
@@ -420,12 +428,6 @@ class List extends LitElement {
     await this.filterEl?.filter(this.filterText);
     this.updateFilteredData();
   }
-  get effectiveFilterProps() {
-    if (!this.filterProps) {
-      return ["description", "label", "metadata", "heading"];
-    }
-    return this.filterProps.filter((prop) => prop !== "el");
-  }
   performFilter() {
     const { filterEl, filterText, effectiveFilterProps } = this;
     if (!filterEl) {
@@ -649,10 +651,10 @@ class List extends LitElement {
   }
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filterLabel, hasFilterActionsStart, hasFilterActionsEnd, effectiveFilterProps } = this;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerHeight]: this.listItems.length < 1 && loading
-    })}>${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>` });
+    })}>${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 .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/index.d.ts

@@ -1,4 +1 @@
-import "../calcite-scrim/index.js";
-import "../calcite-stack/index.js";
-import "../calcite-filter/index.js";
 export * from "./customElement.js";

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

@@ -1,17 +1,11 @@
-import { DragDetail, MoveDetail } from '../../utils/sortableComponent';
-import { ListItem } from '../calcite-list-item/customElement.js';
-import { ListItemGroup } from '../calcite-list-item-group/customElement.js';
-import { List } from './customElement.js';
+import type { DragDetail } from "../../utils/sortableComponent.js";
+import type { ListItem } from "../calcite-list-item/customElement.js";
+import type { List } from "./customElement.js";
+
 export type ListDisplayMode = "flat" | "nested";
+
 export interface ListDragDetail extends DragDetail {
-    toEl: HTMLCalciteListElement;
-    fromEl: HTMLCalciteListElement;
-    dragEl: HTMLCalciteListItemElement;
-}
-export interface ListMoveDetail extends MoveDetail {
-    toEl: HTMLCalciteListElement;
-    fromEl: HTMLCalciteListElement;
-    dragEl: HTMLCalciteListItemElement;
-    relatedEl: HTMLCalciteListItemElement;
-}
-export type ListElement = HTMLCalciteListItemElement | HTMLCalciteListItemGroupElement;
+  toEl: List;
+  fromEl: List;
+  dragEl: ListItem;
+}

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

@@ -1,16 +1 @@
-export declare const CSS: {
-    container: string;
-    table: string;
-    scrim: string;
-    stack: string;
-    tableContainer: string;
-    sticky: string;
-    assistiveText: string;
-    containerHeight: string;
-};
-export type SelectionAppearance = "border" | "icon";
-export declare const SLOTS: {
-    filterNoResults: string;
-    filterActionsStart: string;
-    filterActionsEnd: string;
-};
+export type SelectionAppearance = "border" | "highlight" | "icon";