@esri/calcite-components 3.0.0-next.99 → 3.0.1

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

@@ -1,26 +1,24 @@
-import { D as C, c as x } from "../../chunks/runtime.js";
-import { ref as A } from "lit-html/directives/ref.js";
+import { D as x, c as A } from "../../chunks/runtime.js";
+import { ref as $ } from "lit-html/directives/ref.js";
 import { keyed as I } from "lit-html/directives/keyed.js";
-import { debounce as $ } from "lodash-es";
+import { debounce as y } from "lodash-es";
 import { html as d } from "lit";
-import { LitElement as y, createEvent as m, safeClassMap as f } from "@arcgis/lumina";
-import { a as g, y as w } from "../../chunks/dom.js";
-import { u as P, I as k } from "../../chunks/interactive.js";
-import { c as D } from "../../chunks/observers.js";
-import { b as u, l as L, u as O, c as v, o as M } from "../../chunks/utils.js";
-import { d as T, c as R } from "../../chunks/sortableComponent.js";
-import { S } from "../../chunks/resources.js";
-import { c as U, s as N, a as G } from "../../chunks/loadable.js";
-import { n as F } from "../../chunks/locale.js";
-import { g as H } from "../../chunks/guid.js";
-import { u as z } from "../../chunks/useT9n.js";
-import { css as q } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const p = {
+import { LitElement as w, createEvent as p, safeClassMap as h } from "@arcgis/lumina";
+import { a as g, y as P } from "../../chunks/dom.js";
+import { u as k, I as D } from "../../chunks/interactive.js";
+import { c as O } from "../../chunks/observers.js";
+import { b as u, l as b, u as M, c as L, i as v, o as T } from "../../chunks/utils.js";
+import { d as R, c as N } from "../../chunks/sortableComponent.js";
+import { S as F } from "../../chunks/resources.js";
+import { c as U } from "../../chunks/loadable.js";
+import { n as C } from "../../chunks/locale.js";
+import { g as G } from "../../chunks/guid.js";
+import { u as H } from "../../chunks/useT9n.js";
+import { css as z } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const f = {
   container: "container",
   table: "table",
   scrim: "scrim",
@@ -28,34 +26,34 @@ const p = {
   tableContainer: "table-container",
   sticky: "sticky-pos",
   assistiveText: "assistive-text"
-}, b = {
+}, E = {
   filterNoResults: "filter-no-results",
   filterActionsStart: "filter-actions-start",
   filterActionsEnd: "filter-actions-end"
-}, B = q`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`, W = `${v}, ${u}`;
-class K extends y {
+}, q = z`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`, B = `${L}, ${u}`;
+class W extends w {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.dragSelector = u, this.focusableItems = [], this.handleSelector = "calcite-sort-handle", this.listItems = [], this.listItemGroups = [], this.mutationObserver = D("mutation", () => {
+    super(), this.dragSelector = u, this.focusableItems = [], this.handleSelector = "calcite-sort-handle", this.listItems = [], this.listItemGroups = [], this.mutationObserver = O("mutation", () => {
       this.willPerformFilter = !0, this.updateListItems();
-    }), this.updateListItems = $(() => {
+    }), this.updateListItems = y(() => {
       this.updateGroupItems();
-      const { selectionAppearance: t, selectionMode: e, interactionMode: i, dragEnabled: l, el: s, filterEl: r, moveToItems: a, displayMode: n, scale: c } = this, h = Array.from(this.el.querySelectorAll(u));
-      if (h.forEach((o) => {
-        o.scale = c, o.selectionAppearance = t, o.selectionMode = e, o.interactionMode = i, o.closest(L) === s && (o.moveToItems = a.filter((E) => E.element !== s && !o.contains(E.element)), o.dragHandle = l, o.displayMode = n);
+      const { selectionAppearance: t, selectionMode: e, interactionMode: i, dragEnabled: l, el: s, filterEl: n, moveToItems: a, displayMode: r, scale: c } = this, m = Array.from(this.el.querySelectorAll(u));
+      if (m.forEach((o) => {
+        o.scale = c, o.selectionAppearance = t, o.selectionMode = e, o.interactionMode = i, o.closest(b) === s && (o.moveToItems = a.filter((S) => S.element !== s && !o.contains(S.element)), o.dragHandle = l, o.displayMode = r);
       }), this.parentListEl) {
         this.setUpSorting();
         return;
       }
-      this.listItems = h, this.filterEnabled && this.willPerformFilter && (this.willPerformFilter = !1, this.dataForFilter = this.getItemData(), r && (r.items = this.dataForFilter, this.filterAndUpdateData())), this.visibleItems = this.listItems.filter((o) => !o.closed && !o.hidden), this.updateFilteredItems(), this.borderItems(), this.focusableItems = this.filteredItems.filter((o) => !o.disabled), this.setActiveListItem(), this.updateSelectedItems(), this.setUpSorting();
-    }, C.nextTick), this.visibleItems = [], this.willFilterEmit = !1, this.willPerformFilter = !1, this.dataForFilter = [], this.hasFilterActionsEnd = !1, this.hasFilterActionsStart = !1, this.hasFilterNoResults = !1, this.moveToItems = [], this.disabled = !1, this.dragEnabled = !1, this.filterEnabled = !1, this.filteredData = [], this.filteredItems = [], this.interactionMode = "interactive", this.loading = !1, this.messages = z({ blocking: !0 }), this.displayMode = "flat", this.scale = "m", this.selectedItems = [], this.selectionAppearance = "icon", this.selectionMode = "none", this.calciteInternalListDefaultSlotChange = m({ cancelable: !1 }), this.calciteListChange = m({ cancelable: !1 }), this.calciteListDragEnd = m({ cancelable: !1 }), this.calciteListDragStart = m({ cancelable: !1 }), this.calciteListFilter = m({ cancelable: !1 }), this.calciteListOrderChange = m({ cancelable: !1 }), this.listen("calciteInternalListItemToggle", this.handleCalciteListItemToggle), this.listen("calciteInternalFocusPreviousItem", this.handleCalciteInternalFocusPreviousItem), this.listen("calciteInternalListItemActive", this.handleCalciteInternalListItemActive), this.listen("calciteListItemSelect", this.handleCalciteListItemSelect), this.listen("calciteInternalAssistiveTextChange", this.handleCalciteInternalAssistiveTextChange), this.listen("calciteSortHandleReorder", this.handleSortReorder), this.listen("calciteSortHandleMove", this.handleSortMove), this.listen("calciteInternalListItemSelect", this.handleCalciteInternalListItemSelect), this.listen("calciteInternalListItemSelectMultiple", this.handleCalciteInternalListItemSelectMultiple), this.listen("calciteInternalListItemChange", this.handleCalciteInternalListItemChange), this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
+      this.listItems = m, this.filterEnabled && this.willPerformFilter && (this.willPerformFilter = !1, this.dataForFilter = this.getItemData(), n && (n.items = this.dataForFilter, this.filterAndUpdateData())), this.visibleItems = this.listItems.filter((o) => !o.closed && !o.hidden), this.updateFilteredItems(), this.borderItems(), this.focusableItems = this.filteredItems.filter((o) => !o.disabled), this.setActiveListItem(), this.updateSelectedItems(), this.setUpSorting();
+    }, x.nextTick), this.visibleItems = [], this.willFilterEmit = !1, this.willPerformFilter = !1, this.dataForFilter = [], this.hasFilterActionsEnd = !1, this.hasFilterActionsStart = !1, this.hasFilterNoResults = !1, this.moveToItems = [], this.disabled = !1, this.dragEnabled = !1, this.filterEnabled = !1, this.filteredData = [], this.filteredItems = [], this.interactionMode = "interactive", this.loading = !1, this.messages = H({ blocking: !0 }), this.displayMode = "flat", this.scale = "m", this.selectedItems = [], this.selectionAppearance = "icon", this.selectionMode = "none", this.calciteInternalListDefaultSlotChange = p({ cancelable: !1 }), this.calciteListChange = p({ cancelable: !1 }), this.calciteListDragEnd = p({ cancelable: !1 }), this.calciteListDragStart = p({ cancelable: !1 }), this.calciteListFilter = p({ cancelable: !1 }), this.calciteListOrderChange = p({ cancelable: !1 }), this.listen("calciteInternalListItemToggle", this.handleCalciteListItemToggle), this.listen("calciteInternalFocusPreviousItem", this.handleCalciteInternalFocusPreviousItem), this.listen("calciteInternalListItemActive", this.handleCalciteInternalListItemActive), this.listen("calciteListItemSelect", this.handleCalciteListItemSelect), this.listen("calciteInternalAssistiveTextChange", this.handleCalciteInternalAssistiveTextChange), this.listen("calciteSortHandleReorder", this.handleSortReorder), this.listen("calciteSortHandleMove", this.handleSortMove), this.listen("calciteInternalListItemSelect", this.handleCalciteInternalListItemSelect), this.listen("calciteInternalListItemSelectMultiple", this.handleCalciteInternalListItemSelectMultiple), this.listen("calciteInternalListItemChange", this.handleCalciteInternalListItemChange), this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
   }
   static {
     this.properties = { assistiveText: 16, dataForFilter: 16, hasFilterActionsEnd: 16, hasFilterActionsStart: 16, hasFilterNoResults: 16, moveToItems: 16, hasActiveFilter: 16, showNoResultsContainer: 16, canPull: 0, canPut: 0, disabled: 7, dragEnabled: 7, filterEnabled: 7, filterPredicate: 0, filterLabel: 3, filterPlaceholder: 3, filterProps: 0, filterText: 3, filteredData: 0, filteredItems: 0, group: 3, interactionMode: 3, label: 1, loading: 7, messageOverrides: 0, displayMode: 3, numberingSystem: 1, scale: 3, selectedItems: 0, selectionAppearance: 3, selectionMode: 3 };
   }
   static {
-    this.styles = B;
+    this.styles = q;
   }
   get hasActiveFilter() {
     return this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length;
@@ -77,7 +75,7 @@ class K extends y {
     super.connectedCallback(), this.connectObserver(), this.willPerformFilter = !0, this.updateListItems(), this.setUpSorting(), this.setParentList(), this.setListItemGroups();
   }
   async load() {
-    N(this), this.handleInteractionModeWarning();
+    this.handleInteractionModeWarning();
   }
   /**
    * TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code
@@ -88,13 +86,12 @@ class K extends y {
     (t.has("filterText") || t.has("filterProps") || t.has("filterPredicate")) && this.performFilter(), (t.has("filterEnabled") && (this.hasUpdated || this.filterEnabled !== !1) || t.has("group") || t.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== !1) || t.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || t.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "icon") || t.has("displayMode") && this.hasUpdated || t.has("scale") && this.hasUpdated || t.has("filterPredicate") && this.hasUpdated) && this.handleListItemChange();
   }
   updated() {
-    P(this);
+    k(this);
   }
   loaded() {
-    G(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.disconnectObserver(), T(this);
+    super.disconnectedCallback(), this.disconnectObserver(), R(this);
   }
   // #endregion
   // #region Private Methods
@@ -143,12 +140,12 @@ class K extends y {
     if (this.parentListEl)
       return;
     t.stopPropagation();
-    const { target: e, detail: i } = t, { focusableItems: l, lastSelectedInfo: s } = this, r = e;
+    const { target: e, detail: i } = t, { focusableItems: l, lastSelectedInfo: s } = this, n = e;
     if (i.selectMultiple && s) {
-      const a = l.indexOf(r), n = l.indexOf(s.selectedItem), c = Math.min(n, a), h = Math.max(n, a);
-      l.slice(c, h + 1).forEach((o) => o.selected = s.selected);
+      const a = l.indexOf(n), r = l.indexOf(s.selectedItem), c = Math.min(r, a), m = Math.max(r, a);
+      l.slice(c, m + 1).forEach((o) => o.selected = s.selected);
     } else
-      this.lastSelectedInfo = { selectedItem: r, selected: r.selected };
+      this.lastSelectedInfo = { selectedItem: n, selected: n.selected };
   }
   handleCalciteInternalListItemChange(t) {
     this.parentListEl || (t.stopPropagation(), this.updateListItems());
@@ -164,7 +161,7 @@ class K extends y {
   }
   setUpSorting() {
     const { dragEnabled: t } = this;
-    t && R(this);
+    t && N(this);
   }
   onGlobalDragStart() {
     this.disconnectObserver();
@@ -185,13 +182,13 @@ class K extends y {
     this.setParentList(), this.updateListItems(), this.calciteListOrderChange.emit(t);
   }
   setParentList() {
-    this.parentListEl = this.el.parentElement?.closest(L);
+    this.parentListEl = this.el.parentElement?.closest(b);
   }
   handleDefaultSlotChange(t) {
-    O(t.target), this.parentListEl && this.calciteInternalListDefaultSlotChange.emit();
+    M(t.target), this.parentListEl && this.calciteInternalListDefaultSlotChange.emit();
   }
   setListItemGroups() {
-    this.listItemGroups = Array.from(this.el.querySelectorAll(v));
+    this.listItemGroups = Array.from(this.el.querySelectorAll(L));
   }
   handleFilterActionsStartSlotChange(t) {
     this.hasFilterActionsStart = g(t);
@@ -212,7 +209,7 @@ class K extends y {
   filterElements({ el: t, filteredItems: e, visibleParents: i }) {
     const l = !i.has(t) && !e.includes(t);
     t.filterHidden = l;
-    const s = t.parentElement.closest(W);
+    const s = t.parentElement.closest(B);
     s && (l || i.add(s), this.filterElements({
       el: s,
       filteredItems: e,
@@ -232,8 +229,8 @@ class K extends y {
     t.forEach((e) => e.bordered = e !== t[t.length - 1]);
   }
   updateFilteredItems() {
-    const { visibleItems: t, filteredData: e, filterText: i, filterPredicate: l } = this, s = t?.filter((n) => t.every((c) => c === n || !n.contains(c))), r = l ? t.filter(l) : i ? e.map((n) => n.el) : t || [], a = /* @__PURE__ */ new WeakSet();
-    s.forEach((n) => this.filterElements({ el: n, filteredItems: r, visibleParents: a })), this.filteredItems = r, this.willFilterEmit && (this.willFilterEmit = !1, this.calciteListFilter.emit());
+    const { visibleItems: t, filteredData: e, filterText: i, filterPredicate: l } = this, s = t?.filter((r) => t.every((c) => c === r || !r.contains(c))), n = l ? t.filter(l) : i ? e.map((r) => r.el) : t || [], a = /* @__PURE__ */ new WeakSet();
+    s.forEach((r) => this.filterElements({ el: r, filteredItems: n, visibleParents: a })), this.filteredItems = n, this.willFilterEmit && (this.willFilterEmit = !1, this.calciteListFilter.emit());
   }
   updateFilteredData() {
     const { filterEl: t } = this;
@@ -270,12 +267,12 @@ class K extends y {
     return this.listItemGroups.filter((i) => i.contains(t)).map((i) => i.heading);
   }
   updateGroupItems() {
-    const { el: t, group: e, scale: i } = this, l = w(t), s = e ? Array.from(l.querySelectorAll(`calcite-list[group="${e}"]`)).filter((a) => !a.disabled && a.dragEnabled) : [];
+    const { el: t, group: e, scale: i } = this, l = P(t), s = e ? Array.from(l.querySelectorAll(`${b}[group="${e}"]`)).filter((a) => !a.disabled && a.dragEnabled) : [];
     this.moveToItems = s.map((a) => ({
       element: a,
       label: a.label ?? a.id,
-      id: t.id || H()
-    })), Array.from(this.el.querySelectorAll(v)).forEach((a) => {
+      id: G()
+    })), Array.from(this.el.querySelectorAll(L)).forEach((a) => {
       a.scale = i;
     });
   }
@@ -316,17 +313,17 @@ class K extends y {
     this.interactionMode === "static" && this.selectionMode !== "none" && this.selectionAppearance === "border" && console.warn('selection-appearance="border" requires interaction-mode="interactive"');
   }
   handleMove(t) {
-    const { moveTo: e } = t.detail, i = t.target, l = i?.parentElement, s = Array.from(l.children).indexOf(i), r = e.element;
+    const { moveTo: e } = t.detail, i = t.target, l = i?.parentElement, s = e.element, a = Array.from(l.children).filter(v).indexOf(i);
     if (!l)
       return;
-    i.sortHandleOpen = !1, this.disconnectObserver(), r.prepend(i), M(i);
-    const a = Array.from(r.children).indexOf(i);
+    i.sortHandleOpen = !1, this.disconnectObserver(), s.prepend(i), T(i);
+    const c = Array.from(s.children).filter(v).indexOf(i);
     this.updateListItems(), this.connectObserver(), this.calciteListOrderChange.emit({
       dragEl: i,
       fromEl: l,
-      toEl: r,
-      newIndex: a,
-      oldIndex: s
+      toEl: s,
+      newIndex: c,
+      oldIndex: a
     });
   }
   handleReorder(t) {
@@ -334,47 +331,47 @@ class K extends y {
     if (!l)
       return;
     i.sortHandleOpen = !1;
-    const s = this.filteredItems.filter((h) => h.parentElement === l), r = s.length - 1, a = s.indexOf(i);
-    let n = a;
+    const s = Array.from(l.children).filter(v), n = s.length - 1, a = s.indexOf(i);
+    let r = a;
     switch (e) {
       case "top":
-        n = 0;
+        r = 0;
         break;
       case "bottom":
-        n = r;
+        r = n;
         break;
       case "up":
-        n = a === 0 ? 0 : a - 1;
+        r = a === 0 ? 0 : a - 1;
         break;
       case "down":
-        n = a === r ? r : a + 1;
+        r = a === n ? n : a + 1;
         break;
     }
     this.disconnectObserver();
-    const c = e === "up" || e === "top" ? s[n] : s[n].nextSibling;
+    const c = e === "up" || e === "top" ? s[r] : s[r].nextSibling;
     l.insertBefore(i, c), this.updateListItems(), this.connectObserver(), this.calciteListOrderChange.emit({
       dragEl: i,
       fromEl: l,
       toEl: l,
-      newIndex: n,
+      newIndex: r,
       oldIndex: a
     });
   }
   // #endregion
   // #region Rendering
   render() {
-    const { loading: t, label: e, disabled: i, dataForFilter: l, filterEnabled: s, filterPlaceholder: r, filterText: a, filterLabel: n, hasFilterActionsStart: c, hasFilterActionsEnd: h, effectiveFilterProps: o } = this;
-    return k({ disabled: this.disabled, children: d`<div class=${f(p.container)}>${this.dragEnabled ? d`<span aria-live=assertive class=${f(p.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${t ? d`<calcite-scrim class=${f(p.scrim)} .loading=${t}></calcite-scrim>` : null}<div .ariaBusy=${t} .ariaLabel=${e || ""} class=${f(p.table)} @keydown=${this.handleListKeydown} role=treegrid>${s || c || h ? d`<div class=${f(p.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${f(p.stack)}><slot name=${b.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${S.actionsStart}></slot><calcite-filter .ariaLabel=${r} .disabled=${i} .filterProps=${o} .items=${l} .label=${n} @calciteFilterChange=${this.handleFilterChange} .placeholder=${r} .scale=${this.scale} .value=${a} ${A(this.setFilterEl)}></calcite-filter><slot name=${b.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${S.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${f(p.tableContainer)} role=rowgroup><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div><div aria-live=polite data-test-id=no-results-container .hidden=${!this.showNoResultsContainer}><slot name=${b.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
+    const { loading: t, label: e, disabled: i, dataForFilter: l, filterEnabled: s, filterPlaceholder: n, filterText: a, filterLabel: r, hasFilterActionsStart: c, hasFilterActionsEnd: m, effectiveFilterProps: o } = this;
+    return D({ disabled: this.disabled, children: d`<div class=${h(f.container)}>${this.dragEnabled ? d`<span aria-live=assertive class=${h(f.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${t ? d`<calcite-scrim class=${h(f.scrim)} .loading=${t}></calcite-scrim>` : null}<div .ariaBusy=${t} .ariaLabel=${e || ""} class=${h(f.table)} @keydown=${this.handleListKeydown} role=treegrid>${s || c || m ? d`<div class=${h(f.sticky)} role=rowgroup><div role=row><div role=columnheader><calcite-stack class=${h(f.stack)}><slot name=${E.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${F.actionsStart}></slot><calcite-filter .ariaLabel=${n} .disabled=${i} .filterProps=${o} .items=${l} .label=${r} @calciteFilterChange=${this.handleFilterChange} .placeholder=${n} .scale=${this.scale} .value=${a} ${$(this.setFilterEl)}></calcite-filter><slot name=${E.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${F.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${h(f.tableContainer)} role=rowgroup><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div><div aria-live=polite data-test-id=no-results-container .hidden=${!this.showNoResultsContainer}><slot name=${E.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
   }
   renderItemAriaLive() {
     const { messages: t, filteredItems: e, parentListEl: i, messages: { _lang: l }, numberingSystem: s } = this;
-    return F.numberFormatOptions = {
+    return C.numberFormatOptions = {
       locale: l,
       numberingSystem: s
-    }, i ? null : d`<div aria-live=polite class=${f(p.assistiveText)}>${this.hasActiveFilter ? I("aria-filter-enabled", d`<div>${t.filterEnabled}</div>`) : null}${I("aria-item-count", d`<div>${t.total.replace("{count}", F.localize(e.length.toString()))}</div>`)}${e.length ? I("aria-item-list", d`<ol>${e.map((r) => d`<li>${r.label}</li>`)}</ol>`) : null}</div>`;
+    }, i ? null : d`<div aria-live=polite class=${h(f.assistiveText)}>${this.hasActiveFilter ? I("aria-filter-enabled", d`<div>${t.filterEnabled}</div>`) : null}${I("aria-item-count", d`<div>${t.total.replace("{count}", C.localize(e.length.toString()))}</div>`)}${e.length ? I("aria-item-list", d`<ol>${e.map((n) => d`<li>${n.label}</li>`)}</ol>`) : null}</div>`;
   }
 }
-x("calcite-list", K);
+A("calcite-list", W);
 export {
-  K as List
+  W as List
 };

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

@@ -1,40 +1,38 @@
-import { c as M } from "../../chunks/runtime.js";
+import { c as z } from "../../chunks/runtime.js";
 import { keyed as r } from "lit-html/directives/keyed.js";
-import { html as o, nothing as D } from "lit";
-import { createRef as C, ref as v } from "lit-html/directives/ref.js";
-import { LitElement as T, createEvent as d, safeClassMap as i } from "@arcgis/lumina";
-import { a as b, x as w, g as P } from "../../chunks/dom.js";
-import { u as F, I as U } from "../../chunks/interactive.js";
-import { c as G, s as R, a as K } from "../../chunks/loadable.js";
-import { u as j } from "../../chunks/useT9n.js";
+import { html as o, nothing as M } from "lit";
+import { createRef as b, ref as v } from "lit-html/directives/ref.js";
+import { LitElement as D, createEvent as d, safeClassMap as i } from "@arcgis/lumina";
+import { a as C, x as T, g as P } from "../../chunks/dom.js";
+import { u as U, I as F } from "../../chunks/interactive.js";
+import { c as R } from "../../chunks/loadable.js";
+import { u as G } from "../../chunks/useT9n.js";
 import { g as $ } from "../../chunks/component.js";
-import { l as N, g as W, a as q } from "../../chunks/utils.js";
-import { a as L, C as a, I as g, S } from "../../chunks/resources5.js";
-import { css as J } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const Q = J`: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-1))}.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:hover.container--border-unselected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-border-1))}.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--open{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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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))}: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-family:var(--calcite-font-family);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}.open-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-list-icon-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-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,.open-container calcite-action,.open-container calcite-sort-handle{align-self:stretch}.open-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}`, x = /* @__PURE__ */ new Map();
-class V extends T {
+import { l as K, g as j, a as N } from "../../chunks/utils.js";
+import { a as w, I as u, C as a, S } from "../../chunks/resources5.js";
+import { css as W } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const q = W`: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-1))}.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:hover.container--border-unselected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-border-1))}.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--open{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:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(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))}: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-family:var(--calcite-font-family);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}.open-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-list-icon-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-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,.open-container calcite-action,.open-container calcite-sort-handle{align-self:stretch}.open-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}`, I = /* @__PURE__ */ new Map();
+class J extends D {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.actionsEndEl = C(), this.actionsStartEl = C(), this.containerEl = C(), this.contentEl = C(), this.defaultSlotEl = C(), this.handleGridEl = C(), this.hasActionsEnd = !1, this.hasActionsStart = !1, this.hasContentBottom = !1, this.hasContentEnd = !1, this.hasContentStart = !1, this.hasCustomContent = !1, this.level = null, this.openable = !1, this.active = !1, this.bordered = !1, this.closable = !1, this.closed = !1, this.disabled = !1, this.dragDisabled = !1, this.dragHandle = !1, this.filterHidden = !1, this.interactionMode = null, this.messages = j(), this.displayMode = "flat", this.moveToItems = [], this.open = !1, this.scale = "m", this.selected = !1, this.selectionAppearance = null, this.selectionMode = null, this.setPosition = null, this.setSize = null, this.sortHandleOpen = !1, this.unavailable = !1, this.calciteInternalFocusPreviousItem = d({ cancelable: !1 }), this.calciteInternalListItemActive = d({ cancelable: !1 }), this.calciteInternalListItemChange = d({ cancelable: !1 }), this.calciteInternalListItemSelect = d({ cancelable: !1 }), this.calciteInternalListItemSelectMultiple = d({ cancelable: !1 }), this.calciteInternalListItemToggle = d({ cancelable: !1 }), this.calciteListItemClose = d({ cancelable: !1 }), this.calciteListItemSelect = d({ cancelable: !1 }), this.calciteListItemSortHandleBeforeClose = d({ cancelable: !1 }), this.calciteListItemSortHandleBeforeOpen = d({ cancelable: !1 }), this.calciteListItemSortHandleClose = d({ cancelable: !1 }), this.calciteListItemSortHandleOpen = d({ cancelable: !1 }), this.calciteListItemToggle = d({ cancelable: !1 }), this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges), this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
+    super(), this.actionsEndEl = b(), this.actionsStartEl = b(), this.containerEl = b(), this.contentEl = b(), this.defaultSlotEl = b(), this.handleGridEl = b(), this.hasActionsEnd = !1, this.hasActionsStart = !1, this.hasContentBottom = !1, this.hasContentEnd = !1, this.hasContentStart = !1, this.hasCustomContent = !1, this.level = null, this.openable = !1, this.active = !1, this.bordered = !1, this.closable = !1, this.closed = !1, this.disabled = !1, this.dragDisabled = !1, this.dragHandle = !1, this.filterHidden = !1, this.interactionMode = null, this.messages = G(), this.displayMode = "flat", this.moveToItems = [], this.open = !1, this.scale = "m", this.selected = !1, this.selectionAppearance = null, this.selectionMode = null, this.setPosition = null, this.setSize = null, this.sortHandleOpen = !1, this.unavailable = !1, this.calciteInternalFocusPreviousItem = d({ cancelable: !1 }), this.calciteInternalListItemActive = d({ cancelable: !1 }), this.calciteInternalListItemChange = d({ cancelable: !1 }), this.calciteInternalListItemSelect = d({ cancelable: !1 }), this.calciteInternalListItemSelectMultiple = d({ cancelable: !1 }), this.calciteInternalListItemToggle = d({ cancelable: !1 }), this.calciteListItemClose = d({ cancelable: !1 }), this.calciteListItemSelect = d({ cancelable: !1 }), this.calciteListItemSortHandleBeforeClose = d({ cancelable: !1 }), this.calciteListItemSortHandleBeforeOpen = d({ cancelable: !1 }), this.calciteListItemSortHandleClose = d({ cancelable: !1 }), this.calciteListItemSortHandleOpen = d({ cancelable: !1 }), this.calciteListItemToggle = d({ cancelable: !1 }), this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges), this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
   }
   static {
-    this.properties = { hasActionsEnd: 16, hasActionsStart: 16, hasContentBottom: 16, hasContentEnd: 16, hasContentStart: 16, hasCustomContent: 16, level: 16, openable: 16, parentListEl: 16, active: 5, bordered: 5, closable: 7, closed: 7, description: 1, disabled: 7, dragDisabled: 7, dragHandle: 7, filterHidden: 7, interactionMode: 1, label: 1, messageOverrides: 0, metadata: 0, displayMode: 3, moveToItems: 0, open: 7, scale: 3, selected: 7, selectionAppearance: 3, selectionMode: 3, setPosition: 9, setSize: 9, sortHandleOpen: 5, unavailable: 7, value: 1, iconStart: 3, iconEnd: 3, iconFlipRtl: 3 };
+    this.properties = { hasActionsEnd: 16, hasActionsStart: 16, hasContentBottom: 16, hasContentEnd: 16, hasContentStart: 16, hasCustomContent: 16, level: 16, openable: 16, parentListEl: 16, active: 5, bordered: 5, closable: 7, closed: 7, description: 1, disabled: 7, dragDisabled: 7, dragHandle: 7, filterHidden: 7, interactionMode: 1, label: 1, messageOverrides: 0, metadata: 0, displayMode: 3, moveToItems: 0, open: 7, scale: 3, selected: 7, selectionAppearance: 3, selectionMode: 3, setPosition: 9, setSize: 9, sortHandleOpen: 7, unavailable: 7, value: 1, iconStart: 3, iconEnd: 3, iconFlipRtl: 3 };
   }
   static {
-    this.styles = Q;
+    this.styles = q;
   }
   // #endregion
   // #region Public Methods
   /** Sets focus on the component. */
   async setFocus() {
-    await G(this);
-    const { containerEl: { value: e }, parentListEl: t } = this, n = x.get(t);
+    await R(this);
+    const { containerEl: { value: e }, parentListEl: t } = this, n = I.get(t);
     if (typeof n == "number") {
       const l = this.getGridCells();
       l[n] ? this.focusCell(l[n]) : e?.focus();
@@ -45,10 +43,9 @@ class V extends T {
   connectedCallback() {
     super.connectedCallback();
     const { el: e } = this;
-    this.parentListEl = e.closest(N), this.level = W(e) + 1, this.setSelectionDefaults();
+    this.parentListEl = e.closest(K), this.level = j(e) + 1, this.setSelectionDefaults();
   }
   async load() {
-    R(this);
   }
   /**
    * TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code
@@ -59,10 +56,9 @@ class V extends T {
     e.has("active") && (this.hasUpdated || this.active !== !1) && this.activeHandler(this.active), e.has("closed") && (this.hasUpdated || this.closed !== !1) && this.handleClosedChange(), e.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(), e.has("open") && (this.hasUpdated || this.open !== !1) && this.handleOpenChange(), e.has("selected") && (this.hasUpdated || this.selected !== !1) && this.handleSelectedChange(), e.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== !1) && this.sortHandleOpenHandler(), e.has("displayMode") && this.hasUpdated && this.handleOpenableChange(this.defaultSlotEl.value);
   }
   updated() {
-    F(this);
+    U(this);
   }
   loaded() {
-    K(this);
   }
   // #endregion
   // #region Private Methods
@@ -105,18 +101,6 @@ class V extends T {
   emitInternalListItemActive() {
     this.calciteInternalListItemActive.emit();
   }
-  focusCellHandle() {
-    this.handleCellFocusIn(this.handleGridEl.value);
-  }
-  focusCellActionsStart() {
-    this.handleCellFocusIn(this.actionsStartEl.value);
-  }
-  focusCellContent() {
-    this.handleCellFocusIn(this.contentEl.value);
-  }
-  focusCellActionsEnd() {
-    this.handleCellFocusIn(this.actionsEndEl.value);
-  }
   emitCalciteInternalListItemToggle() {
     this.calciteInternalListItemToggle.emit();
   }
@@ -127,22 +111,22 @@ class V extends T {
     this.closed = !0, this.calciteListItemClose.emit();
   }
   handleContentSlotChange(e) {
-    this.hasCustomContent = b(e);
+    this.hasCustomContent = C(e);
   }
   handleActionsStartSlotChange(e) {
-    this.hasActionsStart = b(e);
+    this.hasActionsStart = C(e);
   }
   handleActionsEndSlotChange(e) {
-    this.hasActionsEnd = b(e);
+    this.hasActionsEnd = C(e);
   }
   handleContentStartSlotChange(e) {
-    this.hasContentStart = b(e);
+    this.hasContentStart = C(e);
   }
   handleContentEndSlotChange(e) {
-    this.hasContentEnd = b(e);
+    this.hasContentEnd = C(e);
   }
   handleContentBottomSlotChange(e) {
-    this.hasContentBottom = b(e);
+    this.hasContentBottom = C(e);
   }
   setSelectionDefaults() {
     const { parentListEl: e, selectionMode: t, selectionAppearance: n } = this;
@@ -151,7 +135,7 @@ class V extends T {
   handleOpenableChange(e) {
     if (!e)
       return;
-    const t = q(e);
+    const t = N(e);
     t.lists.forEach((n) => {
       n.displayMode = this.displayMode;
     }), this.openable = this.displayMode === "nested" && (t.lists.length > 0 || t.items.length > 0);
@@ -185,35 +169,32 @@ class V extends T {
   handleItemKeyDown(e) {
     if (e.defaultPrevented)
       return;
-    const { key: t } = e, n = e.composedPath(), { containerEl: { value: l }, actionsStartEl: { value: h }, actionsEndEl: { value: s }, open: u, openable: m } = this, c = this.getGridCells(), p = c.findIndex((f) => n.includes(f));
+    const { key: t } = e, n = e.composedPath(), { containerEl: { value: l }, actionsStartEl: { value: h }, actionsEndEl: { value: s }, open: g, openable: m } = this, c = this.getGridCells(), p = c.findIndex((f) => n.includes(f));
     if (t === "Enter" && !n.includes(h) && !n.includes(s))
       e.preventDefault(), this.toggleSelected(e.shiftKey);
     else if (t === "ArrowRight") {
       e.preventDefault();
       const f = p + 1;
-      p === -1 ? !u && m ? (this.toggle(!0), this.focusCell(null)) : c[0] && this.focusCell(c[0]) : c[p] && c[f] && this.focusCell(c[f]);
+      p === -1 ? !g && m ? (this.toggle(!0), this.focusCell(null)) : c[0] && this.focusCell(c[0]) : c[p] && c[f] && this.focusCell(c[f]);
     } else if (t === "ArrowLeft") {
       e.preventDefault();
       const f = p - 1;
-      p === -1 ? (this.focusCell(null), u && m ? this.toggle(!1) : this.calciteInternalFocusPreviousItem.emit()) : p === 0 ? (this.focusCell(null), l.focus()) : c[p] && c[f] && this.focusCell(c[f]);
+      p === -1 ? (this.focusCell(null), g && m ? this.toggle(!1) : this.calciteInternalFocusPreviousItem.emit()) : p === 0 ? (this.focusCell(null), l.focus()) : c[p] && c[f] && this.focusCell(c[f]);
     }
   }
   focusCellNull() {
     this.focusCell(null);
   }
-  handleCellFocusIn(e) {
-    this.setFocusCell(e, w(e), !0);
-  }
   setFocusCell(e, t, n) {
     const { parentListEl: l } = this;
-    n && x.set(l, null);
+    n && I.set(l, null);
     const h = this.getGridCells();
     h.forEach((s) => {
-      s.tabIndex = -1, s.removeAttribute(L);
-    }), e && (e.tabIndex = e === t ? 0 : -1, e.setAttribute(L, ""), n && x.set(l, h.indexOf(e)));
+      s.removeAttribute("tabindex"), s.removeAttribute(w);
+    }), e && (e === t ? e.tabIndex = 0 : e.removeAttribute("tabindex"), e.setAttribute(w, ""), n && I.set(l, h.indexOf(e)));
   }
   focusCell(e, t = !0) {
-    const n = w(e);
+    const n = T(e);
     this.setFocusCell(e, n, t), n?.focus();
   }
   // #endregion
@@ -223,26 +204,26 @@ class V extends T {
     return t === "none" || n === "border" ? null : r("selection-container", o`<div class=${i({
       [a.selectionContainer]: !0,
       [a.selectionContainerSingle]: t === "single" || t === "single-persist"
-    })} @click=${this.handleItemClick}><calcite-icon .icon=${e ? t === "multiple" ? g.selectedMultiple : g.selectedSingle : t === "multiple" ? g.unselectedMultiple : g.unselectedSingle} .scale=${$(this.scale)}></calcite-icon></div>`);
+    })} @click=${this.handleItemClick}><calcite-icon .icon=${e ? t === "multiple" ? u.selectedMultiple : u.selectedSingle : t === "multiple" ? u.unselectedMultiple : u.unselectedSingle} .scale=${$(this.scale)}></calcite-icon></div>`);
   }
   renderDragHandle() {
     const { label: e, dragHandle: t, dragDisabled: n, setPosition: l, setSize: h, moveToItems: s } = this;
-    return t ? r("drag-handle-container", o`<div .ariaLabel=${e} class=${i({ [a.dragContainer]: !0, [a.gridCell]: !0 })} @focusin=${this.focusCellHandle} role=gridcell ${v(this.handleGridEl)}><calcite-sort-handle .disabled=${n} .label=${e} .moveToItems=${s} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${l} .setSize=${h} ${v(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
+    return t ? r("drag-handle-container", o`<div .ariaLabel=${e} class=${i({ [a.dragContainer]: !0, [a.gridCell]: !0 })} role=gridcell ${v(this.handleGridEl)}><calcite-sort-handle .disabled=${n} .label=${e} .moveToItems=${s} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${l} .setSize=${h} ${v(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
   }
   renderOpen() {
     const { el: e, open: t, openable: n, messages: l, displayMode: h, scale: s } = this;
     if (h !== "nested")
       return null;
-    const u = P(e), m = n ? t ? g.open : u === "rtl" ? g.closedRTL : g.closedLTR : g.blank, c = $(s), p = n ? t ? l.collapse : l.expand : void 0, f = n ? this.handleToggleClick : void 0;
-    return r("open-container", o`<div class=${i(a.openContainer)} @click=${f} title=${p ?? D}>${r(m, o`<calcite-icon .icon=${m} .scale=${c}></calcite-icon>`)}</div>`);
+    const g = P(e), m = n ? t ? u.open : g === "rtl" ? u.closedRTL : u.closedLTR : u.blank, c = $(s), p = n ? t ? l.collapse : l.expand : void 0, f = n ? this.handleToggleClick : void 0;
+    return r("open-container", o`<div class=${i(a.openContainer)} @click=${f} title=${p ?? M}>${r(m, o`<calcite-icon .icon=${m} .scale=${c}></calcite-icon>`)}</div>`);
   }
   renderActionsStart() {
     const { label: e, hasActionsStart: t } = this;
-    return r("actions-start-container", o`<div .ariaLabel=${e} class=${i({ [a.actionsStart]: !0, [a.gridCell]: !0 })} .hidden=${!t} @focusin=${this.focusCellActionsStart} role=gridcell ${v(this.actionsStartEl)}><slot name=${S.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
+    return r("actions-start-container", o`<div .ariaLabel=${e} class=${i({ [a.actionsStart]: !0, [a.gridCell]: !0 })} .hidden=${!t} role=gridcell ${v(this.actionsStartEl)}><slot name=${S.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
   }
   renderActionsEnd() {
     const { label: e, hasActionsEnd: t, closable: n, messages: l } = this;
-    return r("actions-end-container", o`<div .ariaLabel=${e} class=${i({ [a.actionsEnd]: !0, [a.gridCell]: !0 })} .hidden=${!(t || n)} @focusin=${this.focusCellActionsEnd} role=gridcell ${v(this.actionsEndEl)}><slot name=${S.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${n ? r("close-action", o`<calcite-action appearance=transparent class=${i(a.close)} .icon=${g.close} .label=${l.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${l.close}></calcite-action>`) : null}</div>`);
+    return r("actions-end-container", o`<div .ariaLabel=${e} class=${i({ [a.actionsEnd]: !0, [a.gridCell]: !0 })} .hidden=${!(t || n)} role=gridcell ${v(this.actionsEndEl)}><slot name=${S.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${n ? r("close-action", o`<calcite-action appearance=transparent class=${i(a.close)} .icon=${u.close} .label=${l.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${l.close}></calcite-action>`) : null}</div>`);
   }
   renderContentStart() {
     const { hasContentStart: e } = this;
@@ -279,7 +260,7 @@ class V extends T {
     return !n && (e || t) ? r("content", o`<div class=${i(a.content)}>${e ? r("label", o`<div class=${i(a.label)}>${e}</div>`) : null}${t ? r("description", o`<div class=${i(a.description)}>${t}</div>`) : null}</div>`) : null;
   }
   renderContentContainer() {
-    const { description: e, label: t, selectionMode: n, hasCustomContent: l, unavailable: h } = this, s = l || !!t || !!e, u = [
+    const { description: e, label: t, selectionMode: n, hasCustomContent: l, unavailable: h } = this, s = l || !!t || !!e, g = [
       this.renderContentStart(),
       this.renderCustomContent(),
       this.renderIconStart(),
@@ -293,24 +274,24 @@ class V extends T {
       [a.contentContainerUnavailable]: h,
       [a.contentContainerSelectable]: n !== "none",
       [a.contentContainerHasCenterContent]: s
-    })} @click=${this.handleItemClick} @focusin=${this.focusCellContent} role=gridcell ${v(this.contentEl)}>${u}</div>`);
+    })} @click=${this.handleItemClick} role=gridcell ${v(this.contentEl)}>${g}</div>`);
   }
   render() {
-    const { openable: e, open: t, level: n, active: l, label: h, selected: s, selectionAppearance: u, selectionMode: m, interactionMode: c, closed: p, filterHidden: f, bordered: E, disabled: H, hasContentBottom: y } = this, k = E && y, A = E && !y, I = m !== "none" && u === "border", O = I && s, B = I && !s, z = c === "interactive" || c === "static" && m !== "none" && u === "border";
-    return U({ disabled: H, children: o`<div class=${i({ [a.wrapper]: !0, [a.wrapperBordered]: k })}><div .ariaExpanded=${e ? t : null} .ariaLabel=${h} .ariaLevel=${n} .ariaSelected=${s} class=${i({
+    const { openable: e, open: t, level: n, active: l, label: h, selected: s, selectionAppearance: g, selectionMode: m, interactionMode: c, closed: p, filterHidden: f, bordered: y, disabled: L, hasContentBottom: E } = this, H = y && E, k = y && !E, x = m !== "none" && g === "border", A = x && s, O = x && !s, B = c === "interactive" || c === "static" && m !== "none" && g === "border";
+    return F({ disabled: L, children: o`<div class=${i({ [a.wrapper]: !0, [a.wrapperBordered]: H })}><div .ariaExpanded=${e ? t : null} .ariaLabel=${h} .ariaLevel=${n} .ariaSelected=${s} class=${i({
       [a.row]: !0,
       [a.container]: !0,
-      [a.containerHover]: z,
-      [a.containerBorder]: I,
-      [a.containerBorderSelected]: O,
-      [a.containerBorderUnselected]: B
+      [a.containerHover]: B,
+      [a.containerBorder]: x,
+      [a.containerBorderSelected]: A,
+      [a.containerBorderUnselected]: O
     })} .hidden=${p || f} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${l ? 0 : -1} ${v(this.containerEl)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderOpen()}<div class=${i({
       [a.contentContainerWrapper]: !0,
-      [a.contentContainerWrapperBordered]: A
+      [a.contentContainerWrapperBordered]: k
     })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });
   }
 }
-M("calcite-list-item", V);
+z("calcite-list-item", J);
 export {
-  V as ListItem
+  J as ListItem
 };