@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

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

@@ -301,8 +301,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Is the parent of this item expanded?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Is the parent of this item expanded?"
           }],
         "text": ""
       },
@@ -322,8 +322,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "What level of depth is this item at?",
-            "name": "internal"
+            "name": "internal",
+            "text": "What level of depth is this item at?"
           }],
         "text": ""
       },
@@ -343,8 +343,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Does this tree item have a tree inside it?",
-            "name": "internal"
+            "name": "internal",
+            "text": "Does this tree item have a tree inside it?"
           }],
         "text": ""
       },
@@ -364,8 +364,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Draw lines (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Draw lines (set on parent)"
           }],
         "text": ""
       },
@@ -384,11 +384,11 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }, {
-            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "set \"ancestors\" selection-mode on parent tree for checkboxes"
           }],
         "text": "Display checkboxes (set on parent)"
       },
@@ -412,8 +412,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Scale of the parent tree, defaults to m",
-            "name": "internal"
+            "name": "internal",
+            "text": "Scale of the parent tree, defaults to m"
           }],
         "text": ""
       },
@@ -432,8 +432,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected",
-            "name": "internal"
+            "name": "internal",
+            "text": "In ancestor selection mode,\nshow as indeterminate when only some children are selected"
           }],
         "text": ""
       },
@@ -457,8 +457,8 @@ export class CalciteTreeItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Tree selection-mode (set on parent)",
-            "name": "internal"
+            "name": "internal",
+            "text": "Tree selection-mode (set on parent)"
           }],
         "text": ""
       },
@@ -474,8 +474,8 @@ export class CalciteTreeItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

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

@@ -173,8 +173,8 @@ export class CalciteValueListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When false, the item cannot be deselected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When false, the item cannot be deselected by user interaction."
           }],
         "text": ""
       },
@@ -212,8 +212,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "- stores the activated state of the drag handle.",
-            "name": "internal"
+            "name": "internal",
+            "text": "- stores the activated state of the drag handle."
           }],
         "text": ""
       },
@@ -238,8 +238,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },

package/dist/collection/utils/label.js

@@ -16,12 +16,12 @@ const findLabelForComponent = (componentEl) => {
  */
 export function connectLabel(component) {
   const labelEl = findLabelForComponent(component.el);
-  if (!labelEl) {
+  if (!labelEl || onLabelClickMap.has(labelEl)) {
     return;
   }
   component.labelEl = labelEl;
   const boundOnLabelClick = onLabelClick.bind(component);
-  onLabelClickMap.set(component.el, boundOnLabelClick);
+  onLabelClickMap.set(component.labelEl, boundOnLabelClick);
   component.labelEl.addEventListener(labelClickEvent, boundOnLabelClick);
 }
 /**
@@ -31,9 +31,9 @@ export function disconnectLabel(component) {
   if (!component.labelEl) {
     return;
   }
-  const boundOnLabelClick = onLabelClickMap.get(component.el);
+  const boundOnLabelClick = onLabelClickMap.get(component.labelEl);
   component.labelEl.removeEventListener(labelClickEvent, boundOnLabelClick);
-  onLabelClickMap.delete(component.el);
+  onLabelClickMap.delete(component.labelEl);
 }
 /**
  * Helper to get the label text from a component.

package/dist/collection/utils/popper.js

@@ -31,9 +31,9 @@ export function createPopper({ referenceEl, el, placement, overlayPositioning =
     modifiers
   });
 }
-export function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
+export async function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
   const placement = getPlacement(el, PopperPlacement);
-  popper.setOptions({
+  await popper.setOptions({
     modifiers,
     placement
   });

package/dist/components/CalciteExpandToggle.js

@@ -0,0 +1,87 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { forceUpdate, h } from '@stencil/core/internal/client';
+import { a as getElementDir } from './dom.js';
+import { S as SLOTS } from './calcite-action-menu2.js';
+import { S as SLOTS$1 } from './calcite-action-group2.js';
+
+const overflowActionsDebounceInMs = 150;
+const groupBufferHeight = 2;
+const getMaxActionCount = ({ height, actionHeight, groupCount }) => {
+  return Math.floor((height - groupCount * groupBufferHeight) / actionHeight);
+};
+const getOverflowCount = ({ actionCount, actionHeight, height, groupCount }) => {
+  return Math.max(actionCount - getMaxActionCount({ height, actionHeight, groupCount }), 0);
+};
+const queryActions = (el) => {
+  return Array.from(el.querySelectorAll("calcite-action")).filter((action) => action.closest("calcite-action-menu") ? action.slot === SLOTS.trigger : true);
+};
+const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
+  let needToSlotCount = overflowCount;
+  actionGroups.reverse().forEach((group) => {
+    let slottedWithinGroupCount = 0;
+    const groupActions = queryActions(group).reverse();
+    groupActions.forEach((groupAction) => {
+      if (groupAction.slot === SLOTS$1.menuActions) {
+        groupAction.removeAttribute("slot");
+        groupAction.textEnabled = expanded;
+      }
+    });
+    if (needToSlotCount > 0) {
+      groupActions.some((groupAction) => {
+        const unslottedActions = groupActions.filter((action) => !action.slot);
+        if (unslottedActions.length > 1 && groupActions.length > 2 && !groupAction.closest("calcite-action-menu")) {
+          groupAction.textEnabled = true;
+          groupAction.setAttribute("slot", SLOTS$1.menuActions);
+          slottedWithinGroupCount++;
+          if (slottedWithinGroupCount > 1) {
+            needToSlotCount--;
+          }
+        }
+        return needToSlotCount < 1;
+      });
+    }
+    forceUpdate(group);
+  });
+};
+
+const ICONS = {
+  chevronsLeft: "chevrons-left",
+  chevronsRight: "chevrons-right"
+};
+function getCalcitePosition(position, el) {
+  var _a;
+  return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
+}
+function toggleChildActionText({ parent, expanded }) {
+  queryActions(parent)
+    .filter((el) => el.slot !== SLOTS$1.menuActions)
+    .forEach((action) => (action.textEnabled = expanded));
+  parent.querySelectorAll("calcite-action-group").forEach((group) => (group.expanded = expanded));
+}
+const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
+  if (tooltip) {
+    tooltip.referenceElement = !expanded && referenceElement;
+  }
+  if (ref) {
+    ref(referenceElement);
+  }
+  return referenceElement;
+};
+const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
+  const rtl = getElementDir(el) === "rtl";
+  const expandText = expanded ? intlCollapse : intlExpand;
+  const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
+  if (rtl) {
+    icons.reverse();
+  }
+  const end = getCalcitePosition(position, el) === "end";
+  const expandIcon = end ? icons[1] : icons[0];
+  const collapseIcon = end ? icons[0] : icons[1];
+  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
+};
+
+export { CalciteExpandToggle as C, overflowActions as a, getOverflowCount as g, overflowActionsDebounceInMs as o, queryActions as q, toggleChildActionText as t };

package/dist/components/CalciteHeading.js

@@ -0,0 +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.
+ */
+import { h } from '@stencil/core/internal/client';
+
+function constrainHeadingLevel(level) {
+  return Math.min(Math.max(Math.ceil(level), 1), 6);
+}
+const CalciteHeading = (props, children) => {
+  const HeadingTag = `h${props.level}`;
+  delete props.level;
+  return h(HeadingTag, Object.assign({}, props), children);
+};
+
+export { CalciteHeading as C, constrainHeadingLevel as c };

package/dist/components/array.js

@@ -0,0 +1,9 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+function getRoundRobinIndex(index, total) {
+  return (index + total) % total;
+}
+
+export { getRoundRobinIndex as g };

package/dist/components/calcite-accordion-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteAccordionItem extends Components.CalciteAccordionItem, HTMLElement {}
+export const CalciteAccordionItem: {
+  prototype: CalciteAccordionItem;
+  new (): CalciteAccordionItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,153 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
+import { g as getKey } from './key.js';
+import { d as defineCustomElement$2 } from './calcite-icon2.js';
+
+const calciteAccordionItemCss = "@-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:300ms}.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}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}.icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:-90deg;--calcite-accordion-item-active-icon-rotation:0;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0;--calcite-accordion-item-active-icon-rotation-rtl:-180deg}:host{--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host-context([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0}:host-context([appearance=transparent]){--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative;color:var(--calcite-ui-text-3);background-color:var(--calcite-accordion-item-background);--calcite-accordion-item-border:var(--calcite-ui-border-2)}:host .accordion-item-header{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus) .accordion-item-header{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]){color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-content{display:block;color:var(--calcite-ui-text-1)}:host([active]) .accordion-item-header{border-bottom-color:transparent}:host .accordion-item-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;cursor:pointer;-ms-flex-direction:var(--calcite-accordion-item-flex-direction);flex-direction:var(--calcite-accordion-item-flex-direction)}:host .accordion-item-icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;color:var(--calcite-ui-text-3);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-right:var(--calcite-accordion-item-icon-spacing-start);margin-left:var(--calcite-accordion-item-icon-spacing-end)}.calcite--rtl .accordion-item-icon{margin-left:var(--calcite-accordion-item-icon-spacing-start);margin-right:var(--calcite-accordion-item-icon-spacing-end)}:host .accordion-item-content,:host .accordion-item-header{padding:var(--calcite-accordion-item-padding);border-bottom:1px solid var(--calcite-accordion-item-border)}:host .accordion-item-header *{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}:host .accordion-item-content{display:none;color:var(--calcite-ui-text-3);padding-top:0;text-align:initial}:host .accordion-item-expand-icon{color:var(--calcite-ui-text-3);margin-left:var(--calcite-accordion-item-icon-spacing-start);margin-right:var(--calcite-accordion-item-icon-spacing-end);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation));transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .accordion-item-expand-icon{margin-left:var(--calcite-accordion-item-icon-spacing-end);margin-right:var(--calcite-accordion-item-icon-spacing-start);-webkit-transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1);-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation));transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([active]) .calcite--rtl .accordion-item-expand-icon{-webkit-transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .accordion-item-header-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:1;flex-grow:1;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;margin-right:auto;text-align:initial}.calcite--rtl .accordion-item-header-text{margin-right:0;margin-left:auto}:host .accordion-item-title,:host .accordion-item-subtitle{display:-ms-flexbox;display:flex;width:100%}:host .accordion-item-title{color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-medium)}:host .accordion-item-subtitle{color:var(--calcite-ui-text-3);margin-top:0.25rem}.calcite--rtl .accordion-item-title{margin-right:0;margin-left:auto}:host(:focus) .accordion-item-title,:host(:hover) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:hover) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:hover) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:hover) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}:host(:focus) .accordion-item-title,:host(:active) .accordion-item-title,:host([active]) .accordion-item-title{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-icon,:host(:active) .accordion-item-icon,:host([active]) .accordion-item-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-expand-icon,:host(:active) .accordion-item-expand-icon,:host([active]) .accordion-item-expand-icon{color:var(--calcite-ui-text-1)}:host(:focus) .accordion-item-subtitle,:host(:active) .accordion-item-subtitle,:host([active]) .accordion-item-subtitle{color:var(--calcite-ui-text-2)}";
+
+let CalciteAccordionItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteAccordionItemKeyEvent = createEvent(this, "calciteAccordionItemKeyEvent", 7);
+    this.calciteAccordionItemSelect = createEvent(this, "calciteAccordionItemSelect", 7);
+    this.calciteAccordionItemClose = createEvent(this, "calciteAccordionItemClose", 7);
+    this.calciteAccordionItemRegister = createEvent(this, "calciteAccordionItemRegister", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Indicates whether the item is active. */
+    this.active = false;
+    /** what icon position does the parent accordion specify */
+    this.iconPosition = "end";
+    /** handle clicks on item header */
+    this.itemHeaderClickHandler = () => this.emitRequestedItem();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.parent = this.el.parentElement;
+    this.selectionMode = getElementProp(this.el, "selection-mode", "multi");
+    this.iconType = getElementProp(this.el, "icon-type", "chevron");
+    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
+  }
+  componentDidLoad() {
+    this.itemPosition = this.getItemPosition();
+    this.calciteAccordionItemRegister.emit({
+      parent: this.parent,
+      position: this.itemPosition
+    });
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    const iconEl = h("calcite-icon", { class: "accordion-item-icon", icon: this.icon, scale: "s" });
+    return (h(Host, { "aria-expanded": this.active.toString(), tabindex: "0" }, h("div", { class: {
+        [`icon-position--${this.iconPosition}`]: true,
+        [`icon-type--${this.iconType}`]: true
+      } }, h("div", { class: { "accordion-item-header": true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.itemHeaderClickHandler }, this.icon ? iconEl : null, h("div", { class: "accordion-item-header-text" }, h("span", { class: "accordion-item-title" }, this.itemTitle), this.itemSubtitle ? (h("span", { class: "accordion-item-subtitle" }, this.itemSubtitle)) : null), h("calcite-icon", { class: "accordion-item-expand-icon", icon: this.iconType === "chevron"
+        ? "chevronDown"
+        : this.iconType === "caret"
+          ? "caretDown"
+          : this.active
+            ? "minus"
+            : "plus", scale: "s" })), h("div", { class: "accordion-item-content" }, h("slot", null)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  keyDownHandler(e) {
+    if (e.target === this.el) {
+      switch (getKey(e.key)) {
+        case " ":
+        case "Enter":
+          this.emitRequestedItem();
+          e.preventDefault();
+          break;
+        case "ArrowUp":
+        case "ArrowDown":
+        case "Home":
+        case "End":
+          this.calciteAccordionItemKeyEvent.emit({
+            parent: this.parent,
+            item: e
+          });
+          e.preventDefault();
+          break;
+      }
+    }
+  }
+  updateActiveItemOnChange(event) {
+    this.requestedAccordionItem = event.detail
+      .requestedAccordionItem;
+    this.determineActiveItem();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  determineActiveItem() {
+    switch (this.selectionMode) {
+      case "multi":
+        if (this.el === this.requestedAccordionItem) {
+          this.active = !this.active;
+        }
+        break;
+      case "single":
+        this.active = this.el === this.requestedAccordionItem ? !this.active : false;
+        break;
+      case "single-persist":
+        this.active = this.el === this.requestedAccordionItem;
+        break;
+    }
+  }
+  emitRequestedItem() {
+    this.calciteAccordionItemSelect.emit({
+      requestedAccordionItem: this.el
+    });
+  }
+  getItemPosition() {
+    return Array.prototype.indexOf.call(this.parent.querySelectorAll("calcite-accordion-item"), this.el);
+  }
+  get el() { return this; }
+  static get style() { return calciteAccordionItemCss; }
+};
+CalciteAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteAccordionItem$1, [1, "calcite-accordion-item", {
+    "active": [1540],
+    "itemTitle": [1, "item-title"],
+    "itemSubtitle": [1, "item-subtitle"],
+    "icon": [513]
+  }, [[0, "keydown", "keyDownHandler"], [16, "calciteAccordionChange", "updateActiveItemOnChange"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-accordion-item", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-accordion-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteAccordionItem$1);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteAccordionItem = CalciteAccordionItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteAccordionItem, defineCustomElement };

package/dist/components/calcite-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CalciteAccordion extends Components.CalciteAccordion, HTMLElement {}
+export const CalciteAccordion: {
+  prototype: CalciteAccordion;
+  new (): CalciteAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/calcite-accordion.js

@@ -0,0 +1,167 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+import { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { g as getKey } from './key.js';
+
+const calciteAccordionCss = "@-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:300ms}.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}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
+
+let CalciteAccordion$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteAccordionChange = createEvent(this, "calciteAccordionChange", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /** specify the appearance - default (containing border), or minimal (no containing border), defaults to default */
+    this.appearance = "default";
+    /** specify the placement of the icon in the header, defaults to end */
+    this.iconPosition = "end";
+    /** specify the type of the icon in the header, defaults to chevron */
+    this.iconType = "chevron";
+    /** specify the scale of accordion, defaults to m */
+    this.scale = "m";
+    /** specify the selection mode - multi (allow any number of open items), single (allow one open item),
+     * or single-persist (allow and require one open item), defaults to multi */
+    this.selectionMode = "multi";
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /** created list of Accordion items */
+    this.items = [];
+    /** keep track of whether the items have been sorted so we don't re-sort */
+    this.sorted = false;
+    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidLoad() {
+    if (!this.sorted) {
+      this.items = this.sortItems(this.items);
+      this.sorted = true;
+    }
+  }
+  render() {
+    return h("slot", null);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteAccordionItemKeyEvent(e) {
+    const item = e.detail.item;
+    const parent = e.detail.parent;
+    if (this.el === parent) {
+      const key = getKey(item.key);
+      const itemToFocus = e.target;
+      const isFirstItem = this.itemIndex(itemToFocus) === 0;
+      const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
+      switch (key) {
+        case "ArrowDown":
+          if (isLastItem) {
+            this.focusFirstItem();
+          }
+          else {
+            this.focusNextItem(itemToFocus);
+          }
+          break;
+        case "ArrowUp":
+          if (isFirstItem) {
+            this.focusLastItem();
+          }
+          else {
+            this.focusPrevItem(itemToFocus);
+          }
+          break;
+        case "Home":
+          this.focusFirstItem();
+          break;
+        case "End":
+          this.focusLastItem();
+          break;
+      }
+    }
+  }
+  registerCalciteAccordionItem(e) {
+    const item = {
+      item: e.target,
+      parent: e.detail.parent,
+      position: e.detail.position
+    };
+    if (this.el === item.parent) {
+      this.items.push(item);
+    }
+  }
+  updateActiveItemOnChange(event) {
+    this.requestedAccordionItem = event.detail.requestedAccordionItem;
+    this.calciteAccordionChange.emit({
+      requestedAccordionItem: this.requestedAccordionItem
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  focusFirstItem() {
+    const firstItem = this.items[0];
+    this.focusElement(firstItem);
+  }
+  focusLastItem() {
+    const lastItem = this.items[this.items.length - 1];
+    this.focusElement(lastItem);
+  }
+  focusNextItem(e) {
+    const index = this.itemIndex(e);
+    const nextItem = this.items[index + 1] || this.items[0];
+    this.focusElement(nextItem);
+  }
+  focusPrevItem(e) {
+    const index = this.itemIndex(e);
+    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
+    this.focusElement(prevItem);
+  }
+  itemIndex(e) {
+    return this.items.indexOf(e);
+  }
+  focusElement(item) {
+    const target = item;
+    target.focus();
+  }
+  get el() { return this; }
+  static get style() { return calciteAccordionCss; }
+};
+CalciteAccordion$1 = /*@__PURE__*/ proxyCustomElement(CalciteAccordion$1, [1, "calcite-accordion", {
+    "appearance": [513],
+    "iconPosition": [513, "icon-position"],
+    "iconType": [513, "icon-type"],
+    "scale": [513],
+    "selectionMode": [513, "selection-mode"]
+  }, [[0, "calciteAccordionItemKeyEvent", "calciteAccordionItemKeyEvent"], [0, "calciteAccordionItemRegister", "registerCalciteAccordionItem"], [0, "calciteAccordionItemSelect", "updateActiveItemOnChange"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteAccordion$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteAccordion = CalciteAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteAccordion, defineCustomElement };