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

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

@@ -173,8 +173,8 @@ export class CalciteValueListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When false, the item cannot be deselected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When false, the item cannot be deselected by user interaction."
           }],
         "text": ""
       },
@@ -212,8 +212,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "- stores the activated state of the drag handle.",
-            "name": "internal"
+            "name": "internal",
+            "text": "- stores the activated state of the drag handle."
           }],
         "text": ""
       },
@@ -238,8 +238,8 @@ export class CalciteValueListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },

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

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { h } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, getElementStyleDir } from "../../utils/dom";
 import { queryActions } from "../calcite-action-bar/utils";
 import { SLOTS as ACTION_GROUP_SLOTS } from "../calcite-action-group/resources";
 const ICONS = {
@@ -30,7 +30,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   return referenceElement;
 };
 export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
@@ -39,6 +39,6 @@ export const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: getElementDir(el) === "rtl" ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };

package/dist/collection/utils/dom.js

@@ -23,6 +23,12 @@ export function nodeListToArray(nodeList) {
 export function getThemeName(el) {
   return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
 }
+export function getElementStyleDir(el) {
+  return window.getComputedStyle(el).direction || "ltr";
+}
+/**
+ * @deprecated use getElementStyleDir instead.
+ */
 export function getElementDir(el) {
   const prop = "dir";
   const selector = `[${prop}]`;

package/dist/collection/utils/form.js

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

package/dist/collection/utils/label.js

@@ -3,14 +3,43 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { closestElementCrossShadowBoundary, queryElementRoots } from "./dom";
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
+export const labelClickEvent = "calciteInternalLabelClick";
 const labelTagName = "calcite-label";
-const labelClickEvent = "calciteInternalLabelClick";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
-  const id = componentEl.id;
-  return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
-    closestElementCrossShadowBoundary(componentEl, labelTagName));
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel ||
+    // labelable components within other custom elements are not considered labelable
+    hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
 };
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = (event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  };
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements
+    .filter((el) => el !== componentEl && el !== label)
+    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+  return ancestorCustomElements.length > 0;
+}
 /**
  * Helper to set up label interactions on connectedCallback.
  */

package/dist/collection/utils/math.js

@@ -3,3 +3,14 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 export const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+export const decimalPlaces = (value) => {
+  const match = ("" + value).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+  if (!match) {
+    return 0;
+  }
+  return Math.max(0, 
+  // Number of digits right of decimal point.
+  (match[1] ? match[1].length : 0) -
+    // Adjust for scientific notation.
+    (match[2] ? +match[2] : 0));
+};

package/dist/collection/utils/popper.js

@@ -31,9 +31,9 @@ export function createPopper({ referenceEl, el, placement, overlayPositioning =
     modifiers
   });
 }
-export function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
+export async function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
   const placement = getPlacement(el, PopperPlacement);
-  popper.setOptions({
+  await popper.setOptions({
     modifiers,
     placement
   });

package/dist/components/CalciteExpandToggle.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { forceUpdate, h } from '@stencil/core/internal/client';
-import { a as getElementDir } from './dom.js';
+import { c as getElementStyleDir, a as getElementDir } from './dom.js';
 import { S as SLOTS } from './calcite-action-menu2.js';
 import { S as SLOTS$1 } from './calcite-action-group2.js';
 
@@ -71,7 +71,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
   return referenceElement;
 };
 const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
-  const rtl = getElementDir(el) === "rtl";
+  const rtl = getElementStyleDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
   const icons = [ICONS.chevronsLeft, ICONS.chevronsRight];
   if (rtl) {
@@ -80,7 +80,7 @@ const CalciteExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, p
   const end = getCalcitePosition(position, el) === "end";
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
-  const actionNode = (h("calcite-action", { dir: rtl ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
+  const actionNode = (h("calcite-action", { dir: getElementDir(el) === "rtl" ? "rtl" : "ltr", icon: expanded ? expandIcon : collapseIcon, onClick: toggle, ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }), scale: scale, text: expandText, textEnabled: expanded }));
   return tooltip ? h("calcite-tooltip-manager", null, actionNode) : actionNode;
 };
 

package/dist/components/calcite-accordion-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 { g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { g as getKey } from './key.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
@@ -13,7 +13,7 @@ let CalciteAccordionItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionItemKeyEvent = createEvent(this, "calciteAccordionItemKeyEvent", 7);
     this.calciteAccordionItemSelect = createEvent(this, "calciteAccordionItemSelect", 7);
     this.calciteAccordionItemClose = createEvent(this, "calciteAccordionItemClose", 7);
@@ -91,6 +91,9 @@ let CalciteAccordionItem$1 = class extends HTMLElement {
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail
       .requestedAccordionItem;
+    if (this.el.parentNode !== this.requestedAccordionItem.parentNode) {
+      return;
+    }
     this.determineActiveItem();
   }
   //--------------------------------------------------------------------------
@@ -131,6 +134,9 @@ CalciteAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(CalciteAccordionItem$1
     "icon": [513]
   }, [[0, "keydown", "keyDownHandler"], [16, "calciteAccordionChange", "updateActiveItemOnChange"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-accordion-item", "calcite-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-accordion-item":

package/dist/components/calcite-accordion.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 { g as getKey } from './key.js';
 
 const calciteAccordionCss = "@-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([scale=s]){--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host{display:block;position:relative;max-width:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);border-bottom-width:0;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}:host([appearance=minimal]){--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0;border-color:transparent}:host([appearance=transparent]){border-color:transparent;--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}";
@@ -11,7 +11,7 @@ let CalciteAccordion$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionChange = createEvent(this, "calciteAccordionChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -150,6 +150,9 @@ CalciteAccordion$1 = /*@__PURE__*/ proxyCustomElement(CalciteAccordion$1, [1, "c
     "selectionMode": [513, "selection-mode"]
   }, [[0, "calciteAccordionItemKeyEvent", "calciteAccordionItemKeyEvent"], [0, "calciteAccordionItemRegister", "registerCalciteAccordionItem"], [0, "calciteAccordionItemSelect", "updateActiveItemOnChange"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-accordion"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-accordion":

package/dist/components/calcite-action-bar.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 { t as toggleChildActionText, C as CalciteExpandToggle, o as overflowActionsDebounceInMs, q as queryActions, a as overflowActions, g as getOverflowCount } from './CalciteExpandToggle.js';
 import { f as focusElement, b as getSlotted } from './dom.js';
 import { c as createObserver } from './observers.js';
@@ -33,7 +33,7 @@ let CalciteActionBar$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -214,6 +214,9 @@ CalciteActionBar$1 = /*@__PURE__*/ proxyCustomElement(CalciteActionBar$1, [1, "c
     "setFocus": [64]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-action-bar", "calcite-action", "calcite-action-group", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-action-bar":

package/dist/components/calcite-action-group2.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, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { S as SLOTS$1, d as defineCustomElement$5 } from './calcite-action-menu2.js';
 import { d as defineCustomElement$6 } from './calcite-action2.js';
@@ -28,7 +28,7 @@ let CalciteActionGroup = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -91,6 +91,9 @@ CalciteActionGroup = /*@__PURE__*/ proxyCustomElement(CalciteActionGroup, [1, "c
     "scale": [513]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-action-group", "calcite-action", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-action-group":

package/dist/components/calcite-action-menu2.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 { b as getSlotted, f as focusElement } from './dom.js';
 import { g as getRoundRobinIndex } from './array.js';
 import { g as guid } from './guid.js';
@@ -33,7 +33,7 @@ let CalciteActionMenu = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 7);
     // --------------------------------------------------------------------------
     //
@@ -315,6 +315,9 @@ CalciteActionMenu = /*@__PURE__*/ proxyCustomElement(CalciteActionMenu, [1, "cal
     "setFocus": [64]
   }, [[8, "click", "closeCalciteActionMenuOnClick"]]]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-action-menu", "calcite-action", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-action-menu":

package/dist/components/calcite-action-pad.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 { t as toggleChildActionText, C as CalciteExpandToggle } from './CalciteExpandToggle.js';
 import { f as focusElement, b as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { d as defineCustomElement$8 } from './calcite-action2.js';
@@ -31,7 +31,7 @@ let CalciteActionPad$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -146,6 +146,9 @@ CalciteActionPad$1 = /*@__PURE__*/ proxyCustomElement(CalciteActionPad$1, [1, "c
     "setFocus": [64]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-action-pad", "calcite-action", "calcite-action-group", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-action-pad":

package/dist/components/calcite-action2.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, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 import { d as defineCustomElement$1 } from './calcite-loader2.js';
@@ -27,7 +27,7 @@ let CalciteAction = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionClick = createEvent(this, "calciteActionClick", 7);
     // --------------------------------------------------------------------------
     //
@@ -159,6 +159,9 @@ CalciteAction = /*@__PURE__*/ proxyCustomElement(CalciteAction, [1, "calcite-act
     "setFocus": [64]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-action", "calcite-icon", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-action":