@esri/calcite-components 1.0.0-next.302 → 1.0.0-next.306

package/dist/collection/components/calcite-tree-item/calcite-tree-item.css

@@ -85,51 +85,75 @@
 }
 
 :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);
+  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 {
-  margin-inline-start: 1.5rem;
+: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 {
-  margin-inline-start: 2rem;
+: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 {
-  margin-inline-start: 2.5rem;
+: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]) {
-  --calcite-tree-line: var(--calcite-ui-border-2);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([lines]) .children-container:after {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  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 {
@@ -182,28 +206,12 @@
   overflow: hidden;
   height: 0;
   margin-inline-start: 1.25rem;
-  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
   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;
   transform-origin: top;
 }
 
-.children-container:after {
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
-  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 {
   transform: scaleY(1);
   opacity: 1;
@@ -217,16 +225,6 @@
   padding: var(--calcite-tree-padding-y) 0;
 }
 
-.node-container .checkmark,
-.node-container .bullet-point {
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
-.node-container .checkbox {
-  margin-inline-end: var(--calcite-tree-padding-y);
-}
-
 .node-container .checkmark,
 .node-container .bullet-point {
   transition-property: all;
@@ -234,13 +232,7 @@
   transition-timing-function: ease-in-out;
   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);
+  color: var(--calcite-ui-border-1);
 }
 
 .node-container:hover .checkmark,
@@ -254,8 +246,8 @@
 
 :host([selected]) > .node-container,
 :host([selected]) > .node-container:hover {
-  color: var(--calcite-tree-text-active);
   font-weight: var(--calcite-font-weight-medium);
+  color: var(--calcite-ui-text-1);
 }
 
 :host([selected]) > .node-container .bullet-point,
@@ -266,15 +258,15 @@
   color: var(--calcite-ui-brand);
 }
 
-:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=s]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.25rem;
 }
 
-:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=m]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.5rem;
 }
 
-:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+:host(:not([has-children])):host([scale=l]) > .node-container[data-selection-mode=ancestors] .checkbox {
   padding-inline-start: 1.75rem;
 }
 
@@ -289,11 +281,11 @@
 
 :host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
   font-weight: var(--calcite-font-weight-medium);
-  color: var(--calcite-tree-text-active);
+  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-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
 .chevron {
@@ -303,11 +295,9 @@
   transition-delay: 0s;
   position: relative;
   align-self: center;
+  color: var(--calcite-ui-text-3);
   flex: 0 0 auto;
-  margin-inline-start: var(--calcite-tree-padding-y);
-  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  color: var(--calcite-tree-text);
 }
 
 .calcite--rtl .chevron {
@@ -318,19 +308,7 @@
   transform: rotate(90deg);
 }
 
-:host([scale=s]) > .node-container .checkbox {
-  margin-inline-end: 0.5rem;
-}
-
-:host([scale=m]) > .node-container .checkbox {
-  margin-inline-end: 0.75rem;
-}
-
-:host([scale=l]) > .node-container .checkbox {
-  margin-inline-end: 1rem;
-}
-
 :host([selected]) .checkmark,
 :host([selected]) .bullet-point {
-  color: var(--calcite-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }

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 { 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';
@@ -134,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 { 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}";
@@ -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 { 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';
@@ -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 { 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';
@@ -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 { 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';
@@ -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 { 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';
@@ -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 { 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';
@@ -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":

package/dist/components/calcite-alert.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 { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { s as setRequestedIcon, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { S as StatusIcons } from './interfaces.js';
 import { d as defineCustomElement$3 } from './calcite-chip2.js';
@@ -205,6 +205,9 @@ CalciteAlert$1 = /*@__PURE__*/ proxyCustomElement(CalciteAlert$1, [1, "calcite-a
     "setFocus": [64]
   }, [[8, "calciteAlertSync", "alertSync"], [8, "calciteAlertRegister", "alertRegister"]]]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-alert", "calcite-chip", "calcite-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-alert":

package/dist/components/calcite-avatar.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 { h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, c as getThemeName } from './dom.js';
 import { h as hexToRGB, i as isValidHex } from './utils.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
@@ -149,6 +149,9 @@ CalciteAvatar$1 = /*@__PURE__*/ proxyCustomElement(CalciteAvatar$1, [1, "calcite
     "error": [32]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-avatar", "calcite-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-avatar":

package/dist/components/calcite-block-section.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 { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
 import { d as defineCustomElement$2 } from './calcite-switch2.js';
@@ -112,6 +112,9 @@ CalciteBlockSection$1 = /*@__PURE__*/ proxyCustomElement(CalciteBlockSection$1,
     "toggleDisplay": [513, "toggle-display"]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-block-section", "calcite-icon", "calcite-switch"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-block-section":

package/dist/components/calcite-block.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 { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 import { C as CalciteHeading } from './CalciteHeading.js';
 import { d as defineCustomElement$9 } from './calcite-action2.js';
@@ -157,6 +157,9 @@ CalciteBlock$1 = /*@__PURE__*/ proxyCustomElement(CalciteBlock$1, [1, "calcite-b
     "summary": [1]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-block", "calcite-action", "calcite-action-menu", "calcite-handle", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-scrim", "calcite-tooltip-manager"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-block":

package/dist/components/calcite-button2.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 { Build, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement as HTMLElement$1, Build, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { d as closestElementCrossShadowBoundary, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
 import { c as createObserver } from './observers.js';
@@ -53,7 +53,7 @@ const TEXT = {
 
 const calciteButtonCss = "@-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:inline-block;width:auto;vertical-align:middle}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{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 button:focus,:host a:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host button,:host a{--calcite-button-content-margin:0.5rem;--calcite-button-padding-x:7px;--calcite-button-padding-y:3px;padding:var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y) var(--calcite-button-padding-x);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;width:100%;height:100%;border-radius:0;border-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit;font-weight:var(--calcite-font-weight-normal);-webkit-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out}:host button:hover,:host a:hover{text-decoration:none}.content{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--calcite-button-content-margin);margin-right:var(--calcite-button-content-margin)}:host([scale=m]) button,:host([scale=m]) a{--calcite-button-content-margin:0.75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-button-content-margin:1rem}:host(:not([icon-start])) .content{margin-left:unset}:host(:not([icon-end])) .content{margin-right:unset}:host([icon-start]:not([icon-end])) .calcite--rtl .content{margin-left:unset;margin-right:var(--calcite-button-content-margin)}:host([icon-end]:not([icon-start])) .calcite--rtl .content{margin-right:unset;margin-left:var(--calcite-button-content-margin)}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{-ms-flex-pack:center;justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{-ms-flex-pack:start;justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{-ms-flex-pack:justify;justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-right:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start{margin-right:unset;margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end{margin-left:unset;margin-right:auto}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-left:var(--calcite-button-content-margin)}:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start+.icon--end{margin-left:unset;margin-right:var(--calcite-button-content-margin)}.icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([loading]),:host([disabled]){pointer-events:none}:host([loading]) button,:host([loading]) a,:host([disabled]) button,:host([disabled]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}@-webkit-keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}@keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}.calcite-button--loader{display:-ms-flexbox;display:flex}.calcite-button--loader calcite-loader{margin:0;-webkit-transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out}.calcite-button--loader calcite-loader.loading-in{-webkit-animation-name:loader-in;animation-name:loader-in;-webkit-animation-duration:310ms;animation-duration:310ms}.calcite-button--loader calcite-loader.loading-out{-webkit-animation-name:loader-out;animation-name:loader-out;-webkit-animation-duration:310ms;animation-duration:310ms}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{-webkit-margin-end:var(--calcite-button-content-margin);margin-inline-end:var(--calcite-button-content-margin)}:host([loading]) button:not(.content--slotted) .icon--start,:host([loading]) button:not(.content--slotted) .icon--end,:host([loading]) a:not(.content--slotted) .icon--start,:host([loading]) a:not(.content--slotted) .icon--end{display:none}:host([appearance=solid]) button,:host([appearance=solid]) a{border-width:1px;border-style:solid;border-color:transparent}:host([appearance=solid][color=blue]) button,:host([appearance=solid][color=blue]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-brand)}:host([appearance=solid][color=blue]) button:hover,:host([appearance=solid][color=blue]) button:focus,:host([appearance=solid][color=blue]) a:hover,:host([appearance=solid][color=blue]) a:focus{background-color:var(--calcite-ui-brand-hover)}:host([appearance=solid][color=blue]) button:active,:host([appearance=solid][color=blue]) a:active{background-color:var(--calcite-ui-brand-press)}:host([appearance=solid][color=blue]) button calcite-loader,:host([appearance=solid][color=blue]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=red]) button,:host([appearance=solid][color=red]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-danger)}:host([appearance=solid][color=red]) button:hover,:host([appearance=solid][color=red]) button:focus,:host([appearance=solid][color=red]) a:hover,:host([appearance=solid][color=red]) a:focus{background-color:var(--calcite-ui-danger-hover)}:host([appearance=solid][color=red]) button:active,:host([appearance=solid][color=red]) a:active{background-color:var(--calcite-ui-danger-press)}:host([appearance=solid][color=red]) button calcite-loader,:host([appearance=solid][color=red]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=neutral]) button,:host([appearance=solid][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}:host([appearance=solid][color=neutral]) button:hover,:host([appearance=solid][color=neutral]) button:focus,:host([appearance=solid][color=neutral]) a:hover,:host([appearance=solid][color=neutral]) a:focus{background-color:var(--calcite-ui-foreground-2)}:host([appearance=solid][color=neutral]) button:active,:host([appearance=solid][color=neutral]) a:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=neutral]) button calcite-loader,:host([appearance=solid][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=solid][color=inverse]) button,:host([appearance=solid][color=inverse]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-inverse)}:host([appearance=solid][color=inverse]) button:hover,:host([appearance=solid][color=inverse]) button:focus,:host([appearance=solid][color=inverse]) a:hover,:host([appearance=solid][color=inverse]) a:focus{background-color:var(--calcite-ui-inverse-hover)}:host([appearance=solid][color=inverse]) button:active,:host([appearance=solid][color=inverse]) a:active{background-color:var(--calcite-ui-inverse-press)}:host([appearance=solid][color=inverse]) button calcite-loader,:host([appearance=solid][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=outline]) button,:host([appearance=outline]) a{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=blue]) button,:host([appearance=outline][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:hover,:host([appearance=outline][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=outline][color=blue]) button:focus,:host([appearance=outline][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:active,:host([appearance=outline][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=outline][color=blue]) button calcite-loader,:host([appearance=outline][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=outline][color=red]) button,:host([appearance=outline][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:hover,:host([appearance=outline][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=outline][color=red]) button:focus,:host([appearance=outline][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:active,:host([appearance=outline][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=outline][color=red]) button calcite-loader,:host([appearance=outline][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=outline][color=neutral]) button,:host([appearance=outline][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:hover,:host([appearance=outline][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:focus,:host([appearance=outline][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:active,:host([appearance=outline][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button calcite-loader,:host([appearance=outline][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button,:host([appearance=outline][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:hover,:host([appearance=outline][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=outline][color=inverse]) button:focus,:host([appearance=outline][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:active,:host([appearance=outline][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=outline][color=inverse]) button calcite-loader,:host([appearance=outline][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear]) button,:host([appearance=clear]) a{background-color:transparent;border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=blue]) button,:host([appearance=clear][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:hover,:host([appearance=clear][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=clear][color=blue]) button:focus,:host([appearance=clear][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:active,:host([appearance=clear][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=clear][color=blue]) button calcite-loader,:host([appearance=clear][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=clear][color=red]) button,:host([appearance=clear][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:hover,:host([appearance=clear][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=clear][color=red]) button:focus,:host([appearance=clear][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:active,:host([appearance=clear][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=clear][color=red]) button calcite-loader,:host([appearance=clear][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=clear][color=neutral]) button,:host([appearance=clear][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:hover,:host([appearance=clear][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:focus,:host([appearance=clear][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:active,:host([appearance=clear][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button calcite-loader,:host([appearance=clear][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button,:host([appearance=clear][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:hover,:host([appearance=clear][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=clear][color=inverse]) button:focus,:host([appearance=clear][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:active,:host([appearance=clear][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=clear][color=inverse]) button calcite-loader,:host([appearance=clear][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][split-child=primary]) button,:host([appearance=clear][split-child=primary]) button{border-right-width:0;border-left-width:1px}:host([appearance=outline][split-child=primary]) button.calcite--rtl,:host([appearance=clear][split-child=primary]) button.calcite--rtl{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button,:host([appearance=clear][split-child=secondary]) button{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button.calcite--rtl,:host([appearance=clear][split-child=secondary]) button.calcite--rtl{border-right-width:0;border-left-width:1px}:host([appearance=transparent]:not(.enable-editing-button)) button,:host([appearance=transparent]:not(.enable-editing-button)) a{background-color:transparent}:host([appearance=transparent]:not(.enable-editing-button)) button:hover,:host([appearance=transparent]:not(.enable-editing-button)) button:focus,:host([appearance=transparent]:not(.enable-editing-button)) a:hover,:host([appearance=transparent]:not(.enable-editing-button)) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]:not(.enable-editing-button)) button:active,:host([appearance=transparent]:not(.enable-editing-button)) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=blue]) button,:host([appearance=transparent][color=blue]) a{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:hover,:host([appearance=transparent][color=blue]) a:hover{color:var(--calcite-ui-brand-hover)}:host([appearance=transparent][color=blue]) button:focus,:host([appearance=transparent][color=blue]) a:focus{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:active,:host([appearance=transparent][color=blue]) a:active{color:var(--calcite-ui-brand-press)}:host([appearance=transparent][color=blue]) button calcite-loader,:host([appearance=transparent][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=red]) button,:host([appearance=transparent][color=red]) a{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:hover,:host([appearance=transparent][color=red]) a:hover{color:var(--calcite-ui-danger-hover)}:host([appearance=transparent][color=red]) button:focus,:host([appearance=transparent][color=red]) a:focus{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:active,:host([appearance=transparent][color=red]) a:active{color:var(--calcite-ui-danger-press)}:host([appearance=transparent][color=red]) button calcite-loader,:host([appearance=transparent][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].cancel-editing-button) button{color:var(--calcite-ui-text-3);border-top-width:1px;border-top-color:var(--calcite-ui-border-input);border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-input);border-bottom-style:solid;border-top-style:solid}:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted){--calcite-button-padding-y:0}:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].enable-editing-button) button{background-color:transparent}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][color=inverse]) button,:host([appearance=transparent][color=inverse]) a,:host([appearance=transparent][color=inverse]) calcite-loader{color:var(--calcite-ui-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.5rem;--calcite-button-padding-y:0.25rem}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-button-padding-x:11px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]:not([appearance=transparent])) button.content--slotted,:host([scale=m]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.75rem;--calcite-button-padding-y:0.5rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-button-padding-x:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]:not([appearance=transparent])) button.content--slotted,:host([scale=l]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:11px}:host([scale=l][appearance=transparent]) button.content--slotted,:host([scale=l][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:1rem;--calcite-button-padding-y:0.75rem}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:3px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:1.5rem;min-height:1.5rem}:host([scale=s][appearance=transparent]) button:not(.content--slotted),:host([scale=s][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.25rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:7px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2rem;min-height:2rem}:host([scale=m][appearance=transparent]) button:not(.content--slotted),:host([scale=m][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.5rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:9px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2.75rem;min-height:2.75rem}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:23px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:1.5rem}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2rem}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:43px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2.75rem}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{-webkit-margin-start:1rem;margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:2.75rem}";
 
-let CalciteButton = class extends HTMLElement {
+let CalciteButton = class extends HTMLElement$1 {
   constructor() {
     super();
     this.__registerHost();
@@ -219,6 +219,9 @@ CalciteButton = /*@__PURE__*/ proxyCustomElement(CalciteButton, [1, "calcite-but
     "setFocus": [64]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-button", "calcite-icon", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-button":

package/dist/components/calcite-card.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 { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { g as getKey } from './key.js';
 import { d as defineCustomElement$4 } from './calcite-checkbox2.js';
@@ -130,6 +130,9 @@ CalciteCard$1 = /*@__PURE__*/ proxyCustomElement(CalciteCard$1, [1, "calcite-car
     "intlDeselect": [1, "intl-deselect"]
   }]);
 function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-card", "calcite-checkbox", "calcite-label", "calcite-loader"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-card":

package/dist/components/calcite-checkbox2.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 { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
@@ -139,6 +139,9 @@ CalciteCheckbox = /*@__PURE__*/ proxyCustomElement(CalciteCheckbox, [1, "calcite
     "setFocus": [64]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-checkbox"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-checkbox":

package/dist/components/calcite-chip2.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 { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { g as guid } from './guid.js';
 import { d as defineCustomElement$1 } from './calcite-icon2.js';
@@ -102,6 +102,9 @@ CalciteChip = /*@__PURE__*/ proxyCustomElement(CalciteChip, [1, "calcite-chip",
     "setFocus": [64]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-chip", "calcite-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-chip":

package/dist/components/calcite-color-picker-hex-input2.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 { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { n as normalizeHex, i as isValidHex, a as isLonghandHex, r as rgbToHex, h as hexToRGB, b as hexChar } from './utils.js';
 import { c as color, d as defineCustomElement$4 } from './calcite-color-picker-swatch2.js';
 import { a as getElementDir, f as focusElement } from './dom.js';
@@ -315,6 +315,9 @@ CalciteColorPickerHexInput = /*@__PURE__*/ proxyCustomElement(CalciteColorPicker
     "setFocus": [64]
   }, [[2, "keydown", "onInputKeyDown"]]]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-color-picker-hex-input", "calcite-color-picker-swatch", "calcite-icon", "calcite-input", "calcite-progress"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-color-picker-hex-input":

package/dist/components/calcite-color-picker-swatch2.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 { h, proxyCustomElement } from '@stencil/core/internal/client';
+import { HTMLElement, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { c as getThemeName } from './dom.js';
 
 function createCommonjsModule(fn, basedir, module) {
@@ -2162,6 +2162,9 @@ CalciteColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(CalciteColorPickerSw
     "scale": [513]
   }]);
 function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
   const components = ["calcite-color-picker-swatch"];
   components.forEach(tagName => { switch (tagName) {
     case "calcite-color-picker-swatch":