@esri/solutions-components 0.7.34 → 0.7.35

package/dist/components/list-item.js

@@ -5,8 +5,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { j as slotChangeHasAssignedElement, B as getFirstTabbable, g as getElementDir, t as toAriaBoolean } from './dom.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
-import { a as getDepth, C as CSS, I as ICONS, S as SLOTS, g as getListItemChildren, b as getListItemChildLists, u as updateListItemChildren } from './utils3.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive.js';
+import { a as activeCellTestAttribute, b as getDepth, C as CSS, I as ICONS, S as SLOTS, g as getListItemChildren, c as getListItemChildLists, u as updateListItemChildren } from './utils3.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -15,7 +15,7 @@ import { d as defineCustomElement$3 } from './handle.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;--calcite-list-item-icon-color:var(--calcite-color-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border-selected{border-inline-start:4px solid var(--calcite-color-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-bottom{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}::slotted(calcite-list:empty){padding-block:0.75rem}:host([hidden]){display:none}[hidden]{display:none}";
+const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;--calcite-list-item-icon-color:var(--calcite-color-brand);--calcite-list-item-spacing-indent:1rem}:host([filter-hidden]){display:none}: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%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{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-bottom{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-color-border-input)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}::slotted(calcite-list:empty){padding-block:0.75rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -26,12 +26,39 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.__attachShadow();
         this.calciteListItemSelect = createEvent(this, "calciteListItemSelect", 6);
         this.calciteListItemClose = createEvent(this, "calciteListItemClose", 6);
+        this.calciteListItemDragHandleChange = createEvent(this, "calciteListItemDragHandleChange", 6);
+        this.calciteListItemToggle = createEvent(this, "calciteListItemToggle", 6);
         this.calciteInternalListItemSelect = createEvent(this, "calciteInternalListItemSelect", 6);
         this.calciteInternalListItemSelectMultiple = createEvent(this, "calciteInternalListItemSelectMultiple", 6);
         this.calciteInternalListItemActive = createEvent(this, "calciteInternalListItemActive", 6);
         this.calciteInternalFocusPreviousItem = createEvent(this, "calciteInternalFocusPreviousItem", 6);
         this.calciteInternalListItemChange = createEvent(this, "calciteInternalListItemChange", 6);
-        this.closeClickHandler = () => {
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.dragHandleSelectedChangeHandler = (event) => {
+            this.dragSelected = event.target.selected;
+            this.calciteListItemDragHandleChange.emit();
+            event.stopPropagation();
+        };
+        this.emitInternalListItemActive = () => {
+            this.calciteInternalListItemActive.emit();
+        };
+        this.focusCellHandle = () => {
+            this.handleCellFocusIn(this.handleGridEl);
+        };
+        this.focusCellActionsStart = () => {
+            this.handleCellFocusIn(this.actionsStartEl);
+        };
+        this.focusCellContent = () => {
+            this.handleCellFocusIn(this.contentEl);
+        };
+        this.focusCellActionsEnd = () => {
+            this.handleCellFocusIn(this.actionsEndEl);
+        };
+        this.handleCloseClick = () => {
             this.closed = true;
             this.calciteListItemClose.emit();
         };
@@ -56,15 +83,18 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.handleDefaultSlotChange = (event) => {
             this.handleOpenableChange(event.target);
         };
-        this.toggleOpen = () => {
-            this.open = !this.open;
+        this.handleToggleClick = () => {
+            this.toggle();
+        };
+        this.toggle = (value = !this.open) => {
+            this.open = value;
+            this.calciteListItemToggle.emit();
         };
-        this.itemClicked = (event) => {
+        this.handleItemClick = (event) => {
             if (event.defaultPrevented) {
                 return;
             }
             this.toggleSelected(event.shiftKey);
-            this.calciteInternalListItemActive.emit();
         };
         this.toggleSelected = (shiftKey) => {
             const { selectionMode, selected } = this;
@@ -88,8 +118,8 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
             }
             const { key } = event;
             const composedPath = event.composedPath();
-            const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
-            const cells = [actionsStartEl, contentEl, actionsEndEl].filter((el) => el && !el.hidden);
+            const { containerEl, actionsStartEl, actionsEndEl, open, openable } = this;
+            const cells = this.getGridCells();
             const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
             if (key === "Enter" &&
                 !composedPath.includes(actionsStartEl) &&
@@ -102,7 +132,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
                 const nextIndex = currentIndex + 1;
                 if (currentIndex === -1) {
                     if (!open && openable) {
-                        this.open = true;
+                        this.toggle(true);
                         this.focusCell(null);
                     }
                     else if (cells[0]) {
@@ -119,7 +149,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
                 if (currentIndex === -1) {
                     this.focusCell(null);
                     if (open && openable) {
-                        this.open = false;
+                        this.toggle(false);
                     }
                     else {
                         this.calciteInternalFocusPreviousItem.emit();
@@ -137,24 +167,32 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.focusCellNull = () => {
             this.focusCell(null);
         };
-        this.focusCell = (focusEl, saveFocusIndex = true) => {
-            const { contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+        this.handleCellFocusIn = (focusEl) => {
+            this.setFocusCell(focusEl, getFirstTabbable(focusEl), true);
+        };
+        // Only one cell within a list-item should be focusable at a time. Ensures the active cell is focusable.
+        this.setFocusCell = (focusEl, focusedEl, saveFocusIndex) => {
+            const { parentListEl } = this;
             if (saveFocusIndex) {
                 focusMap.set(parentListEl, null);
             }
-            const focusedEl = getFirstTabbable(focusEl);
-            [actionsStartEl, contentEl, actionsEndEl]
-                .filter((el) => el && !el.hidden)
-                .forEach((tableCell, cellIndex) => {
-                const tabIndexAttr = "tabindex";
-                if (tableCell === focusEl) {
-                    focusEl === focusedEl && tableCell.setAttribute(tabIndexAttr, "0");
-                    saveFocusIndex && focusMap.set(parentListEl, cellIndex);
-                }
-                else {
-                    tableCell.removeAttribute(tabIndexAttr);
-                }
+            const gridCells = this.getGridCells();
+            gridCells.forEach((tableCell) => {
+                tableCell.tabIndex = -1;
+                tableCell.removeAttribute(activeCellTestAttribute);
             });
+            if (!focusEl) {
+                return;
+            }
+            focusEl.tabIndex = focusEl === focusedEl ? 0 : -1;
+            focusEl.setAttribute(activeCellTestAttribute, "");
+            if (saveFocusIndex) {
+                focusMap.set(parentListEl, gridCells.indexOf(focusEl));
+            }
+        };
+        this.focusCell = (focusEl, saveFocusIndex = true) => {
+            const focusedEl = getFirstTabbable(focusEl);
+            this.setFocusCell(focusEl, focusedEl, saveFocusIndex);
             focusedEl === null || focusedEl === void 0 ? void 0 : focusedEl.focus();
         };
         this.active = false;
@@ -164,6 +202,8 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         this.disabled = false;
         this.dragDisabled = false;
         this.dragHandle = false;
+        this.dragSelected = false;
+        this.filterHidden = false;
         this.label = undefined;
         this.metadata = undefined;
         this.open = false;
@@ -250,10 +290,10 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
     /** Sets focus on the component. */
     async setFocus() {
         await componentFocusable(this);
-        const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+        const { containerEl, parentListEl } = this;
         const focusIndex = focusMap.get(parentListEl);
         if (typeof focusIndex === "number") {
-            const cells = [actionsStartEl, contentEl, actionsEndEl].filter((el) => el && !el.hidden);
+            const cells = this.getGridCells();
             if (cells[focusIndex]) {
                 this.focusCell(cells[focusIndex]);
             }
@@ -274,39 +314,41 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         if (selectionMode === "none" || selectionAppearance === "border") {
             return null;
         }
-        return (h("td", { class: CSS.selectionContainer, key: "selection-container", onClick: this.itemClicked }, h("calcite-icon", { icon: selected
+        return (h("td", { class: {
+                [CSS.selectionContainer]: true,
+                [CSS.selectionContainerSingle]: selectionMode === "single" || selectionMode === "single-persist",
+            }, key: "selection-container", onClick: this.handleItemClick }, h("calcite-icon", { icon: selected
                 ? selectionMode === "multiple"
                     ? ICONS.selectedMultiple
                     : ICONS.selectedSingle
-                : ICONS.unselected, scale: "s" })));
+                : selectionMode === "multiple"
+                    ? ICONS.unselectedMultiple
+                    : ICONS.unselectedSingle, scale: "s" })));
     }
     renderDragHandle() {
-        return this.dragHandle ? (h("td", { class: CSS.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { disabled: this.dragDisabled, label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+        const { label, dragHandle, dragSelected, dragDisabled, setPosition, setSize } = this;
+        return dragHandle ? (h("td", { "aria-label": label, class: CSS.dragContainer, key: "drag-handle-container", onFocusin: this.focusCellHandle, role: "gridcell",
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: (el) => (this.handleGridEl = el) }, h("calcite-handle", { disabled: dragDisabled, label: label, onCalciteHandleChange: this.dragHandleSelectedChangeHandler, selected: dragSelected, setPosition: setPosition, setSize: setSize }))) : null;
     }
     renderOpen() {
-        const { el, open, openable, parentListEl } = this;
+        const { el, open, openable, messages } = this;
         const dir = getElementDir(el);
-        const icon = openable
-            ? open
-                ? ICONS.open
-                : dir === "rtl"
-                    ? ICONS.closedRTL
-                    : ICONS.closedLTR
-            : ICONS.blank;
-        const clickHandler = openable ? this.toggleOpen : this.itemClicked;
-        return openable || (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: clickHandler }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
+        const icon = open ? ICONS.open : dir === "rtl" ? ICONS.closedRTL : ICONS.closedLTR;
+        const tooltip = open ? messages.collapse : messages.expand;
+        return openable ? (h("td", { class: CSS.openContainer, key: "open-container", onClick: this.handleToggleClick, title: tooltip }, h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
     }
     renderActionsStart() {
         const { label, hasActionsStart } = this;
-        return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+        return (h("td", { "aria-label": label, class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", onFocusin: this.focusCellActionsStart, role: "gridcell",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.actionsStartEl = el) }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
     }
     renderActionsEnd() {
         const { label, hasActionsEnd, closable, messages } = this;
-        return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+        return (h("td", { "aria-label": label, class: CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", onFocusin: this.focusCellActionsEnd, role: "gridcell",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
+            ref: (el) => (this.actionsEndEl = el) }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (h("calcite-action", { appearance: "transparent", icon: ICONS.close, key: "close-action", label: messages.close, onClick: this.handleCloseClick, text: messages.close })) : null));
     }
     renderContentStart() {
         const { hasContentStart } = this;
@@ -347,7 +389,7 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
                 [CSS.contentContainer]: true,
                 [CSS.contentContainerSelectable]: selectionMode !== "none",
                 [CSS.contentContainerHasCenterContent]: hasCenterContent,
-            }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
+            }, key: "content-container", onClick: this.handleItemClick, onFocusin: this.focusCellContent, role: "gridcell",
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: (el) => (this.contentEl = el) }, content));
     }
@@ -356,19 +398,16 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (h(Host, null, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (h(Host, null, h(InteractiveContainer, { disabled: this.disabled }, h("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS.container]: true,
+                [CSS.containerHover]: true,
+                [CSS.containerBorder]: showBorder,
                 [CSS.containerBorderSelected]: borderSelected,
                 [CSS.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
+            }, hidden: closed, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer()));
+            ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer())));
     }
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     emitCalciteInternalListItemChange() {
         this.calciteInternalListItemChange.emit();
     }
@@ -388,18 +427,13 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         if (!slotEl) {
             return;
         }
-        const { parentListEl } = this;
         const listItemChildren = getListItemChildren(slotEl);
         const listItemChildLists = getListItemChildLists(slotEl);
         updateListItemChildren(listItemChildren);
-        const openable = !!listItemChildren.length || !!listItemChildLists.length;
-        if (openable && parentListEl && !parentListEl.openable) {
-            parentListEl.openable = true;
-        }
-        this.openable = openable;
-        if (!openable) {
-            this.open = false;
-        }
+        this.openable = !!listItemChildren.length || !!listItemChildLists.length;
+    }
+    getGridCells() {
+        return [this.handleGridEl, this.actionsStartEl, this.contentEl, this.actionsEndEl].filter((el) => el && !el.hidden);
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }
@@ -420,6 +454,8 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
         "disabled": [516],
         "dragDisabled": [516, "drag-disabled"],
         "dragHandle": [4, "drag-handle"],
+        "dragSelected": [1540, "drag-selected"],
+        "filterHidden": [516, "filter-hidden"],
         "label": [1],
         "metadata": [16],
         "open": [1540],