@esri/calcite-components 1.0.0-beta.65 → 1.0.0-beta.69

package/dist/components/calcite-tooltip.js

@@ -0,0 +1,224 @@
+/*!
+ * 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, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { T as TOOLTIP_REFERENCE, A as ARIA_DESCRIBED_BY, C as CSS$1 } from './resources2.js';
+import { g as guid } from './guid.js';
+import { d as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS } from './popper.js';
+import { q as queryElementRoots } from './dom.js';
+
+const calciteTooltipCss = "@-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{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}.container{position:relative;background-color:var(--calcite-ui-foreground-1);display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-direction:column;flex-direction:column;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;overflow:hidden;font-size:var(--calcite-font-size--2);line-height:1.375;border-radius:0.25rem;max-width:20rem;max-height:20rem}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
+
+let CalciteTooltip$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Offset the position of the popover away from the reference element.
+     * @default 6
+     */
+    this.offsetDistance = defaultOffsetDistance;
+    /**
+     * Offset the position of the popover along the reference element.
+     */
+    this.offsetSkidding = 0;
+    /**
+     * Display and position the component.
+     */
+    this.open = false;
+    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    this.overlayPositioning = "absolute";
+    /**
+     * Determines where the component will be positioned relative to the referenceElement.
+     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     */
+    this.placement = "auto";
+    this.guid = `calcite-tooltip-${guid()}`;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.setUpReferenceElement = () => {
+      this.removeReferences();
+      this.effectiveReferenceElement = this.getReferenceElement();
+      const { el, referenceElement, effectiveReferenceElement } = this;
+      if (referenceElement && !effectiveReferenceElement) {
+        console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
+          el
+        });
+      }
+      this.addReferences();
+      this.createPopper();
+    };
+    this.getId = () => {
+      return this.el.id || this.guid;
+    };
+    this.addReferences = () => {
+      const { effectiveReferenceElement } = this;
+      if (!effectiveReferenceElement) {
+        return;
+      }
+      const id = this.getId();
+      effectiveReferenceElement.setAttribute(TOOLTIP_REFERENCE, id);
+      effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+    };
+    this.removeReferences = () => {
+      const { effectiveReferenceElement } = this;
+      if (!effectiveReferenceElement) {
+        return;
+      }
+      effectiveReferenceElement.removeAttribute(TOOLTIP_REFERENCE);
+      effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+    };
+    this.show = () => {
+      this.open = true;
+    };
+    this.hide = () => {
+      this.open = false;
+    };
+  }
+  offsetDistanceOffsetHandler() {
+    this.reposition();
+  }
+  offsetSkiddingHandler() {
+    this.reposition();
+  }
+  openHandler() {
+    this.reposition();
+  }
+  placementHandler() {
+    this.reposition();
+  }
+  referenceElementHandler() {
+    this.setUpReferenceElement();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  componentWillLoad() {
+    this.setUpReferenceElement();
+  }
+  componentDidLoad() {
+    this.reposition();
+  }
+  disconnectedCallback() {
+    this.removeReferences();
+    this.destroyPopper();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async reposition() {
+    const { popper, el, placement } = this;
+    const modifiers = this.getModifiers();
+    popper
+      ? await updatePopper({
+        el,
+        modifiers,
+        placement,
+        popper
+      })
+      : this.createPopper();
+  }
+  getReferenceElement() {
+    const { referenceElement, el } = this;
+    return ((typeof referenceElement === "string"
+      ? queryElementRoots(el, `#${referenceElement}`)
+      : referenceElement) || null);
+  }
+  getModifiers() {
+    const { arrowEl, offsetDistance, offsetSkidding } = this;
+    const arrowModifier = {
+      name: "arrow",
+      enabled: true,
+      options: {
+        element: arrowEl
+      }
+    };
+    const offsetModifier = {
+      name: "offset",
+      enabled: true,
+      options: {
+        offset: [offsetSkidding, offsetDistance]
+      }
+    };
+    return [arrowModifier, offsetModifier];
+  }
+  createPopper() {
+    this.destroyPopper();
+    const { el, placement, effectiveReferenceElement: referenceEl, overlayPositioning } = this;
+    const modifiers = this.getModifiers();
+    this.popper = createPopper({
+      el,
+      modifiers,
+      placement,
+      overlayPositioning,
+      referenceEl
+    });
+  }
+  destroyPopper() {
+    const { popper } = this;
+    if (popper) {
+      popper.destroy();
+    }
+    this.popper = null;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { effectiveReferenceElement, label, open } = this;
+    const displayed = effectiveReferenceElement && open;
+    const hidden = !displayed;
+    return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" }, h("div", { class: {
+        [CSS.animation]: true,
+        [CSS.animationActive]: displayed
+      } }, h("div", { class: CSS$1.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) }), h("div", { class: CSS$1.container }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "offsetDistance": ["offsetDistanceOffsetHandler"],
+    "offsetSkidding": ["offsetSkiddingHandler"],
+    "open": ["openHandler"],
+    "placement": ["placementHandler"],
+    "referenceElement": ["referenceElementHandler"]
+  }; }
+  static get style() { return calciteTooltipCss; }
+};
+CalciteTooltip$1 = /*@__PURE__*/ proxyCustomElement(CalciteTooltip$1, [1, "calcite-tooltip", {
+    "label": [1],
+    "offsetDistance": [514, "offset-distance"],
+    "offsetSkidding": [514, "offset-skidding"],
+    "open": [516],
+    "overlayPositioning": [1, "overlay-positioning"],
+    "placement": [513],
+    "referenceElement": [1, "reference-element"],
+    "effectiveReferenceElement": [32],
+    "reposition": [64]
+  }]);
+function defineCustomElement$1() {
+  const components = ["calcite-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTooltip$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTooltip = CalciteTooltip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTooltip, defineCustomElement };

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

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

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

@@ -0,0 +1,310 @@
+/*!
+ * 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 { T as TreeSelectionMode } from './interfaces2.js';
+import { b as getSlotted, a as getElementDir, C as CSS_UTILITY, e as filterDirectChildren, n as nodeListToArray } from './dom.js';
+import { g as getKey } from './key.js';
+import { d as defineCustomElement$3 } from './calcite-checkbox2.js';
+import { d as defineCustomElement$2 } from './calcite-icon2.js';
+
+const CSS = {
+  checkboxLabel: "checkbox-label",
+  checkbox: "checkbox",
+  chevron: "chevron",
+  nodeContainer: "node-container",
+  childrenContainer: "children-container",
+  bulletPointIcon: "bullet-point",
+  checkmarkIcon: "checkmark"
+};
+const SLOTS = {
+  children: "children"
+};
+const ICONS = {
+  bulletPoint: "bullet-point",
+  checkmark: "check",
+  chevronRight: "chevron-right"
+};
+
+const calciteTreeItemCss = "@-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{--calcite-tree-indicator:var(--calcite-ui-border-1);--calcite-tree-indicator-active:var(--calcite-ui-brand);--calcite-tree-text:var(--calcite-ui-text-3);--calcite-tree-text-active:var(--calcite-ui-text-1);display:block;cursor:pointer;outline:2px solid transparent;outline-offset:2px;max-width:100%;color:var(--calcite-tree-text)}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-tree-padding-y:0.25rem}:host([scale=s]) .node-container .checkbox{-webkit-margin-start:1.5rem;margin-inline-start:1.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-tree-padding-y:0.5rem}:host([scale=m]) .node-container .checkbox{-webkit-margin-start:2rem;margin-inline-start:2rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-tree-padding-y:0.75rem}:host([scale=l]) .node-container .checkbox{-webkit-margin-start:2.5rem;margin-inline-start:2.5rem}:host([lines]){--calcite-tree-line:var(--calcite-ui-border-2);--calcite-tree-line-hover:var(--calcite-ui-border-1)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){word-wrap:break-word;overflow-wrap:break-word;min-width:0;max-width:100%;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){width:100%;text-decoration:none}:host{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){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.checkbox{outline:2px solid transparent;outline-offset:2px;line-height:0}.checkbox-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:none}.children-container{position:relative;overflow:hidden;height:0;-webkit-margin-start:1.25rem;margin-inline-start:1.25rem;-webkit-margin-end:1.25rem;margin-inline-end:1.25rem;-webkit-transform:scaleY(0);transform:scaleY(0);opacity:0;-webkit-transition:0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;transition:0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;-webkit-transform-origin:top;transform-origin:top}.children-container:after{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-property:background-color, border-color, color, fill, stroke;transition-property:background-color, border-color, color, fill, stroke;top:0;position:absolute;width:1px;height:96%;content:\"\";background-color:var(--calcite-tree-line);z-index:-1}:host([expanded])>.children-container{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1;height:auto}.node-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;padding:var(--calcite-tree-padding-y) 0}.node-container .checkmark,.node-container .bullet-point{-webkit-margin-start:var(--calcite-tree-padding-y);margin-inline-start:var(--calcite-tree-padding-y);-webkit-margin-end:var(--calcite-tree-padding-y);margin-inline-end:var(--calcite-tree-padding-y)}.node-container .checkbox{-webkit-margin-end:var(--calcite-tree-padding-y);margin-inline-end:var(--calcite-tree-padding-y)}.node-container .checkmark,.node-container .bullet-point{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;opacity:0;color:var(--calcite-tree-indicator)}.node-container:hover ::slotted(*),:host([selected]) .node-container:hover ::slotted(*),:host(:focus) .node-container ::slotted(*){color:var(--calcite-tree-text-hover)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus) .node-container .checkmark,:host(:focus) .node-container .bullet-point{opacity:1}:host([selected])>.node-container,:host([selected])>.node-container:hover{color:var(--calcite-tree-text-active);font-weight:var(--calcite-font-weight-medium)}:host([selected])>.node-container .bullet-point,:host([selected])>.node-container .checkmark,:host([selected])>.node-container:hover .bullet-point,:host([selected])>.node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host(:not([has-children]))[scale=s]>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}:host(:not([has-children]))[scale=m]>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}:host(:not([has-children]))[scale=l]>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}:host([has-children])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-margin-start:0;margin-inline-start:0}:host([has-children])>.node-container .bullet-point,:host([has-children])>.node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]))>.node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-tree-text-active)}:host([has-children][selected])>.node-container[data-selection-mode=children],:host([has-children][selected])>.node-container[data-selection-mode=multi-children]{color:var(--calcite-tree-indicator-active)}.chevron{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;position:relative;-ms-flex-item-align:center;align-self:center;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-margin-start:var(--calcite-tree-padding-y);margin-inline-start:var(--calcite-tree-padding-y);-webkit-margin-end:var(--calcite-tree-padding-y);margin-inline-end:var(--calcite-tree-padding-y);-webkit-transform:rotate(0deg);transform:rotate(0deg);color:var(--calcite-tree-text)}.calcite--rtl .chevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([expanded])>.node-container>.chevron{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([scale=s])>.node-container .checkbox{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m])>.node-container .checkbox{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l])>.node-container .checkbox{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-tree-indicator-active)}";
+
+let CalciteTreeItem$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTreeItemSelect = createEvent(this, "calciteTreeItemSelect", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** Is the item currently selected */
+    this.selected = false;
+    /** True if the item is in an expanded state */
+    this.expanded = false;
+    /** @internal Is the parent of this item expanded? */
+    this.parentExpanded = false;
+    /** @internal What level of depth is this item at? */
+    this.depth = -1;
+    /** @internal Does this tree item have a tree inside it? */
+    this.hasChildren = null;
+    this.iconClickHandler = (event) => {
+      event.stopPropagation();
+      this.expanded = !this.expanded;
+      if (this.selectionMode !== TreeSelectionMode.Ancestors) {
+        this.calciteTreeItemSelect.emit({
+          modifyCurrentSelection: event.shiftKey,
+          forceToggle: true
+        });
+      }
+    };
+    this.childrenClickHandler = (event) => event.stopPropagation();
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.updateParentIsExpanded = (el, expanded) => {
+      const items = getSlotted(el, SLOTS.children, {
+        all: true,
+        selector: "calcite-tree-item"
+      });
+      items.forEach((item) => (item.parentExpanded = expanded));
+    };
+    this.updateAncestorTree = () => {
+      if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
+        const ancestors = [];
+        let parent = this.parentTreeItem;
+        while (parent) {
+          ancestors.push(parent);
+          parent = parent.parentElement.closest("calcite-tree-item");
+        }
+        ancestors.forEach((item) => (item.indeterminate = true));
+        return;
+      }
+    };
+  }
+  expandedHandler(newValue) {
+    this.updateParentIsExpanded(this.el, newValue);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    if (this.parentTreeItem) {
+      const { expanded } = this.parentTreeItem;
+      this.updateParentIsExpanded(this.parentTreeItem, expanded);
+    }
+  }
+  componentWillRender() {
+    this.hasChildren = !!this.el.querySelector("calcite-tree");
+    this.depth = 0;
+    let parentTree = this.el.closest("calcite-tree");
+    if (!parentTree) {
+      return;
+    }
+    this.selectionMode = parentTree.selectionMode;
+    this.scale = parentTree.scale || "m";
+    this.lines = parentTree.lines;
+    let nextParentTree;
+    while (parentTree) {
+      nextParentTree = parentTree.parentElement.closest("calcite-tree");
+      if (nextParentTree === parentTree) {
+        break;
+      }
+      else {
+        parentTree = nextParentTree;
+        this.depth = this.depth + 1;
+      }
+    }
+  }
+  componentDidLoad() {
+    this.updateAncestorTree();
+  }
+  render() {
+    const rtl = getElementDir(this.el) === "rtl";
+    const showBulletPoint = this.selectionMode === TreeSelectionMode.Single ||
+      this.selectionMode === TreeSelectionMode.Children;
+    const showCheckmark = this.selectionMode === TreeSelectionMode.Multi ||
+      this.selectionMode === TreeSelectionMode.MultiChildren;
+    const chevron = this.hasChildren ? (h("calcite-icon", { class: {
+        [CSS.chevron]: true,
+        [CSS_UTILITY.rtl]: rtl
+      }, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
+    const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel }, h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }), h("slot", null))) : null;
+    const selectedIcon = showBulletPoint
+      ? ICONS.bulletPoint
+      : showCheckmark
+        ? ICONS.checkmark
+        : null;
+    const bulletOrCheckIcon = selectedIcon ? (h("calcite-icon", { class: {
+        [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
+        [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
+        [CSS_UTILITY.rtl]: rtl
+      }, icon: selectedIcon, scale: "s" })) : null;
+    const hidden = !(this.parentExpanded || this.depth === 1);
+    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" }, h("div", { class: {
+        [CSS.nodeContainer]: true,
+        [CSS_UTILITY.rtl]: rtl
+      }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, bulletOrCheckIcon, checkbox ? checkbox : h("slot", null)), h("div", { class: {
+        [CSS.childrenContainer]: true,
+        [CSS_UTILITY.rtl]: rtl
+      }, "data-test-id": "calcite-tree-children", onClick: this.childrenClickHandler, ref: (el) => (this.childrenSlotWrapper = el), role: this.hasChildren ? "group" : undefined }, h("slot", { name: SLOTS.children }))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  onClick(e) {
+    // Solve for if the item is clicked somewhere outside the slotted anchor.
+    // Anchor is triggered anywhere you click
+    const [link] = filterDirectChildren(this.el, "a");
+    if (link && e.composedPath()[0].tagName.toLowerCase() !== "a") {
+      const target = link.target === "" ? "_self" : link.target;
+      window.open(link.href, target);
+    }
+    this.expanded = !this.expanded;
+    this.calciteTreeItemSelect.emit({
+      modifyCurrentSelection: e.shiftKey || this.selectionMode === TreeSelectionMode.Ancestors,
+      forceToggle: false
+    });
+  }
+  keyDownHandler(e) {
+    let root;
+    switch (getKey(e.key)) {
+      case " ":
+        this.calciteTreeItemSelect.emit({
+          modifyCurrentSelection: e.shiftKey,
+          forceToggle: false
+        });
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case "Enter":
+        // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
+        const link = nodeListToArray(this.el.children).find((e) => e.matches("a"));
+        if (link) {
+          link.click();
+          this.selected = true;
+        }
+        else {
+          this.calciteTreeItemSelect.emit({
+            modifyCurrentSelection: e.shiftKey,
+            forceToggle: false
+          });
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case "ArrowLeft":
+        // When focus is on an open node, closes the node.
+        if (this.hasChildren && this.expanded) {
+          this.expanded = false;
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        }
+        // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
+        const parentItem = this.parentTreeItem;
+        if (parentItem && (!this.hasChildren || this.expanded === false)) {
+          parentItem.focus();
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        }
+        // When focus is on a root node that is also either an end node or a closed node, does nothing.
+        break;
+      case "ArrowRight":
+        // When focus is on a closed node, opens the node; focus does not move.
+        if (this.hasChildren && this.expanded === false) {
+          this.expanded = true;
+          e.preventDefault();
+          e.stopPropagation();
+          break;
+        }
+        // When focus is on a open node, moves focus to the first child node.
+        if (this.hasChildren && this.expanded) {
+          this.el.querySelector("calcite-tree-item").focus();
+          break;
+        }
+        // When focus is on an end node, does nothing.
+        break;
+      case "ArrowUp":
+        const previous = this.el.previousElementSibling;
+        if (previous && previous.matches("calcite-tree-item")) {
+          previous.focus();
+        }
+        break;
+      case "ArrowDown":
+        const next = this.el.nextElementSibling;
+        if (next && next.matches("calcite-tree-item")) {
+          next.focus();
+        }
+        break;
+      case "Home":
+        root = this.el.closest("calcite-tree:not([child])");
+        const firstNode = root.querySelector("calcite-tree-item");
+        firstNode.focus();
+        break;
+      case "End":
+        root = this.el.closest("calcite-tree:not([child])");
+        let currentNode = root.children[root.children.length - 1]; // last child
+        let currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
+        while (currentTree) {
+          currentNode = currentTree.children[root.children.length - 1];
+          currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
+        }
+        currentNode.focus();
+        break;
+    }
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "expanded": ["expandedHandler"]
+  }; }
+  static get style() { return calciteTreeItemCss; }
+};
+CalciteTreeItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteTreeItem$1, [1, "calcite-tree-item", {
+    "selected": [1540],
+    "expanded": [1540],
+    "parentExpanded": [4, "parent-expanded"],
+    "depth": [1538],
+    "hasChildren": [1540, "has-children"],
+    "lines": [1540],
+    "inputEnabled": [4, "input-enabled"],
+    "scale": [1537],
+    "indeterminate": [516],
+    "selectionMode": [1025, "selection-mode"]
+  }, [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]]);
+function defineCustomElement$1() {
+  const components = ["calcite-tree-item", "calcite-checkbox", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tree-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteTreeItem$1);
+      }
+      break;
+    case "calcite-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const CalciteTreeItem = CalciteTreeItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { CalciteTreeItem, defineCustomElement };

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

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