@esri/calcite-components 1.0.0-beta.67 → 1.0.0-beta.68

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

@@ -1,3 +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.
+ */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, TOOLTIP_REFERENCE, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";

package/dist/collection/components/calcite-tooltip/resources.js

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "container",
   arrow: "arrow"

package/dist/collection/components/calcite-tooltip-manager/calcite-tooltip-manager.js

@@ -1,3 +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.
+ */
 import { Component, h, Listen, Prop, Element } from "@stencil/core";
 import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../calcite-tooltip/resources";
 import { queryElementRoots } from "../../utils/dom";
@@ -71,13 +75,14 @@ export class CalciteTooltipManager {
     };
     this.activeTooltipHover = (event) => {
       const { tooltipEl, hoverTimeouts } = this;
+      const { type } = event;
       if (!tooltipEl) {
         return;
       }
-      if (event.composedPath().includes(tooltipEl)) {
+      if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
         this.clearHoverTimeout(tooltipEl);
       }
-      else if (!hoverTimeouts.has(tooltipEl)) {
+      else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
         this.hoverTooltip({ tooltip: tooltipEl, value: false });
       }
     };

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

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { focusElement, nodeListToArray } from "../../utils/dom";
 import { TreeSelectionMode } from "./interfaces";

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

@@ -1,3 +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.
+ */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {
   TreeSelectionMode["Single"] = "single";

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

@@ -1,3 +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.
+ */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from "../../utils/dom";

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

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

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

@@ -1,3 +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.
+ */
 export const CSS = {
   checkboxLabel: "checkbox-label",
   checkbox: "checkbox",

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

@@ -1,3 +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.
+ */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";

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

@@ -1,3 +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.
+ */
 export const CSS = {
   container: "container",
   handle: "handle"

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

@@ -1,3 +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.
+ */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
 import { guid } from "../../utils/guid";

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

@@ -1,3 +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.
+ */
 export const ICONS = {
   drag: "drag"
 };

package/dist/collection/components/functional/CalciteExpandToggle.js

@@ -1,3 +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.
+ */
 import { h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";

package/dist/collection/components/functional/CalciteHeading.js

@@ -1,3 +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.
+ */
 import { h } from "@stencil/core";
 export function constrainHeadingLevel(level) {
   return Math.min(Math.max(Math.ceil(level), 1), 6);

package/dist/collection/components/interfaces.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export {};

package/dist/collection/utils/array.js

@@ -1,3 +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.
+ */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;
 }

package/dist/collection/utils/date.js

@@ -1,3 +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.
+ */
 /**
  * Check if date is within a min and max
  */

package/dist/collection/utils/dom.js

@@ -1,3 +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.
+ */
 import { CSS_UTILITY } from "./resources";
 import { guid } from "./guid";
 /**

package/dist/collection/utils/filter.js

@@ -1,3 +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.
+ */
 import { escapeRegExp, forIn } from "lodash-es";
 export const filter = (data, value) => {
   const escapedValue = escapeRegExp(value);

package/dist/collection/utils/form.js

@@ -1,3 +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.
+ */
 export const hiddenInputStyle = `
   bottom: 0 !important;
   left: 0 !important;

package/dist/collection/utils/guid.js

@@ -1,3 +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.
+ */
 function gen(counts) {
   return counts
     .map((count) => {

package/dist/collection/utils/key.js

@@ -1,3 +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.
+ */
 /**
  * Standardize key property of keyboard event (mostly for ie11)
  */

package/dist/collection/utils/label.js

@@ -1,3 +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.
+ */
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
 const labelTagName = "calcite-label";
 const labelClickEvent = "calciteInternalLabelClick";
@@ -12,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);
 }
 /**
@@ -27,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/locale.js

@@ -1,3 +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.
+ */
 import { sanitizeDecimalString } from "./number";
 export const locales = [
   "ar",

package/dist/collection/utils/math.js

@@ -1 +1,5 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
 export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));

package/dist/collection/utils/number.js

@@ -1,7 +1,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 { numberKeys } from "./key";
-export function isValidDecimal(value) {
-  return !Number.isInteger(Number(value));
-}
 export function isValidNumber(numberString) {
   return !(!numberString || isNaN(Number(numberString)));
 }

package/dist/collection/utils/observers.js

@@ -1,3 +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.
+ */
 import { Build } from "@stencil/core";
 /**
  * This utility ensures observers are created only for browser contexts.

package/dist/collection/utils/popper.js

@@ -1,3 +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.
+ */
 import { createPopper as setupPopper } from "@popperjs/core";
 import { getElementDir } from "./dom";
 export const CSS = {

package/dist/collection/utils/resources.js

@@ -1,3 +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.
+ */
 const autoTheme = "calcite-theme-auto";
 const darkTheme = "calcite-theme-dark";
 const lightTheme = "calcite-theme-light";

package/dist/collection/utils/time.js

@@ -1,3 +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.
+ */
 import { isValidNumber } from "./number";
 export const maxTenthForMinuteAndSecond = 5;
 export function getMeridiem(hour) {

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 { attachShadow, 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();
+    attachShadow(this);
+    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;