@esri/calcite-components 1.1.0-next.2 → 1.1.0

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -11,8 +11,7 @@ import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, defaultNumberingSystem, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { decimalPlaces } from "../../utils/math";
-import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -57,8 +56,8 @@ export class Input {
     this.emitChangeIfUserModified = () => {
       if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedValue) {
         this.calciteInputChange.emit();
+        this.setPreviousEmittedValue(this.value);
       }
-      this.previousEmittedValue = this.value;
     };
     this.inputBlurHandler = () => {
       this.calciteInternalInputBlur.emit();
@@ -243,23 +242,15 @@ export class Input {
       }
       this[`child${this.type === "number" ? "Number" : ""}El`].value = newInputValue;
     };
-    this.setPreviousEmittedValue = (newPreviousEmittedValue) => {
-      this.previousEmittedValue =
-        this.type === "number"
-          ? isValidNumber(newPreviousEmittedValue)
-            ? newPreviousEmittedValue
-            : ""
-          : newPreviousEmittedValue;
+    this.setPreviousEmittedValue = (value) => {
+      this.previousEmittedValue = this.normalizeValue(value);
     };
-    this.setPreviousValue = (newPreviousValue) => {
-      this.previousValue =
-        this.type === "number"
-          ? isValidNumber(newPreviousValue)
-            ? newPreviousValue
-            : ""
-          : newPreviousValue;
+    this.setPreviousValue = (value) => {
+      this.previousValue = this.normalizeValue(value);
     };
     this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
+      this.setPreviousValue(previousValue ?? this.value);
+      this.previousValueOrigin = origin;
       if (this.type === "number") {
         numberStringFormatter.numberFormatOptions = {
           locale: this.effectiveLocale,
@@ -280,20 +271,18 @@ export class Input {
           : sanitizedValue;
         const newLocalizedValue = numberStringFormatter.localize(newValue);
         this.localizedValue = newLocalizedValue;
-        this.setPreviousValue(previousValue || this.value);
-        this.previousValueOrigin = origin;
         this.userChangedValue = origin === "user" && this.value !== newValue;
         // don't sanitize the start of negative/decimal numbers, but
         // don't set value to an invalid number
         this.value = ["-", "."].includes(newValue) ? "" : newValue;
-        origin === "direct" && this.setInputValue(newLocalizedValue);
       }
       else {
-        this.setPreviousValue(previousValue || this.value);
-        this.previousValueOrigin = origin;
         this.userChangedValue = origin === "user" && this.value !== value;
         this.value = value;
-        origin === "direct" && this.setInputValue(value);
+      }
+      if (origin === "direct") {
+        this.setInputValue(value);
+        this.previousEmittedValue = value;
       }
       if (nativeEvent) {
         const calciteInputInputEvent = this.calciteInputInput.emit();
@@ -498,22 +487,26 @@ export class Input {
   }
   incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
     const { value } = this;
-    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-    const inputVal = value && value !== "" ? parseFloat(value) : 0;
     const adjustment = direction === "up" ? 1 : -1;
-    const nudgedValue = inputVal + inputStep * adjustment;
-    const finalValue = typeof inputMin === "number" && !isNaN(inputMin) && nudgedValue < inputMin
-      ? inputMin
-      : typeof inputMax === "number" && !isNaN(inputMax) && nudgedValue > inputMax
-        ? inputMax
-        : nudgedValue;
-    const inputValPlaces = decimalPlaces(inputVal);
-    const inputStepPlaces = decimalPlaces(inputStep);
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = new BigDecimal(value !== "" ? value : "0");
+    const nudgedValue = inputVal.add(`${inputStep * adjustment}`);
+    const nudgedValueBelowInputMin = () => typeof inputMin === "number" &&
+      !isNaN(inputMin) &&
+      nudgedValue.subtract(`${inputMin}`).isNegative;
+    const nudgedValueAboveInputMax = () => typeof inputMax === "number" &&
+      !isNaN(inputMax) &&
+      !nudgedValue.subtract(`${inputMax}`).isNegative;
+    const finalValue = nudgedValueBelowInputMin()
+      ? `${inputMin}`
+      : nudgedValueAboveInputMax()
+        ? `${inputMax}`
+        : nudgedValue.toString();
     this.setValue({
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+      value: finalValue
     });
   }
   onFormReset() {
@@ -523,13 +516,13 @@ export class Input {
     });
   }
   syncHiddenFormInput(input) {
-    if (this.type === "number") {
-      input.type = "number";
+    const { type } = this;
+    input.type = type;
+    if (type === "number") {
       input.min = this.min?.toString(10) ?? "";
       input.max = this.max?.toString(10) ?? "";
     }
-    else if (this.type === "text") {
-      input.type = "text";
+    else if (type === "text") {
       if (this.minLength != null) {
         input.minLength = this.minLength;
       }
@@ -537,9 +530,6 @@ export class Input {
         input.maxLength = this.maxLength;
       }
     }
-    else if (this.type === "password") {
-      input.type = "password";
-    }
   }
   setDisabledAction() {
     const slottedActionEl = getSlotted(this.el, "action");
@@ -557,6 +547,9 @@ export class Input {
       this.slottedActionElDisabledInternally = false;
     }
   }
+  normalizeValue(value) {
+    return this.type === "number" ? (isValidNumber(value) ? value : "") : value;
+  }
   warnAboutInvalidNumberValue(value) {
     if (this.type === "number" && value && !isValidNumber(value)) {
       console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
@@ -584,13 +577,17 @@ export class Input {
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.localizedValue,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setChildNumberElRef })) : null;
     const childEl = this.type !== "number"
       ? [
         h(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
             [CSS.editingEnabled]: this.editingEnabled,
             [CSS.inlineChild]: !!this.inlineEditableEl
-          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
+          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
+          // eslint-disable-next-line react/jsx-sort-props
+          ref: this.setChildElRef }),
         this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null
       ]
       : null;

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

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

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
@@ -409,18 +409,30 @@ export class InputDatePicker {
       locale: effectiveLocale,
       useGrouping: false
     };
-    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text" })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+    return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, h("div", { class: "input-wrapper",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setStartInput })), h("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open
-      }, ref: this.setFloatingEl }, h("div", { class: {
+      },
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setFloatingEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      },
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), h(HiddenFormInputSlot, { component: this })));
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, scale: this.scale, type: "text",
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setEndInput }))))), h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;

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

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

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */
@@ -106,7 +107,7 @@
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
   visibility: visible;
-  height: auto;
+  block-size: auto;
   opacity: 1;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }

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

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

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

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

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -11,8 +11,7 @@ import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
 import { connectLocalized, defaultNumberingSystem, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { decimalPlaces } from "../../utils/math";
-import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
@@ -53,10 +52,10 @@ export class InputNumber {
       });
     };
     this.emitChangeIfUserModified = () => {
-      if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedValue) {
+      if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedNumberValue) {
         this.calciteInputNumberChange.emit();
+        this.setPreviousEmittedNumberValue(this.value);
       }
-      this.previousEmittedValue = this.value;
     };
     this.inputNumberBlurHandler = () => {
       this.calciteInternalInputNumberBlur.emit();
@@ -220,13 +219,11 @@ export class InputNumber {
       }
       this.childNumberEl.value = newInputValue;
     };
-    this.setPreviousEmittedNumberValue = (newPreviousEmittedValue) => {
-      this.previousEmittedValue = isValidNumber(newPreviousEmittedValue)
-        ? newPreviousEmittedValue
-        : "";
+    this.setPreviousEmittedNumberValue = (value) => {
+      this.previousEmittedNumberValue = this.normalizeValue(value);
     };
-    this.setPreviousNumberValue = (newPreviousValue) => {
-      this.previousValue = isValidNumber(newPreviousValue) ? newPreviousValue : "";
+    this.setPreviousNumberValue = (value) => {
+      this.previousValue = this.normalizeValue(value);
     };
     this.setNumberValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
       numberStringFormatter.numberFormatOptions = {
@@ -246,13 +243,16 @@ export class InputNumber {
         : sanitizedValue;
       const newLocalizedValue = numberStringFormatter.localize(newValue);
       this.localizedValue = newLocalizedValue;
-      this.setPreviousNumberValue(previousValue || this.value);
+      this.setPreviousNumberValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && this.value !== newValue;
       // don't sanitize the start of negative/decimal numbers, but
       // don't set value to an invalid number
       this.value = ["-", "."].includes(newValue) ? "" : newValue;
-      origin === "direct" && this.setInputNumberValue(newLocalizedValue);
+      if (origin === "direct") {
+        this.setInputNumberValue(newLocalizedValue);
+        this.setPreviousEmittedNumberValue(newLocalizedValue);
+      }
       if (nativeEvent) {
         const calciteInputNumberInputEvent = this.calciteInputNumberInput.emit();
         if (calciteInputNumberInputEvent.defaultPrevented) {
@@ -424,22 +424,26 @@ export class InputNumber {
   }
   incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
     const { value } = this;
-    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-    const inputVal = value && value !== "" ? parseFloat(value) : 0;
     const adjustment = direction === "up" ? 1 : -1;
-    const nudgedValue = inputVal + inputStep * adjustment;
-    const finalValue = typeof inputMin === "number" && !isNaN(inputMin) && nudgedValue < inputMin
-      ? inputMin
-      : typeof inputMax === "number" && !isNaN(inputMax) && nudgedValue > inputMax
-        ? inputMax
-        : nudgedValue;
-    const inputValPlaces = decimalPlaces(inputVal);
-    const inputStepPlaces = decimalPlaces(inputStep);
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = new BigDecimal(value !== "" ? value : "0");
+    const nudgedValue = inputVal.add(`${inputStep * adjustment}`);
+    const nudgedValueBelowInputMin = () => typeof inputMin === "number" &&
+      !isNaN(inputMin) &&
+      nudgedValue.subtract(`${inputMin}`).isNegative;
+    const nudgedValueAboveInputMax = () => typeof inputMax === "number" &&
+      !isNaN(inputMax) &&
+      !nudgedValue.subtract(`${inputMax}`).isNegative;
+    const finalValue = nudgedValueBelowInputMin()
+      ? `${inputMin}`
+      : nudgedValueAboveInputMax()
+        ? `${inputMax}`
+        : nudgedValue.toString();
     this.setNumberValue({
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue.toFixed(Math.max(inputValPlaces, inputStepPlaces))
+      value: finalValue
     });
   }
   onFormReset() {
@@ -469,6 +473,9 @@ export class InputNumber {
       this.slottedActionElDisabledInternally = false;
     }
   }
+  normalizeValue(value) {
+    return isValidNumber(value) ? value : "";
+  }
   warnAboutInvalidNumberValue(value) {
     if (value && !isValidNumber(value)) {
       console.warn(`The specified value "${value}" cannot be parsed, or is out of range.`);
@@ -496,7 +503,9 @@ export class InputNumber {
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.localizedValue }));
+    const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.localizedValue,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setChildNumberElRef }));
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalDown
       : null, this.prefixText ? prefixText : null, h("div", { class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS.actionWrapper }, h("slot", { name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly

package/dist/collection/components/input-number/resources.js

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

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -52,8 +52,8 @@ export class InputText {
     this.emitChangeIfUserModified = () => {
       if (this.previousValueOrigin === "user" && this.value !== this.previousEmittedValue) {
         this.calciteInputTextChange.emit();
+        this.setPreviousEmittedValue(this.value);
       }
-      this.previousEmittedValue = this.value;
     };
     this.inputTextBlurHandler = () => {
       this.calciteInternalInputTextBlur.emit({
@@ -110,19 +110,20 @@ export class InputText {
       }
       this.childEl.value = newInputValue;
     };
-    this.setPreviousEmittedValue = (newPreviousEmittedValue) => {
-      this.previousEmittedValue = newPreviousEmittedValue;
+    this.setPreviousEmittedValue = (value) => {
+      this.previousEmittedValue = value;
     };
-    this.setPreviousValue = (newPreviousValue) => {
-      this.previousValue = newPreviousValue;
+    this.setPreviousValue = (value) => {
+      this.previousValue = value;
     };
     this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
-      this.setPreviousValue(previousValue || this.value);
+      this.setPreviousValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       this.userChangedValue = origin === "user" && value !== this.value;
       this.value = value;
       if (origin === "direct") {
         this.setInputValue(value);
+        this.setPreviousEmittedValue(value);
       }
       if (nativeEvent) {
         const calciteInputTextInputEvent = this.calciteInputTextInput.emit();
@@ -292,7 +293,9 @@ export class InputText {
     const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
         [CSS.editingEnabled]: this.editingEnabled,
         [CSS.inlineChild]: !!this.inlineEditableEl
-      }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
+      }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setChildElRef }));
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, h("div", { class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS.actionWrapper }, h("slot", { name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { component: this }))));
   }
   static get is() { return "calcite-input-text"; }

package/dist/collection/components/input-text/resources.js

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

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
@@ -271,7 +271,13 @@ export class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { focusTrapDisabled: true, id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messagesOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, scale: this.scale, step: this.step,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setCalciteInputEl })), h("calcite-popover", { focusTrapDisabled: true, id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messagesOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, value: this.value,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this })));
   }
   static get is() { return "calcite-input-time-picker"; }
   static get encapsulation() { return "shadow"; }

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

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.1.0-next.2
+ * v1.1.0
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

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

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

package/dist/collection/components/link/link.css

@@ -69,9 +69,10 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0;
+    --calcite-internal-duration-factor: 0.01;
   }
 }
+/* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
 */