@esri/calcite-components 1.5.0-next.8 → 1.5.0

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

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.8
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1a221706.js');
-const dom = require('./dom-0c48387a.js');
-const interactive = require('./interactive-05230447.js');
-const observers = require('./observers-9d6082d1.js');
-const resources = require('./resources-265c4d7c.js');
-const loadable = require('./loadable-f115fa18.js');
-const debounce = require('./debounce-6a1bf752.js');
-const locale = require('./locale-02aab000.js');
-const t9n = require('./t9n-6073e099.js');
-require('./guid-cd4104aa.js');
-require('./resources-0d7ec912.js');
-require('./browser-90aa94e4.js');
-require('./key-b78bfb11.js');
+const index = require('./index-9f8ce657.js');
+const dom = require('./dom-b7601405.js');
+const interactive = require('./interactive-793314f0.js');
+const observers = require('./observers-e29e2712.js');
+const sortableComponent = require('./sortableComponent-b6c07723.js');
+const resources = require('./resources-6411f940.js');
+const loadable = require('./loadable-d46f87a1.js');
+const debounce = require('./debounce-20d3c430.js');
+const locale = require('./locale-7c3cc149.js');
+const t9n = require('./t9n-8444b9f7.js');
+require('./guid-1a635f47.js');
+require('./resources-53a07e71.js');
+require('./key-e590036d.js');
 
 const CSS$2 = {
   container: "container",
@@ -39,16 +39,18 @@ const CSS$2 = {
   contentEnd: "content-end",
   actionsEnd: "actions-end",
   selectionContainer: "selection-container",
-  openContainer: "open-container"
+  openContainer: "open-container",
+  dragContainer: "drag-container",
 };
 const SLOTS$1 = {
   actionsStart: "actions-start",
   contentStart: "content-start",
   content: "content",
   contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  actionsEnd: "actions-end",
 };
-const MAX_COLUMNS = 5;
+// Set to zero to extend until the end of the table section.
+const MAX_COLUMNS = 0;
 const ICONS = {
   selectedMultiple: "check-circle-f",
   selectedSingle: "circle-f",
@@ -57,18 +59,22 @@ const ICONS = {
   closedRTL: "caret-left",
   open: "caret-down",
   blank: "blank",
-  close: "x"
+  close: "x",
 };
 
+const listSelector$1 = "calcite-list";
 const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector$1 = "calcite-list-item";
-function getListItemChildren(event) {
-  const assignedElements = event.target.assignedElements({ flatten: true });
+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));
-  return [...listItemGroupChildren, ...listItemChildren];
+  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) => {
@@ -90,33 +96,37 @@ const CSS$1 = {
   scrim: "scrim",
   stack: "stack",
   tableContainer: "table-container",
-  sticky: "sticky-pos"
+  sticky: "sticky-pos",
+  assistiveText: "assistive-text",
 };
 const debounceTimeout = 0;
 const SLOTS = {
   filterActionsStart: "filter-actions-start",
-  filterActionsEnd: "filter-actions-end"
+  filterActionsEnd: "filter-actions-end",
 };
 
-const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-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}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);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){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-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)}::slotted(calcite-list-item:last-child){--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)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}";
+const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-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}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);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){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-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)}::slotted(calcite-list-item:last-child){--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)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-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`;
 const parentSelector = "calcite-list-item-group, calcite-list-item";
 const List = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteListChange = index.createEvent(this, "calciteListChange", 6);
     this.calciteListFilter = index.createEvent(this, "calciteListFilter", 6);
-    this.listItems = [];
+    this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 6);
+    this.calciteInternalListDefaultSlotChange = index.createEvent(this, "calciteInternalListDefaultSlotChange", 6);
+    this.dragSelector = "calcite-list-item";
     this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
     this.mutationObserver = observers.createObserver("mutation", () => this.updateListItems());
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
     this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event));
+      updateListItemChildren(getListItemChildren(event.target));
+      if (this.parentListEl) {
+        this.calciteInternalListDefaultSlotChange.emit();
+      }
     };
     this.handleFilterActionsStartSlotChange = (event) => {
       this.hasFilterActionsStart = dom.slotChangeHasAssignedElement(event);
@@ -165,15 +175,26 @@ const List = class {
         label: item.label,
         description: item.description,
         metadata: item.metadata,
-        value: item.value
+        value: item.value,
       }));
     };
     this.updateListItems = debounce.debounce((emit = false) => {
-      const { selectionAppearance, selectionMode } = this;
+      const { selectionAppearance, selectionMode, dragEnabled } = this;
+      if (!!this.parentListEl) {
+        const items = this.queryListItems(true);
+        items.forEach((item) => {
+          item.selectionAppearance = selectionAppearance;
+          item.selectionMode = selectionMode;
+          item.dragHandle = dragEnabled;
+        });
+        this.setUpSorting();
+        return;
+      }
       const items = this.queryListItems();
       items.forEach((item) => {
         item.selectionAppearance = selectionAppearance;
         item.selectionMode = selectionMode;
+        item.dragHandle = dragEnabled;
       });
       this.listItems = items;
       if (this.filterEnabled) {
@@ -183,12 +204,13 @@ const List = class {
         }
       }
       this.updateFilteredItems(emit);
-      this.enabledListItems = items.filter((item) => !item.disabled && !item.closed);
+      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
       this.setActiveListItem();
       this.updateSelectedItems(emit);
+      this.setUpSorting();
     }, debounceTimeout);
-    this.queryListItems = () => {
-      return Array.from(this.el.querySelectorAll(listItemSelector));
+    this.queryListItems = (direct = false) => {
+      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
     };
     this.focusRow = (focusEl) => {
       const { enabledListItems } = this;
@@ -206,7 +228,7 @@ const List = class {
       return parentListItemEl.open && this.isNavigable(parentListItemEl);
     };
     this.handleListKeydown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || !!this.parentListEl) {
         return;
       }
       const { key } = event;
@@ -214,13 +236,17 @@ const List = class {
       const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
       if (key === "ArrowDown") {
         event.preventDefault();
-        const nextIndex = currentIndex + 1;
+        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
         if (filteredItems[nextIndex]) {
           this.focusRow(filteredItems[nextIndex]);
         }
       }
       else if (key === "ArrowUp") {
         event.preventDefault();
+        if (currentIndex === 0 && this.filterEnabled) {
+          this.filterEl?.setFocus();
+          return;
+        }
         const prevIndex = currentIndex - 1;
         if (filteredItems[prevIndex]) {
           this.focusRow(filteredItems[prevIndex]);
@@ -242,6 +268,10 @@ const List = class {
       }
     };
     this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
     this.filterEnabled = false;
     this.filteredItems = [];
     this.filteredData = [];
@@ -253,20 +283,21 @@ const List = class {
     this.selectedItems = [];
     this.selectionMode = "none";
     this.selectionAppearance = "icon";
+    this.assistiveText = undefined;
     this.dataForFilter = [];
-    this.hasFilterActionsStart = false;
     this.hasFilterActionsEnd = false;
-  }
-  handleFilterEnabledChange() {
-    this.updateListItems();
+    this.hasFilterActionsStart = false;
   }
   async handleFilterTextChange() {
     this.performFilter();
   }
-  handleSelectionAppearanceChange() {
+  handleListItemChange() {
     this.updateListItems();
   }
   handleCalciteInternalFocusPreviousItem(event) {
+    if (this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const { enabledListItems } = this;
     const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
@@ -276,6 +307,10 @@ const List = class {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
     listItems.forEach((listItem) => {
@@ -283,9 +318,26 @@ const List = class {
     });
   }
   handleCalciteListItemSelect() {
+    if (!!this.parentListEl) {
+      return;
+    }
     this.updateSelectedItems(true);
   }
+  handleCalciteInternalHandleChange(event) {
+    this.assistiveText = event.detail.message;
+    event.stopPropagation();
+  }
+  handleCalciteHandleNudge(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.handleNudgeEvent(event);
+  }
   handleCalciteInternalListItemSelect(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     const target = event.target;
     const { listItems, selectionMode } = this;
     if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
@@ -293,21 +345,31 @@ const List = class {
     }
     this.updateSelectedItems();
   }
-  handleCalciteListItemClose() {
+  handleCalciteInternalListItemChange(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     this.updateListItems(true);
   }
+  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    event.stopPropagation();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+    this.connectObserver();
     this.updateListItems();
+    this.setUpSorting();
     interactive.connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
+    this.disconnectObserver();
+    sortableComponent.disconnectSortableComponent(this);
     interactive.disconnectInteractive(this);
   }
   componentWillLoad() {
@@ -326,8 +388,11 @@ const List = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await loadable.componentLoaded(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    await loadable.componentFocusable(this);
+    if (this.filterEnabled) {
+      return this.filterEl?.setFocus();
+    }
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -335,12 +400,45 @@ const List = class {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd } = this;
-    return (index.h("div", { class: CSS$1.container }, 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: MAX_COLUMNS }, index.h("calcite-stack", { class: CSS$1.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: resources.SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
+    return (index.h("div", { class: CSS$1.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, 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: MAX_COLUMNS }, index.h("calcite-stack", { class: CSS$1.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: resources.SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFilterEl }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: resources.SLOTS.actionsEnd })))))) : null, index.h("tbody", { class: CSS$1.tableContainer }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
-  filterElements({ el, filteredItems, visibleParents }) {
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    this.mutationObserver?.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    sortableComponent.connectSortableComponent(this);
+  }
+  onDragStart() {
+    this.disconnectObserver();
+  }
+  onDragEnd() {
+    this.connectObserver();
+  }
+  onDragSort(event) {
+    this.updateListItems();
+    const { from, item, to } = event;
+    this.calciteListOrderChange.emit({
+      dragEl: item,
+      fromEl: from,
+      toEl: to,
+    });
+  }
+  filterElements({ el, filteredItems, visibleParents, }) {
     const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
     el.hidden = hidden;
     const closestParent = el.parentElement.closest(parentSelector);
@@ -353,7 +451,7 @@ const List = class {
     this.filterElements({
       el: closestParent,
       filteredItems,
-      visibleParents
+      visibleParents,
     });
   }
   updateFilteredData(emit = false) {
@@ -375,17 +473,71 @@ const List = class {
     await filterEl.filter(filterText);
     this.updateFilteredData();
   }
+  handleNudgeEvent(event) {
+    const { direction } = event.detail;
+    const composedPath = event.composedPath();
+    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
+    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
+    const parentEl = sortItem?.parentElement;
+    if (!parentEl) {
+      return;
+    }
+    const { enabledListItems } = this;
+    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+    const lastIndex = sameParentItems.length - 1;
+    const startingIndex = sameParentItems.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    if (direction === "up") {
+      if (startingIndex === 0) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex - 1;
+      }
+    }
+    else {
+      if (startingIndex === lastIndex) {
+        buddyIndex = 0;
+      }
+      else if (startingIndex === lastIndex - 1) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex + 2;
+      }
+    }
+    this.disconnectObserver();
+    if (appendInstead) {
+      parentEl.appendChild(sortItem);
+    }
+    else {
+      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+    }
+    this.updateListItems();
+    this.connectObserver();
+    this.calciteListOrderChange.emit({
+      dragEl: sortItem,
+      fromEl: null,
+      toEl: null,
+    });
+    handle.setFocus().then(() => {
+      handle.activated = true;
+    });
+  }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "filterEnabled": ["handleFilterEnabledChange"],
     "filterText": ["handleFilterTextChange"],
-    "selectionMode": ["handleSelectionAppearanceChange"],
-    "selectionAppearance": ["handleSelectionAppearanceChange"]
+    "filterEnabled": ["handleListItemChange"],
+    "group": ["handleListItemChange"],
+    "dragEnabled": ["handleListItemChange"],
+    "selectionMode": ["handleListItemChange"],
+    "selectionAppearance": ["handleListItemChange"]
   }; }
 };
 List.style = listCss;
 
-const listItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\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{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{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.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-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}[hidden]{display:none}";
+const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}.container--border-selected{border-inline-start:4px solid var(--calcite-ui-brand)}.container--border-unselected{border-inline-start:4px solid transparent}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{z-index:var(--calcite-app-z-index-sticky);outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\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{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{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-ui-text-1)}.description{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-end ::slotted(calcite-action){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -397,11 +549,7 @@ const ListItem = class {
     this.calciteInternalListItemSelect = index.createEvent(this, "calciteInternalListItemSelect", 6);
     this.calciteInternalListItemActive = index.createEvent(this, "calciteInternalListItemActive", 6);
     this.calciteInternalFocusPreviousItem = index.createEvent(this, "calciteInternalFocusPreviousItem", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
+    this.calciteInternalListItemChange = index.createEvent(this, "calciteInternalListItemChange", 6);
     this.closeClickHandler = () => {
       this.closed = true;
       this.calciteListItemClose.emit();
@@ -422,17 +570,7 @@ const ListItem = class {
       this.hasContentEnd = dom.slotChangeHasAssignedElement(event);
     };
     this.handleDefaultSlotChange = (event) => {
-      const { parentListEl } = this;
-      const listItemChildren = getListItemChildren(event);
-      updateListItemChildren(listItemChildren);
-      const openable = !!listItemChildren.length;
-      if (openable && parentListEl && !parentListEl.openable) {
-        parentListEl.openable = true;
-      }
-      this.openable = openable;
-      if (!openable) {
-        this.open = false;
-      }
+      this.handleOpenableChange(event.target);
     };
     this.toggleOpen = () => {
       this.open = !this.open;
@@ -532,6 +670,7 @@ const ListItem = class {
     this.closed = false;
     this.description = undefined;
     this.disabled = false;
+    this.dragHandle = false;
     this.label = undefined;
     this.metadata = undefined;
     this.open = false;
@@ -560,15 +699,30 @@ const ListItem = class {
       this.focusCell(null, false);
     }
   }
+  handleClosedChange() {
+    this.emitCalciteInternalListItemChange();
+  }
+  handleDisabledChange() {
+    this.emitCalciteInternalListItemChange();
+  }
   handleSelectedChange() {
     this.calciteInternalListItemSelect.emit();
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleCalciteInternalListDefaultSlotChanges(event) {
+    event.stopPropagation();
+    this.handleOpenableChange(this.defaultSlotEl);
+  }
   effectiveLocaleChange() {
     t9n.updateMessages(this, this.effectiveLocale);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
   connectedCallback() {
     interactive.connectInteractive(this);
     locale.connectLocalized(this);
@@ -601,7 +755,7 @@ const ListItem = class {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await loadable.componentLoaded(this);
+    await loadable.componentFocusable(this);
     const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
     const focusIndex = focusMap.get(parentListEl);
     if (typeof focusIndex === "number") {
@@ -632,6 +786,9 @@ const ListItem = class {
           : ICONS.selectedSingle
         : ICONS.unselected, scale: "s" })));
   }
+  renderDragHandle() {
+    return this.dragHandle ? (index.h("td", { class: CSS$2.dragContainer, key: "drag-handle-container" }, index.h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+  }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = dom.getElementDir(el);
@@ -672,31 +829,39 @@ const ListItem = class {
       this.renderContentStart(),
       this.renderCustomContent(),
       this.renderContentProperties(),
-      this.renderContentEnd()
+      this.renderContentEnd(),
     ];
     return (index.h("td", { "aria-label": label, class: {
         [CSS$2.contentContainer]: true,
         [CSS$2.contentContainerSelectable]: selectionMode !== "none",
-        [CSS$2.contentContainerHasCenterContent]: hasCenterContent
+        [CSS$2.contentContainerHasCenterContent]: hasCenterContent,
       }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.contentEl = el) }, content));
   }
   render() {
-    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed } = this;
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, } = this;
     const showBorder = selectionMode !== "none" && selectionAppearance === "border";
     const borderSelected = showBorder && selected;
     const borderUnselected = showBorder && !selected;
     return (index.h(index.Host, null, 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: {
         [CSS$2.container]: true,
         [CSS$2.containerBorderSelected]: borderSelected,
-        [CSS$2.containerBorderUnselected]: borderUnselected
+        [CSS$2.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.containerEl = el) }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), index.h("div", { class: {
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), index.h("div", { class: {
         [CSS$2.nestedContainer]: true,
-        [CSS$2.nestedContainerHidden]: openable && !open
-      } }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        [CSS$2.nestedContainerHidden]: openable && !open,
+      } }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  emitCalciteInternalListItemChange() {
+    this.calciteInternalListItemChange.emit();
   }
   setSelectionDefaults() {
     const { parentListEl, selectionMode, selectionAppearance } = this;
@@ -710,10 +875,28 @@ const ListItem = class {
       this.selectionAppearance = parentListEl.selectionAppearance;
     }
   }
+  handleOpenableChange(slotEl) {
+    if (!slotEl) {
+      return;
+    }
+    const { parentListEl } = this;
+    const listItemChildren = getListItemChildren(slotEl);
+    updateListItemChildren(listItemChildren);
+    const openable = !!listItemChildren.length;
+    if (openable && parentListEl && !parentListEl.openable) {
+      parentListEl.openable = true;
+    }
+    this.openable = openable;
+    if (!openable) {
+      this.open = false;
+    }
+  }
   static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "closed": ["handleClosedChange"],
+    "disabled": ["handleDisabledChange"],
     "selected": ["handleSelectedChange"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
@@ -723,14 +906,23 @@ ListItem.style = listItemCss;
 
 const CSS = {
   container: "container",
-  heading: "heading"
+  heading: "heading",
 };
 
-const listItemGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.heading{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-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)}::slotted(calcite-list-item:last-child){--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)}[hidden]{display:none}";
+const listItemGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);--calcite-list-item-spacing-indent:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.heading{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-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)}::slotted(calcite-list-item:last-child){--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)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ListItemGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.calciteInternalListItemGroupDefaultSlotChange = index.createEvent(this, "calciteInternalListItemGroupDefaultSlotChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleDefaultSlotChange = () => {
+      this.calciteInternalListItemGroupDefaultSlotChange.emit();
+    };
     this.disabled = false;
     this.heading = undefined;
     this.visualLevel = null;
@@ -758,7 +950,7 @@ const ListItemGroup = class {
   // --------------------------------------------------------------------------
   render() {
     const { heading, visualLevel } = this;
-    return (index.h(index.Host, null, index.h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, index.h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), index.h("slot", null)));
+    return (index.h(index.Host, null, index.h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, index.h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), index.h("slot", { onSlotchange: this.handleDefaultSlotChange })));
   }
   get el() { return index.getElement(this); }
 };