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

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

@@ -1,14 +1,14 @@
 /*!
  * 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
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090024fb.js';
-import { g as guid } from './guid-3d2249ab.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-6b113ff9.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-71a2e73c.js';
-import { u as updateHostInteraction } from './interactive-b0989f51.js';
-import { t as toAriaBoolean } from './dom-92353f93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9d03d54.js';
+import { g as guid } from './guid-30502e46.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-ae9c7b51.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-1aee1deb.js';
+import { u as updateHostInteraction } from './interactive-f48d07dd.js';
+import { t as toAriaBoolean } from './dom-c27aa997.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}";
 
@@ -29,6 +29,7 @@ const Checkbox = class {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -36,7 +37,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/esm/calcite-chip.entry.js

@@ -1,13 +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-next.466
+ * v1.0.0-next.469
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-090024fb.js';
-import { g as getSlotted } from './dom-92353f93.js';
-import { g as guid } from './guid-3d2249ab.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-efe9fada.js';
-import './observers-39799b92.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b9d03d54.js';
+import { g as getSlotted } from './dom-c27aa997.js';
+import { g as guid } from './guid-30502e46.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-3eed64fd.js';
+import './observers-851341e8.js';
 
 const CSS = {
   title: "title",
@@ -43,7 +43,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/esm/calcite-color-picker_3.entry.js

@@ -1,15 +1,15 @@
 /*!
  * 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
  */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-090024fb.js';
-import { a as getElementDir, f as focusElement, b as getThemeName } from './dom-92353f93.js';
-import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-7e9a0947.js';
-import { c as clamp } from './math-86e70cf6.js';
-import { u as updateHostInteraction } from './interactive-b0989f51.js';
-import { d as debounce, i as isObject } from './debounce-3542cd6c.js';
-import './guid-3d2249ab.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b9d03d54.js';
+import { a as getElementDir, f as focusElement, b as getThemeName } from './dom-c27aa997.js';
+import { n as normalizeHex, C as CSSColorMode, p as parseMode, c as colorEqual, i as isValidHex, a as isLonghandHex, r as rgbToHex, b as hexChar } from './utils-1629f315.js';
+import { c as clamp } from './math-7cf06c9e.js';
+import { u as updateHostInteraction } from './interactive-f48d07dd.js';
+import { d as debounce, i as isObject } from './debounce-09d6a561.js';
+import './guid-30502e46.js';
 
 /** Error message constants. */
 var FUNC_ERROR_TEXT = 'Expected a function';
@@ -2324,6 +2324,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;
@@ -2333,80 +2334,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;
@@ -2421,6 +2459,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)
      */
@@ -3089,11 +3128,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;
@@ -3105,7 +3146,7 @@ const ColorPickerHexInput = class {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = () => {
+    this.onCalciteInternalInputBlur = () => {
       const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
@@ -3190,7 +3231,7 @@ const ColorPickerHexInput = class {
   render() {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    return (h("div", { class: CSS$1.container }, 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 ? (h("calcite-color-picker-swatch", { active: true, class: CSS$1.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (h("div", { class: CSS$1.container }, 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 ? (h("calcite-color-picker-swatch", { active: true, class: CSS$1.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //

package/dist/esm/calcite-combobox_3.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
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-090024fb.js';
-import { a as isSymbol, S as Symbol, d as debounce } from './debounce-3542cd6c.js';
-import { i as isArray, f as forIn } from './forIn-f786dc6a.js';
-import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-23ea67bc.js';
-import { g as guid } from './guid-3d2249ab.js';
-import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-92353f93.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-71a2e73c.js';
-import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-6b113ff9.js';
-import { c as createObserver } from './observers-39799b92.js';
-import { u as updateHostInteraction } from './interactive-b0989f51.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-efe9fada.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b9d03d54.js';
+import { a as isSymbol, S as Symbol, d as debounce } from './debounce-09d6a561.js';
+import { i as isArray, f as forIn } from './forIn-f1632963.js';
+import { f as filterComputedPlacements, u as updatePopper, c as createPopper, d as defaultMenuPlacement, p as popperMenuComputedPlacements, C as CSS$2 } from './popper-b376ab28.js';
+import { g as guid } from './guid-30502e46.js';
+import { n as nodeListToArray, t as toAriaBoolean, d as getElementProp, g as getSlotted } from './dom-c27aa997.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-1aee1deb.js';
+import { s as submitForm, c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from './form-ae9c7b51.js';
+import { c as createObserver } from './observers-851341e8.js';
+import { u as updateHostInteraction } from './interactive-f48d07dd.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-3eed64fd.js';
 
 /**
  * A specialized version of `_.map` for arrays without support for iteratee
@@ -219,7 +219,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
@@ -229,7 +230,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;
@@ -1034,6 +1037,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/esm/calcite-date-picker_4.entry.js

@@ -1,16 +1,16 @@
 /*!
  * 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
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-090024fb.js';
-import { T as TEXT, c as getDaysDiff, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, H as HEADING_LEVEL, s as sameDate, i as inRange, l as localizeNumber, e as getOrder, n as nextMonth, f as prevMonth, h as parseNumber } from './resources-0f1993c7.js';
-import { a as getElementDir, C as CSS_UTILITY } from './dom-92353f93.js';
-import { u as updateHostInteraction } from './interactive-b0989f51.js';
-import { H as Heading } from './Heading-77bbacee.js';
-import './locale-6fbb1595.js';
-import './number-0354c374.js';
-import './guid-3d2249ab.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, F as Fragment } from './index-b9d03d54.js';
+import { T as TEXT, c as getDaysDiff, d as dateToISO, a as dateFromISO, b as dateFromRange, g as getLocaleData, H as HEADING_LEVEL, s as sameDate, i as inRange, l as localizeNumber, e as getOrder, n as nextMonth, f as prevMonth, h as parseNumber } from './resources-dc7edf07.js';
+import { a as getElementDir, C as CSS_UTILITY } from './dom-c27aa997.js';
+import { u as updateHostInteraction } from './interactive-f48d07dd.js';
+import { H as Heading } from './Heading-2828947f.js';
+import './locale-529b8688.js';
+import './number-c581416f.js';
+import './guid-30502e46.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}";
 
@@ -19,15 +19,21 @@ const DatePicker = class {
     registerInstance(this, hostRef);
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = 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 = 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;
@@ -143,6 +149,7 @@ const DatePicker = class {
           this.hoverRange = undefined;
         }
       }
+      e.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -168,6 +175,8 @@ const DatePicker = class {
     };
     /**
      * Event handler for when the selected date changes
+     *
+     * @param e
      */
     this.monthDateChange = (e) => {
       const date = new Date(e.detail);
@@ -334,15 +343,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 && [
       h("calcite-date-picker-month-header", { activeDate: activeDate, headingLevel: this.headingLevel || 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() }),
-      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 })
+      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;
@@ -356,6 +374,9 @@ const DatePicker = class {
   }
   /**
    * Update date instance of end if valid
+   *
+   * @param endDate
+   * @param emit
    */
   setEndAsDate(endDate, emit) {
     this.endAsDate = endDate;
@@ -379,6 +400,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 dateFromRange(this.activeDate, min, max) || value || dateFromRange(new Date(), min, max);
@@ -411,7 +436,7 @@ const DatePickerDay = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteDaySelect = createEvent(this, "calciteDaySelect", 7);
-    this.calciteDayHover = createEvent(this, "calciteDayHover", 7);
+    this.calciteInternalDayHover = createEvent(this, "calciteInternalDayHover", 7);
     /** Date is outside of range and can't be selected */
     this.disabled = false;
     /** Date is in the current month. */
@@ -446,7 +471,7 @@ const DatePickerDay = class {
     };
   }
   mouseoverHandler() {
-    this.calciteDayHover.emit({
+    this.calciteInternalDayHover.emit({
       disabled: this.disabled
     });
   }
@@ -479,9 +504,9 @@ const DatePickerMonth = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
-    this.calciteDatePickerHover = createEvent(this, "calciteDatePickerHover", 7);
+    this.calciteInternalDatePickerHover = createEvent(this, "calciteInternalDatePickerHover", 7);
     this.calciteDatePickerActiveDateChange = createEvent(this, "calciteDatePickerActiveDateChange", 7);
-    this.calciteDatePickerMouseOut = createEvent(this, "calciteDatePickerMouseOut", 7);
+    this.calciteInternalDatePickerMouseOut = createEvent(this, "calciteInternalDatePickerMouseOut", 7);
     /** Date currently active.*/
     this.activeDate = new Date();
     //--------------------------------------------------------------------------
@@ -544,11 +569,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;
@@ -556,7 +582,7 @@ const DatePickerMonth = class {
     };
   }
   mouseoutHandler() {
-    this.calciteDatePickerMouseOut.emit();
+    this.calciteInternalDatePickerMouseOut.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -601,6 +627,8 @@ const DatePickerMonth = class {
   //--------------------------------------------------------------------------
   /**
    * Add n months to the current month
+   *
+   * @param step
    */
   addMonths(step) {
     const nextDate = new Date(this.activeDate);
@@ -610,6 +638,8 @@ const DatePickerMonth = class {
   }
   /**
    * Add n days to the current date
+   *
+   * @param step
    */
   addDays(step = 0) {
     const nextDate = new Date(this.activeDate);
@@ -619,6 +649,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);
@@ -635,6 +669,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();
@@ -646,6 +683,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();
@@ -660,6 +701,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date is in between the start and end dates
+   *
+   * @param date
    */
   betweenSelectedRange(date) {
     return !!(this.startDate &&
@@ -670,6 +713,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date should be in selected state
+   *
+   * @param date
    */
   isSelected(date) {
     return !!(sameDate(date, this.selectedDate) ||
@@ -678,6 +723,8 @@ const DatePickerMonth = class {
   }
   /**
    * Determine if the date is the start of the date range
+   *
+   * @param date
    */
   isStartOfRange(date) {
     return !!(this.startDate &&
@@ -694,6 +741,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;
@@ -705,7 +758,7 @@ const DatePickerMonth = class {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !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 && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !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 && !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();
@@ -758,6 +811,8 @@ const DatePickerMonthHeader = class {
     //--------------------------------------------------------------------------
     /**
      * Increment year on UP/DOWN keys
+     *
+     * @param e
      */
     this.onYearKey = (e) => {
       const localizedYear = e.target.value;
@@ -857,6 +912,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;