@esri/calcite-components 1.0.0-beta.80 → 1.0.0-beta.83

package/dist/collection/components/input-date-picker/input-date-picker.js

@@ -1,15 +1,17 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData } from "../date-picker/utils";
 import { dateFromRange, inRange, dateFromISO, dateToISO, parseDateString, sameDate } from "../../utils/date";
 import { TEXT } from "../date-picker/resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
-import { createPopper, updatePopper, CSS as PopperCSS, popperMenuFlipPlacements, defaultMenuPlacement } from "../../utils/popper";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
+import { createPopper, updatePopper, CSS as PopperCSS, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 export class InputDatePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -23,15 +25,21 @@ export class InputDatePicker {
     this.disabled = false;
     /** Expand or collapse when calendar does not have input */
     this.active = false;
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = TEXT.prevMonth;
-    /** Localized string for "next month" (used for aria label)
+    /**
+     * Localized string for "next month" (used for aria label)
+     *
      * @default "Next month"
      */
     this.intlNextMonth = TEXT.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = TEXT.year;
@@ -39,6 +47,12 @@ export class InputDatePicker {
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
     this.scale = "m";
+    /**
+     * Determines where the date-picker component will be positioned relative to the input.
+     *
+     * @default "bottom-leading"
+     */
+    this.placement = defaultMenuPlacement;
     /** Range mode activation */
     this.range = false;
     /**
@@ -55,11 +69,22 @@ export class InputDatePicker {
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.setFilteredPlacements = () => {
+      const { el, flipPlacements } = this;
+      this.filteredFlipPlacements = flipPlacements
+        ? filterComputedPlacements(flipPlacements, el)
+        : null;
+    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
-          ? this.calciteInputDatePickerOpen.emit()
-          : this.calciteInputDatePickerClose.emit();
+          ? this.calciteInternalInputDatePickerOpen.emit()
+          : this.calciteInternalInputDatePickerClose.emit();
       }
     };
     this.setStartInput = (el) => {
@@ -71,6 +96,11 @@ export class InputDatePicker {
     this.deactivate = () => {
       this.active = false;
     };
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
     this.keyUpHandler = (e) => {
       if (e.key === "Escape") {
         this.active = false;
@@ -106,6 +136,8 @@ export class InputDatePicker {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param event
      */
     this.handleDateChange = (event) => {
       if (this.range) {
@@ -152,11 +184,18 @@ export class InputDatePicker {
       this.end = undefined;
     }
   }
+  flipPlacementsHandler() {
+    this.setFilteredPlacements();
+  }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   activeHandler() {
     if (!this.disabled) {
@@ -191,13 +230,13 @@ export class InputDatePicker {
   }
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl } = this;
+    const { placement, popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: defaultMenuPlacement,
+        placement,
         popper
       })
       : this.createPopper();
@@ -233,6 +272,7 @@ export class InputDatePicker {
     this.createPopper();
     connectLabel(this);
     connectForm(this);
+    this.setFilteredPlacements();
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -256,11 +296,11 @@ export class InputDatePicker {
       : null;
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
-    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" },
-      this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", role: "application" },
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, onKeyUp: this.keyUpHandler, role: "application" },
+      this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.active), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
-          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
-        h("div", { "aria-hidden": (!this.active).toString(), class: {
+          h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })),
+        h("div", { "aria-hidden": toAriaBoolean(!this.active), class: {
             "menu-container": true,
             "menu-container--active": this.active
           }, ref: this.setMenuEl },
@@ -279,7 +319,7 @@ export class InputDatePicker {
           h("calcite-input", { class: {
               input: true,
               "border-top-color-one": this.layout === "vertical" && this.range
-            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
+            }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))),
       h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
@@ -290,11 +330,6 @@ export class InputDatePicker {
         : startWrapper || endWrapper;
     this.createPopper();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
@@ -304,7 +339,7 @@ export class InputDatePicker {
       enabled: true
     };
     flipModifier.options = {
-      fallbackPlacements: this.flipPlacements || popperMenuFlipPlacements
+      fallbackPlacements: this.filteredFlipPlacements || popperMenuComputedPlacements
     };
     const eventListenerModifier = {
       name: "eventListeners",
@@ -314,7 +349,7 @@ export class InputDatePicker {
   }
   createPopper() {
     this.destroyPopper();
-    const { menuEl, referenceEl, overlayPositioning } = this;
+    const { menuEl, placement, referenceEl, overlayPositioning } = this;
     if (!menuEl || !referenceEl) {
       return;
     }
@@ -323,7 +358,7 @@ export class InputDatePicker {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: defaultMenuPlacement,
+      placement,
       referenceEl
     });
   }
@@ -349,21 +384,32 @@ export class InputDatePicker {
   }
   clearCurrentValue() {
     if (!this.range) {
+      if (typeof this.value === "string" && this.value) {
+        this.calciteDatePickerChange.emit();
+      }
       this.value = "";
       return;
     }
     const { focusedInput } = this;
     if (focusedInput === "start") {
+      if (this.start) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? ["", this.value[1] || ""] : [""];
       this.start = undefined;
     }
     else if (focusedInput === "end") {
+      if (this.end) {
+        this.calciteDatePickerRangeChange.emit();
+      }
       this.value = Array.isArray(this.value) ? [this.value[0] || "", ""] : ["", ""];
       this.end = undefined;
     }
   }
   /**
    * If inputted string is a valid date, update value/active
+   *
+   * @param value
    */
   input(value) {
     const date = this.getDateFromInput(value);
@@ -406,6 +452,8 @@ export class InputDatePicker {
   }
   /**
    * Clean up invalid date from input on blur
+   *
+   * @param target
    */
   blur(target) {
     const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
@@ -439,6 +487,8 @@ export class InputDatePicker {
   /**
    * Find a date from input string
    * return false if date is invalid, or out of range
+   *
+   * @param value
    */
   getDateFromInput(value) {
     if (!this.localeData) {
@@ -818,6 +868,32 @@ export class InputDatePicker {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "MenuPlacement",
+        "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-leading\" | \"bottom-start\" | \"bottom-trailing\" | \"top\" | \"top-end\" | \"top-leading\" | \"top-start\" | \"top-trailing\"",
+        "references": {
+          "MenuPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"bottom-leading\""
+          }],
+        "text": "Determines where the date-picker component will be positioned relative to the input."
+      },
+      "attribute": "placement",
+      "reflect": true,
+      "defaultValue": "defaultMenuPlacement"
+    },
     "range": {
       "type": "boolean",
       "mutable": false,
@@ -1025,8 +1101,8 @@ export class InputDatePicker {
         "references": {}
       }
     }, {
-      "method": "calciteInputDatePickerOpen",
-      "name": "calciteInputDatePickerOpen",
+      "method": "calciteInternalInputDatePickerOpen",
+      "name": "calciteInternalInputDatePickerOpen",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1043,8 +1119,8 @@ export class InputDatePicker {
         "references": {}
       }
     }, {
-      "method": "calciteInputDatePickerClose",
-      "name": "calciteInputDatePickerClose",
+      "method": "calciteInternalInputDatePickerClose",
+      "name": "calciteInternalInputDatePickerClose",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1102,6 +1178,9 @@ export class InputDatePicker {
     }, {
       "propName": "value",
       "methodName": "valueHandler"
+    }, {
+      "propName": "flipPlacements",
+      "methodName": "flipPlacementsHandler"
     }, {
       "propName": "min",
       "methodName": "onMinChanged"

package/dist/collection/components/input-message/input-message.css

@@ -100,20 +100,14 @@
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
   opacity: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([active]) {
   visibility: visible;
   height: auto;
   opacity: 1;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([active][scale=m]),
@@ -121,14 +115,16 @@
   margin-top: var(--calcite-input-message-spacing-value);
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .calcite-input-message-icon {
   pointer-events: none;
   display: inline-flex;
   flex-shrink: 0;
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   margin-inline-end: 0.5rem;
 }
 
@@ -149,22 +145,21 @@
 }
 
 :host([status][active]) {
-  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-:host([status][active][scale=s]) {
+:host([status][scale=s]) {
   font-size: var(--calcite-font-size--3);
   line-height: 0.75rem;
 }
 
-:host([status][active][scale=m]) {
+:host([status][scale=m]) {
   margin-top: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([status][active][scale=l]) {
+:host([status][scale=l]) {
   margin-top: 0.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;

package/dist/collection/components/input-message/input-message.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Host, h, Prop, Watch } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-time-picker/input-time-picker.js

@@ -1,12 +1,13 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { formatTimeString, isValidTime, localizeTimeString } from "../../utils/time";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
 export class InputTimePicker {
   constructor() {
@@ -21,6 +22,7 @@ export class InputTimePicker {
     this.disabled = false;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -32,6 +34,12 @@ export class InputTimePicker {
     this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
+    /**
+     * Determines where the popover will be positioned relative to the input.
+     *
+     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     */
+    this.placement = "auto";
     /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
     /** The selected time in UTC (always 24-hour format) */
@@ -45,14 +53,15 @@ export class InputTimePicker {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.calciteInputBlurHandler = () => {
+    this.calciteInternalInputBlurHandler = () => {
       this.active = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
-    this.calciteInputFocusHandler = () => {
+    this.calciteInternalInputFocusHandler = (event) => {
       this.active = true;
+      event.stopPropagation();
     };
     this.calciteInputInputHandler = (event) => {
       const target = event.target;
@@ -63,6 +72,20 @@ export class InputTimePicker {
       const target = event.target;
       const value = target.value;
       this.setValue({ value, origin: "time-picker" });
+      event.stopPropagation();
+    };
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (event.key === "Enter" && !event.defaultPrevented) {
+        submitForm(this);
+      }
+    };
+    this.setCalcitePopoverEl = (el) => {
+      this.popoverEl = el;
     };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
@@ -119,7 +142,9 @@ export class InputTimePicker {
   activeHandler() {
     if (this.disabled) {
       this.active = false;
+      return;
     }
+    this.reposition();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -150,11 +175,13 @@ export class InputTimePicker {
     event.preventDefault();
     event.stopPropagation();
     this.active = false;
+    event.stopPropagation;
   }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     this.active = true;
+    event.stopPropagation;
   }
   // --------------------------------------------------------------------------
   //
@@ -165,11 +192,11 @@ export class InputTimePicker {
   async setFocus() {
     this.calciteInputEl.setFocus();
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
+  async reposition() {
+    var _a;
+    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition();
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -205,11 +232,11 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null,
+    return (h(Host, { onKeyDown: this.keyDownHandler },
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
-        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, referenceElement: this.referenceElementId },
-        h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
+        h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId },
+        h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
@@ -543,6 +570,32 @@ export class InputTimePicker {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PopperPlacement",
+        "resolved": "Placement | PlacementRtl | VariationRtl",
+        "references": {
+          "PopperPlacement": {
+            "location": "import",
+            "path": "../../utils/popper"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "see",
+            "text": "[PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+          }],
+        "text": "Determines where the popover will be positioned relative to the input."
+      },
+      "attribute": "placement",
+      "reflect": true,
+      "defaultValue": "\"auto\""
+    },
     "step": {
       "type": "number",
       "mutable": false,
@@ -615,6 +668,22 @@ export class InputTimePicker {
         "text": "Sets focus on the component.",
         "tags": []
       }
+    },
+    "reposition": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Updates the position of the component.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "el"; }
@@ -644,13 +713,13 @@ export class InputTimePicker {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerBlur",
+      "name": "calciteInternalTimePickerBlur",
       "method": "timePickerBlurHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTimePickerFocus",
+      "name": "calciteInternalTimePickerFocus",
       "method": "timePickerFocusHandler",
       "target": undefined,
       "capture": false,

package/dist/collection/components/interfaces.js

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

package/dist/collection/components/label/label.css

@@ -113,9 +113,9 @@
 }
 
 :host .container {
-  margin-top: 0px;
-  margin-right: 0px;
   margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
   width: 100%;
   line-height: 1.375;
   color: var(--calcite-ui-text-1);

package/dist/collection/components/label/label.js

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -19,6 +20,7 @@ export class Label {
     this.alignment = "start";
     /**
      * specify the status of the label and any child input / input messages
+     *
      * @deprecated set directly on child element instead
      */
     this.status = "idle";

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

@@ -1,6 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.83
  */
 export const CSS = {
   container: "container"