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

package/dist/collection/utils/form.js

@@ -1,14 +1,171 @@
-export const hiddenInputStyle = `
-  bottom: 0 !important;
-  left: 0 !important;
-  margin: 0 !important;
-  opacity: 0 !important;
-  outline: none !important;
-  padding: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  transform: none !important;
-  -webkit-appearance: none !important;
-  z-index: -1 !important;
-`;
+/*!
+ * 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 } from "./dom";
+import { h } from "@stencil/core";
+/**
+ * Exported for testing purposes.
+ */
+export const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+  return "checked" in component;
+}
+const onFormResetMap = new WeakMap();
+const formComponentSet = new WeakSet();
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+  // we use events as a way to test for nested form-associated components across shadow bounds
+  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+  let hasRegisteredFormComponentParent = false;
+  form.addEventListener(formComponentRegisterEventName, (event) => {
+    hasRegisteredFormComponentParent = event
+      .composedPath()
+      .some((element) => formComponentSet.has(element));
+    event.stopPropagation();
+  }, { once: true });
+  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+    bubbles: true,
+    composed: true
+  }));
+  return hasRegisteredFormComponentParent;
+}
+/**
+ * Helper to set up form interactions on connectedCallback.
+ */
+export function connectForm(component) {
+  const { el, value } = component;
+  const form = closestElementCrossShadowBoundary(el, "form");
+  if (!form || hasRegisteredFormComponentParent(form, el)) {
+    return;
+  }
+  component.formEl = form;
+  component.defaultValue = value;
+  if (isCheckable(component)) {
+    component.defaultChecked = component.checked;
+  }
+  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);
+  form.addEventListener("reset", boundOnFormReset);
+  formComponentSet.add(el);
+}
+function onFormReset() {
+  if (isCheckable(this)) {
+    this.checked = this.defaultChecked;
+    return;
+  }
+  this.value = this.defaultValue;
+}
+/**
+ * Helper to tear down form interactions on disconnectedCallback.
+ */
+export function disconnectForm(component) {
+  const { el, formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  const boundOnFormReset = onFormResetMap.get(el);
+  formEl.removeEventListener("reset", boundOnFormReset);
+  onFormResetMap.delete(el);
+  component.formEl = null;
+  formComponentSet.delete(el);
+}
+/**
+ * Helper for setting the default value on initialization after connectedCallback.
+ *
+ * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ */
+export function afterConnectDefaultValueSet(component, value) {
+  component.defaultValue = value;
+}
+/**
+ * Helper for maintaining a form-associated's hidden input in sync with the component.
+ *
+ * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ */
+function syncHiddenFormInput(component) {
+  const { el, formEl, name, value } = component;
+  const { ownerDocument } = el;
+  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+  if (!formEl || !name) {
+    inputs.forEach((input) => input.remove());
+    return;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  const extra = [];
+  const seen = new Set();
+  inputs.forEach((input) => {
+    const valueMatch = values.find((val) => 
+    /* intentional non-strict equality check */
+    val == input.value);
+    if (valueMatch != null) {
+      seen.add(valueMatch);
+      defaultSyncHiddenFormInput(component, input, valueMatch);
+    }
+    else {
+      extra.push(input);
+    }
+  });
+  let docFrag;
+  values.forEach((value) => {
+    if (seen.has(value)) {
+      return;
+    }
+    let input = extra.pop();
+    if (!input) {
+      input = ownerDocument.createElement("input");
+      input.slot = hiddenFormInputSlotName;
+    }
+    if (!docFrag) {
+      docFrag = ownerDocument.createDocumentFragment();
+    }
+    docFrag.append(input);
+    defaultSyncHiddenFormInput(component, input, value);
+  });
+  if (docFrag) {
+    el.append(docFrag);
+  }
+  extra.forEach((input) => input.remove());
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+  var _a;
+  const { defaultValue, disabled, name, required } = component;
+  // keep in sync to prevent losing reset value
+  input.defaultValue = defaultValue;
+  input.disabled = disabled;
+  input.name = name;
+  input.required = required;
+  input.tabIndex = -1;
+  if (isCheckable(component)) {
+    // keep in sync to prevent losing reset value
+    input.defaultChecked = component.defaultChecked;
+    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+    input.value = component.checked ? value || "on" : "";
+    // we disable the component when not checked to avoid having its value submitted
+    if (!disabled && !component.checked) {
+      input.disabled = true;
+    }
+  }
+  else {
+    input.value = value || "";
+  }
+  (_a = component.syncHiddenFormInput) === null || _a === void 0 ? void 0 : _a.call(component, input);
+}
+/**
+ * Helper to render the slot for form-associated component's hidden input.
+ *
+ * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.
+ *
+ * render(): VNode {
+ *   <Host>
+ *     <div class={CSS.container}>
+ *     // ...
+ *     <HiddenFormInputSlot component={this} />
+ *     </div>
+ *   </Host>
+ * }
+ *
+ * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ */
+export const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return h("slot", { name: hiddenFormInputSlotName });
+};

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,23 +1,56 @@
+/*!
+ * 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";
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
+export const labelClickEvent = "calciteInternalLabelClick";
 const labelTagName = "calcite-label";
-const labelClickEvent = "calciteInternalLabelClick";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
-  const id = componentEl.id;
-  return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
-    closestElementCrossShadowBoundary(componentEl, labelTagName));
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel ||
+    // labelable components within other custom elements are not considered labelable
+    hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
 };
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = (event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  };
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements
+    .filter((el) => el !== componentEl && el !== label)
+    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+  return ancestorCustomElements.length > 0;
+}
 /**
  * Helper to set up label interactions on connectedCallback.
  */
 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 +60,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,16 @@
+/*!
+ * 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));
+export const decimalPlaces = (value) => {
+  const match = ("" + value).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  if (!match) {
+    return 0;
+  }
+  return Math.max(0, 
+  // Number of digits right of decimal point.
+  (match[1] ? match[1].length : 0) -
+    // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0));
+};

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 = {
@@ -27,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/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,159 @@
+/*!
+ * 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, 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;
+    if (this.el.parentNode !== this.requestedAccordionItem.parentNode) {
+      return;
+    }
+    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() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  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 };