@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/cjs/calcite-filter_5.cjs.entry.js

@@ -7,26 +7,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const filter = require('./filter-f363c8fb.js');
-const interactive = require('./interactive-34bc91a0.js');
-const loadable = require('./loadable-53f1d561.js');
-const locale = require('./locale-73a540a5.js');
-const t9n = require('./t9n-d347df79.js');
-const debounce = require('./debounce-7f1e04d6.js');
-const dom = require('./dom-1c78fa73.js');
-const observers = require('./observers-a2648fc8.js');
-const resources = require('./resources-34f7b918.js');
-const sortableComponent = require('./sortableComponent-b1b229bf.js');
-require('./browser-6137dfdf.js');
-require('./key-7ed07912.js');
-require('./guid-a7528dfa.js');
-require('./resources-1c0e54c1.js');
+const index = require('./index-105cf2b9.js');
+const filter = require('./filter-b524f88d.js');
+const interactive = require('./interactive-3ab7044d.js');
+const loadable = require('./loadable-5a794992.js');
+const locale = require('./locale-d237c9d5.js');
+const t9n = require('./t9n-993a84de.js');
+const debounce = require('./debounce-30afab47.js');
+const dom = require('./dom-c9c2c835.js');
+const observers = require('./observers-db4527e4.js');
+const utils = require('./utils-3940c852.js');
+const sortableComponent = require('./sortableComponent-c111c036.js');
+require('./browser-d08a5f99.js');
+require('./key-c5504030.js');
+require('./guid-ae73cd27.js');
+require('./resources-9447c777.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS$3 = {
     container: "container",
@@ -39,7 +39,6 @@ const ICONS$1 = {
 const DEBOUNCE_TIMEOUT = 250;
 
 const filterCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%;padding:0.5rem}label{position:relative;margin-inline:0.25rem;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:0.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:0.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:0.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing), inset-inline-end var(--calcite-animation-timing), opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:0.25rem}input[type=text]:focus~.search-icon{inset-inline-start:calc(1rem * -1);opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteFilterStyle0 = filterCss;
 
 const Filter = class {
     constructor(hostRef) {
@@ -57,9 +56,6 @@ const Filter = class {
             this.filterDebounced(target.value, true);
         };
         this.keyDownHandler = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
             if (event.key === "Escape") {
                 this.clear();
                 event.preventDefault();
@@ -164,7 +160,7 @@ const Filter = class {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (index.h(interactive.InteractiveContainer, { key: 'f7270a6dc848da7a11ffeffd783836d083f75378', disabled: disabled }, index.h("div", { key: '7fe378823d3a5c458fcf385ffce80b498a599fa8', class: CSS$3.container }, index.h("label", { key: '7ff51820e2e168353ff00629c3bcbc9e5b13ef54' }, index.h("calcite-input", { key: 'bc6bb09f4a967f31a55d000e377379842d150f1c', clearable: true, disabled: disabled, icon: ICONS$1.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+        return (index.h(interactive.InteractiveContainer, { disabled: disabled }, index.h("div", { class: CSS$3.container }, index.h("label", null, index.h("calcite-input", { clearable: true, disabled: disabled, icon: ICONS$1.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
             // 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.textInput = el;
@@ -180,12 +176,12 @@ const Filter = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Filter.style = CalciteFilterStyle0;
+Filter.style = filterCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
 const CSS$2 = {
     handle: "handle",
@@ -200,8 +196,7 @@ const SUBSTITUTIONS = {
     total: "{total}",
 };
 
-const handleCss = ":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}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;outline-color:transparent;color:var(--calcite-color-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:not([disabled])) .handle:focus{color:var(--calcite-color-text-1);outline:2px solid var(--calcite-ui-focus-color, 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          )}:host(:not([disabled])) .handle--selected{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteHandleStyle0 = handleCss;
+const handleCss = ":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}.handle{display:flex;align-items:center;justify-content:center;align-self:stretch;border-style:none;background-color:transparent;outline-color:transparent;color:var(--calcite-color-border-input);padding-block:0.75rem;padding-inline:0.25rem;line-height:0}.handle calcite-icon{color:inherit}:host(:not([disabled])) .handle{cursor:move}:host(:not([disabled])) .handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:not([disabled])) .handle:focus{color:var(--calcite-color-text-1);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          )}:host(:not([disabled])) .handle--selected{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Handle = class {
     constructor(hostRef) {
@@ -345,13 +340,11 @@ const Handle = class {
     render() {
         return (
         // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        index.h("span", { key: '985ea19917a01e2fc366466d13909b297afa4b19', "aria-checked": this.disabled ? null : dom.toAriaBoolean(this.selected), "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$2.handle]: true, [CSS$2.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown,
-            // role of radio is being applied to allow space key to select in screen readers
-            role: "radio", tabIndex: this.disabled ? null : 0, title: this.getTooltip(),
+        index.h("span", { "aria-disabled": this.disabled ? dom.toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), "aria-pressed": this.disabled ? null : dom.toAriaBoolean(this.selected), class: { [CSS$2.handle]: true, [CSS$2.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabIndex: this.disabled ? null : 0, title: this.getTooltip(),
             // 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.handleButton = el;
-            } }, index.h("calcite-icon", { key: 'd904676f59997c1a673979adf1b58af369883eb3', icon: ICONS.drag, scale: "s" })));
+            } }, index.h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -365,50 +358,35 @@ const Handle = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-Handle.style = CalciteHandleStyle0;
+Handle.style = handleCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
-const listSelector$1 = "calcite-list";
-const listItemGroupSelector = "calcite-list-item-group";
-const listItemSelector$1 = "calcite-list-item";
-function getListItemChildLists(slotEl) {
-    return Array.from(slotEl.assignedElements({ flatten: true }).filter((el) => el.matches(listSelector$1)));
-}
-function getListItemChildren(slotEl) {
-    const assignedElements = slotEl.assignedElements({ flatten: true });
-    const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
-        .map((group) => Array.from(group.querySelectorAll(listItemSelector$1)))
-        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-    const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector$1));
-    const listItemListChildren = assignedElements.filter((el) => el?.matches(listSelector$1))
-        .map((list) => Array.from(list.querySelectorAll(listItemSelector$1)))
-        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-    return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];
-}
-function updateListItemChildren(listItemChildren) {
-    listItemChildren.forEach((listItem) => {
-        listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
-        listItem.setSize = listItemChildren.length;
-    });
-}
-function getDepth(element, includeGroup = false) {
-    const expression = includeGroup
-        ? "ancestor::calcite-list-item | ancestor::calcite-list-item-group"
-        : "ancestor::calcite-list-item";
-    const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
-    return result.snapshotLength;
-}
+const CSS$1 = {
+    container: "container",
+    table: "table",
+    scrim: "scrim",
+    stack: "stack",
+    tableContainer: "table-container",
+    sticky: "sticky-pos",
+    assistiveText: "assistive-text",
+};
+const debounceTimeout = 0;
+const SLOTS$1 = {
+    filterNoResults: "filter-no-results",
+    filterActionsStart: "filter-actions-start",
+    filterActionsEnd: "filter-actions-end",
+};
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
+ * v2.4.0
  */
-const CSS$1 = {
+const CSS = {
     container: "container",
     actionsStart: "actions-start",
     contentStart: "content-start",
@@ -416,36 +394,14 @@ const CSS$1 = {
     contentEnd: "content-end",
     actionsEnd: "actions-end",
 };
-const SLOTS$1 = {
+const SLOTS = {
     actionsStart: "actions-start",
     contentStart: "content-start",
     contentEnd: "content-end",
     actionsEnd: "actions-end",
 };
 
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    container: "container",
-    table: "table",
-    scrim: "scrim",
-    stack: "stack",
-    tableContainer: "table-container",
-    sticky: "sticky-pos",
-    assistiveText: "assistive-text",
-};
-const debounceTimeout = 0;
-const SLOTS = {
-    filterNoResults: "filter-no-results",
-    filterActionsStart: "filter-actions-start",
-    filterActionsEnd: "filter-actions-end",
-};
-
-const listCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteListStyle0 = listCss;
+const listCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
 const listItemSelector = "calcite-list-item";
 const listItemSelectorDirect = `:scope > calcite-list-item`;
@@ -466,7 +422,7 @@ const List = class {
         this.mutationObserver = observers.createObserver("mutation", () => this.updateListItems());
         this.visibleItems = [];
         this.handleDefaultSlotChange = (event) => {
-            updateListItemChildren(getListItemChildren(event.target));
+            utils.updateListItemChildren(utils.getListItemChildren(event.target));
             if (this.parentListEl) {
                 this.calciteInternalListDefaultSlotChange.emit();
             }
@@ -494,10 +450,6 @@ const List = class {
                 this.calciteListChange.emit();
             }
         };
-        this.borderItems = () => {
-            const visibleItems = this.visibleItems.filter((item) => !item.filterHidden && this.allParentListItemsOpen(item));
-            visibleItems.forEach((item) => (item.bordered = item !== visibleItems[visibleItems.length - 1]));
-        };
         this.updateFilteredItems = (emit = false) => {
             const { visibleItems, filteredData, filterText } = this;
             const values = filteredData.map((item) => item.value);
@@ -505,6 +457,9 @@ const List = class {
             const filteredItems = visibleItems.filter((item) => !filterText || values.includes(item.value)) || [];
             const visibleParents = new WeakSet();
             lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+            if (filteredItems.length > 0) {
+                this.findAncestorOfFirstFilteredItem(filteredItems);
+            }
             this.filteredItems = filteredItems;
             if (emit) {
                 this.calciteListFilter.emit();
@@ -530,19 +485,23 @@ const List = class {
         };
         this.updateListItems = debounce.debounce((emit = false) => {
             const { selectionAppearance, selectionMode, dragEnabled } = this;
+            if (!!this.parentListEl) {
+                const items = this.queryListItems(true);
+                items.forEach((item) => {
+                    item.dragHandle = dragEnabled;
+                });
+                this.setUpSorting();
+                return;
+            }
             const items = this.queryListItems();
             items.forEach((item) => {
                 item.selectionAppearance = selectionAppearance;
                 item.selectionMode = selectionMode;
             });
-            const directItems = this.queryListItems(true);
-            directItems.forEach((item) => {
+            const dragItems = this.queryListItems(true);
+            dragItems.forEach((item) => {
                 item.dragHandle = dragEnabled;
             });
-            if (!!this.parentListEl) {
-                this.setUpSorting();
-                return;
-            }
             this.listItems = items;
             if (this.filterEnabled) {
                 this.dataForFilter = this.getItemData();
@@ -552,7 +511,6 @@ const List = class {
             }
             this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
             this.updateFilteredItems(emit);
-            this.borderItems();
             this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
             this.setActiveListItem();
             this.updateSelectedItems(emit);
@@ -618,6 +576,29 @@ const List = class {
                 }
             }
         };
+        this.findAncestorOfFirstFilteredItem = (filteredItems) => {
+            var _a, _b;
+            (_a = this.ancestorOfFirstFilteredItem) === null || _a === void 0 ? void 0 : _a.removeAttribute("data-filter");
+            filteredItems.forEach((item) => {
+                item.removeAttribute("data-filter");
+            });
+            this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+            filteredItems[0].setAttribute("data-filter", "0");
+            (_b = this.ancestorOfFirstFilteredItem) === null || _b === void 0 ? void 0 : _b.setAttribute("data-filter", "0");
+        };
+        this.getTopLevelAncestorItemElement = (el) => {
+            let closestParent = el.parentElement.closest(listItemSelector);
+            while (closestParent) {
+                const closestListItemAncestor = closestParent.parentElement.closest(listItemSelector);
+                if (closestListItemAncestor) {
+                    closestParent = closestListItemAncestor;
+                }
+                else {
+                    return closestParent;
+                }
+            }
+            return null;
+        };
         this.disabled = false;
         this.canPull = undefined;
         this.canPut = undefined;
@@ -654,12 +635,6 @@ const List = class {
     handleListItemChange() {
         this.updateListItems();
     }
-    handleCalciteListItemToggle() {
-        if (this.parentListEl) {
-            return;
-        }
-        this.borderItems();
-    }
     handleCalciteInternalFocusPreviousItem(event) {
         if (this.parentListEl) {
             return;
@@ -805,9 +780,9 @@ const List = class {
     // --------------------------------------------------------------------------
     render() {
         const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, } = this;
-        return (index.h(interactive.InteractiveContainer, { key: 'be7d5300b720d3c2adb29ee3dec27d7b70c3e0b4', disabled: this.disabled }, index.h("div", { key: '1c6ff5516994d00848c331174d07ab4c7a70d5a1', class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, index.h("table", { key: '78bfe1d34ec213e8f0c5494784298ff67d39ec8c', "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", { class: CSS.sticky }, index.h("tr", null, index.h("th", { colSpan: resources.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+        return (index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { class: CSS$1.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, index.h("table", { "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", null, index.h("tr", { class: { [CSS$1.sticky]: true } }, index.h("th", { colSpan: utils.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS$1.stack }, index.h("slot", { name: SLOTS$1.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
             // 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: this.setFilterEl }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, index.h("tbody", { key: '8950cb148789530e6dad16a722c7c6077b2a5ab8', class: CSS.tableContainer }, index.h("slot", { key: 'a8333193d984d6534f5861a1cee0cd98744573b6', onSlotchange: this.handleDefaultSlotChange }))), index.h("div", { key: '2b96f30d61ac1d33e6709afe93ce259b61d1ab67', "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, index.h("slot", { key: '12c5d5758a840ef8eb9cbc5df36b73ec7a8f3c94', name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+            ref: this.setFilterEl }), index.h("slot", { name: SLOTS$1.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS.actionsEnd })))))) : null, index.h("tbody", { class: CSS$1.tableContainer }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))), index.h("div", { "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, index.h("slot", { name: SLOTS$1.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
     }
     // --------------------------------------------------------------------------
     //
@@ -820,7 +795,7 @@ const List = class {
             locale: effectiveLocale,
             numberingSystem,
         };
-        return !parentListEl ? (index.h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (index.h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, index.h("div", { key: "aria-item-count" }, messages.total.replace("{count}", locale.numberStringFormatter.localize(filteredItems.length.toString()))), filteredItems.length ? (index.h("ol", { key: "aria-item-list" }, filteredItems.map((item) => (index.h("li", null, item.label))))) : null)) : null;
+        return !parentListEl ? (index.h("div", { "aria-live": "polite", class: CSS$1.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (index.h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, index.h("div", { key: "aria-item-count" }, messages.total.replace("{count}", locale.numberStringFormatter.localize(filteredItems.length.toString()))), filteredItems.length ? (index.h("ol", { key: "aria-item-list" }, filteredItems.map((item) => (index.h("li", null, item.label))))) : null)) : null;
     }
     connectObserver() {
         var _a;
@@ -874,17 +849,6 @@ const List = class {
             visibleParents,
         });
     }
-    allParentListItemsOpen(item) {
-        var _a;
-        const parentItem = (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
-        if (!parentItem) {
-            return true;
-        }
-        else if (!parentItem.open) {
-            return false;
-        }
-        return this.allParentListItemsOpen(parentItem);
-    }
     updateFilteredData(emit = false) {
         const { filterEl } = this;
         if (!filterEl) {
@@ -955,10 +919,9 @@ const List = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-List.style = CalciteListStyle0;
+List.style = listCss;
 
-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;background-color:var(--calcite-color-foreground-1);--calcite-list-item-icon-color:var(--calcite-color-brand)}:host([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-color-border-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.indent{display:flex;flex-direction:column;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);margin-inline-start:var(--calcite-list-item-spacing-indent, 1.5rem)}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-color-foreground-1)}.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}.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-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-ui-focus-color, 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-font-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-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;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}.selection-container{display:flex;padding-block:0px;color:var(--calcite-color-border-input);padding-inline:var(--calcite-spacing-md) var(--calcite-spacing-xxs)}.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}.actions-start calcite-action,.actions-start calcite-handle,.actions-end calcite-action,.actions-end calcite-handle,.content-start calcite-action,.content-start calcite-handle,.content-end calcite-action,.content-end calcite-handle,.selection-container calcite-action,.selection-container calcite-handle,.drag-container calcite-action,.drag-container calcite-handle,.open-container calcite-action,.open-container calcite-handle{align-self:stretch}.open-container,.selection-container{cursor:pointer}.actions-start,.actions-end{padding:0px}.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:empty){border-block-start-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteListItemStyle0 = listItemCss;
+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";
@@ -1120,13 +1083,13 @@ const ListItem = class {
             const gridCells = this.getGridCells();
             gridCells.forEach((tableCell) => {
                 tableCell.tabIndex = -1;
-                tableCell.removeAttribute(resources.activeCellTestAttribute);
+                tableCell.removeAttribute(utils.activeCellTestAttribute);
             });
             if (!focusEl) {
                 return;
             }
             focusEl.tabIndex = focusEl === focusedEl ? 0 : -1;
-            focusEl.setAttribute(resources.activeCellTestAttribute, "");
+            focusEl.setAttribute(utils.activeCellTestAttribute, "");
             if (saveFocusIndex) {
                 focusMap.set(parentListEl, gridCells.indexOf(focusEl));
             }
@@ -1137,7 +1100,6 @@ const ListItem = class {
             focusedEl === null || focusedEl === void 0 ? void 0 : focusedEl.focus();
         };
         this.active = false;
-        this.bordered = false;
         this.closable = false;
         this.closed = false;
         this.description = undefined;
@@ -1160,6 +1122,7 @@ const ListItem = class {
         this.effectiveLocale = "";
         this.defaultMessages = undefined;
         this.level = null;
+        this.visualLevel = null;
         this.parentListEl = undefined;
         this.openable = false;
         this.hasActionsStart = false;
@@ -1204,7 +1167,8 @@ const ListItem = class {
         t9n.connectMessages(this);
         const { el } = this;
         this.parentListEl = el.closest(listSelector);
-        this.level = getDepth(el) + 1;
+        this.level = utils.getDepth(el) + 1;
+        this.visualLevel = utils.getDepth(el, true);
         this.setSelectionDefaults();
     }
     async componentWillLoad() {
@@ -1255,68 +1219,66 @@ const ListItem = class {
             return null;
         }
         return (index.h("td", { class: {
-                [resources.CSS.selectionContainer]: true,
-                [resources.CSS.selectionContainerSingle]: selectionMode === "single" || selectionMode === "single-persist",
+                [utils.CSS.selectionContainer]: true,
+                [utils.CSS.selectionContainerSingle]: selectionMode === "single" || selectionMode === "single-persist",
             }, key: "selection-container", onClick: this.handleItemClick }, index.h("calcite-icon", { icon: selected
                 ? selectionMode === "multiple"
-                    ? resources.ICONS.selectedMultiple
-                    : resources.ICONS.selectedSingle
+                    ? utils.ICONS.selectedMultiple
+                    : utils.ICONS.selectedSingle
                 : selectionMode === "multiple"
-                    ? resources.ICONS.unselectedMultiple
-                    : resources.ICONS.unselectedSingle, scale: "s" })));
+                    ? utils.ICONS.unselectedMultiple
+                    : utils.ICONS.unselectedSingle, scale: "s" })));
     }
     renderDragHandle() {
         const { label, dragHandle, dragSelected, dragDisabled, setPosition, setSize } = this;
-        return dragHandle ? (index.h("td", { "aria-label": label, class: resources.CSS.dragContainer, key: "drag-handle-container", onFocusin: this.focusCellHandle, role: "gridcell",
+        return dragHandle ? (index.h("td", { "aria-label": label, class: utils.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) }, index.h("calcite-handle", { disabled: dragDisabled, label: label, onCalciteHandleChange: this.dragHandleSelectedChangeHandler, selected: dragSelected, setPosition: setPosition, setSize: setSize }))) : null;
     }
     renderOpen() {
         const { el, open, openable, messages } = this;
         const dir = dom.getElementDir(el);
-        const icon = open ? resources.ICONS.open : dir === "rtl" ? resources.ICONS.closedRTL : resources.ICONS.closedLTR;
+        const icon = open ? utils.ICONS.open : dir === "rtl" ? utils.ICONS.closedRTL : utils.ICONS.closedLTR;
         const tooltip = open ? messages.collapse : messages.expand;
-        return openable ? (index.h("td", { class: resources.CSS.openContainer, key: "open-container", onClick: this.handleToggleClick, title: tooltip }, index.h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
+        return openable ? (index.h("td", { class: utils.CSS.openContainer, key: "open-container", onClick: this.handleToggleClick, title: tooltip }, index.h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
     }
     renderActionsStart() {
         const { label, hasActionsStart } = this;
-        return (index.h("td", { "aria-label": label, class: resources.CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", onFocusin: this.focusCellActionsStart, role: "gridcell",
+        return (index.h("td", { "aria-label": label, class: utils.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) }, index.h("slot", { name: resources.SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+            ref: (el) => (this.actionsStartEl = el) }, index.h("slot", { name: utils.SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
     }
     renderActionsEnd() {
         const { label, hasActionsEnd, closable, messages } = this;
-        return (index.h("td", { "aria-label": label, class: resources.CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", onFocusin: this.focusCellActionsEnd, role: "gridcell",
+        return (index.h("td", { "aria-label": label, class: utils.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) }, index.h("slot", { name: resources.SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (index.h("calcite-action", { appearance: "transparent", icon: resources.ICONS.close, key: "close-action", label: messages.close, onClick: this.handleCloseClick, text: messages.close })) : null));
+            ref: (el) => (this.actionsEndEl = el) }, index.h("slot", { name: utils.SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (index.h("calcite-action", { appearance: "transparent", icon: utils.ICONS.close, key: "close-action", label: messages.close, onClick: this.handleCloseClick, text: messages.close })) : null));
     }
     renderContentStart() {
         const { hasContentStart } = this;
-        return (index.h("div", { class: resources.CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: resources.SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+        return (index.h("div", { class: utils.CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: utils.SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
     }
     renderCustomContent() {
         const { hasCustomContent } = this;
-        return (index.h("div", { class: resources.CSS.customContent, hidden: !hasCustomContent }, index.h("slot", { name: resources.SLOTS.content, onSlotchange: this.handleContentSlotChange })));
+        return (index.h("div", { class: utils.CSS.customContent, hidden: !hasCustomContent }, index.h("slot", { name: utils.SLOTS.content, onSlotchange: this.handleContentSlotChange })));
     }
     renderContentEnd() {
         const { hasContentEnd } = this;
-        return (index.h("div", { class: resources.CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: resources.SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+        return (index.h("div", { class: utils.CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: utils.SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
     }
     renderContentBottom() {
-        const { hasContentBottom } = this;
-        return (index.h("div", { class: resources.CSS.contentBottom, hidden: !hasContentBottom }, index.h("slot", { name: resources.SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
+        const { hasContentBottom, visualLevel } = this;
+        return (index.h("div", { class: utils.CSS.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, index.h("slot", { name: utils.SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
     }
     renderDefaultContainer() {
         return (index.h("div", { class: {
-                [resources.CSS.nestedContainer]: true,
-                [resources.CSS.nestedContainerHidden]: this.openable && !this.open,
-            } }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange,
-            // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
-            ref: (el) => (this.defaultSlotEl = el) })));
+                [utils.CSS.nestedContainer]: true,
+                [utils.CSS.nestedContainerHidden]: this.openable && !this.open,
+            } }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
     }
     renderContentProperties() {
         const { label, description, hasCustomContent } = this;
-        return !hasCustomContent && (!!label || !!description) ? (index.h("div", { class: resources.CSS.content, key: "content" }, label ? (index.h("div", { class: resources.CSS.label, key: "label" }, label)) : null, description ? (index.h("div", { class: resources.CSS.description, key: "description" }, description)) : null)) : null;
+        return !hasCustomContent && (!!label || !!description) ? (index.h("div", { class: utils.CSS.content, key: "content" }, label ? (index.h("div", { class: utils.CSS.label, key: "label" }, label)) : null, description ? (index.h("div", { class: utils.CSS.description, key: "description" }, description)) : null)) : null;
     }
     renderContentContainer() {
         const { description, label, selectionMode, hasCustomContent } = this;
@@ -1328,27 +1290,27 @@ const ListItem = class {
             this.renderContentEnd(),
         ];
         return (index.h("td", { "aria-label": label, class: {
-                [resources.CSS.contentContainer]: true,
-                [resources.CSS.contentContainerSelectable]: selectionMode !== "none",
-                [resources.CSS.contentContainerHasCenterContent]: hasCenterContent,
+                [utils.CSS.contentContainer]: true,
+                [utils.CSS.contentContainerSelectable]: selectionMode !== "none",
+                [utils.CSS.contentContainerHasCenterContent]: hasCenterContent,
             }, 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));
     }
     render() {
-        const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, filterHidden, bordered, disabled, } = this;
+        const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, visualLevel, } = this;
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (index.h(index.Host, { key: '15651b0bef6af7db01d650ff74b732db28758292' }, index.h(interactive.InteractiveContainer, { key: 'a0a4c2b6587a5c173710235518bf97aafc7d3b2a', disabled: disabled }, index.h("div", { key: 'f4dceb92cd6164d4d5445a9977aebfa9ae4073ff', class: { [resources.CSS.wrapper]: true, [resources.CSS.wrapperBordered]: bordered } }, index.h("tr", { key: '105d3b31fde1dabc1b606b25e28f9f7535367503', "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
-                [resources.CSS.container]: true,
-                [resources.CSS.containerHover]: true,
-                [resources.CSS.containerBorder]: showBorder,
-                [resources.CSS.containerBorderSelected]: borderSelected,
-                [resources.CSS.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed || filterHidden, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, role: "row", tabIndex: active ? 0 : -1,
+        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("tr", { "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
+                [utils.CSS.container]: true,
+                [utils.CSS.containerHover]: true,
+                [utils.CSS.containerBorder]: showBorder,
+                [utils.CSS.containerBorderSelected]: borderSelected,
+                [utils.CSS.containerBorderUnselected]: borderUnselected,
+            }, 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()), index.h("div", { key: '2018e3a2e07547caca69c18ce58a3e19ae66b3e8', class: resources.CSS.indent }, this.renderDefaultContainer()))));
+            ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer())));
     }
     emitCalciteInternalListItemChange() {
         this.calciteInternalListItemChange.emit();
@@ -1369,9 +1331,9 @@ const ListItem = class {
         if (!slotEl) {
             return;
         }
-        const listItemChildren = getListItemChildren(slotEl);
-        const listItemChildLists = getListItemChildLists(slotEl);
-        updateListItemChildren(listItemChildren);
+        const listItemChildren = utils.getListItemChildren(slotEl);
+        const listItemChildLists = utils.getListItemChildLists(slotEl);
+        utils.updateListItemChildren(listItemChildren);
         this.openable = !!listItemChildren.length || !!listItemChildLists.length;
     }
     getGridCells() {
@@ -1388,10 +1350,9 @@ const ListItem = class {
         "effectiveLocale": ["effectiveLocaleChange"]
     }; }
 };
-ListItem.style = CalciteListItemStyle0;
+ListItem.style = listItemCss;
 
-const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items: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}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteStackStyle0 = stackCss;
+const stackCss = ":host([disabled]) .content{cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) .content *,:host([disabled]) .content ::slotted(*){pointer-events:none}:host{display:flex;flex:1 1 0%;flex-direction:column}.container{display:flex;flex:1 1 auto;align-items:stretch;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}.content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;padding-inline:var(--calcite-stack-padding-inline, 0.75rem);padding-block:var(--calcite-stack-padding-block, 0.5rem)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:0 1 auto}.actions-start,.actions-end,.content-start,.content-end{display:flex;align-items:center}.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}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Stack = class {
     constructor(hostRef) {
@@ -1426,28 +1387,28 @@ const Stack = class {
     // --------------------------------------------------------------------------
     renderActionsStart() {
         const { hasActionsStart } = this;
-        return (index.h("div", { class: CSS$1.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, index.h("slot", { name: SLOTS$1.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+        return (index.h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, index.h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
     }
     renderActionsEnd() {
         const { hasActionsEnd } = this;
-        return (index.h("div", { class: CSS$1.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, index.h("slot", { name: SLOTS$1.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+        return (index.h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, index.h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
     }
     renderContentStart() {
         const { hasContentStart } = this;
-        return (index.h("div", { class: CSS$1.contentStart, hidden: !hasContentStart }, index.h("slot", { name: SLOTS$1.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+        return (index.h("div", { class: CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
     }
     renderDefaultContent() {
-        return (index.h("div", { class: CSS$1.content }, index.h("slot", null)));
+        return (index.h("div", { class: CSS.content }, index.h("slot", null)));
     }
     renderContentEnd() {
         const { hasContentEnd } = this;
-        return (index.h("div", { class: CSS$1.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: SLOTS$1.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+        return (index.h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
     }
     render() {
-        return (index.h(index.Host, { key: 'f8d423aff1f3991e45cf591bd0480537cc09f846' }, index.h("div", { key: '6c8e70bc5cced152dde2592c2b6f1f28695de681', class: CSS$1.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+        return (index.h(index.Host, null, index.h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
     }
 };
-Stack.style = CalciteStackStyle0;
+Stack.style = stackCss;
 
 exports.calcite_filter = Filter;
 exports.calcite_handle = Handle;