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

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

@@ -2,9 +2,9 @@
  * 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, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { T as TEXT, C as CSS, I as ICONS, H as HEADING_LEVEL } from './resources4.js';
-import { a as getElementDir } from './dom.js';
+import { c as getElementStyleDir } from './dom.js';
 import { C as CalciteHeading } from './CalciteHeading.js';
 import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$4 } from './calcite-action2.js';
@@ -17,7 +17,7 @@ let CalciteTipManager$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -143,7 +143,7 @@ let CalciteTipManager$1 = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   renderPagination() {
-    const dir = getElementDir(this.el);
+    const dir = getElementStyleDir(this.el);
     const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
     const nextLabel = intlNext || TEXT.next;
     const previousLabel = intlPrevious || TEXT.previous;
@@ -186,6 +186,9 @@ CalciteTipManager$1 = /*@__PURE__*/ proxyCustomElement(CalciteTipManager$1, [1,
     "previousTip": [64]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tip-manager", "calcite-action", "calcite-icon", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tip-manager":

package/dist/components/calcite-tip.js

@@ -2,7 +2,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 { attachShadow, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { H as HEADING_LEVEL$1 } from './resources4.js';
 import { b as getSlotted } from './dom.js';
 import { C as CalciteHeading, c as constrainHeadingLevel } from './CalciteHeading.js';
@@ -36,7 +36,7 @@ let CalciteTip$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
     // --------------------------------------------------------------------------
     //
@@ -108,6 +108,9 @@ CalciteTip$1 = /*@__PURE__*/ proxyCustomElement(CalciteTip$1, [1, "calcite-tip",
     "intlClose": [1, "intl-close"]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tip", "calcite-action", "calcite-icon", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tip":

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

@@ -2,7 +2,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 { attachShadow, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { T as TOOLTIP_REFERENCE, a as TOOLTIP_DELAY_MS } from './resources2.js';
 import { q as queryElementRoots } from './dom.js';
 import { g as getKey } from './key.js';
@@ -13,7 +13,7 @@ let CalciteTooltipManager = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
@@ -154,6 +154,9 @@ CalciteTooltipManager = /*@__PURE__*/ proxyCustomElement(CalciteTooltipManager,
     "selector": [1]
   }, [[4, "keyup", "keyUpHandler"], [3, "mouseover", "mouseEnterShow"], [3, "mouseout", "mouseLeaveHide"], [2, "click", "clickHandler"], [2, "focus", "focusShow"], [2, "blur", "blurHide"]]]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tooltip-manager":

package/dist/components/calcite-tooltip.js

@@ -2,7 +2,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 { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, 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';
@@ -14,7 +14,7 @@ let CalciteTooltip$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     /**
      * Offset the position of the popover away from the reference element.
      * @default 6
@@ -120,7 +120,7 @@ let CalciteTooltip$1 = class extends HTMLElement {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -207,6 +207,9 @@ CalciteTooltip$1 = /*@__PURE__*/ proxyCustomElement(CalciteTooltip$1, [1, "calci
     "reposition": [64]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tooltip":

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

@@ -2,9 +2,9 @@
  * 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 { HTMLElement, 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 { b as getSlotted, a as getElementDir, C as CSS_UTILITY, h 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';
@@ -27,13 +27,13 @@ const ICONS = {
   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)}";
+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{display:block;cursor:pointer;outline:2px solid transparent;outline-offset:2px;max-width:100%;color:var(--calcite-ui-text-3)}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-container{--calcite-tree-padding-y:0.25rem}:host([scale=s]) .node-container .checkbox,:host([scale=s]) .node-container .chevron,:host([scale=s]) .node-container .checkmark,:host([scale=s]) .node-container .bullet-point{margin-inline:0.25rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-container{--calcite-tree-padding-y:0.5rem}:host([scale=m]) .node-container .checkbox,:host([scale=m]) .node-container .chevron,:host([scale=m]) .node-container .checkmark,:host([scale=m]) .node-container .bullet-point{margin-inline:0.5rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-container{--calcite-tree-padding-y:0.75rem}:host([scale=l]) .node-container .checkbox,:host([scale=l]) .node-container .chevron,:host([scale=l]) .node-container .checkmark,:host([scale=l]) .node-container .bullet-point{margin-inline:0.75rem}:host([lines]) .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-ui-border-2);z-index:-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-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}: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-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-ui-border-1)}.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{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}: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])):host([scale=s])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}:host(:not([has-children])):host([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-ui-text-1)}:host([has-children][selected])>.node-container[data-selection-mode=children],:host([has-children][selected])>.node-container[data-selection-mode=multi-children]{color:var(--calcite-ui-brand)}.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;color:var(--calcite-ui-text-3);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.calcite--rtl .chevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([expanded])>.node-container>.chevron{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}";
 
 let CalciteTreeItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTreeItemSelect = createEvent(this, "calciteTreeItemSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -66,10 +66,17 @@ let CalciteTreeItem$1 = class extends HTMLElement {
     //  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.el.parentElement.closest("calcite-tree-item");
+        let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
           parent = parent.parentElement.closest("calcite-tree-item");
@@ -80,11 +87,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
     };
   }
   expandedHandler(newValue) {
-    const items = getSlotted(this.el, "children", {
-      all: true,
-      selector: "calcite-tree-item"
-    });
-    items.forEach((item) => (item.parentExpanded = newValue));
+    this.updateParentIsExpanded(this.el, newValue);
   }
   //--------------------------------------------------------------------------
   //
@@ -92,7 +95,11 @@ let CalciteTreeItem$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.expandedHandler(this.expanded);
+    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");
@@ -204,7 +211,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
           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.el.parentElement.closest("calcite-tree-item");
+        const parentItem = this.parentTreeItem;
         if (parentItem && (!this.hasChildren || this.expanded === false)) {
           parentItem.focus();
           e.preventDefault();
@@ -276,6 +283,9 @@ CalciteTreeItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteTreeItem$1, [1, "cal
     "selectionMode": [1025, "selection-mode"]
   }, [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tree-item", "calcite-checkbox", "calcite-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tree-item":

package/dist/components/calcite-tree.js

@@ -2,7 +2,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 { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { f as focusElement, n as nodeListToArray } from './dom.js';
 import { T as TreeSelectionMode } from './interfaces2.js';
 
@@ -12,7 +12,7 @@ let CalciteTree$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -199,6 +199,9 @@ CalciteTree$1 = /*@__PURE__*/ proxyCustomElement(CalciteTree$1, [1, "calcite-tre
     "selectionMode": [1537, "selection-mode"]
   }, [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteTreeItemSelect", "onClick"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-tree"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-tree":

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

@@ -2,7 +2,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 { attachShadow, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { I as ICON_TYPES } from './resources3.js';
 import { g as guid } from './guid.js';
 import { S as SLOTS$1, a as CSS, d as defineCustomElement$2 } from './calcite-pick-list-item2.js';
@@ -25,7 +25,7 @@ let CalciteValueListItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
     /**
      * When true, the item cannot be clicked and is visually muted
@@ -143,6 +143,9 @@ CalciteValueListItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteValueListItem$1
     "setFocus": [64]
   }, [[0, "calciteListItemChange", "calciteListItemChangeHandler"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-value-list-item", "calcite-action", "calcite-icon", "calcite-loader", "calcite-pick-list-item"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-value-list-item":

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

@@ -2,7 +2,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 { attachShadow, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { S as Sortable } from './sortable.esm.js';
 import { m as mutationObserverCallback, d as deselectSiblingItems, s as selectSiblings, h as handleFilter, g as getItemData, k as keyDownHandler, i as initialize, a as initializeObserver, c as cleanUpObserver, r as removeItem, b as calciteListItemChangeHandler, e as calciteListItemValueChangeHandler, j as setUpItems, l as setFocus, L as List } from './shared-list-render.js';
 import { g as getRoundRobinIndex } from './array.js';
@@ -29,7 +29,7 @@ let CalciteValueList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListChange = createEvent(this, "calciteListChange", 7);
     this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
@@ -224,6 +224,9 @@ CalciteValueList$1 = /*@__PURE__*/ proxyCustomElement(CalciteValueList$1, [1, "c
     "setFocus": [64]
   }, [[0, "calciteListItemRemove", "calciteListItemRemoveHandler"], [0, "calciteListItemChange", "calciteListItemChangeHandler"], [0, "calciteListItemPropsChange", "calciteListItemPropsChangeHandler"], [0, "calciteListItemValueChange", "calciteListItemValueChangeHandler"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-value-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-value-list":

package/dist/components/dom.js

@@ -36,6 +36,12 @@ function nodeListToArray(nodeList) {
 function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;
@@ -150,4 +156,4 @@ function intersects(rect1, rect2) {
     rect2.bottom < rect1.top);
 }
 
-export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getThemeName as c, closestElementCrossShadowBoundary as d, filterDirectChildren as e, focusElement as f, getElementProp as g, ensureId as h, isCalciteFocusable as i, queryElementsRoots as j, intersects as k, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s };
+export { CSS_UTILITY as C, TEXT as T, getElementDir as a, getSlotted as b, getElementStyleDir as c, getThemeName as d, closestElementCrossShadowBoundary as e, focusElement as f, getElementProp as g, filterDirectChildren as h, ensureId as i, isCalciteFocusable as j, queryElementsRoots as k, intersects as l, nodeListToArray as n, queryElementRoots as q, setRequestedIcon as s };

package/dist/components/form.js

@@ -2,19 +2,173 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-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;
-`;
+import { e as closestElementCrossShadowBoundary } from './dom.js';
+import { h } from '@stencil/core/internal/client';
 
-export { hiddenInputStyle as h };
+/**
+ * Exported for testing purposes.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+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.
+ */
+const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return h("slot", { name: hiddenFormInputSlotName });
+};
+
+export { HiddenFormInputSlot as H, afterConnectDefaultValueSet as a, connectForm as c, disconnectForm as d };

package/dist/components/label.js

@@ -2,16 +2,45 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { q as queryElementRoots, d as closestElementCrossShadowBoundary } from './dom.js';
+import { q as queryElementRoots, e as closestElementCrossShadowBoundary } from './dom.js';
 
-const labelTagName = "calcite-label";
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
 const labelClickEvent = "calciteInternalLabelClick";
+const labelTagName = "calcite-label";
 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.
  */

package/dist/components/math.js

@@ -3,5 +3,16 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+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));
+};
 
-export { clamp as c };
+export { clamp as c, decimalPlaces as d };