@esri/calcite-components 1.0.0-next.367 → 1.0.0-next.370

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

@@ -109,6 +109,8 @@ let CalciteInput = class {
     this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    /** whether the value of the input was changed as a result of user typing or not */
+    this.internalValueChange = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -128,11 +130,15 @@ let CalciteInput = class {
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue("", nativeEvent, true);
+      this.setValue({
+        committing: true,
+        nativeEvent,
+        value: ""
+      });
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        this.setValue({ value: this.value });
       }
       this.calciteInputBlur.emit({
         element: this.childEl,
@@ -156,7 +162,10 @@ let CalciteInput = class {
       if (this.disabled || this.readOnly) {
         return;
       }
-      this.setValue(nativeEvent.target.value, nativeEvent);
+      this.setValue({
+        nativeEvent,
+        value: nativeEvent.target.value
+      });
     };
     this.inputKeyDownHandler = (event) => {
       if (this.disabled || this.readOnly) {
@@ -176,11 +185,17 @@ let CalciteInput = class {
         if (!number.isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
         }
-        this.setValue(number.parseNumberString(delocalizedValue), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: number.parseNumberString(delocalizedValue)
+        });
         this.childNumberEl.value = this.localizedValue;
       }
       else {
-        this.setValue(locale.delocalizeNumberString(value, this.locale), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: locale.delocalizeNumberString(value, this.locale)
+        });
       }
     };
     this.inputNumberKeyDownHandler = (event) => {
@@ -276,18 +291,44 @@ let CalciteInput = class {
     this.setChildNumberElRef = (el) => {
       this.childNumberEl = el;
     };
-    this.setLocalizedValue = (value) => {
-      this.localizedValue = locale.localizeNumberString(value, this.locale, this.groupSeparator);
+    this.setInputValue = (newInputValue) => {
+      if (this.type === "text" && !this.childEl) {
+        return;
+      }
+      if (this.type === "number" && !this.childNumberEl) {
+        return;
+      }
+      this[`child${this.type === "number" ? "Number" : ""}El`].value = newInputValue;
+    };
+    this.setPreviousValue = (newPreviousValue) => {
+      this.previousValue =
+        this.type === "number"
+          ? number.isValidNumber(newPreviousValue)
+            ? newPreviousValue
+            : ""
+          : newPreviousValue;
     };
-    this.setValue = (value, nativeEvent, committing = false) => {
-      const previousValue = this.value;
+    this.setValue = ({ committing = false, nativeEvent, origin = "internal", value }) => {
+      const previousLocalizedValue = this.type === "number"
+        ? locale.localizeNumberString(this.previousValue, this.locale, this.groupSeparator)
+        : "";
+      const sanitizedValue = this.type === "number" ? number.sanitizeNumberString(value) : value;
+      const newValue = this.type === "number" && value && !sanitizedValue
+        ? number.isValidNumber(this.previousValue)
+          ? this.previousValue
+          : ""
+        : sanitizedValue;
+      const newLocalizedValue = this.type === "number"
+        ? locale.localizeNumberString(newValue, this.locale, this.groupSeparator)
+        : "";
+      this.internalValueChange = origin === "internal";
+      this.setPreviousValue(this.value);
+      this.value = newValue;
       if (this.type === "number") {
-        const sanitizedValue = number.sanitizeNumberString(value);
-        this.value = sanitizedValue;
-        this.setLocalizedValue(sanitizedValue);
+        this.localizedValue = newLocalizedValue;
       }
-      else {
-        this.value = value;
+      if (origin === "external") {
+        this.setInputValue(this.type === "number" ? newLocalizedValue : newValue);
       }
       if (nativeEvent) {
         const calciteInputInputEvent = this.calciteInputInput.emit({
@@ -296,8 +337,8 @@ let CalciteInput = class {
           value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
-          this.value = previousValue;
-          this.setLocalizedValue(previousValue);
+          this.value = this.previousValue;
+          this.localizedValue = previousLocalizedValue;
         }
         else if (committing) {
           this.calciteInputChange.emit();
@@ -322,17 +363,20 @@ let CalciteInput = class {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
-    if (newValue == null) {
-      this.value = "";
-      return;
-    }
-    if (this.type === "number" &&
-      this.localizedValue !== locale.localizeNumberString(newValue, this.locale)) {
-      this.setLocalizedValue(newValue);
-    }
-    else if (this.childEl && this.childEl.value !== newValue) {
-      this.childEl.value = newValue;
+    if (!this.internalValueChange) {
+      this.setValue({
+        origin: "external",
+        value: newValue == null
+          ? ""
+          : this.type === "number"
+            ? number.isValidNumber(newValue)
+              ? newValue
+              : this.previousValue || ""
+            : newValue
+      });
+      this.warnAboutInvalidNumberValue(newValue);
     }
+    this.internalValueChange = false;
   }
   updateRequestedIcon() {
     this.requestedIcon = dom.setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -355,13 +399,13 @@ let CalciteInput = class {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    if (this.type === "number" && this.value) {
-      if (number.isValidNumber(this.value)) {
-        this.localizedValue = locale.localizeNumberString(this.value, this.locale, this.groupSeparator);
-      }
-      else {
-        this.value = "";
-      }
+    this.setPreviousValue(this.value);
+    if (this.type === "number") {
+      this.warnAboutInvalidNumberValue(this.value);
+      this.setValue({
+        origin: "loading",
+        value: number.isValidNumber(this.value) ? this.value : ""
+      });
     }
     label.connectLabel(this);
     form.connectForm(this);
@@ -383,7 +427,9 @@ let CalciteInput = class {
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !number.isValidNumber(newValue)) {
-      this.value = oldValue;
+      this.setValue({
+        value: oldValue
+      });
       return false;
     }
     return true;
@@ -418,10 +464,16 @@ let CalciteInput = class {
       : nudgedValue;
     const inputValPlaces = math.decimalPlaces(inputVal);
     const inputStepPlaces = math.decimalPlaces(inputStep);
-    this.setValue(finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces)), nativeEvent, true);
+    this.setValue({
+      committing: true,
+      nativeEvent,
+      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+    });
   }
   onFormReset() {
-    this.setValue(this.defaultValue);
+    this.setValue({
+      value: this.defaultValue
+    });
   }
   syncHiddenFormInput(input) {
     var _a, _b, _c, _d;
@@ -452,6 +504,11 @@ let CalciteInput = class {
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");
   }
+  warnAboutInvalidNumberValue(value) {
+    if (this.type === "number" && value && !number.isValidNumber(value)) {
+      console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 const CSS$2 = {
   container: "container"

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

@@ -8,8 +8,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
-const observers = require('./observers-41837607.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const observers = require('./observers-79bfb8bc.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
 
 /**

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

@@ -9,9 +9,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const interfaces = require('./interfaces-54651c1c.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 const TEXT = {
   close: "Close"

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

@@ -7,7 +7,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 const dom = require('./dom-0de9fb18.js');
 const label = require('./label-1bca211b.js');
 const form = require('./form-4b7c317e.js');

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

@@ -10,9 +10,9 @@ const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
 const resources = require('./resources-ffe563a2.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 const CSS = {
   backButton: "back-button",

package/dist/cjs/calcite-pick-list_3.cjs.entry.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const resources = require('./resources-405cc2c4.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 const dom = require('./dom-0de9fb18.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./array-a5dedf5a.js');
 require('./debounce-95979061.js');
 require('./guid-b270f0db.js');

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

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 const math = require('./math-145c80e2.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 const CSS$2 = {
   main: "main",

package/dist/cjs/calcite-sortable-list.cjs.entry.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const sortable_esm = require('./sortable.esm-d7a4560b.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 
 const CSS = {
   sortItem: "sort-item",

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

@@ -9,7 +9,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const guid = require('./guid-b270f0db.js');
 const dom = require('./dom-0de9fb18.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 
 const calciteTabCss = "@-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([active]) section{display:block}:host{display:none;height:100%;width:100%}:host([active]){display:block;height:100%;width:100%;overflow:auto}section{display:none;height:100%;width:100%}:host([scale=s]){padding-top:0.25rem;padding-bottom:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-top:0.5rem;padding-bottom:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){padding-top:0.75rem;padding-bottom:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}";
 

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 const SLOTS = {
   contentStart: "content-start",

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

@@ -9,8 +9,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
 const CalciteHeading = require('./CalciteHeading-112c19f9.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
-const observers = require('./observers-41837607.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
+const observers = require('./observers-79bfb8bc.js');
 require('./guid-b270f0db.js');
 
 const CSS$1 = {

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6b5d2de5.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./guid-b270f0db.js');
-require('./observers-41837607.js');
+require('./observers-79bfb8bc.js');
 
 var TreeSelectionMode;
 (function (TreeSelectionMode) {

package/dist/cjs/calcite-value-list_2.cjs.entry.js

@@ -10,10 +10,10 @@ const index = require('./index-6b5d2de5.js');
 const sortable_esm = require('./sortable.esm-d7a4560b.js');
 const resources = require('./resources-405cc2c4.js');
 const array = require('./array-a5dedf5a.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 const guid = require('./guid-b270f0db.js');
 const dom = require('./dom-0de9fb18.js');
-const conditionalSlot = require('./conditionalSlot-e874fbb0.js');
+const conditionalSlot = require('./conditionalSlot-92505fba.js');
 require('./debounce-95979061.js');
 
 const CSS = {

package/dist/cjs/{conditionalSlot-e874fbb0.js → conditionalSlot-92505fba.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-6b5d2de5.js');
-const observers = require('./observers-41837607.js');
+const observers = require('./observers-79bfb8bc.js');
 
 const observed = new Set();
 let mutationObserver;

package/dist/cjs/{observers-41837607.js → observers-79bfb8bc.js}

@@ -16,7 +16,11 @@ function createObserver(type, callback, options) {
   return new Observer(callback, options) ;
 }
 function getObserver(type) {
-  return (type === "intersection" ? IntersectionObserver : type === "mutation" ? MutationObserver : ResizeObserver);
+  return (type === "intersection"
+    ? window.IntersectionObserver
+    : type === "mutation"
+      ? window.MutationObserver
+      : window.ResizeObserver);
 }
 
 exports.createObserver = createObserver;

package/dist/collection/components/calcite-action/calcite-action.css

@@ -118,6 +118,7 @@
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   font-family: inherit;
   text-align: unset;
+  flex: 1 0 auto;
 }
 .button:hover {
   background-color: var(--calcite-ui-foreground-2);

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

@@ -74,6 +74,8 @@ export class CalciteInput {
     this.value = "";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    /** whether the value of the input was changed as a result of user typing or not */
+    this.internalValueChange = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -93,11 +95,15 @@ export class CalciteInput {
       }
     };
     this.clearInputValue = (nativeEvent) => {
-      this.setValue("", nativeEvent, true);
+      this.setValue({
+        committing: true,
+        nativeEvent,
+        value: ""
+      });
     };
     this.inputBlurHandler = () => {
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        this.setValue({ value: this.value });
       }
       this.calciteInputBlur.emit({
         element: this.childEl,
@@ -121,7 +127,10 @@ export class CalciteInput {
       if (this.disabled || this.readOnly) {
         return;
       }
-      this.setValue(nativeEvent.target.value, nativeEvent);
+      this.setValue({
+        nativeEvent,
+        value: nativeEvent.target.value
+      });
     };
     this.inputKeyDownHandler = (event) => {
       if (this.disabled || this.readOnly) {
@@ -141,11 +150,17 @@ export class CalciteInput {
         if (!isValidNumber(delocalizedValue)) {
           nativeEvent.preventDefault();
         }
-        this.setValue(parseNumberString(delocalizedValue), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: parseNumberString(delocalizedValue)
+        });
         this.childNumberEl.value = this.localizedValue;
       }
       else {
-        this.setValue(delocalizeNumberString(value, this.locale), nativeEvent);
+        this.setValue({
+          nativeEvent,
+          value: delocalizeNumberString(value, this.locale)
+        });
       }
     };
     this.inputNumberKeyDownHandler = (event) => {
@@ -241,18 +256,44 @@ export class CalciteInput {
     this.setChildNumberElRef = (el) => {
       this.childNumberEl = el;
     };
-    this.setLocalizedValue = (value) => {
-      this.localizedValue = localizeNumberString(value, this.locale, this.groupSeparator);
+    this.setInputValue = (newInputValue) => {
+      if (this.type === "text" && !this.childEl) {
+        return;
+      }
+      if (this.type === "number" && !this.childNumberEl) {
+        return;
+      }
+      this[`child${this.type === "number" ? "Number" : ""}El`].value = newInputValue;
+    };
+    this.setPreviousValue = (newPreviousValue) => {
+      this.previousValue =
+        this.type === "number"
+          ? isValidNumber(newPreviousValue)
+            ? newPreviousValue
+            : ""
+          : newPreviousValue;
     };
-    this.setValue = (value, nativeEvent, committing = false) => {
-      const previousValue = this.value;
+    this.setValue = ({ committing = false, nativeEvent, origin = "internal", value }) => {
+      const previousLocalizedValue = this.type === "number"
+        ? localizeNumberString(this.previousValue, this.locale, this.groupSeparator)
+        : "";
+      const sanitizedValue = this.type === "number" ? sanitizeNumberString(value) : value;
+      const newValue = this.type === "number" && value && !sanitizedValue
+        ? isValidNumber(this.previousValue)
+          ? this.previousValue
+          : ""
+        : sanitizedValue;
+      const newLocalizedValue = this.type === "number"
+        ? localizeNumberString(newValue, this.locale, this.groupSeparator)
+        : "";
+      this.internalValueChange = origin === "internal";
+      this.setPreviousValue(this.value);
+      this.value = newValue;
       if (this.type === "number") {
-        const sanitizedValue = sanitizeNumberString(value);
-        this.value = sanitizedValue;
-        this.setLocalizedValue(sanitizedValue);
+        this.localizedValue = newLocalizedValue;
       }
-      else {
-        this.value = value;
+      if (origin === "external") {
+        this.setInputValue(this.type === "number" ? newLocalizedValue : newValue);
       }
       if (nativeEvent) {
         const calciteInputInputEvent = this.calciteInputInput.emit({
@@ -261,8 +302,8 @@ export class CalciteInput {
           value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
-          this.value = previousValue;
-          this.setLocalizedValue(previousValue);
+          this.value = this.previousValue;
+          this.localizedValue = previousLocalizedValue;
         }
         else if (committing) {
           this.calciteInputChange.emit();
@@ -287,17 +328,20 @@ export class CalciteInput {
     this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
   }
   valueWatcher(newValue) {
-    if (newValue == null) {
-      this.value = "";
-      return;
-    }
-    if (this.type === "number" &&
-      this.localizedValue !== localizeNumberString(newValue, this.locale)) {
-      this.setLocalizedValue(newValue);
-    }
-    else if (this.childEl && this.childEl.value !== newValue) {
-      this.childEl.value = newValue;
+    if (!this.internalValueChange) {
+      this.setValue({
+        origin: "external",
+        value: newValue == null
+          ? ""
+          : this.type === "number"
+            ? isValidNumber(newValue)
+              ? newValue
+              : this.previousValue || ""
+            : newValue
+      });
+      this.warnAboutInvalidNumberValue(newValue);
     }
+    this.internalValueChange = false;
   }
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -320,13 +364,13 @@ export class CalciteInput {
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
-    if (this.type === "number" && this.value) {
-      if (isValidNumber(this.value)) {
-        this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
-      }
-      else {
-        this.value = "";
-      }
+    this.setPreviousValue(this.value);
+    if (this.type === "number") {
+      this.warnAboutInvalidNumberValue(this.value);
+      this.setValue({
+        origin: "loading",
+        value: isValidNumber(this.value) ? this.value : ""
+      });
     }
     connectLabel(this);
     connectForm(this);
@@ -348,7 +392,9 @@ export class CalciteInput {
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
-      this.value = oldValue;
+      this.setValue({
+        value: oldValue
+      });
       return false;
     }
     return true;
@@ -383,10 +429,16 @@ export class CalciteInput {
       : nudgedValue;
     const inputValPlaces = decimalPlaces(inputVal);
     const inputStepPlaces = decimalPlaces(inputStep);
-    this.setValue(finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces)), nativeEvent, true);
+    this.setValue({
+      committing: true,
+      nativeEvent,
+      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+    });
   }
   onFormReset() {
-    this.setValue(this.defaultValue);
+    this.setValue({
+      value: this.defaultValue
+    });
   }
   syncHiddenFormInput(input) {
     var _a, _b, _c, _d;
@@ -417,6 +469,11 @@ export class CalciteInput {
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");
   }
+  warnAboutInvalidNumberValue(value) {
+    if (this.type === "number" && value && !isValidNumber(value)) {
+      console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -183,6 +183,9 @@
   display: inline-block;
   width: 1em;
 }
+.thumb .handle__label.hyphen--wrap {
+  display: flex;
+}
 .thumb .handle{
   box-sizing: border-box;
   border-radius: 9999px;