@esri/calcite-components 1.5.0-next.32 → 1.5.0-next.34

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

@@ -1,20 +1,21 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-efa078eb.js';
-import { e as slotChangeHasAssignedElement, t as toAriaBoolean, b as getElementDir } from './dom-0f4af0f5.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-944e27cc.js';
-import { c as createObserver } from './observers-b7b80a68.js';
-import { S as SLOTS$2 } from './resources-4f8c8b40.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d7fbf766.js';
-import { d as debounce } from './debounce-dd45b238.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-45fcdc75.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-7ba6c380.js';
-import './guid-03e1e1b5.js';
-import './resources-ebe668a1.js';
-import './key-21d6a568.js';
+import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-e2ddc248.js';
+import { e as slotChangeHasAssignedElement, t as toAriaBoolean, b as getElementDir } from './dom-5c370241.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-126866a0.js';
+import { c as createObserver } from './observers-f1bf8bac.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-44808b15.js';
+import { S as SLOTS$2 } from './resources-5cd2855b.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a6ab0e5d.js';
+import { d as debounce } from './debounce-63d1ea46.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9cb01420.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-aea52554.js';
+import './guid-a57de0ce.js';
+import './resources-c85032c2.js';
+import './key-ffb890fe.js';
 
 const CSS$2 = {
   container: "container",
@@ -35,6 +36,7 @@ const CSS$2 = {
   actionsEnd: "actions-end",
   selectionContainer: "selection-container",
   openContainer: "open-container",
+  dragContainer: "drag-container",
 };
 const SLOTS$1 = {
   actionsStart: "actions-start",
@@ -43,7 +45,8 @@ const SLOTS$1 = {
   contentEnd: "content-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",
@@ -55,15 +58,19 @@ const ICONS = {
   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) => {
@@ -86,6 +93,7 @@ const CSS$1 = {
   stack: "stack",
   tableContainer: "table-container",
   sticky: "sticky-pos",
+  assistiveText: "assistive-text",
 };
 const debounceTimeout = 0;
 const SLOTS = {
@@ -93,25 +101,28 @@ const SLOTS = {
   filterActionsEnd: "filter-actions-end",
 };
 
-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}:host([hidden]){display:none}[hidden]{display:none}";
+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) {
     registerInstance(this, hostRef);
     this.calciteListChange = createEvent(this, "calciteListChange", 6);
     this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
-    this.listItems = [];
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+    this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
+    this.dragSelector = "calcite-list-item";
     this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
     this.mutationObserver = 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 = slotChangeHasAssignedElement(event);
@@ -164,11 +175,22 @@ const List = class {
       }));
     };
     this.updateListItems = 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) {
@@ -181,9 +203,10 @@ const List = class {
       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;
@@ -201,7 +224,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;
@@ -241,6 +264,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 = [];
@@ -252,20 +279,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);
@@ -275,6 +303,9 @@ const List = class {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
     event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
@@ -283,9 +314,25 @@ 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;
@@ -295,21 +342,30 @@ const List = class {
     this.updateSelectedItems();
   }
   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();
     connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
     disconnectInteractive(this);
   }
   componentWillLoad() {
@@ -341,10 +397,43 @@ const List = class {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (h("div", { class: CSS$1.container }, loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$2.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+    return (h("div", { class: CSS$1.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS$1.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS$1.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$1.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS$1.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS$1.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$2.actionsStart }), 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 }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$2.actionsEnd })))))) : null, h("tbody", { class: CSS$1.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    this.mutationObserver?.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    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;
@@ -380,17 +469,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 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 = ":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)}:host([hidden]){display:none}[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";
@@ -423,17 +566,7 @@ const ListItem = class {
       this.hasContentEnd = 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;
@@ -533,6 +666,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;
@@ -573,9 +707,18 @@ const ListItem = class {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleCalciteInternalListDefaultSlotChanges(event) {
+    event.stopPropagation();
+    this.handleOpenableChange(this.defaultSlotEl);
+  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
   connectedCallback() {
     connectInteractive(this);
     connectLocalized(this);
@@ -639,6 +782,9 @@ const ListItem = class {
           : ICONS.selectedSingle
         : ICONS.unselected, scale: "s" })));
   }
+  renderDragHandle() {
+    return this.dragHandle ? (h("td", { class: CSS$2.dragContainer, key: "drag-handle-container" }, h("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+  }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
@@ -700,10 +846,10 @@ const ListItem = class {
         [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()), h("div", { class: {
+      ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), h("div", { class: {
         [CSS$2.nestedContainer]: true,
         [CSS$2.nestedContainerHidden]: openable && !open,
-      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+      } }, h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
   }
   // --------------------------------------------------------------------------
   //
@@ -725,6 +871,22 @@ 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 getElement(this); }
   static get watchers() { return {
@@ -748,6 +910,15 @@ const listItemGroupCss = ":host([disabled]){cursor:default;-webkit-user-select:n
 const ListItemGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteInternalListItemGroupDefaultSlotChange = createEvent(this, "calciteInternalListItemGroupDefaultSlotChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleDefaultSlotChange = () => {
+      this.calciteInternalListItemGroupDefaultSlotChange.emit();
+    };
     this.disabled = false;
     this.heading = undefined;
     this.visualLevel = null;
@@ -775,7 +946,7 @@ const ListItemGroup = class {
   // --------------------------------------------------------------------------
   render() {
     const { heading, visualLevel } = this;
-    return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", null)));
+    return (h(Host, null, h("tr", { class: CSS.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, h("td", { class: CSS.heading, colSpan: MAX_COLUMNS }, heading)), h("slot", { onSlotchange: this.handleDefaultSlotChange })));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/calcite-loader.entry.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
-import { r as registerInstance, h, H as Host, a as getElement } from './index-efa078eb.js';
-import { g as guid } from './guid-03e1e1b5.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-e2ddc248.js';
+import { g as guid } from './guid-a57de0ce.js';
 
 const loaderCss = "@charset \"UTF-8\";@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:host{position:relative;margin-inline:auto;display:none;align-items:center;justify-content:center;opacity:1;min-block-size:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;transform:scale(1, 1);animation:loader-color-shift calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) alternate-reverse infinite linear;padding-block:var(--calcite-loader-padding, 4rem)}:host([scale=s]){--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}:host([scale=m]){--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}:host([scale=l]){--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.5rem}:host([no-padding]){padding-block:0px}:host{display:flex}.loader__text{display:block;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);margin-block-start:calc(var(--calcite-loader-size) + 1.5rem)}.loader__percentage{position:absolute;display:block;text-align:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-loader-font-size);inline-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;transform:scale(1, 1)}.loader__svgs{position:absolute;overflow:visible;opacity:1;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);transform:scale(1, 1)}.loader__svg{position:absolute;inset-block-start:0px;transform-origin:center;overflow:visible;inset-inline-start:0;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:loader-clockwise}@supports (display: grid){.loader__svg--1{animation-name:loader-offset-1}.loader__svg--2{animation-name:loader-offset-2}.loader__svg--3{animation-name:loader-offset-3}}:host([type=determinate]){animation:none;stroke:var(--calcite-ui-border-3)}:host([type=determinate]) .loader__svg--3{animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;transform:rotate(-90deg);transition:all var(--calcite-internal-animation-timing-fast) linear}:host([inline]){position:relative;margin:0px;animation:none;stroke:currentColor;stroke-width:2;padding-block:0px;block-size:var(--calcite-loader-size-inline);min-block-size:var(--calcite-loader-size-inline);inline-size:var(--calcite-loader-size-inline);margin-inline-end:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}:host([inline]) .loader__svgs{inset-block-start:0px;margin:0px;inset-inline-start:0;inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([inline]) .loader__svg{inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([complete]){opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms}:host([complete]) .loader__svgs{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms}:host([complete]) .loader__percentage{color:var(--calcite-ui-brand);transform:scale(1.05, 1.05);transform-origin:center;transition:color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear}.loader__svg--1{stroke-dasharray:27.9252444444% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2.4 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}.loader__svg--2{stroke-dasharray:55.8504888889% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.2 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}.loader__svg--3{stroke-dasharray:13.9626222222% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.867 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-clockwise{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([hidden]){display:none}[hidden]{display:none}";
 

package/dist/esm/calcite-menu_2.entry.js

@@ -1,17 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
-import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, F as Fragment } from './index-efa078eb.js';
-import { s as slotChangeGetAssignedElements, k as focusElementInGroup, d as focusElement, b as getElementDir } from './dom-0f4af0f5.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d7fbf766.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-45fcdc75.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-7ba6c380.js';
-import { c as createObserver } from './observers-b7b80a68.js';
-import { C as CSS_UTILITY } from './resources-ebe668a1.js';
-import './guid-03e1e1b5.js';
-import './key-21d6a568.js';
+import { r as registerInstance, h, H as Host, a as getElement, c as createEvent, F as Fragment } from './index-e2ddc248.js';
+import { s as slotChangeGetAssignedElements, k as focusElementInGroup, d as focusElement, b as getElementDir } from './dom-5c370241.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a6ab0e5d.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9cb01420.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-aea52554.js';
+import { c as createObserver } from './observers-f1bf8bac.js';
+import { C as CSS_UTILITY } from './resources-c85032c2.js';
+import './guid-a57de0ce.js';
+import './key-ffb890fe.js';
 
 const allowedGlobalAttributes = ["lang", "role"];
 const elementToComponentAndObserverOptionsMap = new Map();

package/dist/esm/calcite-modal.entry.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-efa078eb.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-ac984b86.js';
-import { g as getSlotted, e as slotChangeHasAssignedElement, f as focusFirstTabbable, u as ensureId } from './dom-0f4af0f5.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-29e591ec.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-d7fbf766.js';
-import { c as createObserver } from './observers-b7b80a68.js';
-import { o as onToggleOpenCloseComponent } from './openCloseComponent-86810ae0.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-45fcdc75.js';
-import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-7ba6c380.js';
-import './guid-03e1e1b5.js';
-import './resources-ebe668a1.js';
-import './key-21d6a568.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-e2ddc248.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e52b22ad.js';
+import { g as getSlotted, e as slotChangeHasAssignedElement, f as focusFirstTabbable, u as ensureId } from './dom-5c370241.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-b5471bb0.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a6ab0e5d.js';
+import { c as createObserver } from './observers-f1bf8bac.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent-6d1cda93.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-9cb01420.js';
+import { s as setUpMessages, c as connectMessages, d as disconnectMessages, u as updateMessages } from './t9n-aea52554.js';
+import './guid-a57de0ce.js';
+import './resources-c85032c2.js';
+import './key-ffb890fe.js';
 
 const CSS = {
   modal: "modal",

package/dist/esm/calcite-navigation_3.entry.js

@@ -1,13 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.32
+ * v1.5.0-next.34
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-efa078eb.js';
-import { e as slotChangeHasAssignedElement } from './dom-0f4af0f5.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-d7fbf766.js';
-import './guid-03e1e1b5.js';
-import './resources-ebe668a1.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, a as getElement } from './index-e2ddc248.js';
+import { e as slotChangeHasAssignedElement } from './dom-5c370241.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-a6ab0e5d.js';
+import './guid-a57de0ce.js';
+import './resources-c85032c2.js';
 
 const CSS$2 = {
   container: "container",