@esri/calcite-components 1.0.0-next.293 → 1.0.0-next.294

package/dist/components/calcite-fab.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 { h, proxyCustomElement } from '@stencil/core/internal/client';
 import { f as focusElement, a as getElementDir } from './dom.js';
 import { d as defineCustomElement$4 } from './calcite-button2.js';
 import { d as defineCustomElement$3 } from './calcite-icon2.js';
@@ -21,7 +21,7 @@ let CalciteFab$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties

package/dist/components/calcite-filter2.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 { createEvent, h, Fragment, proxyCustomElement } from '@stencil/core/internal/client';
 import { f as focusElement, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { d as defineCustomElement$5 } from './calcite-icon2.js';
 import { d as defineCustomElement$4 } from './calcite-input2.js';
@@ -33,13 +33,12 @@ let CalciteFilter = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
     /**
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
     this.disabled = false;
-    this.empty = true;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -77,8 +76,7 @@ let CalciteFilter = class extends HTMLElement {
     }, filterDebounceInMs);
     this.inputHandler = (event) => {
       const target = event.target;
-      this.empty = target.value === "";
-      this.filter(target.value);
+      this.value = target.value;
     };
     this.keyDownHandler = ({ key }) => {
       if (key === "Escape") {
@@ -86,12 +84,14 @@ let CalciteFilter = class extends HTMLElement {
       }
     };
     this.clear = () => {
-      this.textInput.value = "";
-      this.empty = true;
+      this.value = "";
       this.calciteFilterChange.emit(this.data);
       this.setFocus();
     };
   }
+  valueHandler(value) {
+    this.filter(value);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -111,9 +111,12 @@ let CalciteFilter = class extends HTMLElement {
     const { disabled } = this;
     return (h(Fragment, null, disabled ? h("calcite-scrim", null) : null, h("div", { class: CSS.container }, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("calcite-input", { "aria-label": this.intlLabel || TEXT.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
-      }, type: "text", value: "" })), !this.empty ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear }, h("calcite-icon", { icon: ICONS.close }))) : null)));
+      }, type: "text", value: this.value })), this.value ? (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, onClick: this.clear }, h("calcite-icon", { icon: ICONS.close }))) : null)));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "value": ["valueHandler"]
+  }; }
   static get style() { return calciteFilterCss; }
 };
 CalciteFilter = /*@__PURE__*/ proxyCustomElement(CalciteFilter, [1, "calcite-filter", {
@@ -122,7 +125,7 @@ CalciteFilter = /*@__PURE__*/ proxyCustomElement(CalciteFilter, [1, "calcite-fil
     "intlClear": [1, "intl-clear"],
     "intlLabel": [1, "intl-label"],
     "placeholder": [1],
-    "empty": [32],
+    "value": [1025],
     "setFocus": [64]
   }]);
 function defineCustomElement() {

package/dist/components/calcite-flow.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 { h, proxyCustomElement } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';
 
 const CSS = {
@@ -17,7 +17,7 @@ let CalciteFlow$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.panelCount = 0;
     this.flowDirection = null;
     this.panels = [];

package/dist/components/calcite-graph2.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 { h, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
 
 /**
@@ -52,7 +52,7 @@ function translate({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
   const rangeY = max[1] - min[1];
   return (point) => {
-    const x = (point[0] / rangeX) * width;
+    const x = ((point[0] - min[0]) / rangeX) * width;
     const y = height - (point[1] / rangeY) * height;
     return [x, y];
   };
@@ -110,7 +110,7 @@ let CalciteGraph = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -138,17 +138,25 @@ let CalciteGraph = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { data, colorStops, width, height, highlightMax, highlightMin } = this;
+    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
     const id = this.graphId;
     // if we have no data, return empty svg
     if (!data || data.length === 0) {
       return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
     }
-    const { min, max } = range(data);
-    const t = translate({ min, max, width, height });
-    const [hMinX] = t([highlightMin, max[1]]);
-    const [hMaxX] = t([highlightMax, max[1]]);
-    const areaPath = area({ data, min, max, t });
+    const { min: rangeMin, max: rangeMax } = range(data);
+    let currentMin = rangeMin;
+    let currentMax = rangeMax;
+    if (min < rangeMin[0]) {
+      currentMin = [min, 0];
+    }
+    if (max > rangeMax[0]) {
+      currentMax = [max, rangeMax[1]];
+    }
+    const t = translate({ min: currentMin, max: currentMax, width, height });
+    const [hMinX] = t([highlightMin, currentMax[1]]);
+    const [hMaxX] = t([highlightMax, currentMax[1]]);
+    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
     return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
       h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
@@ -186,7 +194,9 @@ CalciteGraph = /*@__PURE__*/ proxyCustomElement(CalciteGraph, [1, "calcite-graph
     "width": [2],
     "height": [2],
     "highlightMin": [2, "highlight-min"],
-    "highlightMax": [2, "highlight-max"]
+    "highlightMax": [2, "highlight-max"],
+    "min": [2],
+    "max": [2]
   }]);
 function defineCustomElement() {
   const components = ["calcite-graph"];

package/dist/components/calcite-handle2.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 { createEvent, h, proxyCustomElement } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './calcite-icon2.js';
 
 const CSS = {
@@ -19,7 +19,7 @@ let CalciteHandle = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
     // --------------------------------------------------------------------------
     //

package/dist/components/calcite-icon2.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 { getAssetPath, attachShadow, h, Host, Build, proxyCustomElement } from '@stencil/core/internal/client';
+import { getAssetPath, h, Host, Build, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir } from './dom.js';
 import { c as createObserver } from './observers.js';
 
@@ -76,7 +76,7 @@ let CalciteIcon = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties

package/dist/components/calcite-input-date-picker.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, Build, proxyCustomElement } from '@stencil/core/internal/client';
+import { createEvent, h, Host, Build, proxyCustomElement } from '@stencil/core/internal/client';
 import { T as TEXT, g as getLocaleData, d as defineCustomElement$8 } from './calcite-date-picker2.js';
 import { a as getElementDir } from './dom.js';
 import { d as dateToISO, a as dateFromISO, b as dateFromRange, s as sameDate, f as parseDateString, i as inRange } from './date.js';
@@ -23,7 +23,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 7);
@@ -155,7 +155,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: DEFAULT_PLACEMENT,

package/dist/components/calcite-input-message.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 { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { s as setRequestedIcon, g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';
 import { d as defineCustomElement$2 } from './calcite-icon2.js';
 
@@ -19,7 +19,7 @@ let CalciteInputMessage$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties

package/dist/components/calcite-input-time-picker.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 { createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';
 import { g as getKey } from './key.js';
 import { f as formatTimeString, p as parseTimeString, g as getMeridiemHour, a as getMeridiem, d as defineCustomElement$2 } from './calcite-time-picker2.js';
@@ -20,7 +20,7 @@ let CalciteInputTimePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
     //--------------------------------------------------------------------------
     //

package/dist/components/calcite-input2.js

@@ -200,24 +200,21 @@ let CalciteInput = class extends HTMLElement {
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
-      if (this.type !== "number") {
+      if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
         return;
       }
-      const value = this.value;
       const inputMax = this.maxString ? parseFloat(this.maxString) : null;
       const inputMin = this.minString ? parseFloat(this.minString) : null;
-      const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-      const inputVal = value && value !== "" ? parseFloat(value) : 0;
-      let newValue = value;
-      if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-        newValue = (inputVal + inputStep).toString();
-      }
-      if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-        newValue = (inputVal - inputStep).toString();
-      }
-      this.setValue(newValue, nativeEvent, true);
+      const valueNudgeDelayInMs = 500;
+      this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      this.nudgeNumberValueIntervalId = setInterval(() => {
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      }, valueNudgeDelayInMs);
     };
-    this.numberButtonClickHandler = (event) => {
+    this.numberButtonMouseUpAndMouseOutHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
+    this.numberButtonMouseDownHandler = (event) => {
       // todo, when dropping ie11 support, refactor to use stepup/stepdown
       // prevent blur and re-focus of input on mousedown
       event.preventDefault();
@@ -263,6 +260,9 @@ let CalciteInput = class extends HTMLElement {
         }
       }
     };
+    this.inputKeyUpHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
   }
   disabledWatcher() {
     this.setDisabledAction();
@@ -381,6 +381,19 @@ let CalciteInput = class extends HTMLElement {
   onLabelClick() {
     this.setFocus();
   }
+  incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
+    const value = this.value;
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    let newValue = value;
+    if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
+      newValue = (inputVal + inputStep).toString();
+    }
+    if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
+      newValue = (inputVal - inputStep).toString();
+    }
+    this.setValue(newValue, nativeEvent, true);
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -404,17 +417,17 @@ let CalciteInput = class extends HTMLElement {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
     const childEl = [
-      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
+      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
       this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
     ];
     return (h(Host, { onClick: this.inputFocusHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir }, this.type === "number" && this.numberButtonType === "horizontal"

package/dist/components/calcite-label.js

@@ -2,81 +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 { a as getElementDir, C as CSS_UTILITY } from './dom.js';
-
-const CSS = {
-  container: "container"
-};
-
-const calciteLabelCss = "@-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([alignment=start]),:host([alignment=end]) .calcite--rtl{text-align:left}:host([alignment=end]),:host([alignment=start]) .calcite--rtl{text-align:right}:host([alignment=center]){text-align:center}:host([scale=s]) .container{font-size:var(--calcite-font-size--2);line-height:1rem;margin-bottom:0.5rem}:host([scale=m]) .container{font-size:var(--calcite-font-size--1);line-height:1rem;margin-bottom:0.75rem}:host([scale=l]) .container{font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-bottom:1rem}:host .container{color:var(--calcite-ui-text-1);cursor:pointer;width:100%;margin-top:0;margin-right:0;margin-left:0;line-height:1.375}:host([layout=default]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-gap:0.25rem;gap:0.25rem}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;grid-gap:0.5rem;gap:0.5rem}:host([layout=inline][scale=l]) .container{grid-gap:0.75rem;gap:0.75rem}:host([layout=inline-space-between]) .container{-ms-flex-pack:justify;justify-content:space-between}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--bg-opacity:0}:host([disable-spacing]) .container{grid-gap:0;gap:0;margin:0}";
-
-let CalciteLabel$1 = class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    attachShadow(this);
-    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //--------------------------------------------------------------------------
-    /** specify the text alignment of the label */
-    this.alignment = "start";
-    /** specify the status of the label and any child input / input messages */
-    this.status = "idle";
-    /** specify the scale of the label, defaults to m */
-    this.scale = "m";
-    /** is the wrapped element positioned inline with the label slotted text */
-    this.layout = "default";
-    /** eliminates any space around the label */
-    this.disableSpacing = false;
-    /** is the label disabled  */
-    this.disabled = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.labelClickHandler = (event) => {
-      this.calciteInternalLabelClick.emit({
-        sourceEvent: event
-      });
-    };
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  render() {
-    const dir = getElementDir(this.el);
-    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("slot", null))));
-  }
-  get el() { return this; }
-  static get style() { return calciteLabelCss; }
-};
-CalciteLabel$1 = /*@__PURE__*/ proxyCustomElement(CalciteLabel$1, [1, "calcite-label", {
-    "alignment": [513],
-    "status": [513],
-    "for": [513],
-    "scale": [513],
-    "layout": [513],
-    "disableSpacing": [4, "disable-spacing"],
-    "disabled": [516]
-  }]);
-function defineCustomElement$1() {
-  const components = ["calcite-label"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-label":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CalciteLabel$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { C as CalciteLabel$1, d as defineCustomElement$1 } from './calcite-label2.js';
 
 const CalciteLabel = CalciteLabel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/calcite-label2.js

@@ -0,0 +1,81 @@
+/*!
+ * 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 { a as getElementDir, C as CSS_UTILITY } from './dom.js';
+
+const CSS = {
+  container: "container"
+};
+
+const calciteLabelCss = "@-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([alignment=start]),:host([alignment=end]) .calcite--rtl{text-align:left}:host([alignment=end]),:host([alignment=start]) .calcite--rtl{text-align:right}:host([alignment=center]){text-align:center}:host([scale=s]) .container{font-size:var(--calcite-font-size--2);line-height:1rem;margin-bottom:0.5rem}:host([scale=m]) .container{font-size:var(--calcite-font-size--1);line-height:1rem;margin-bottom:0.75rem}:host([scale=l]) .container{font-size:var(--calcite-font-size-0);line-height:1.25rem;margin-bottom:1rem}:host .container{color:var(--calcite-ui-text-1);cursor:pointer;width:100%;margin-top:0;margin-right:0;margin-left:0;line-height:1.375}:host([layout=default]) .container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;grid-gap:0.25rem;gap:0.25rem}:host([layout=inline]) .container,:host([layout=inline-space-between]) .container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;grid-gap:0.5rem;gap:0.5rem}:host([layout=inline][scale=l]) .container{grid-gap:0.75rem;gap:0.75rem}:host([layout=inline-space-between]) .container{-ms-flex-pack:justify;justify-content:space-between}:host([disabled])>.container{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted(*){pointer-events:none}:host([disabled]) ::slotted(*[disabled]),:host([disabled]) ::slotted(*[disabled] *){--bg-opacity:1}:host([disabled]) ::slotted(calcite-input-message:not([active])){--bg-opacity:0}:host([disable-spacing]) .container{grid-gap:0;gap:0;margin:0}";
+
+let CalciteLabel = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** specify the text alignment of the label */
+    this.alignment = "start";
+    /** specify the status of the label and any child input / input messages */
+    this.status = "idle";
+    /** specify the scale of the label, defaults to m */
+    this.scale = "m";
+    /** is the wrapped element positioned inline with the label slotted text */
+    this.layout = "default";
+    /** eliminates any space around the label */
+    this.disableSpacing = false;
+    /** is the label disabled  */
+    this.disabled = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.labelClickHandler = (event) => {
+      this.calciteInternalLabelClick.emit({
+        sourceEvent: event
+      });
+    };
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  render() {
+    const dir = getElementDir(this.el);
+    return (h(Host, { onClick: this.labelClickHandler }, h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return calciteLabelCss; }
+};
+CalciteLabel = /*@__PURE__*/ proxyCustomElement(CalciteLabel, [1, "calcite-label", {
+    "alignment": [513],
+    "status": [513],
+    "for": [513],
+    "scale": [513],
+    "layout": [513],
+    "disableSpacing": [4, "disable-spacing"],
+    "disabled": [516]
+  }]);
+function defineCustomElement() {
+  const components = ["calcite-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CalciteLabel);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { CalciteLabel as C, defineCustomElement as d };

package/dist/components/calcite-link2.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 { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { a as getElementDir, C as CSS_UTILITY, f as focusElement } from './dom.js';
 import { d as defineCustomElement$1 } from './calcite-icon2.js';
 
@@ -12,7 +12,7 @@ let CalciteLink = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties

package/dist/components/calcite-list-item-group.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 { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { C as CalciteHeading, c as constrainHeadingLevel } from './CalciteHeading.js';
 
 const CSS = {
@@ -17,7 +17,7 @@ let CalciteListItemGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   // --------------------------------------------------------------------------
   //

package/dist/components/calcite-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, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 import { b as getSlotted } from './dom.js';
 
 const CSS = {
@@ -31,7 +31,7 @@ let CalciteListItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties

package/dist/components/calcite-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, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 
 const CSS = {
   container: "container"
@@ -14,7 +14,7 @@ let CalciteList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   // --------------------------------------------------------------------------
   //