@esri/calcite-components 1.0.0-beta.78 → 1.0.0-beta.79

package/dist/collection/components/tile-select-group/tile-select-group.js

@@ -2,7 +2,8 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, h, Prop } from "@stencil/core";
+import { Component, h, Prop, Element } from "@stencil/core";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-tile-select`s.
  */
@@ -13,9 +14,19 @@ export class TileSelectGroup {
     //  Properties
     //
     //--------------------------------------------------------------------------
+    /** The disabled state of the tile select. */
+    this.disabled = false;
     /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
     this.layout = "horizontal";
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   render() {
     return h("slot", null);
   }
@@ -28,6 +39,24 @@ export class TileSelectGroup {
     "$": ["tile-select-group.css"]
   }; }
   static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The disabled state of the tile select."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "layout": {
       "type": "string",
       "mutable": false,
@@ -52,4 +81,5 @@ export class TileSelectGroup {
       "defaultValue": "\"horizontal\""
     }
   }; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -147,7 +147,11 @@ export class Tooltip {
         offset: [offsetSkidding, offsetDistance]
       }
     };
-    return [arrowModifier, offsetModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.open
+    };
+    return [arrowModifier, offsetModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();

package/dist/collection/components/tree/tree.js

@@ -145,6 +145,61 @@ export class Tree {
       selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
   }
+  keyDownHandler(event) {
+    var _a;
+    const root = this.el.closest("calcite-tree:not([child])");
+    const target = event.target;
+    if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
+      switch (event.key) {
+        case "ArrowDown":
+          const next = target.nextElementSibling;
+          if (next && next.matches("calcite-tree-item")) {
+            next.focus();
+            event.preventDefault();
+          }
+          break;
+        case "ArrowLeft":
+          // When focus is on an open node, closes the node.
+          if (target.hasChildren && target.expanded) {
+            target.expanded = false;
+            event.preventDefault();
+            break;
+          }
+          // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
+          const parentItem = target.parentElement.closest("calcite-tree-item");
+          if (parentItem && (!target.hasChildren || target.expanded === false)) {
+            parentItem.focus();
+            event.preventDefault();
+            break;
+          }
+          // When focus is on a root node that is also either an end node or a closed node, does nothing.
+          break;
+        case "ArrowRight":
+          if (!target.hasChildren) {
+            break;
+          }
+          if (target.expanded && document.activeElement === target) {
+            // When focus is on an open node, moves focus to the first child node.
+            (_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
+            event.preventDefault();
+          }
+          else {
+            // When focus is on a closed node, opens the node; focus does not move.
+            target.expanded = true;
+            event.preventDefault();
+          }
+          // When focus is on an end node, does nothing.
+          break;
+        case "ArrowUp":
+          const previous = target.previousElementSibling;
+          if (previous && previous.matches("calcite-tree-item")) {
+            previous.focus();
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
   updateAncestorTree(e) {
     const item = e.target;
     const children = item.querySelectorAll("calcite-tree-item");
@@ -358,5 +413,11 @@ export class Tree {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "keydown",
+      "method": "keyDownHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/tree-item/tree-item.js

@@ -32,12 +32,6 @@ export class TreeItem {
     this.iconClickHandler = (event) => {
       event.stopPropagation();
       this.expanded = !this.expanded;
-      if (this.selectionMode !== TreeSelectionMode.Ancestors) {
-        this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: this.isSelectionMultiLike,
-          forceToggle: true
-        });
-      }
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
     //--------------------------------------------------------------------------
@@ -172,7 +166,6 @@ export class TreeItem {
     });
   }
   keyDownHandler(e) {
-    var _a;
     let root;
     switch (e.key) {
       case " ":
@@ -181,7 +174,6 @@ export class TreeItem {
           forceToggle: false
         });
         e.preventDefault();
-        e.stopPropagation();
         break;
       case "Enter":
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
@@ -197,53 +189,6 @@ export class TreeItem {
           });
         }
         e.preventDefault();
-        e.stopPropagation();
-        break;
-      case "ArrowLeft":
-        // When focus is on an open node, closes the node.
-        if (this.hasChildren && this.expanded) {
-          this.expanded = false;
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-        const parentItem = this.parentTreeItem;
-        if (parentItem && (!this.hasChildren || this.expanded === false)) {
-          parentItem.focus();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a root node that is also either an end node or a closed node, does nothing.
-        break;
-      case "ArrowRight":
-        // When focus is on a closed node, opens the node; focus does not move.
-        if (this.hasChildren && this.expanded === false) {
-          this.expanded = true;
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a open node, moves focus to the first child node.
-        if (this.hasChildren && this.expanded) {
-          (_a = this.el.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on an end node, does nothing.
-        break;
-      case "ArrowUp":
-        const previous = this.el.previousElementSibling;
-        if (previous && previous.matches("calcite-tree-item")) {
-          previous.focus();
-        }
-        break;
-      case "ArrowDown":
-        const next = this.el.nextElementSibling;
-        if (next && next.matches("calcite-tree-item")) {
-          next.focus();
-        }
         break;
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");

package/dist/collection/components/value-list/value-list.css

@@ -94,6 +94,19 @@
   box-sizing: border-box;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 calcite-value-list-item:last-of-type {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;

package/dist/collection/components/value-list/value-list.js

@@ -5,10 +5,10 @@
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
-import { getRoundRobinIndex } from "../../utils/array";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
@@ -82,9 +82,7 @@ export class ValueList {
       }
       event.preventDefault();
       const { el } = this;
-      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-      const currentIndex = items.indexOf(item);
-      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
       if (nextIndex === items.length - 1) {
         el.appendChild(item);
       }
@@ -113,10 +111,16 @@ export class ValueList {
   componentDidLoad() {
     this.setUpDragAndDrop();
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   disconnectedCallback() {
     cleanUpObserver.call(this);
     this.cleanUpDragAndDrop();
   }
+  calciteListFocusOutHandler(event) {
+    calciteListFocusOutHandler.call(this, event);
+  }
   calciteListItemRemoveHandler(event) {
     removeItem.call(this, event);
   }
@@ -439,6 +443,12 @@ export class ValueList {
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
+      "name": "focusout",
+      "method": "calciteListFocusOutHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "calciteListItemRemove",
       "method": "calciteListItemRemoveHandler",
       "target": undefined,

package/dist/collection/components/value-list-item/value-list-item.css

@@ -140,4 +140,17 @@ calcite-pick-list-item {
 }
 .handle calcite-icon {
   color: inherit;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }

package/dist/collection/components/value-list-item/value-list-item.js

@@ -10,6 +10,7 @@ import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
@@ -76,6 +77,9 @@ export class ValueListItem {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -164,7 +168,7 @@ export class ValueListItem {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "When true, the item cannot be clicked and is visually muted"

package/dist/collection/utils/interactive.js

@@ -0,0 +1,42 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+function noopClick() {
+  /** noop **/
+}
+/**
+ * This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
+ *
+ * This should be used in the `componentDidRender` lifecycle hook.
+ *
+ * **Notes**
+ *
+ * * this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
+ * * technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
+ */
+export function updateHostInteraction(component, hostIsTabbable = false) {
+  if (component.disabled) {
+    component.el.setAttribute("tabindex", "-1");
+    component.el.setAttribute("aria-disabled", "true");
+    if (component.el.contains(document.activeElement)) {
+      document.activeElement.blur();
+    }
+    component.el.click = noopClick;
+    return;
+  }
+  component.el.click = HTMLElement.prototype.click;
+  if (typeof hostIsTabbable === "function") {
+    component.el.setAttribute("tabindex", hostIsTabbable.call(component) ? "0" : "-1");
+  }
+  else if (hostIsTabbable === true) {
+    component.el.setAttribute("tabindex", "0");
+  }
+  else if (hostIsTabbable === false) {
+    component.el.removeAttribute("tabindex");
+  }
+  else {
+    // noop for "managed" as owning component will manage its tab index
+  }
+  component.el.removeAttribute("aria-disabled");
+}

package/dist/collection/utils/label.js

@@ -8,8 +8,11 @@ import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
  * @internal
  */
 export const labelClickEvent = "calciteInternalLabelClick";
+export const labelConnectedEvent = "calciteInternalLabelConnected";
+export const labelDisconnectedEvent = "calciteInternaLabelDisconnected";
 const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
+const unlabeledComponents = new Set();
 const findLabelForComponent = (componentEl) => {
   const { id } = componentEl;
   const forLabel = id && queryElementRoots(componentEl, { selector: `${labelTagName}[for="${id}"]` });
@@ -45,18 +48,37 @@ function hasAncestorCustomElements(label, componentEl) {
  */
 export function connectLabel(component) {
   const labelEl = findLabelForComponent(component.el);
-  if (!labelEl || onLabelClickMap.has(labelEl)) {
+  if (onLabelClickMap.has(labelEl)) {
     return;
   }
-  component.labelEl = labelEl;
-  const boundOnLabelClick = onLabelClick.bind(component);
-  onLabelClickMap.set(component.labelEl, boundOnLabelClick);
-  component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+  const boundOnLabelConnected = onLabelConnected.bind(component);
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  if (labelEl) {
+    const addClickEventListenerToComponentLabel = () => {
+      component.labelEl = labelEl;
+      const boundOnLabelClick = onLabelClick.bind(component);
+      onLabelClickMap.set(component.labelEl, boundOnLabelClick);
+      component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
+    };
+    addClickEventListenerToComponentLabel();
+    unlabeledComponents.delete(component);
+    document.removeEventListener(labelConnectedEvent, boundOnLabelConnected);
+    document.addEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  }
+  else if (!labelEl && !unlabeledComponents.has(component)) {
+    boundOnLabelDisconnected();
+    document.removeEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
+  }
 }
 /**
- * Helper to tear down label interactions on disconnectedCallback.
+ * Helper to tear down label interactions on disconnectedCallback on labelable components.
  */
 export function disconnectLabel(component) {
+  const boundOnLabelConnected = onLabelConnected.bind(component);
+  const boundOnLabelDisconnected = onLabelDisconnected.bind(component);
+  unlabeledComponents.delete(component);
+  document.removeEventListener(labelConnectedEvent, boundOnLabelConnected);
+  document.removeEventListener(labelDisconnectedEvent, boundOnLabelDisconnected);
   if (!component.labelEl) {
     return;
   }
@@ -81,3 +103,13 @@ function onLabelClick(event) {
   }
   this.onLabelClick(event);
 }
+function onLabelConnected() {
+  if (unlabeledComponents.has(this)) {
+    connectLabel(this);
+  }
+}
+function onLabelDisconnected() {
+  unlabeledComponents.add(this);
+  const boundOnLabelConnected = onLabelConnected.bind(this);
+  document.addEventListener(labelConnectedEvent, boundOnLabelConnected);
+}

package/dist/collection/utils/popper.js

@@ -4,6 +4,72 @@
  */
 import { createPopper as setupPopper } from "@popperjs/core";
 import { getElementDir } from "./dom";
+export const popperPlacements = [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end",
+  "leading-start",
+  "leading",
+  "leading-end",
+  "trailing-end",
+  "trailing",
+  "trailing-start",
+  "leading-leading",
+  "leading-trailing",
+  "trailing-leading",
+  "trailing-trailing",
+  "top-leading",
+  "top-trailing",
+  "bottom-leading",
+  "bottom-trailing",
+  "right-leading",
+  "right-trailing",
+  "left-leading",
+  "left-trailing"
+];
+export const popperFlipPlacements = [
+  "top",
+  "bottom",
+  "right",
+  "left",
+  "top-start",
+  "top-end",
+  "bottom-start",
+  "bottom-end",
+  "right-start",
+  "right-end",
+  "left-start",
+  "left-end"
+];
+export const defaultMenuPlacement = "bottom-leading";
+export const popperMenuPlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end",
+  "top-leading",
+  "top-trailing",
+  "bottom-leading",
+  "bottom-trailing"
+];
+export const popperMenuFlipPlacements = [
+  "top-start",
+  "top",
+  "top-end",
+  "bottom-start",
+  "bottom",
+  "bottom-end"
+];
 export const CSS = {
   animation: "calcite-popper-anim",
   animationActive: "calcite-popper-anim--active"

package/dist/components/action-group.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './action-menu.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -25,7 +25,7 @@ const ICONS = {
 
 const actionGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 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;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:0px;--calcite-action-group-columns:3}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-top:0px}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row}:host([layout=grid]){display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}";
 
-let ActionGroup = class extends HTMLElement {
+const ActionGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -93,8 +93,7 @@ let ActionGroup = class extends HTMLElement {
     "expanded": ["expandedHandler"]
   }; }
   static get style() { return actionGroupCss; }
-};
-ActionGroup = /*@__PURE__*/ proxyCustomElement(ActionGroup, [1, "calcite-action-group", {
+}, [1, "calcite-action-group", {
     "expanded": [516],
     "layout": [513],
     "columns": [514],

package/dist/components/action-menu.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { b as getSlotted, f as focusElement } from './dom.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { g as guid } from './guid.js';
@@ -30,7 +30,7 @@ const actionMenuCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyfr
 
 const SUPPORTED_BUTTON_NAV_KEYS = ["ArrowUp", "ArrowDown"];
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
-let ActionMenu = class extends HTMLElement {
+const ActionMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -302,8 +302,7 @@ let ActionMenu = class extends HTMLElement {
     "activeMenuItemIndex": ["activeMenuItemIndexHandler"]
   }; }
   static get style() { return actionMenuCss; }
-};
-ActionMenu = /*@__PURE__*/ proxyCustomElement(ActionMenu, [1, "calcite-action-menu", {
+}, [1, "calcite-action-menu", {
     "expanded": [516],
     "flipPlacements": [16],
     "label": [1],