@esri/calcite-components 1.0.0-next.442 → 1.0.0-next.445

package/dist/collection/components/tip-manager/tip-manager.css

@@ -164,10 +164,10 @@ h4.heading, h5.heading {
 
 .container {
   position: relative;
+  overflow: hidden;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  overflow: hidden;
   min-height: 150px;
 }
 .container:focus {
@@ -231,28 +231,20 @@ h4.heading, h5.heading {
 @keyframes tip-advance {
   0% {
     opacity: 0;
-  }
-  0% {
     transform: translate3d(50px, 0, 0) scale(0.99);
   }
   100% {
     opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }
 @keyframes tip-retreat {
   0% {
     opacity: 0;
-  }
-  0% {
     transform: translate3d(-50px, 0, 0) scale(0.99);
   }
   100% {
     opacity: 1;
-  }
-  100% {
     transform: translate3d(0, 0, 0) scale(1);
   }
 }

package/dist/collection/components/tip-manager/tip-manager.js

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
@@ -26,6 +26,7 @@ export class TipManager {
     this.hideTipManager = () => {
       this.closed = true;
       this.calciteTipManagerToggle.emit();
+      this.calciteTipManagerClose.emit();
     };
     this.previousClicked = () => {
       this.previousTip();
@@ -315,7 +316,10 @@ export class TipManager {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use calciteTipManagerClose instead."
+          }],
         "text": "Emitted when the `calcite-tip-manager` has been toggled open or closed."
       },
       "complexType": {
@@ -323,6 +327,21 @@ export class TipManager {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "calciteTipManagerClose",
+      "name": "calciteTipManagerClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the `calcite-tip-manager` has been closed."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "nextTip": {

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

@@ -0,0 +1,157 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-next.445
+ */
+import { TOOLTIP_DELAY_MS } from "./resources";
+export default class TooltipManager {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.registeredElements = new WeakMap();
+    this.hoverTimeouts = new WeakMap();
+    this.registeredElementCount = 0;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.queryTooltip = (composedPath) => {
+      const { registeredElements } = this;
+      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
+      return registeredElements.get(registeredElement);
+    };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
+        const { activeTooltipEl } = this;
+        if (activeTooltipEl) {
+          this.clearHoverTimeout(activeTooltipEl);
+          this.toggleTooltip(activeTooltipEl, false);
+        }
+      }
+    };
+    this.mouseEnterShow = (event) => {
+      this.hoverEvent(event, true);
+    };
+    this.mouseLeaveHide = (event) => {
+      this.hoverEvent(event, false);
+    };
+    this.clickHandler = (event) => {
+      this.clickedTooltip = this.queryTooltip(event.composedPath());
+    };
+    this.focusShow = (event) => {
+      this.focusEvent(event, true);
+    };
+    this.blurHide = (event) => {
+      this.focusEvent(event, false);
+    };
+    this.hoverToggle = (tooltip, value) => {
+      const { hoverTimeouts } = this;
+      hoverTimeouts.delete(tooltip);
+      if (value) {
+        this.closeExistingTooltip();
+      }
+      this.toggleTooltip(tooltip, value);
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  registerElement(referenceEl, tooltip) {
+    this.registeredElementCount++;
+    this.registeredElements.set(referenceEl, tooltip);
+    if (this.registeredElementCount === 1) {
+      this.addListeners();
+    }
+  }
+  unregisterElement(referenceEl) {
+    if (this.registeredElements.delete(referenceEl)) {
+      this.registeredElementCount--;
+    }
+    if (this.registeredElementCount === 0) {
+      this.removeListeners();
+    }
+  }
+  addListeners() {
+    document.addEventListener("keydown", this.keyDownHandler);
+    document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.addEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.addEventListener("focusin", this.focusShow), { capture: true };
+    document.addEventListener("focusout", this.blurHide, { capture: true });
+  }
+  removeListeners() {
+    document.removeEventListener("keydown", this.keyDownHandler);
+    document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
+    document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
+    document.removeEventListener("focusin", this.focusShow, { capture: true });
+    document.removeEventListener("focusout", this.blurHide, { capture: true });
+  }
+  clearHoverTimeout(tooltip) {
+    const { hoverTimeouts } = this;
+    if (hoverTimeouts.has(tooltip)) {
+      window.clearTimeout(hoverTimeouts.get(tooltip));
+      hoverTimeouts.delete(tooltip);
+    }
+  }
+  closeExistingTooltip() {
+    const { activeTooltipEl } = this;
+    if (activeTooltipEl) {
+      this.toggleTooltip(activeTooltipEl, false);
+    }
+  }
+  focusTooltip(tooltip, value) {
+    this.closeExistingTooltip();
+    if (value) {
+      this.clearHoverTimeout(tooltip);
+    }
+    this.toggleTooltip(tooltip, value);
+  }
+  toggleTooltip(tooltip, value) {
+    tooltip.open = value;
+    if (value) {
+      this.activeTooltipEl = tooltip;
+    }
+  }
+  hoverTooltip(tooltip, value) {
+    this.clearHoverTimeout(tooltip);
+    const { hoverTimeouts } = this;
+    const timeoutId = window.setTimeout(() => this.hoverToggle(tooltip, value), TOOLTIP_DELAY_MS || 0);
+    hoverTimeouts.set(tooltip, timeoutId);
+  }
+  activeTooltipHover(event) {
+    const { activeTooltipEl, hoverTimeouts } = this;
+    const { type } = event;
+    if (!activeTooltipEl) {
+      return;
+    }
+    if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
+      this.clearHoverTimeout(activeTooltipEl);
+    }
+    else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
+      this.hoverTooltip(activeTooltipEl, false);
+    }
+  }
+  hoverEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    this.activeTooltipHover(event);
+    if (!tooltip) {
+      return;
+    }
+    this.hoverTooltip(tooltip, value);
+  }
+  focusEvent(event, value) {
+    const tooltip = this.queryTooltip(event.composedPath());
+    if (!tooltip || tooltip === this.clickedTooltip) {
+      this.clickedTooltip = null;
+      return;
+    }
+    this.focusTooltip(tooltip, value);
+  }
+}

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

@@ -1,12 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 export const CSS = {
   container: "container",
   arrow: "arrow"
 };
 export const TOOLTIP_DELAY_MS = 500;
-export const TOOLTIP_REFERENCE = "data-calcite-tooltip-reference";
 export const ARIA_DESCRIBED_BY = "aria-describedby";

package/dist/collection/components/tooltip/tooltip.css

@@ -161,6 +161,7 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   padding-top: 0.75rem;
@@ -171,7 +172,6 @@
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
-  overflow: hidden;
   max-width: 20rem;
   max-height: 20rem;
 }

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

@@ -1,13 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
-import { CSS, TOOLTIP_REFERENCE, ARIA_DESCRIBED_BY } from "./resources";
+import { CSS, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { queryElementRoots } from "../../utils/dom";
+import TooltipManager from "./TooltipManager";
+const manager = new TooltipManager();
 /**
  * @slot - A slot for adding text.
  */
@@ -60,22 +62,16 @@ export class Tooltip {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(TOOLTIP_REFERENCE, id);
       effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      manager.registerElement(effectiveReferenceElement, this.el);
     };
     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;
+      manager.unregisterElement(effectiveReferenceElement);
     };
   }
   offsetDistanceOffsetHandler() {

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

@@ -1,17 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
-import { Component, h, Listen, Prop, Element } from "@stencil/core";
-import { TOOLTIP_REFERENCE, TOOLTIP_DELAY_MS } from "../tooltip/resources";
-import { queryElementRoots } from "../../utils/dom";
+import { Component, h, Prop } from "@stencil/core";
 /**
  * @slot - A slot for adding elements that reference a 'calcite-tooltip' by the 'selector' property.
+ * @deprecated No longer required for tooltip usage.
  */
 export class TooltipManager {
   constructor() {
-    this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -21,93 +19,7 @@ export class TooltipManager {
      * CSS Selector to match reference elements for tooltips. Reference elements will be identified by this selector in order to open their associated tooltip.
      * @default `[data-calcite-tooltip-reference]`
      */
-    this.selector = `[${TOOLTIP_REFERENCE}]`;
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.queryTooltip = (composedPath) => {
-      const { el } = this;
-      if (!composedPath.includes(el)) {
-        return null;
-      }
-      const referenceElement = composedPath.find((pathEl) => { var _a; return (_a = pathEl === null || pathEl === void 0 ? void 0 : pathEl.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(pathEl, TOOLTIP_REFERENCE); });
-      if (!referenceElement) {
-        return null;
-      }
-      const id = referenceElement.getAttribute(TOOLTIP_REFERENCE);
-      return queryElementRoots(el, { id });
-    };
-    this.clearHoverTimeout = (tooltip) => {
-      const { hoverTimeouts } = this;
-      if (hoverTimeouts.has(tooltip)) {
-        window.clearTimeout(hoverTimeouts.get(tooltip));
-        hoverTimeouts.delete(tooltip);
-      }
-    };
-    this.closeExistingTooltip = () => {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.toggleTooltip(tooltipEl, false);
-      }
-    };
-    this.focusTooltip = ({ tooltip, value }) => {
-      this.closeExistingTooltip();
-      if (value) {
-        this.clearHoverTimeout(tooltip);
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.toggleTooltip = (tooltip, value) => {
-      tooltip.open = value;
-      if (value) {
-        this.tooltipEl = tooltip;
-      }
-    };
-    this.hoverToggle = ({ tooltip, value }) => {
-      const { hoverTimeouts } = this;
-      hoverTimeouts.delete(tooltip);
-      if (value) {
-        this.closeExistingTooltip();
-      }
-      this.toggleTooltip(tooltip, value);
-    };
-    this.hoverTooltip = ({ tooltip, value }) => {
-      this.clearHoverTimeout(tooltip);
-      const { hoverTimeouts } = this;
-      const timeoutId = window.setTimeout(() => this.hoverToggle({ tooltip, value }), TOOLTIP_DELAY_MS || 0);
-      hoverTimeouts.set(tooltip, timeoutId);
-    };
-    this.activeTooltipHover = (event) => {
-      const { tooltipEl, hoverTimeouts } = this;
-      const { type } = event;
-      if (!tooltipEl) {
-        return;
-      }
-      if (type === "mouseover" && event.composedPath().includes(tooltipEl)) {
-        this.clearHoverTimeout(tooltipEl);
-      }
-      else if (type === "mouseout" && !hoverTimeouts.has(tooltipEl)) {
-        this.hoverTooltip({ tooltip: tooltipEl, value: false });
-      }
-    };
-    this.hoverEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      this.activeTooltipHover(event);
-      if (!tooltip) {
-        return;
-      }
-      this.hoverTooltip({ tooltip, value });
-    };
-    this.focusEvent = (event, value) => {
-      const tooltip = this.queryTooltip(event.composedPath());
-      if (!tooltip || tooltip === this.clickedTooltip) {
-        this.clickedTooltip = null;
-        return;
-      }
-      this.focusTooltip({ tooltip, value });
-    };
+    this.selector = "[data-calcite-tooltip-reference]";
   }
   // --------------------------------------------------------------------------
   //
@@ -117,35 +29,6 @@ export class TooltipManager {
   render() {
     return h("slot", null);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyUpHandler(event) {
-    if (event.key === "Escape") {
-      const { tooltipEl } = this;
-      if (tooltipEl) {
-        this.clearHoverTimeout(tooltipEl);
-        this.toggleTooltip(tooltipEl, false);
-      }
-    }
-  }
-  mouseEnterShow(event) {
-    this.hoverEvent(event, true);
-  }
-  mouseLeaveHide(event) {
-    this.hoverEvent(event, false);
-  }
-  clickHandler(event) {
-    this.clickedTooltip = this.queryTooltip(event.composedPath());
-  }
-  focusShow(event) {
-    this.focusEvent(event, true);
-  }
-  blurHide(event) {
-    this.focusEvent(event, false);
-  }
   static get is() { return "calcite-tooltip-manager"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -174,45 +57,7 @@ export class TooltipManager {
       },
       "attribute": "selector",
       "reflect": false,
-      "defaultValue": "`[${TOOLTIP_REFERENCE}]`"
+      "defaultValue": "\"[data-calcite-tooltip-reference]\""
     }
   }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "keyup",
-      "method": "keyUpHandler",
-      "target": "document",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseover",
-      "method": "mouseEnterShow",
-      "target": undefined,
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "mouseout",
-      "method": "mouseLeaveHide",
-      "target": undefined,
-      "capture": true,
-      "passive": true
-    }, {
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "focus",
-      "method": "focusShow",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "blur",
-      "method": "blurHide",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }]; }
 }

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 export var TreeSelectionMode;
 (function (TreeSelectionMode) {

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

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

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

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

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

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

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { Component, Element, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 export const CSS = {
   container: "container",

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 export const ICONS = {
   drag: "drag"

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

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";

package/dist/collection/utils/array.js

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 export function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.js

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";

package/dist/collection/utils/date.js

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

package/dist/collection/utils/dom.js

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

package/dist/collection/utils/filter.js

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

package/dist/collection/utils/form.js

@@ -1,7 +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.
- * v1.0.0-next.442
+ * v1.0.0-next.445
  */
 import { closestElementCrossShadowBoundary } from "./dom";
 import { h } from "@stencil/core";