@esri/calcite-components 1.0.0-next.465 → 1.0.0-next.468

package/dist/cjs/calcite-action.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const observers = require('./observers-5677956e.js');
-const interactive = require('./interactive-c6a6fae3.js');
-const dom = require('./dom-b1c46fde.js');
-require('./guid-9341ece5.js');
+const index = require('./index-7a67b910.js');
+const observers = require('./observers-39a8d31f.js');
+const interactive = require('./interactive-0190c630.js');
+const dom = require('./dom-cf0fae95.js');
+require('./guid-e3e2f3c9.js');
 
 const CSS = {
   button: "button",
@@ -56,7 +56,9 @@ const Action = class {
      * Indicates unread changes.
      */
     this.indicator = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;

package/dist/cjs/calcite-alert.cjs.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const interfaces = require('./interfaces-06edeb9f.js');
-require('./guid-9341ece5.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const interfaces = require('./interfaces-6c1f00fa.js');
+require('./guid-e3e2f3c9.js');
 
 const TEXT = {
   intlClose: "Close"
@@ -33,8 +33,8 @@ const Alert = class {
     index.registerInstance(this, hostRef);
     this.calciteAlertClose = index.createEvent(this, "calciteAlertClose", 7);
     this.calciteAlertOpen = index.createEvent(this, "calciteAlertOpen", 7);
-    this.calciteAlertSync = index.createEvent(this, "calciteAlertSync", 7);
-    this.calciteAlertRegister = index.createEvent(this, "calciteAlertRegister", 7);
+    this.calciteInternalAlertSync = index.createEvent(this, "calciteInternalAlertSync", 7);
+    this.calciteInternalAlertRegister = index.createEvent(this, "calciteInternalAlertRegister", 7);
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -48,7 +48,9 @@ const Alert = class {
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
     /** Color for the alert (will apply to top border and icon) */
     this.color = "blue";
-    /** string to override English close text
+    /**
+     * string to override English close text
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
@@ -77,7 +79,7 @@ const Alert = class {
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
@@ -95,11 +97,11 @@ const Alert = class {
   }
   watchActive() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
   updateRequestedIcon() {
@@ -118,7 +120,7 @@ const Alert = class {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
   }
   componentWillLoad() {
@@ -147,6 +149,7 @@ const Alert = class {
     }
     this.queueLength = this.queue.length;
     this.determineActiveAlert();
+    event.stopPropagation();
   }
   // when an alert is first registered, trigger a queue sync to get queue
   alertRegister() {
@@ -154,7 +157,7 @@ const Alert = class {
       this.queued = true;
       this.queue.push(this.el);
     }
-    this.calciteAlertSync.emit({ queue: this.queue });
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
   //--------------------------------------------------------------------------

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

@@ -1,20 +1,22 @@
 /*!
  * 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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const utils = require('./utils-a51bb08e.js');
-const dom = require('./dom-b1c46fde.js');
-require('./guid-9341ece5.js');
+const index = require('./index-7a67b910.js');
+const utils = require('./utils-15472b29.js');
+const dom = require('./dom-cf0fae95.js');
+require('./guid-e3e2f3c9.js');
 
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values
+ *
+ * @param str
  */
 function stringToHex(str) {
   let hash = 0;
@@ -30,6 +32,8 @@ function stringToHex(str) {
 }
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 function rgbToHue(rgb) {
   let { r, g, b } = rgb;
@@ -58,6 +62,7 @@ function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 function hexToHue(hex) {

package/dist/cjs/calcite-block_2.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const Heading = require('./Heading-a01d7704.js');
-const conditionalSlot = require('./conditionalSlot-9318f4d5.js');
-const interactive = require('./interactive-c6a6fae3.js');
-const guid = require('./guid-9341ece5.js');
-require('./observers-5677956e.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const Heading = require('./Heading-de153f82.js');
+const conditionalSlot = require('./conditionalSlot-2b7b0c9a.js');
+const interactive = require('./interactive-0190c630.js');
+const guid = require('./guid-e3e2f3c9.js');
+require('./observers-39a8d31f.js');
 
 const CSS$1 = {
   article: "article",
@@ -78,17 +78,25 @@ const Block = class {
     this.dragHandle = false;
     /**
      * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+     *
+     * @default "Collapse"
      */
     this.intlCollapse = TEXT$1.collapse;
     /**
      * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+     *
+     * @default "Expand"
      */
     this.intlExpand = TEXT$1.expand;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT$1.loading;
-    /** Text string used for the actions menu
+    /**
+     * Text string used for the actions menu
+     *
      * @default "Options"
      */
     this.intlOptions = TEXT$1.options;

package/dist/cjs/calcite-button.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const label = require('./label-a0f9b578.js');
-const observers = require('./observers-5677956e.js');
-const interactive = require('./interactive-c6a6fae3.js');
-const form = require('./form-b40e8c51.js');
-require('./guid-9341ece5.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const label = require('./label-97b3b425.js');
+const observers = require('./observers-39a8d31f.js');
+const interactive = require('./interactive-0190c630.js');
+const form = require('./form-4a76a449.js');
+require('./guid-e3e2f3c9.js');
 
 (function(prototype) {
   if (typeof prototype.requestSubmit == "function") return
@@ -77,7 +77,9 @@ const Button = class {
     this.color = "blue";
     /** is the button disabled  */
     this.disabled = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
@@ -93,7 +95,7 @@ const Button = class {
     this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = observers.createObserver("mutation", () => this.updateHasContent());
     /** determine if there is slotted content for styling purposes */
     this.hasContent = false;

package/dist/cjs/calcite-card.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const conditionalSlot = require('./conditionalSlot-9318f4d5.js');
-require('./guid-9341ece5.js');
-require('./observers-5677956e.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const conditionalSlot = require('./conditionalSlot-2b7b0c9a.js');
+require('./guid-e3e2f3c9.js');
+require('./observers-39a8d31f.js');
 
 const CSS = {
   container: "container",
@@ -52,15 +52,21 @@ const Card = class {
     this.selected = false;
     /** Indicates whether the card is selectable. */
     this.selectable = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
-    /** string to override English select text for checkbox when selectable is true
+    /**
+     * string to override English select text for checkbox when selectable is true
+     *
      * @default "Select"
      */
     this.intlSelect = TEXT.select;
-    /** string to override English deselect text for checkbox when selectable is true
+    /**
+     * string to override English deselect text for checkbox when selectable is true
+     *
      * @default "Deselect"
      */
     this.intlDeselect = TEXT.deselect;

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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const guid = require('./guid-9341ece5.js');
-const form = require('./form-b40e8c51.js');
-const label = require('./label-a0f9b578.js');
-const interactive = require('./interactive-c6a6fae3.js');
-const dom = require('./dom-b1c46fde.js');
+const index = require('./index-7a67b910.js');
+const guid = require('./guid-e3e2f3c9.js');
+const form = require('./form-4a76a449.js');
+const label = require('./label-97b3b425.js');
+const interactive = require('./interactive-0190c630.js');
+const dom = require('./dom-cf0fae95.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const guid = require('./guid-9341ece5.js');
-const conditionalSlot = require('./conditionalSlot-9318f4d5.js');
-require('./observers-5677956e.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const guid = require('./guid-e3e2f3c9.js');
+const conditionalSlot = require('./conditionalSlot-2b7b0c9a.js');
+require('./observers-39a8d31f.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.465
+ * v1.0.0-next.468
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-83432d46.js');
-const dom = require('./dom-b1c46fde.js');
-const utils = require('./utils-a51bb08e.js');
-const math = require('./math-4087a063.js');
-const interactive = require('./interactive-c6a6fae3.js');
-const debounce = require('./debounce-01e67947.js');
-require('./guid-9341ece5.js');
+const index = require('./index-7a67b910.js');
+const dom = require('./dom-cf0fae95.js');
+const utils = require('./utils-15472b29.js');
+const math = require('./math-8a8bed36.js');
+const interactive = require('./interactive-0190c630.js');
+const debounce = require('./debounce-020f9f3a.js');
+require('./guid-e3e2f3c9.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));
   }
   //--------------------------------------------------------------------------
   //