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

package/dist/components/calcite-list.js

@@ -1,15 +1,16 @@
 /*!
  * 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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
-import { f as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
+import { c as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { u as updateListItemChildren, g as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
 import { S as SLOTS$1, d as defineCustomElement$2 } from './stack.js';
-import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { a as setUpLoadableComponent, s as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { d as defineCustomElement$8 } from './filter.js';
 import { d as defineCustomElement$7 } from './icon.js';
 import { d as defineCustomElement$6 } from './input.js';
@@ -24,17 +25,19 @@ const CSS = {
   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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -43,16 +46,18 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__attachShadow();
     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);
@@ -101,15 +106,26 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         label: item.label,
         description: item.description,
         metadata: item.metadata,
-        value: item.value
+        value: item.value,
       }));
     };
     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) {
@@ -119,12 +135,13 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         }
       }
       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;
@@ -142,7 +159,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return parentListItemEl.open && this.isNavigable(parentListItemEl);
     };
     this.handleListKeydown = (event) => {
-      if (event.defaultPrevented) {
+      if (event.defaultPrevented || !!this.parentListEl) {
         return;
       }
       const { key } = event;
@@ -150,13 +167,17 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       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]);
@@ -178,6 +199,10 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     };
     this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
     this.filterEnabled = false;
     this.filteredItems = [];
     this.filteredData = [];
@@ -189,20 +214,21 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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);
@@ -212,6 +238,10 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
     const target = event.target;
     const { listItems } = this;
     listItems.forEach((listItem) => {
@@ -219,9 +249,26 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   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")) {
@@ -229,21 +276,31 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     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();
     connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
   }
   disconnectedCallback() {
-    this.mutationObserver?.disconnect();
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
     disconnectInteractive(this);
   }
   componentWillLoad() {
@@ -262,8 +319,11 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // --------------------------------------------------------------------------
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await componentLoaded(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    await componentFocusable(this);
+    if (this.filterEnabled) {
+      return this.filterEl?.setFocus();
+    }
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -271,12 +331,45 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd } = this;
-    return (h("div", { class: CSS.container }, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), 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 (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.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$1.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, 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;
+    }
+    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);
@@ -289,7 +382,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.filterElements({
       el: closestParent,
       filteredItems,
-      visibleParents
+      visibleParents,
     });
   }
   updateFilteredData(emit = false) {
@@ -311,16 +404,74 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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 this; }
   static get watchers() { return {
-    "filterEnabled": ["handleFilterEnabledChange"],
     "filterText": ["handleFilterTextChange"],
-    "selectionMode": ["handleSelectionAppearanceChange"],
-    "selectionAppearance": ["handleSelectionAppearanceChange"]
+    "filterEnabled": ["handleListItemChange"],
+    "group": ["handleListItemChange"],
+    "dragEnabled": ["handleListItemChange"],
+    "selectionMode": ["handleListItemChange"],
+    "selectionAppearance": ["handleListItemChange"]
   }; }
   static get style() { return listCss; }
 }, [1, "calcite-list", {
     "disabled": [516],
+    "canPull": [16],
+    "canPut": [16],
+    "dragEnabled": [516, "drag-enabled"],
+    "group": [513],
     "filterEnabled": [516, "filter-enabled"],
     "filteredItems": [1040],
     "filteredData": [1040],
@@ -332,11 +483,12 @@ const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selectedItems": [1040],
     "selectionMode": [513, "selection-mode"],
     "selectionAppearance": [513, "selection-appearance"],
+    "assistiveText": [32],
     "dataForFilter": [32],
-    "hasFilterActionsStart": [32],
     "hasFilterActionsEnd": [32],
+    "hasFilterActionsStart": [32],
     "setFocus": [64]
-  }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteListItemClose", "handleCalciteListItemClose"]]]);
+  }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalHandleChange", "handleCalciteInternalHandleChange"], [0, "calciteHandleNudge", "handleCalciteHandleNudge"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteInternalListItemChange", "handleCalciteInternalListItemChange"], [0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListItemGroupDefaultSlotChange"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/calcite-loader.js

@@ -1,7 +1,7 @@
 /*!
  * 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
  */
 import { L as Loader, d as defineCustomElement$1 } from './loader.js';
 

package/dist/components/calcite-menu-item.js

@@ -1,11 +1,11 @@
 /*!
  * 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
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client/index.js';
-import { s as slotChangeGetAssignedElements, C as CSS_UTILITY, c as getElementDir } from './dom.js';
-import { c as componentLoaded, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
+import { s as slotChangeGetAssignedElements, C as CSS_UTILITY, b as getElementDir } from './dom.js';
+import { c as componentFocusable, a as setUpLoadableComponent, s as setComponentLoaded } from './loadable.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale.js';
 import { d as defineCustomElement$5 } from './action.js';
@@ -30,10 +30,10 @@ const CSS = {
   itemContent: "item-content",
   open: "open",
   nested: "nested",
-  textContainer: "text-container"
+  textContainer: "text-container",
 };
 
-const menuItemCss = "@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{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-ui-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2)}.content:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2);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:active{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([layout=vertical]) .icon--dropdown{inset-inline-start:0.25rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-ui-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-ui-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-ui-text-1);border-inline-start:1px solid var(--calcite-ui-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-ui-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-ui-border-3);background:var(--calcite-ui-foreground-1);inset-block-start:100%;z-index:var(--calcite-app-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.75rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;padding-inline-start:2rem;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}";
+const menuItemCss = ":host{position:relative;box-sizing:border-box;display:flex;align-items:center;flex-shrink:0}:host .container,:host .item-content,:host .content{min-block-size:3rem}:host([layout=vertical]){inline-size:100%}:host(:not([layout=vertical])){block-size:100%}.container,.item-content{display:flex;block-size:100%;inline-size:100%;flex-direction:row;align-items:stretch}.content{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);padding-inline:1rem;font-size:var(--calcite-font-size-0);color:var(--calcite-ui-text-2);outline:2px solid transparent;outline-offset:2px;text-decoration:none;border-block-end:0.125rem solid transparent;padding-block-start:0.125rem}.content:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2)}.content:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-2);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:active{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.content span{display:inline-flex}.content.layout--vertical{display:flex;inline-size:100%;justify-content:flex-start;padding-block:1rem;border-block-end:0;border-inline-end:0.25rem solid transparent}:host([active]) .content{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-brand)}:host([active]) .content .icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}:host([layout=vertical]) .content{padding-inline:0.75rem}.icon--start{margin-inline-end:0.75rem}.icon--end{margin-inline-start:0.75rem}:host([layout=vertical]) .icon--end{margin-inline-start:auto;padding-inline-start:0.75rem}.icon--dropdown{position:relative;margin-inline-start:auto;margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([layout=vertical]) .icon--end~.icon--dropdown{margin-inline-start:0.75rem}:host([layout=vertical]) .hover-href-icon{padding-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--end{margin-inline-start:0.5rem}:host([layout=vertical]) .hover-href-icon~.icon--breadcrumb{margin-inline-start:0.75rem}.icon--breadcrumb{margin-inline-end:0px;padding-inline-start:0.5rem;--calcite-ui-icon-color:var(--calcite-ui-text-3)}:host([layout=vertical]) .icon--breadcrumb{margin-inline-start:auto}:host([layout=vertical]) .icon--breadcrumb~.icon--dropdown{margin-inline-start:0.5rem}:host([layout=vertical]) .icon--end~.icon--breadcrumb{margin-inline-start:0.5rem}:host([breadcrumb]) .content{padding-inline-end:0.75rem}calcite-action{position:relative;block-size:auto;border-inline-start:1px solid var(--calcite-ui-foreground-1)}calcite-action:after{position:absolute;inset-inline-start:-1px;display:block;inline-size:1px;content:\"\";inset-block:0.75rem;background-color:var(--calcite-ui-border-3)}calcite-action:hover:after{block-size:100%;inset-block:0}.content:focus~calcite-action,.content:hover~calcite-action{color:var(--calcite-ui-text-1);border-inline-start:1px solid var(--calcite-ui-border-3)}.container:hover .dropdown-action{background-color:var(--calcite-ui-foreground-2)}.dropdown-menu-items{position:absolute;display:none;block-size:auto;min-inline-size:100%;flex-direction:column;overflow:visible;border:1px solid var(--calcite-ui-border-3);background:var(--calcite-ui-foreground-1);inset-block-start:100%;z-index:var(--calcite-app-z-index-dropdown)}.dropdown-menu-items.open{display:block}.dropdown-menu-items.nested{position:absolute;inset-block-start:-1px;transform:translateX(calc(100% - 2px))}.parent--vertical{flex-direction:column}.dropdown--vertical.dropdown-menu-items{position:relative;border-radius:0px;box-shadow:none;inset-block-start:0;transform:none}.dropdown--vertical.dropdown-menu-items:last-of-type{border-inline:0}:host([layout=vertical]:last-of-type) .dropdown-menu-items{border-block-end:0}:host([slot=submenu-item]) .parent--vertical{padding-inline-start:1.5rem}.dropdown-menu-items.nested.calcite--rtl{transform:translateX(calc(-100% + 2px))}.dropdown--vertical.dropdown-menu-items.nested.calcite--rtl{transform:none}.hover-href-icon{position:relative;inset-inline-end:0.25rem;margin-inline-start:auto;opacity:0;transition:all var(--calcite-internal-animation-timing-medium) ease-in-out}.content:focus .hover-href-icon,.content:hover .hover-href-icon{inset-inline-end:-0.25rem;opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
 const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -87,7 +87,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.calciteInternalMenuItemKeyEvent.emit({
           event,
           children: this.submenuItems,
-          isSubmenuOpen: this.open && this.hasSubmenu
+          isSubmenuOpen: this.open && this.hasSubmenu,
         });
       }
       else if (event.key === "ArrowLeft") {
@@ -95,7 +95,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.calciteInternalMenuItemKeyEvent.emit({
           event,
           children: this.submenuItems,
-          isSubmenuOpen: true
+          isSubmenuOpen: true,
         });
       }
       else if (event.key === "ArrowRight") {
@@ -110,7 +110,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.calciteInternalMenuItemKeyEvent.emit({
           event,
           children: this.submenuItems,
-          isSubmenuOpen: this.open && this.hasSubmenu
+          isSubmenuOpen: this.open && this.hasSubmenu,
         });
       }
     };
@@ -148,7 +148,7 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.anchorEl.focus();
   }
   //--------------------------------------------------------------------------
@@ -248,20 +248,24 @@ const CalciteMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         [CSS.open]: this.open,
         [CSS.nested]: !this.isTopLevelItem,
         [CSS_UTILITY.rtl]: dir === "rtl",
-        [CSS.dropdownVertical]: this.topLevelMenuLayout === "vertical"
+        [CSS.dropdownVertical]: this.topLevelMenuLayout === "vertical",
       }, label: this.messages.submenu, layout: "vertical", role: "menu" }, h("slot", { name: "submenu-item", onSlotchange: this.handleMenuItemSlotChange })));
   }
+  renderHrefIcon(dir) {
+    return (h("calcite-icon", { class: CSS.hoverHrefIcon, icon: dir === "rtl" ? "arrow-left" : "arrow-right", key: CSS.hoverHrefIcon, scale: "s" }));
+  }
   renderItemContent(dir) {
-    return (h(Fragment, null, this.iconStart && this.renderIconStart(), h("div", { class: CSS.textContainer }, h("span", null, this.text)), this.iconEnd && this.renderIconEnd(), this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null, !this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null));
+    const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
+    return (h(Fragment, null, this.iconStart && this.renderIconStart(), h("div", { class: CSS.textContainer }, h("span", null, this.text)), hasHref && this.renderHrefIcon(dir), this.iconEnd && this.renderIconEnd(), this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null, !this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null));
   }
   render() {
     const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.blurHandler, onFocus: this.focusHandler }, h("li", { class: {
         [CSS.container]: true,
-        [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical"
+        [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical",
       }, role: "none" }, h("div", { class: CSS.itemContent }, h("a", { "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS.layoutVertical]: this.layout === "vertical", [CSS.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.anchorEl = el) }, this.renderItemContent(dir), this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem) ? (h("calcite-icon", { class: CSS.hoverHrefIcon, icon: dir === "rtl" ? "arrow-left" : "arrow-right", scale: "s" })) : null), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
+      ref: (el) => (this.anchorEl = el) }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }

package/dist/components/calcite-menu.js

@@ -1,7 +1,7 @@
 /*!
  * 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
  */
 import { C as CalciteMenu$1, d as defineCustomElement$1 } from './menu.js';