@esri/calcite-components 1.0.0-next.342 → 1.0.0-next.346

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

@@ -228,18 +228,19 @@ export class CalciteInput {
     };
     this.setValue = (value, nativeEvent, committing = false) => {
       const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        const sanitizedValue = sanitizeNumberString(value);
+        this.value = sanitizedValue;
+        this.setLocalizedValue(sanitizedValue);
+      }
+      else {
+        this.value = value;
       }
       if (nativeEvent) {
-        if (this.type === "number") {
-          value = sanitizeNumberString(value);
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = previousValue;
@@ -305,7 +306,7 @@ export class CalciteInput {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
       }
       else {
-        this.value = undefined;
+        this.value = "";
       }
     }
     connectLabel(this);

package/dist/collection/components/calcite-radio-button/calcite-radio-button.css

@@ -98,7 +98,7 @@
 }
 
 :host([hovered]) .radio,
-:host(:not([checked])[focused]) .radio {
+:host(:not([checked])[focused]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
 
@@ -137,7 +137,7 @@
   box-shadow: inset 0 0 0 4px var(--calcite-ui-brand);
 }
 
-:host([scale=s][focused][checked]) .radio {
+:host([scale=s][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 
@@ -146,7 +146,7 @@
   box-shadow: inset 0 0 0 5px var(--calcite-ui-brand);
 }
 
-:host([scale=m][focused][checked]) .radio {
+:host([scale=m][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 
@@ -155,7 +155,7 @@
   box-shadow: inset 0 0 0 6px var(--calcite-ui-brand);
 }
 
-:host([scale=l][focused][checked]) .radio {
+:host([scale=l][focused][checked]:not([disabled])) .radio {
   box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
 }
 

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -115,8 +115,10 @@ export class CalciteRadioButton {
       this.calciteInternalRadioButtonBlur.emit();
     };
     this.onContainerFocus = () => {
-      this.focused = true;
-      this.calciteInternalRadioButtonFocus.emit();
+      if (!this.disabled) {
+        this.focused = true;
+        this.calciteInternalRadioButtonFocus.emit();
+      }
     };
   }
   checkedChanged(newChecked) {
@@ -139,7 +141,9 @@ export class CalciteRadioButton {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.containerEl);
+    if (!this.disabled) {
+      focusElement(this.containerEl);
+    }
   }
   onLabelClick(event) {
     if (!this.disabled && !this.hidden) {
@@ -192,6 +196,12 @@ export class CalciteRadioButton {
       }
     });
   }
+  getTabIndex() {
+    if (this.disabled) {
+      return undefined;
+    }
+    return this.checked || this.isDefaultSelectable() ? 0 : -1;
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -218,7 +228,7 @@ export class CalciteRadioButton {
     connectForm(this);
   }
   componentDidLoad() {
-    if (this.focused) {
+    if (this.focused && !this.disabled) {
       this.setFocus();
     }
   }
@@ -232,8 +242,9 @@ export class CalciteRadioButton {
   //
   // --------------------------------------------------------------------------
   render() {
+    const tabIndex = this.getTabIndex();
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown },
-      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 },
+      h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: tabIndex },
         h("div", { class: "radio" })),
       h(HiddenFormInputSlot, { component: this })));
   }

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -5,7 +5,6 @@
 import { Component, h, Prop, Element, Event, Host, Watch } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";
 import { SLOTS, CSS } from "./resources";
-import { createObserver } from "../../utils/observers";
 export class CalciteRadioGroupItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -19,30 +18,9 @@ export class CalciteRadioGroupItem {
     this.iconFlipRtl = false;
     /** optionally used with icon, select where to position the icon */
     this.iconPosition = "start";
-    this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
   }
   handleCheckedChange() {
     this.calciteRadioGroupItemChange.emit();
-    this.syncToExternalInput();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    var _a;
-    const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
-    if (inputProxy) {
-      this.value = inputProxy.value;
-      this.checked = inputProxy.checked;
-      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
-    }
-    this.inputProxy = inputProxy;
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     const { checked, value } = this;
@@ -63,29 +41,6 @@ export class CalciteRadioGroupItem {
         h("slot", { name: SLOTS.input }),
         this.icon && this.iconPosition === "end" ? iconEl : null)));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  syncFromExternalInput() {
-    if (this.inputProxy) {
-      this.value = this.inputProxy.value;
-      this.checked = this.inputProxy.checked;
-    }
-  }
-  syncToExternalInput() {
-    if (!this.inputProxy) {
-      return;
-    }
-    this.inputProxy.value = this.value;
-    if (this.checked) {
-      this.inputProxy.setAttribute("checked", "");
-    }
-    else {
-      this.inputProxy.removeAttribute("checked");
-    }
-  }
   static get is() { return "calcite-radio-group-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

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

@@ -88,46 +88,13 @@
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-:host(:not([embed])) {
-  padding: 0.75rem;
-  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
-}
-
-:host(:not([embed])[href]:hover) {
-  cursor: pointer;
-  box-shadow: 0 0 0 2px var(--calcite-ui-brand);
-}
-
-:host(:not([embed])[href]:active) {
-  box-shadow: 0 0 0 3px var(--calcite-ui-brand);
-}
-
-:host([icon][heading]:not([description]):not([embed])) {
-  padding: 0px;
-}
-
-:host([icon][heading]:not([description])) .icon {
-  display: flex;
-  justify-content: center;
-}
-:host([icon][heading]:not([description])) .large-visual {
-  text-align: center;
-}
-
-:host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
-  pointer-events: none;
-}
-
-.container {
+:host .container {
   pointer-events: none;
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 0.5rem;
 }
-
-.content {
+:host .content {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -135,8 +102,7 @@
   gap: 0.5rem;
   width: 10%;
 }
-
-.content-container {
+:host .content-container {
   display: flex;
   width: 100%;
   flex: 1 1 auto;
@@ -147,20 +113,18 @@
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
-.content-slot-container {
+:host .content-slot-container {
   display: flex;
   align-items: center;
   background-color: var(--calcite-ui-foreground-1);
 }
-.content-slot-container:first-child {
+:host .content-slot-container:first-child {
   padding-right: 0.75rem;
 }
-.content-slot-container:last-child {
+:host .content-slot-container:last-child {
   padding-left: 0.75rem;
 }
-
-.heading {
+:host .heading {
   pointer-events: none;
   overflow-wrap: break-word;
   font-size: var(--calcite-font-size--1);
@@ -170,19 +134,20 @@
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
-
-.large-visual {
+:host .large-visual {
   align-items: center;
+  text-align: center;
   min-height: 12rem;
 }
-.large-visual .icon {
+:host .large-visual .icon {
+  display: flex;
+  justify-content: center;
   align-self: flex-end;
 }
-.large-visual .content-container {
+:host .large-visual .content-container {
   align-self: center;
 }
-
-.description {
+:host .description {
   pointer-events: none;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
@@ -191,6 +156,29 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+:host(:not([embed])) {
+  padding: 0.75rem;
+  box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
+}
+
+:host(:not([embed])[href]:hover) {
+  cursor: pointer;
+  box-shadow: 0 0 0 2px var(--calcite-ui-brand);
+}
+
+:host(:not([embed])[href]:active) {
+  box-shadow: 0 0 0 3px var(--calcite-ui-brand);
+}
+
+:host([icon][heading]:not([description]):not([embed])) {
+  padding: 0px;
+}
+
+:host([disabled]) {
+  opacity: var(--calcite-ui-opacity-disabled);
+  pointer-events: none;
+}
+
 :host(:hover) .heading, :host([active]) .heading {
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/calcite-tile-select/calcite-tile-select.css

@@ -78,7 +78,10 @@
   display: none;
 }
 
-.root {
+:host {
+  display: block;
+}
+:host .container {
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: 0 0 0 1px var(--calcite-ui-border-2);
   box-sizing: border-box;
@@ -92,47 +95,14 @@
   vertical-align: top;
   z-index: 10;
 }
-
-:host {
-  display: block;
-}
-
-:host(:hover) .root {
-  z-index: 20;
-  box-shadow: 0 0 0 1px var(--calcite-ui-border-1);
-}
-
-:host([checked]) .root {
-  z-index: 30;
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
-}
-
-.root.focused {
+:host .container.checked {
   z-index: 30;
-}
-
-:host(:not([input-enabled]):hover) .root {
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
-
-:host(:not([input-enabled])) .root.focused {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);
-}
-
-:host([width=full]) .root {
-  display: flex;
-  max-width: none;
-}
-:host([width=full]) calcite-tile {
-  flex: 1 1 auto;
-}
-
-:host([input-alignment=start][width=full]) calcite-tile {
-  order: 1;
-  margin-inline-start: 0.75rem;
+:host .container.heading-only {
+  align-items: center;
 }
-
-:host(:not([input-enabled])) ::slotted(calcite-checkbox), :host(:not([input-enabled])) ::slotted(calcite-radio-button) {
+:host .container:not(.input-enabled) ::slotted(calcite-checkbox), :host .container:not(.input-enabled) ::slotted(calcite-radio-button) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -143,54 +113,64 @@
   white-space: nowrap;
   border-width: 0;
 }
-
-:host([heading]:not([icon]):not([description])) .root {
-  align-items: center;
+:host .container.focused:not(.disabled) {
+  z-index: 30;
 }
-
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) .root,
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) .root {
+:host .container.focused:not(.disabled):not(.input-enabled) {
+  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);
+}
+:host .container.input-enabled.input-alignment-start.width-auto.heading-only, :host .container.input-enabled.input-alignment-start.width-auto.icon-only, :host .container.input-enabled.input-alignment-start.width-auto.description-only, :host .container.input-enabled.input-alignment-start.width-auto.heading.description, :host .container.input-enabled.input-alignment-start.width-auto.icon.description, :host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description {
   display: inline-grid;
-  grid-gap: 0.75rem;
   grid-template-columns: max-content 1fr;
 }
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-checkbox),
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) ::slotted(calcite-radio-button),
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-checkbox),
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) ::slotted(calcite-radio-button) {
-  order: 0;
+:host .container.input-enabled.input-alignment-start.heading-only, :host .container.input-enabled.input-alignment-start.icon-only, :host .container.input-enabled.input-alignment-start.description-only, :host .container.input-enabled.input-alignment-start.heading.description, :host .container.input-enabled.input-alignment-start.icon.description, :host .container.input-enabled.input-alignment-start.heading.icon.description {
+  gap: 0.75rem;
 }
-:host([width=auto][input-enabled][input-alignment=start][icon][heading][description]) calcite-tile,
-:host([width=auto][input-enabled][input-alignment=start]:not([icon])[heading]:not([description])) calcite-tile {
+:host .container.input-enabled.input-alignment-start calcite-tile {
   order: 1;
 }
-
-:host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=start][icon][heading]:not([description])) ::slotted(calcite-radio-button) {
+:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-start.large-visual ::slotted(calcite-radio-button) {
   position: absolute;
-  top: 0.75rem;
+  inset-block-start: 0.75rem;
   inset-inline-start: 0.75rem;
 }
-
-:host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=end][icon][heading]) ::slotted(calcite-radio-button) {
-  position: absolute;
-  top: 0.75rem;
-  inset-inline-end: 0.75rem;
-}
-
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) .root {
+:host .container.input-enabled.input-alignment-end.width-auto.heading-only, :host .container.input-enabled.input-alignment-end.width-auto.icon-only {
   display: inline-grid;
   grid-gap: 0.75rem;
   grid-template-columns: max-content 1fr;
 }
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-checkbox),
-:host([input-enabled][input-alignment=end][heading]:not([icon]):not([description])) ::slotted(calcite-radio-button) {
-  justify-self: flex-end;
+:host .container.input-enabled.input-alignment-end.heading-only, :host .container.input-enabled.input-alignment-end.icon-only {
+  gap: 0.75rem;
+}
+:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.description-only ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.heading.description ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.icon.description ::slotted(calcite-radio-button), :host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.heading.icon.description ::slotted(calcite-radio-button) {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-checkbox),
+:host .container.input-enabled.input-alignment-end.large-visual ::slotted(calcite-radio-button) {
+  position: absolute;
+  inset-block-start: 0.75rem;
+  inset-inline-end: 0.75rem;
+}
+:host .container.width-full {
+  display: flex;
+  max-width: none;
+}
+:host .container.width-full calcite-tile {
+  flex: 1 1 auto;
 }
 
-:host([hidden]) {
-  display: none;
+:host(:hover) .container {
+  z-index: 20;
+}
+:host(:hover) .container:not(.input-enabled) {
+  box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
 
 :host([disabled]) {

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -4,6 +4,7 @@
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
+import { CSS } from "./resources";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -149,8 +150,26 @@ export class CalciteTileSelect {
     this.el.insertAdjacentElement("beforeend", this.input);
   }
   render() {
-    return (h("div", { class: { focused: this.focused, root: true } },
-      h("calcite-tile", { active: this.checked, description: this.description, embed: true, heading: this.heading, icon: this.icon }),
+    const { checked, description, disabled, focused, heading, icon, inputAlignment, inputEnabled, width } = this;
+    return (h("div", { class: {
+        checked,
+        container: true,
+        [CSS.description]: Boolean(description),
+        [CSS.descriptionOnly]: Boolean(!heading && !icon && description),
+        disabled,
+        focused,
+        [CSS.heading]: Boolean(heading),
+        [CSS.headingOnly]: heading && !icon && !description,
+        [CSS.icon]: Boolean(icon),
+        [CSS.iconOnly]: !heading && icon && !description,
+        [CSS.inputAlignmentEnd]: inputAlignment === "end",
+        [CSS.inputAlignmentStart]: inputAlignment === "start",
+        [CSS.inputEnabled]: inputEnabled,
+        [CSS.largeVisual]: heading && icon && !description,
+        [CSS.widthAuto]: width === "auto",
+        [CSS.widthFull]: width === "full"
+      } },
+      h("calcite-tile", { active: checked, description: description, embed: true, heading: heading, icon: icon }),
       h("slot", null)));
   }
   static get is() { return "calcite-tile-select"; }

package/dist/collection/components/calcite-tile-select/resources.js

@@ -0,0 +1,20 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ */
+export const CSS = {
+  checked: "checked",
+  description: "description",
+  descriptionOnly: "description-only",
+  disabled: "disabled",
+  heading: "heading",
+  headingOnly: "heading-only",
+  icon: "icon",
+  iconOnly: "icon-only",
+  inputAlignmentEnd: "input-alignment-end",
+  inputAlignmentStart: "input-alignment-start",
+  inputEnabled: "input-enabled",
+  largeVisual: "large-visual",
+  widthAuto: "width-auto",
+  widthFull: "width-full"
+};

package/dist/collection/utils/dom.js

@@ -21,7 +21,8 @@ export function nodeListToArray(nodeList) {
   return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
 }
 export function getThemeName(el) {
-  return closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}`) ? "dark" : "light";
+  const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
+  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
 }
 export function getElementDir(el) {
   const prop = "dir";

package/dist/collection/utils/number.js

@@ -8,7 +8,7 @@ export function isValidNumber(numberString) {
 }
 export function parseNumberString(numberString) {
   if (!numberString || !stringContainsNumbers(numberString)) {
-    return null;
+    return "";
   }
   let containsDecimal = false;
   const result = numberString
@@ -27,17 +27,24 @@ export function parseNumberString(numberString) {
   return isValidNumber(result) ? Number(result).toString() : null;
 }
 export function sanitizeDecimalString(decimalString) {
-  return (decimalString === null || decimalString === void 0 ? void 0 : decimalString.endsWith(".")) ? decimalString.replace(".", "") : decimalString;
+  const decimalAtEndOfStringButNotStart = /(?!^\.)\.$/;
+  return decimalString.replace(decimalAtEndOfStringButNotStart, "");
 }
 export function sanitizeNegativeString(negativeString) {
-  return negativeString.charAt(0) + negativeString.substring(1).replace(/-/g, "");
+  const allHyphensExceptTheStart = /(?!^-)-/g;
+  return negativeString.replace(allHyphensExceptTheStart, "");
 }
 export function sanitizeLeadingZeroString(zeroString) {
-  return zeroString.replace(/^0+$/, "0");
+  const allLeadingZerosOptionallyNegative = /^([-0])0+(?=\d)/;
+  return zeroString.replace(allLeadingZerosOptionallyNegative, "$1");
 }
 export function sanitizeNumberString(value) {
-  return value
-    ? Number(sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)))).toString()
+  const sanitizedValue = sanitizeNegativeString(sanitizeDecimalString(sanitizeLeadingZeroString(value)));
+  const isNegativeDecimalOnlyZeros = /^-\b0\b\.?0*$/;
+  return isValidNumber(sanitizedValue)
+    ? isNegativeDecimalOnlyZeros.test(sanitizedValue)
+      ? sanitizedValue
+      : Number(sanitizedValue).toString()
     : value;
 }
 function stringContainsNumbers(string) {

package/dist/components/calcite-checkbox2.js

@@ -120,7 +120,7 @@ let CalciteCheckbox = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 }, h("svg", { class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, h("svg", { class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get style() { return calciteCheckboxCss; }

package/dist/components/calcite-input2.js

@@ -262,18 +262,19 @@ let CalciteInput = class extends HTMLElement {
     };
     this.setValue = (value, nativeEvent, committing = false) => {
       const previousValue = this.value;
-      this.value = this.type === "number" ? sanitizeNumberString(value) : value;
       if (this.type === "number") {
-        this.setLocalizedValue(this.value);
+        const sanitizedValue = sanitizeNumberString(value);
+        this.value = sanitizedValue;
+        this.setLocalizedValue(sanitizedValue);
+      }
+      else {
+        this.value = value;
       }
       if (nativeEvent) {
-        if (this.type === "number") {
-          value = sanitizeNumberString(value);
-        }
         const calciteInputInputEvent = this.calciteInputInput.emit({
           element: this.childEl,
           nativeEvent,
-          value
+          value: this.value
         });
         if (calciteInputInputEvent.defaultPrevented) {
           this.value = previousValue;
@@ -339,7 +340,7 @@ let CalciteInput = class extends HTMLElement {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
       }
       else {
-        this.value = undefined;
+        this.value = "";
       }
     }
     connectLabel(this);