@esri/calcite-components 5.0.0-next.9 → 5.0.0

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

@@ -1,136 +1,152 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-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";
+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 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-start] - A slot for adding non-actionable elements before the component's `label` and `description`.
+ * @slot [content] - A slot for adding non-actionable, centered content in place of the component's `label` and `description`.
+ * @slot [content-end] - A slot for adding non-actionable elements after the component's `label` and `description`.
+ * @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;
-    /** 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.
-     *
-     * @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;
-    /** 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;
-    /** 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.
-     *
-     * @internal
-     * @default "m"
-     */
-    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 appears 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 - 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,18 +1,21 @@
+/* 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 */
 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-html/directives/ref.js";
+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 { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.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 { 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";
-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:flex;flex-direction:column}: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))}.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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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)}:host([display-mode=flat][drag-handle]:is([selection-mode=none],[selection-appearance=border])) .drag-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}: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]) .actions-start{padding-inline-end:var(--calcite-spacing-sm)}: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]) .actions-start{padding-inline-end:var(--calcite-spacing-md)}: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{display:flex;align-items:center}.actions-start calcite-action,.actions-start calcite-sort-handle,.actions-end calcite-action,.actions-end calcite-sort-handle,.content-start calcite-action,.content-start calcite-sort-handle,.content-end calcite-action,.content-end calcite-sort-handle,.selection-container calcite-action,.selection-container calcite-sort-handle,.drag-container calcite-action,.drag-container calcite-sort-handle,.expanded-container calcite-action,.expanded-container calcite-sort-handle{align-self:stretch}.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){align-self:stretch;color:inherit}.row:focus .actions-start,.row:focus .actions-end{inset-block:.125rem}.row:focus .actions-start .close,.row:focus .actions-start ::slotted(calcite-action),.row:focus .actions-start ::slotted(calcite-action-menu),.row:focus .actions-start ::slotted(calcite-sort-handle),.row:focus .actions-start ::slotted(calcite-dropdown),.row:focus .actions-end .close,.row:focus .actions-end ::slotted(calcite-action),.row:focus .actions-end ::slotted(calcite-action-menu),.row:focus .actions-end ::slotted(calcite-sort-handle),.row:focus .actions-end ::slotted(calcite-dropdown){block-size:calc(100% - .25rem)}.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}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useInteractive } from "../../chunks/useInteractive.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/resources9.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 {
   constructor() {
@@ -25,6 +28,7 @@ class ListItem extends LitElement {
     this.handleGridRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
     this.hasContentBottom = false;
@@ -49,10 +53,10 @@ class ListItem extends LitElement {
     this.moveToItems = [];
     this.scale = "m";
     this.selected = false;
-    this.selectionAppearance = null;
     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 });
@@ -72,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];
@@ -82,8 +86,9 @@ class ListItem extends LitElement {
   }
   set open(value) {
     logger.deprecated("property", {
+      component: this,
       name: "open",
-      removalVersion: 4,
+      removalVersion: 5,
       suggested: "expanded"
     });
     this.expanded = value;
@@ -109,10 +114,6 @@ class ListItem extends LitElement {
     this.level = getDepth(el) + 1;
     this.setSelectionDefaults();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    focusMap.clear();
-  }
   willUpdate(changes) {
     if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
       this.activeHandler(this.active);
@@ -141,8 +142,9 @@ class ListItem extends LitElement {
       }
     }
   }
-  updated() {
-    updateHostInteraction(this);
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    focusMap.clear();
   }
   activeHandler(active) {
     if (!active) {
@@ -362,7 +364,7 @@ class ListItem extends LitElement {
   }
   renderSelected() {
     const { selected, selectionMode, selectionAppearance } = this;
-    if (selectionMode === "none" || selectionAppearance === "border") {
+    if (selectionMode === "none" || selectionAppearance !== "icon") {
       return null;
     }
     return keyed("selection-container", html`<div class=${safeClassMap({
@@ -372,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;
@@ -392,7 +394,7 @@ class ListItem extends LitElement {
   }
   renderActionsEnd() {
     const { label, hasActionsEnd, closable, messages } = this;
-    return keyed("actions-end-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsEnd]: true, [CSS.gridCell]: true })} .hidden=${!(hasActionsEnd || closable)} role=gridcell ${ref(this.actionsEndRef)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${closable ? keyed("close-action", html`<calcite-action appearance=transparent class=${safeClassMap(CSS.close)} .icon=${ICONS.close} .label=${messages.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${messages.close}></calcite-action>`) : null}</div>`);
+    return keyed("actions-end-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsEnd]: true, [CSS.gridCell]: true })} .hidden=${!(hasActionsEnd || closable)} role=gridcell ${ref(this.actionsEndRef)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${closable ? keyed("close-action", html`<calcite-action class=${safeClassMap(CSS.close)} .icon=${ICONS.close} .label=${messages.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${messages.close}></calcite-action>`) : null}</div>`);
   }
   renderContentStart() {
     const { hasContentStart } = this;
@@ -433,8 +435,8 @@ class ListItem extends LitElement {
     const hasCenterContent = hasCustomContent || !!label || !!description;
     const content = [
       this.renderContentStart(),
-      this.renderCustomContent(),
       this.renderIconStart(),
+      this.renderCustomContent(),
       this.renderContentProperties(),
       this.renderIconEnd(),
       this.renderContentEnd()
@@ -452,16 +454,15 @@ class ListItem extends LitElement {
     const wrapperBordered = bordered && hasContentBottom;
     const contentContainerWrapperBordered = bordered && !hasContentBottom;
     const showSelectionBorder = selectionMode !== "none" && selectionAppearance === "border";
-    const selectionBorderSelected = showSelectionBorder && selected;
-    const selectionBorderUnselected = showSelectionBorder && !selected;
+    const showSelectionHighlight = selectionMode !== "none" && selectionAppearance === "highlight";
     const containerInteractive = interactionMode === "interactive" || interactionMode === "static" && selectionMode !== "none" && selectionAppearance === "border";
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : null} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : null} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
       [CSS.row]: true,
       [CSS.container]: true,
       [CSS.containerHover]: containerInteractive,
       [CSS.containerBorder]: showSelectionBorder,
-      [CSS.containerBorderSelected]: selectionBorderSelected,
-      [CSS.containerBorderUnselected]: selectionBorderUnselected
+      [CSS.containerBorderSelected]: showSelectionBorder && selected,
+      [CSS.containerHighlightSelected]: showSelectionHighlight && selected
     })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
       [CSS.contentContainerWrapper]: true,
       [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered

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,23 +1,26 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+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;
-    /** The header text for all nested `calcite-list-item` rows. */
-    heading: string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @internal
-     * @default "m"
-     */
-    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,16 +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 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { M as MAX_COLUMNS } from "../../chunks/resources5.js";
+import { M as MAX_COLUMNS } from "../../chunks/resources9.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",
   heading: "heading"
 };
-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:flex;flex-direction:column}:host([filter-hidden]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{margin:0;display:flex;flex:1 1 0%;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1));color:var(--calcite-list-color, var(--calcite-color-text-1))}.heading{font-weight:var(--calcite-font-weight-bold)}:host([scale=s]) .container{padding-inline:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-inline:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=m]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg);padding-block:var(--calcite-spacing-xl) var(--calcite-spacing-sm-plus, .625rem)}:host([scale=l]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md-plus, .875rem)}.heading{padding: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:flex;flex-direction:column}:host([filter-hidden]){display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{margin:0;display:flex;flex:1 1 0%;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1));color:var(--calcite-list-color, var(--calcite-color-text-1))}.heading{font-weight:var(--calcite-font-weight-bold)}:host([scale=s]) .container{padding-inline:var(--calcite-spacing-sm)}:host([scale=s]) .heading{font-size:var(--calcite-font-size-sm);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-sm) var(--calcite-spacing-xxs)}:host([scale=s]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-inline:var(--calcite-spacing-md)}:host([scale=m]) .heading{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base);padding-block:var(--calcite-spacing-lg) var(--calcite-spacing-sm)}:host([scale=m]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .heading{font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg);padding-block:var(--calcite-spacing-xl) var(--calcite-spacing-sm-plus, .625rem)}:host([scale=l]:not(:first-child)) .container{padding-block-start:var(--calcite-spacing-md-plus, .875rem)}.heading{padding:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class ListItemGroup extends LitElement {
   constructor() {
     super(...arguments);
+    this.interactiveContainer = useInteractive(this);
     this.disabled = false;
     this.filterHidden = false;
     this.scale = "m";
@@ -22,15 +26,12 @@ class ListItemGroup extends LitElement {
   static {
     this.styles = styles;
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   handleDefaultSlotChange() {
     this.calciteInternalListItemGroupDefaultSlotChange.emit();
   }
   render() {
     const { disabled, heading } = this;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)} role=row><div .ariaColSpan=${MAX_COLUMNS} class=${safeClassMap(CSS.heading)} role=cell>${heading}</div></div><slot @slotchange=${this.handleDefaultSlotChange}></slot>` });
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap(CSS.container)} role=row><div .ariaColSpan=${MAX_COLUMNS} class=${safeClassMap(CSS.heading)} role=cell>${heading}</div></div><slot @slotchange=${this.handleDefaultSlotChange}></slot>` });
   }
 }
 customElement("calcite-list-item-group", ListItemGroup);