@esri/calcite-components 1.0.0-next.466 → 1.0.0-next.469

package/dist/cjs/calcite-checkbox.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-650d6d02.js');
-const guid = require('./guid-724c7f97.js');
-const form = require('./form-658d7707.js');
-const label = require('./label-3f12ac6f.js');
-const interactive = require('./interactive-d814dd5c.js');
-const dom = require('./dom-5acea4b7.js');
+const index = require('./index-2a34257a.js');
+const guid = require('./guid-f7b803c1.js');
+const form = require('./form-c652f001.js');
+const label = require('./label-7a0126c8.js');
+const interactive = require('./interactive-3be09cee.js');
+const dom = require('./dom-4b70d9e4.js');
 
 const checkboxCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{position:relative;display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;overflow:hidden;background-color:var(--calcite-ui-foreground-1);fill:currentColor;stroke:currentColor;stroke-width:1;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host .toggle:focus .check-svg,:host .toggle:active .check-svg{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:var(--calcite-animation-timing);transition:var(--calcite-animation-timing)}.toggle:focus-visible{outline:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
@@ -33,6 +33,7 @@ const Checkbox = class {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -40,7 +41,7 @@ const Checkbox = class {
      * True if the checkbox is initially indeterminate,
      * which is independent from its checked state
      * https://css-tricks.com/indeterminate-checkboxes/
-     * */
+     */
     this.indeterminate = false;
     /**
      * When true, makes the component required for form-submission.

package/dist/cjs/calcite-chip.cjs.entry.js

@@ -1,17 +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-next.466
+ * v1.0.0-next.469
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-650d6d02.js');
-const dom = require('./dom-5acea4b7.js');
-const guid = require('./guid-724c7f97.js');
-const conditionalSlot = require('./conditionalSlot-cff90ea0.js');
-require('./observers-2160326f.js');
+const index = require('./index-2a34257a.js');
+const dom = require('./dom-4b70d9e4.js');
+const guid = require('./guid-f7b803c1.js');
+const conditionalSlot = require('./conditionalSlot-662d6d2c.js');
+require('./observers-c7320458.js');
 
 const CSS = {
   title: "title",
@@ -47,7 +47,9 @@ const Chip = class {
     this.color = "grey";
     /** Optionally show a button the user can click to dismiss the chip */
     this.dismissible = false;
-    /** Aria label for the "x" button
+    /**
+     * Aria label for the "x" button
+     *
      * @default "Close"
      */
     this.dismissLabel = TEXT.close;

package/dist/cjs/calcite-color-picker_3.cjs.entry.js

@@ -1,19 +1,19 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-650d6d02.js');
-const dom = require('./dom-5acea4b7.js');
-const utils = require('./utils-9799b016.js');
-const math = require('./math-b7cb0a92.js');
-const interactive = require('./interactive-d814dd5c.js');
-const debounce = require('./debounce-68242fb6.js');
-require('./guid-724c7f97.js');
+const index = require('./index-2a34257a.js');
+const dom = require('./dom-4b70d9e4.js');
+const utils = require('./utils-c307f757.js');
+const math = require('./math-7f411028.js');
+const interactive = require('./interactive-3be09cee.js');
+const debounce = require('./debounce-2f8539f6.js');
+require('./guid-f7b803c1.js');
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2328,6 +2328,7 @@ const ColorPicker = class {
      * The format of the value property.
      *
      * When "auto", the format will be inferred from `value` when set.
+     *
      * @default "auto"
      */
     this.format = defaultFormat;
@@ -2337,80 +2338,117 @@ const ColorPicker = class {
     this.hideChannels = false;
     /** When true, hides the saved colors section */
     this.hideSaved = false;
-    /** Label used for the blue channel
+    /**
+     * Label used for the blue channel
+     *
      * @default "B"
      */
     this.intlB = TEXT.b;
-    /** Label used for the blue channel description
+    /**
+     * Label used for the blue channel description
+     *
      * @default "Blue"
      */
     this.intlBlue = TEXT.blue;
-    /** Label used for the delete color button.
+    /**
+     * Label used for the delete color button.
+     *
      * @default "Delete color"
      */
     this.intlDeleteColor = TEXT.deleteColor;
-    /** Label used for the green channel
+    /**
+     * Label used for the green channel
+     *
      * @default "G"
      */
     this.intlG = TEXT.g;
-    /** Label used for the green channel description
+    /**
+     * Label used for the green channel description
+     *
      * @default "Green"
      */
     this.intlGreen = TEXT.green;
-    /** Label used for the hue channel
+    /**
+     * Label used for the hue channel
+     *
      * @default "H"
      */
     this.intlH = TEXT.h;
-    /** Label used for the HSV mode
+    /**
+     * Label used for the HSV mode
+     *
      * @default "HSV"
      */
     this.intlHsv = TEXT.hsv;
-    /** Label used for the hex input
+    /**
+     * Label used for the hex input
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
-    /** Label used for the hue channel description
+    /**
+     * Label used for the hue channel description
+     *
      * @default "Hue"
      */
     this.intlHue = TEXT.hue;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
-    /** Label used for the red channel
+    /**
+     * Label used for the red channel
+     *
      * @default "R"
      */
     this.intlR = TEXT.r;
-    /** Label used for the red channel description
+    /**
+     * Label used for the red channel description
+     *
      * @default "Red"
      */
     this.intlRed = TEXT.red;
-    /** Label used for the RGB mode
+    /**
+     * Label used for the RGB mode
+     *
      * @default "RGB"
      */
     this.intlRgb = TEXT.rgb;
-    /** Label used for the saturation channel
+    /**
+     * Label used for the saturation channel
+     *
      * @default "S"
      */
     this.intlS = TEXT.s;
-    /** Label used for the saturation channel description
+    /**
+     * Label used for the saturation channel description
+     *
      * @default "Saturation"
      */
     this.intlSaturation = TEXT.saturation;
-    /** Label used for the save color button.
+    /**
+     * Label used for the save color button.
+     *
      * @default "Save color"
      */
     this.intlSaveColor = TEXT.saveColor;
-    /** Label used for the saved colors section
+    /**
+     * Label used for the saved colors section
+     *
      * @default "Saved"
      */
     this.intlSaved = TEXT.saved;
-    /** Label used for the value channel
+    /**
+     * Label used for the value channel
+     *
      * @default "V"
      */
     this.intlV = TEXT.v;
-    /** Label used for the
+    /**
+     * Label used for the
+     *
      * @default "Value"
      */
     this.intlValue = TEXT.value;
@@ -2425,6 +2463,7 @@ const ColorPicker = class {
      * a RGB, HSL or HSV object.
      *
      * The type will be preserved as the color is updated.
+     *
      * @default "#007ac2"
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/color-picker/interfaces.ts#L10)
      */
@@ -3093,11 +3132,13 @@ const ColorPickerHexInput = class {
     this.allowEmpty = false;
     /**
      * Label used for the hex input.
+     *
      * @default "Hex"
      */
     this.intlHex = TEXT.hex;
     /**
      * Label used for the hex input when there is no color selected.
+     *
      * @default "No color"
      */
     this.intlNoColor = TEXT.noColor;
@@ -3109,7 +3150,7 @@ const ColorPickerHexInput = class {
      * The hex value.
      */
     this.value = utils.normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = () => {
+    this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
@@ -3194,7 +3235,7 @@ const ColorPickerHexInput = class {
   render() {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    return (index.h("div", { class: CSS$1.container }, index.h("calcite-input", { class: CSS$1.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (index.h("calcite-color-picker-swatch", { active: true, class: CSS$1.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (index.h("div", { class: CSS$1.container }, index.h("calcite-input", { class: CSS$1.input, label: intlHex, maxLength: 6, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (index.h("calcite-color-picker-swatch", { active: true, class: CSS$1.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -1,23 +1,23 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-650d6d02.js');
-const debounce = require('./debounce-68242fb6.js');
-const forIn = require('./forIn-5ab24c3b.js');
-const popper = require('./popper-b0bf4165.js');
-const guid = require('./guid-724c7f97.js');
-const dom = require('./dom-5acea4b7.js');
-const label = require('./label-3f12ac6f.js');
-const form = require('./form-658d7707.js');
-const observers = require('./observers-2160326f.js');
-const interactive = require('./interactive-d814dd5c.js');
-const conditionalSlot = require('./conditionalSlot-cff90ea0.js');
+const index = require('./index-2a34257a.js');
+const debounce = require('./debounce-2f8539f6.js');
+const forIn = require('./forIn-a56b99cf.js');
+const popper = require('./popper-1f1e3064.js');
+const guid = require('./guid-f7b803c1.js');
+const dom = require('./dom-4b70d9e4.js');
+const label = require('./label-7a0126c8.js');
+const form = require('./form-c652f001.js');
+const observers = require('./observers-c7320458.js');
+const interactive = require('./interactive-3be09cee.js');
+const conditionalSlot = require('./conditionalSlot-662d6d2c.js');
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -223,7 +223,8 @@ const Combobox = class {
      * @internal
      */
     this.required = false;
-    /** specify the selection mode
+    /**
+     * specify the selection mode
      * - multi: allow any number of selected items (default)
      * - single: only one selection)
      * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
@@ -233,7 +234,9 @@ const Combobox = class {
     this.scale = "m";
     /** The value(s) of the selectedItem(s) */
     this.value = null;
-    /** string to override the English "Remove tag" text for when an item is selected.
+    /**
+     * string to override the English "Remove tag" text for when an item is selected.
+     *
      * @default "Remove tag"
      */
     this.intlRemoveTag = TEXT.removeTag;
@@ -1038,6 +1041,8 @@ const ComboboxItem = class {
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
    */
   async toggleSelected(coerce) {
     if (this.disabled) {

package/dist/cjs/calcite-date-picker_4.cjs.entry.js

@@ -1,20 +1,20 @@
 /*!
  * 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-next.466
+ * v1.0.0-next.469
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-650d6d02.js');
-const resources = require('./resources-d03200ed.js');
-const dom = require('./dom-5acea4b7.js');
-const interactive = require('./interactive-d814dd5c.js');
-const Heading = require('./Heading-2b85857c.js');
-require('./locale-e251255a.js');
-require('./number-1d914152.js');
-require('./guid-724c7f97.js');
+const index = require('./index-2a34257a.js');
+const resources = require('./resources-ae133545.js');
+const dom = require('./dom-4b70d9e4.js');
+const interactive = require('./interactive-3be09cee.js');
+const Heading = require('./Heading-3dabb5b6.js');
+require('./locale-f9d560ce.js');
+require('./number-a0d4c1c0.js');
+require('./guid-f7b803c1.js');
 
 const datePickerCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);vertical-align:top}:host([scale=s]){max-width:216px}:host([scale=m]){max-width:286px}:host([scale=l]){max-width:398px}";
 
@@ -23,15 +23,21 @@ const DatePicker = class {
     index.registerInstance(this, hostRef);
     this.calciteDatePickerChange = index.createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = index.createEvent(this, "calciteDatePickerRangeChange", 7);
-    /** Localized string for "previous month" (used for aria label)
+    /**
+     * Localized string for "previous month" (used for aria label)
+     *
      * @default "Previous month"
      */
     this.intlPrevMonth = resources.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 = resources.TEXT.nextMonth;
-    /** Localized string for "year" (used for aria label)
+    /**
+     * Localized string for "year" (used for aria label)
+     *
      * @default "Year"
      */
     this.intlYear = resources.TEXT.year;
@@ -147,6 +153,7 @@ const DatePicker = class {
           this.hoverRange = undefined;
         }
       }
+      e.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -172,6 +179,8 @@ const DatePicker = class {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param e
      */
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
@@ -338,15 +347,24 @@ const DatePicker = class {
   }
   /**
    * Render calcite-date-picker-month-header and calcite-date-picker-month
+   *
+   * @param activeDate
+   * @param maxDate
+   * @param minDate
+   * @param date
+   * @param endDate
    */
   renderCalendar(activeDate, maxDate, minDate, date, endDate) {
     return (this.localeData && [
       index.h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || resources.HEADING_LEVEL, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerSelect: this.monthHeaderSelectChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date || new Date() }),
-      index.h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerHover: this.monthHoverChange, onCalciteDatePickerMouseOut: this.monthMouseOutChange, onCalciteDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
+      index.h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteDatePickerSelect: this.monthDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
   /**
    * Update date instance of start if valid
+   *
+   * @param startDate
+   * @param emit
    */
   setStartAsDate(startDate, emit) {
     this.startAsDate = startDate;
@@ -360,6 +378,9 @@ const DatePicker = class {
   }
   /**
    * Update date instance of end if valid
+   *
+   * @param endDate
+   * @param emit
    */
   setEndAsDate(endDate, emit) {
     this.endAsDate = endDate;
@@ -383,6 +404,10 @@ const DatePicker = class {
   }
   /**
    * Get an active date using the value, or current date as default
+   *
+   * @param value
+   * @param min
+   * @param max
    */
   getActiveDate(value, min, max) {
     return resources.dateFromRange(this.activeDate, min, max) || value || resources.dateFromRange(new Date(), min, max);
@@ -415,7 +440,7 @@ const DatePickerDay = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteDaySelect = index.createEvent(this, "calciteDaySelect", 7);
-    this.calciteDayHover = index.createEvent(this, "calciteDayHover", 7);
+    this.calciteInternalDayHover = index.createEvent(this, "calciteInternalDayHover", 7);
     /** Date is outside of range and can't be selected */
     this.disabled = false;
     /** Date is in the current month. */
@@ -450,7 +475,7 @@ const DatePickerDay = class {
     };
   }
   mouseoverHandler() {
-    this.calciteDayHover.emit({
+    this.calciteInternalDayHover.emit({
       disabled: this.disabled
     });
   }
@@ -483,9 +508,9 @@ const DatePickerMonth = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteDatePickerSelect = index.createEvent(this, "calciteDatePickerSelect", 7);
-    this.calciteDatePickerHover = index.createEvent(this, "calciteDatePickerHover", 7);
+    this.calciteInternalDatePickerHover = index.createEvent(this, "calciteInternalDatePickerHover", 7);
     this.calciteDatePickerActiveDateChange = index.createEvent(this, "calciteDatePickerActiveDateChange", 7);
-    this.calciteDatePickerMouseOut = index.createEvent(this, "calciteDatePickerMouseOut", 7);
+    this.calciteInternalDatePickerMouseOut = index.createEvent(this, "calciteInternalDatePickerMouseOut", 7);
     /** Date currently active.*/
     this.activeDate = new Date();
     //--------------------------------------------------------------------------
@@ -548,11 +573,12 @@ const DatePickerMonth = class {
     this.dayHover = (e) => {
       const target = e.target;
       if (e.detail.disabled) {
-        this.calciteDatePickerMouseOut.emit();
+        this.calciteInternalDatePickerMouseOut.emit();
       }
       else {
-        this.calciteDatePickerHover.emit(target.value);
+        this.calciteInternalDatePickerHover.emit(target.value);
       }
+      e.stopPropagation();
     };
     this.daySelect = (e) => {
       const target = e.target;
@@ -560,7 +586,7 @@ const DatePickerMonth = class {
     };
   }
   mouseoutHandler() {
-    this.calciteDatePickerMouseOut.emit();
+    this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -605,6 +631,8 @@ const DatePickerMonth = class {
   //--------------------------------------------------------------------------
   /**
    * Add n months to the current month
+   *
+   * @param step
    */
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
@@ -614,6 +642,8 @@ const DatePickerMonth = class {
   }
   /**
    * Add n days to the current date
+   *
+   * @param step
    */
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
@@ -623,6 +653,10 @@ const DatePickerMonth = class {
   }
   /**
    * Get dates for last days of the previous month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getPrevMonthdays(month, year, startOfWeek) {
     const lastDate = new Date(year, month, 0);
@@ -639,6 +673,9 @@ const DatePickerMonth = class {
   }
   /**
    * Get dates for the current month
+   *
+   * @param month
+   * @param year
    */
   getCurrentMonthDays(month, year) {
     const num = new Date(year, month + 1, 0).getDate();
@@ -650,6 +687,10 @@ const DatePickerMonth = class {
   }
   /**
    * Get dates for first days of the next month
+   *
+   * @param month
+   * @param year
+   * @param startOfWeek
    */
   getNextMonthDays(month, year, startOfWeek) {
     const endDay = new Date(year, month + 1, 0).getDay();
@@ -664,6 +705,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date is in between the start and end dates
+   *
+   * @param date
    */
   betweenSelectedRange(date) {
     return !!(this.startDate &&
@@ -674,6 +717,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date should be in selected state
+   *
+   * @param date
    */
   isSelected(date) {
     return !!(resources.sameDate(date, this.selectedDate) ||
@@ -682,6 +727,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date is the start of the date range
+   *
+   * @param date
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
@@ -698,6 +745,12 @@ const DatePickerMonth = class {
   }
   /**
    * Render calcite-date-picker-day
+   *
+   * @param active
+   * @param day
+   * @param date
+   * @param currentMonth
+   * @param ref
    */
   renderDateDay(active, day, date, currentMonth, ref) {
     var _a;
@@ -709,7 +762,7 @@ const DatePickerMonth = class {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !resources.inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDayHover: this.dayHover, onCalciteDaySelect: this.daySelect, range: !!this.startDate && !!this.endDate && !resources.sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !resources.inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !resources.sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();
@@ -762,6 +815,8 @@ const DatePickerMonthHeader = class {
     //--------------------------------------------------------------------------
     /**
      * Increment year on UP/DOWN keys
+     *
+     * @param e
      */
     this.onYearKey = (e) => {
       const localizedYear = e.target.value;
@@ -861,6 +916,11 @@ const DatePickerMonthHeader = class {
   /**
    * Parse localized year string from input,
    * set to active if in range
+   *
+   * @param root0
+   * @param root0.localizedYear
+   * @param root0.commit
+   * @param root0.offset
    */
   setYear({ localizedYear, commit = true, offset = 0 }) {
     const { yearInput, activeDate, localeData } = this;