@esri/calcite-components 5.0.0-next.72 → 5.0.0-next.74

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

@@ -1,15 +1,18 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { SelectionMode, InteractionMode, Scale, FlipContext } from '../interfaces';
-import { SelectionAppearance } from '../calcite-list/resources';
-import { IconName } from '../calcite-icon/interfaces';
-import { SortableComponentItem } from '../../utils/sortableComponent';
-import { SortMenuItem } from '../calcite-sort-handle/interfaces';
-import { List } from '../calcite-list/customElement.js';
-import { ListDisplayMode } from '../calcite-list/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale, FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-list-background-color-hover] - Specifies the component's background color when hovered.
+ * @cssproperty [--calcite-list-background-color-press] - Specifies the component's background color when pressed.
+ * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-list-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-list-content-text-color] - Specifies the content color.
+ * @cssproperty [--calcite-list-description-text-color] - Specifies the `description` color.
+ * @cssproperty [--calcite-list-icon-color] - Specifies the component's icon color.
+ * @cssproperty [--calcite-list-label-text-color] - Specifies the `label` color.
+ * @cssproperty [--calcite-list-selection-border-color] - Specifies the component's selection border color.
  * @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 component's `label` and `description`.
@@ -18,119 +21,132 @@ import { ListDisplayMode } from '../calcite-list/interfaces';
  * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the component's content.
  * @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.
-     *
-     * @default false
-     */
-    closable: boolean;
-    /**
-     * When `true`, hides the component.
-     *
-     * @default false
-     */
-    closed: boolean;
-    /** Specifies a description for the component, displays below the `label`. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, the item is not draggable.
-     *
-     * @default false
-     */
-    dragDisabled: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** Specifies the label of the component, displays above the `description`. */
-    label: string;
-    /** Overrides individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /** 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 in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.
-     * @default false
-     */
-    get open(): boolean;
-    set open(value: boolean);
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     * @internal
-     */
-    scale: Scale;
-    /**
-     * 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.
-     *
-     * @default false
-     */
-    sortHandleOpen: boolean;
-    /**
-     * When `true`, the component's content displays as inactive.
-     *
-     * @default false
-     */
-    unavailable: boolean;
-    /** The component's value. */
-    value: any;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options
-     * @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 close button is clicked. */
-    readonly calciteListItemClose: TargetedEvent<this, void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteListItemCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteListItemExpand: TargetedEvent<this, void>;
-    /** Fires when the component is selected. */
-    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, void>;
-    /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteListItemSortHandleBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the sort handle is closed and animation is complete. */
-    readonly calciteListItemSortHandleClose: TargetedEvent<this, void>;
-    /** Fires when the sort handle is open and animation is complete. */
-    readonly calciteListItemSortHandleOpen: TargetedEvent<this, void>;
-    /** Fires when the open button is clicked. */
-    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;
-    }>;
-}
+export abstract class ListItem extends LitElement {
+  /**
+   * When `true`, displays a close button in the component.
+   *
+   * @default false
+   */
+  accessor closable: boolean;
+  /**
+   * When `true`, hides the component.
+   *
+   * @default false
+   */
+  accessor closed: boolean;
+  /** Specifies a description for the component. Displays below the `label`. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, the item is not draggable.
+   *
+   * @default false
+   */
+  accessor dragDisabled: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component, displays above the `description`. */
+  accessor label: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      close?: string;
+      expand?: string;
+      collapse?: string;
+  };
+  /** Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`. */
+  accessor metadata: Record<string, unknown>;
+  /**
+   * When `true`, the item is open to show child components.
+   *
+   * @deprecated in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   * @internal
+   */
+  accessor scale: Scale;
+  /**
+   * When `true` and the parent `calcite-list`'s `selectionMode` is `"single"`, `"single-persist"', or `"multiple"`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * When `true`, displays and positions the sort handle.
+   *
+   * @default false
+   */
+  accessor sortHandleOpen: boolean;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * When `true`, the component's content displays as inactive.
+   *
+   * @default false
+   */
+  accessor unavailable: boolean;
+  /** The component's value. */
+  accessor value: any;
+  /**
+   * Sets focus on the component.
+   *
+   * @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 close button is clicked. */
+  readonly calciteListItemClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteListItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteListItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is selected. */
+  readonly calciteListItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
+  readonly calciteListItemSortHandleBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteListItemSortHandleBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is closed and animation is complete. */
+  readonly calciteListItemSortHandleClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the sort handle is open and animation is complete. */
+  readonly calciteListItemSortHandleOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the open button is clicked. */
+  readonly calciteListItemToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteListItemClose: ListItem["calciteListItemClose"]["detail"];
+    calciteListItemCollapse: ListItem["calciteListItemCollapse"]["detail"];
+    calciteListItemExpand: ListItem["calciteListItemExpand"]["detail"];
+    calciteListItemSelect: ListItem["calciteListItemSelect"]["detail"];
+    calciteListItemSortHandleBeforeClose: ListItem["calciteListItemSortHandleBeforeClose"]["detail"];
+    calciteListItemSortHandleBeforeOpen: ListItem["calciteListItemSortHandleBeforeOpen"]["detail"];
+    calciteListItemSortHandleClose: ListItem["calciteListItemSortHandleClose"]["detail"];
+    calciteListItemSortHandleOpen: ListItem["calciteListItemSortHandleOpen"]["detail"];
+    calciteListItemToggle: ListItem["calciteListItemToggle"]["detail"];
+  };
+}

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

@@ -1,20 +1,20 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as slotChangeHasAssignedElement, x as getFirstTabbable, g as getElementDir } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, x as getFirstTabbable, g as getElementDir } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { l as logger } from "../../chunks/logger.js";
 import { s as styles$1 } from "../../chunks/sortable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { l as listSelector, g as getDepth, a as getListItemChildren } from "../../chunks/utils2.js";
-import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources5.js";
+import { a as listSelector, g as getDepth, c as getListItemChildren } from "../../chunks/utils4.js";
+import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources8.js";
 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:flex;flex-direction:column}: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([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}.container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--border-selected:focus{box-shadow:inset var(--calcite-border-width-lg) 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;user-select:none;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.icon:hover,.icon:active{color:var(--calcite-color-text-1)}.actions-start,.actions-end{margin-inline-end:var(--calcite-internal-list-action-spacing);gap:var(--calcite-internal-list-action-spacing)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:.625rem;padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}:host(:not([disabled])) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container,.close{display:flex;align-items:center}.drag-container,.selection-container,.expanded-container{padding-block-end:var(--calcite-spacing-px)}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){color:inherit}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}.drag-container calcite-action,.drag-container ::slotted(calcite-action),.actions-start calcite-action,.actions-start ::slotted(calcite-action),.actions-end calcite-action,.actions-end ::slotted(calcite-action),.close calcite-action,.close ::slotted(calcite-action){align-items:center}.drag-container{margin-inline:var(--calcite-spacing-xxs)}:host([display-mode=nested]) .drag-container,:host([selection-appearance=icon]:not([selection-mode=none])) .drag-container{margin-inline:var(--calcite-spacing-xxs) 0}:host([hidden]){display:none}[hidden]{display:none}`;
 const focusMap = /* @__PURE__ */ new Map();
 class ListItem extends LitElement {
@@ -56,6 +56,7 @@ class ListItem extends LitElement {
     this.selectionMode = null;
     this.sortHandleOpen = false;
     this.unavailable = false;
+    this.topLayerDisabled = false;
     this.calciteInternalFocusPreviousItem = createEvent({ cancelable: false });
     this.calciteInternalListItemActive = createEvent({ cancelable: false });
     this.calciteInternalListItemChange = createEvent({ cancelable: false });
@@ -75,7 +76,7 @@ class ListItem extends LitElement {
     this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
   }
   static {
-    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { type: String }, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }] };
+    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: 1, label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { type: String }, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles, styles$1];
@@ -373,7 +374,7 @@ class ListItem extends LitElement {
   }
   renderDragHandle() {
     const { label, dragHandle, dragDisabled, setPosition, setSize, moveToItems, sortDisabled, addToItems } = this;
-    return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridRef)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
+    return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridRef)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
   }
   renderExpanded() {
     const { el, expanded, expandable, messages, displayMode, scale } = this;

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

@@ -1,4 +1 @@
-import "../calcite-icon/index.js";
-import "../calcite-sort-handle/index.js";
-import "../calcite-action/index.js";
 export * from "./customElement.js";

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

@@ -1,8 +1,9 @@
-import { ListItem } from './customElement.js';
+import type { ListItem } from "./customElement.js";
+
 export type ItemData = {
-    label: string;
-    description: string;
-    metadata: Record<string, unknown>;
-    el: HTMLCalciteListItemElement;
-    heading?: string[];
-};
+  label: string;
+  description: string;
+  metadata: Record<string, unknown>;
+  el: ListItem;
+  heading?: string[];
+};

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

@@ -1,22 +1,26 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale } from "../interfaces.js";
 
-/** @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements. */
-export declare class ListItemGroup extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies heading text for the component's nested `calcite-list-item` rows. */
-    heading: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     * @internal
-     */
-    scale: Scale;
-}
+/**
+ * @cssproperty [--calcite-list-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-list-color] - Specifies the component's color.
+ * @slot  - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
+ */
+export abstract class ListItemGroup extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the heading text for the nested `calcite-list-item` rows. */
+  accessor heading: string;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   * @internal
+   */
+  accessor scale: Scale;
+}

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

@@ -1,10 +1,10 @@
 /*! 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.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { M as MAX_COLUMNS } from "../../chunks/resources5.js";
+import { M as MAX_COLUMNS } from "../../chunks/resources8.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",

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

@@ -1,45 +1,59 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { Scale } from "../interfaces.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
 
-export declare class Loader extends LitElement {
-    /**
-     * When `true`, the component displays smaller.
-     *
-     * @default false
-     */
-    inline: boolean;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When not `inline`, displays text under the component's indicator.
-     *
-     * @default ""
-     */
-    text: string;
-    /**
-     * Specifies the component type.
-     *
-     * Use `"indeterminate"` if finding actual progress value is impossible. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress.
-     *
-     * @default "indeterminate"
-     */
-    type: "indeterminate" | "determinate" | "determinate-value";
-    /**
-     * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100.
-     *
-     * @default 0
-     */
-    value: number;
-}
+/**
+ * @cssproperty [--calcite-loader-font-size] - When `type` is not `"indeterminate"` or `inline`, specifies the font size of the loading percentage.
+ * @cssproperty [--calcite-loader-size] - Specifies the component's width and height.
+ * @cssproperty [--calcite-loader-size-inline] - [Deprecated] Use `--calcite-loader-size`. Specifies the width and height of the component when set to inline.
+ * @cssproperty [--calcite-loader-spacing] - Specifies the the component's padding.
+ * @cssproperty [--calcite-loader-progress-color-inline] - When `inline`, specifies the component's progress ring color.
+ * @cssproperty [--calcite-loader-text-spacing] - When not `inline`, specifies the component's `text` margin.
+ * @cssproperty [--calcite-loader-text-weight] - When not `inline` and `text` is provided, specifies the component's `text` font weight.
+ * @cssproperty [--calcite-loader-text-color] - When not `inline` and `text` is provided, specifies the component's `text` color.
+ * @cssproperty [--calcite-loader-progress-color] - When not `inline`, specifies the component's progress ring color.
+ * @cssproperty [--calcite-loader-track-color] - Specifies the component's track color.
+ */
+export abstract class Loader extends LitElement {
+  /**
+   * When `true`, the component displays smaller.
+   *
+   * @default false
+   */
+  accessor inline: boolean;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** @internal */
+  protected messages: Partial<Record<string, never>> & T9nMeta<Record<string, never>>;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * When not `inline`, displays text under the component's indicator.
+   *
+   * @default ""
+   */
+  accessor text: string;
+  /**
+   * Specifies the component type.
+   *
+   * Use `"indeterminate"` if finding actual progress value is impossible. Otherwise, use `"determinate"` to have the value indicate the progress or `"determinate-value"` to have the value label displayed along the progress.
+   *
+   * @default "indeterminate"
+   */
+  accessor type: "indeterminate" | "determinate" | "determinate-value";
+  /**
+   * The component's value. Valid only for `"determinate"` indicators. Percent complete of 100.
+   *
+   * @default 0
+   */
+  accessor value: number;
+}

package/dist/components/calcite-loader/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.
-v5.0.0-next.72 */
+v5.0.0-next.74 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";

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

@@ -1,35 +1,28 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
 
-type Layout = "horizontal" | "vertical";
-export declare class Menu extends LitElement {
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Specifies the layout of the component.
-     *
-     * @default "horizontal"
-     */
-    layout: Layout;
-    /** Overrides individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options
-     * @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>;
-    private messages: Partial<{
-        more: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        more: string;
-    }>;
+export abstract class Menu extends LitElement {
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * Specifies the layout of the component.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: Layout;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { more?: string; };
+  /**
+   * 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>;
 }
-export {};
+
+export type Layout = "horizontal" | "vertical";