From 7aafa2148d4ad2eda273db98beaba14338457c73 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 18 Aug 2022 10:03:12 -0700
Subject: [PATCH 1/3] fix(input): input no longer loses focus when Safari
 autofills the field

---
 src/demos/input.html | 1337 ++----------------------------------------
 1 file changed, 43 insertions(+), 1294 deletions(-)
diff --git a/src/demos/input.html b/src/demos/input.html
index 8516bce776d..d51d9977bc0 100644
--- a/src/demos/input.html
+++ b/src/demos/input.html
@@ -115,1313 +115,62 @@
     </script>
   </head>
 
-  <body>
-    <demo-dom-swapper>
-      <!--
-      ******************************************************************
-      * STANDARD
-      ******************************************************************
-    -->
-      <!-- Sizes -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text"></div>
-        <div class="child-flex font">Small</div>
-        <div class="child-flex font">Medium</div>
-        <div class="child-flex font">Large</div>
-      </div>
+  <p>This page is to test browser autofill of email and password fields.</p>
 
-      <!-- Standard -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Standard</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="s"></calcite-input>
-          </calcite-label>
-        </div>
+  <form id="calciteForm" action="auth.html" method="GET">
+    <calcite-label>
+      Regular input
+      <calcite-input name="regular"></calcite-input>
+    </calcite-label>
 
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="m"></calcite-input>
-          </calcite-label>
-        </div>
+    <calcite-label>
+      Email
+      <calcite-input type="email" name="email"></calcite-input>
+    </calcite-label>
 
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="l"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
+    <calcite-label>
+      Password
+      <calcite-input type="password" name="password"></calcite-input>
+    </calcite-label>
 
-      <!-- Standard with icon -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Standard with icon</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="s" icon="search"></calcite-input>
-          </calcite-label>
-        </div>
+    <calcite-button type="submit">submit</calcite-button>
+  </form>
 
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="m" icon="search"></calcite-input>
-          </calcite-label>
-        </div>
+  <button id="calciteCheckValueButton">Click me to display "value" of email and password inputs.</button>
 
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="l" icon="search"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Standard Prefix/Suffix -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Standard Prefix/Suffix</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="s"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="m"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="l"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Number Vertical -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Number Vertical</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="m" value="123" step="1"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Number Vertical Prefix/Suffix -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Number Vertical Prefix/Suffix</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Number Horizontal -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Number Horizontal</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Number Horizontal Prefix/Suffix -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Number Horizontal Prefix/Suffix</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Input Label
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              number-button-type="horizontal"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Color -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Color Picker</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Color input
-            <calcite-input type="color" value="#ff0000" scale="s"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            Color input
-            <calcite-input type="color" value="#ff0000" scale="m"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Color input
-            <calcite-input type="color" value="#ff0000" scale="l"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- File upload -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">File upload</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="s"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="m"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="l"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Text area -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Text area</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            File input
-            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="s"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            File input
-            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="m"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            File input
-            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="l"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <hr />
-
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Filled(can edit)</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Filled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-        <div class="child-flex">
-          <calcite-label>
-            Filled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Filled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Read Only (can't edit)</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Read only spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              read-only
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-        <div class="child-flex">
-          <calcite-label>
-            Read only spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              read-only
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Read only spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              read-only
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Disabled (can't edit)</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            Disabled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="s"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              disabled
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-        <div class="child-flex">
-          <calcite-label>
-            Disabled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="m"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              disabled
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-        <div class="child-flex">
-          <calcite-label scale="l">
-            Disabled spinner input
-            <calcite-input
-              type="number"
-              placeholder="Placeholder"
-              scale="l"
-              value="123"
-              step="1"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-              disabled
-            >
-            </calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-      <hr />
-      <!--
-      ******************************************************
-      * DATE PICKER INPUT
-      ******************************************************
-    -->
-
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">Date-picker</div>
-      </div>
-
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text"></div>
-        <div class="child-flex font">Small</div>
-        <div class="child-flex font">Medium</div>
-        <div class="child-flex font">Large</div>
-      </div>
-
-      <!-- Standard -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Text area</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value="2020-12-12"
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="s"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value="2020-12-12"
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="m"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value="2020-12-12"
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="l"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Range -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Range</div>
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="s"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="horizontal"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="m"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="horizontal"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="l"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="horizontal"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-      </div>
-
-      <!-- Range Vertical -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Range Vertical</div>
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="s"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="vertical"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="m"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="vertical"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input-date-picker
-            scale="l"
-            start="2020-12-12"
-            end="2020-12-16"
-            min="2016-08-09"
-            max="2023-12-18"
-            locale="en"
-            next-month-label="Next month"
-            prev-month-label="Previous month"
-            range=""
-            layout="vertical"
-            role="application"
-          ></calcite-input-date-picker>
-        </div>
-      </div>
-
-      <!-- Start day of locale -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Start day of locale</div>
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value=""
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="s"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value=""
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="m"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input-date-picker
-              icon="calendar"
-              type="date"
-              value=""
-              min="2016-08-09"
-              max="2023-12-18"
-              intl-next-month="Next month"
-              intl-prev-month="Previous month"
-              scale="l"
-            ></calcite-input-date-picker>
-          </calcite-label>
-        </div>
-      </div>
-
-      <hr />
-
-      <!--
-      ******************************************************
-      * TIME PICKER INPUT
-      ******************************************************
-    -->
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">Time-picker</div>
-      </div>
-
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text"></div>
-        <div class="child-flex font">Small</div>
-        <div class="child-flex font">Medium</div>
-        <div class="child-flex font">Large</div>
-      </div>
-
-      <!-- Standard -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Standard</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            <calcite-input icon type="time" step="1" value="01:02" scale="s"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input icon type="time" step="1" value="01:02" scale="m"></calcite-input>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            <calcite-input icon type="time" step="1" value="01:02" scale="l"></calcite-input>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- With seconds -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">With seconds</div>
-        <div class="child-flex">
-          <calcite-input icon type="time" step="1" value="01:02:03" scale="s"></calcite-input>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input icon type="time" step="1" value="01:02:03" scale="m"></calcite-input>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input icon type="time" step="1" value="01:02:03" scale="l"></calcite-input>
-        </div>
-      </div>
-
-      <!-- Null -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Null</div>
-        <div class="child-flex">
-          <calcite-input icon type="text" clearable scale="s"></calcite-input>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input icon type="text" clearable scale="m"></calcite-input>
-        </div>
-
-        <div class="child-flex">
-          <calcite-input icon type="text" clearable scale="l"></calcite-input>
-        </div>
-      </div>
-
-      <hr />
-
-      <!--
-      ******************************************************
-      * MESSAGE INFO
-      ******************************************************
-    -->
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">Messages</div>
-      </div>
-
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text"></div>
-        <div class="child-flex font">Small</div>
-        <div class="child-flex font">Medium</div>
-        <div class="child-flex font">Large</div>
-      </div>
-
-      <!-- Message Info -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Message Info</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="idle">
-            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message scale="s" active icon> Info message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="idle">
-            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message scale="m" active icon> Info message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="idle">
-            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message scale="l" active icon> Info message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Message Success -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Message Success</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="valid">
-            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message scale="s" active icon> Success message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="valid">
-            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message scale="m" active icon> Success message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="valid">
-            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message scale="l" active icon> Success message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Message Warning -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Message Warning</div>
-        <div class="child-flex">
-          <calcite-label scale="s">
-            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message scale="s" active icon="exclamation-mark-triangle">
-              Warning message
-            </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label>
-            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message scale="m" active icon="exclamation-mark-triangle">
-              Warning message
-            </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l">
-            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message scale="l" active icon="exclamation-mark-triangle">
-              Warning message
-            </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Message Error -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Message Error</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <hr />
-
-      <!--
-      ******************************************************
-      * ERROR STATES
-      ******************************************************
-    -->
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">Error states</div>
-      </div>
-
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text"></div>
-        <div class="child-flex font">Small</div>
-        <div class="child-flex font">Medium</div>
-        <div class="child-flex font">Large</div>
-      </div>
-
-      <!-- Standard -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Standard</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="s"></calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="m"></calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            Input Label
-            <calcite-input type="text" placeholder="Placeholder" scale="l"></calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Prefix/Suffix -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Prefix/Suffix</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="s"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="m"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            Input Label
-            <calcite-input
-              type="text"
-              placeholder="Placeholder"
-              scale="l"
-              prefix-text="Prefix"
-              suffix-text="Suffix"
-            ></calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Color -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Color</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            Input Label
-            <calcite-input type="color" value="#0000ff" scale="s"></calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            Input Label
-            <calcite-input type="color" value="#0000ff" scale="m"></calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            Input Label
-            <calcite-input type="color" value="#0000ff" scale="l"></calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- Number -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">Number</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="m" value="123" step="1"></calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            Input Label
-            <calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <!-- File upload -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">File upload</div>
-        <div class="child-flex">
-          <calcite-label scale="s" status="invalid">
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="s"></calcite-input>
-            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label status="invalid">
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="m"></calcite-input>
-            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-
-        <div class="child-flex">
-          <calcite-label scale="l" status="invalid">
-            File input
-            <calcite-input type="file" placeholder="No file chosen" scale="l"></calcite-input>
-            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
-          </calcite-label>
-        </div>
-      </div>
-
-      <hr />
-
-      <!--
-      ******************************************************************
-      * NUMBER INPUTS
-      ******************************************************************
-    -->
-      <demo-form>
-        <div class="parent-flex">
-          <div class="child-flex right-aligned-text"></div>
-          <div class="child-flex font header">Number input</div>
-        </div>
-
-        <form name="demo-form">
-          <demo-spacer>
-            <div id="locales"></div>
-          </demo-spacer>
-        </form>
-      </demo-form>
-
-      <script>
-        const localeDemoContainer = document.getElementById("locales");
-        locales.forEach((locale) => {
-          let localeEl = document.createElement("div");
-          localeEl.setAttribute("class", "locale");
-          let label = document.createElement("calcite-label");
-          label.setAttribute("for", locale);
-          label.appendChild(document.createTextNode(locale));
-          let input = document.createElement("calcite-input");
-          (locale === "ar" || locale === "he") && input.setAttribute("dir", "rtl");
-          input.setAttribute("id", locale);
-          input.setAttribute("locale", locale);
-          input.setAttribute("name", locale);
-          input.setAttribute("scale", "s");
-          input.setAttribute("type", "number");
-          input.setAttribute("value", "1234.56");
-          localeEl.appendChild(label);
-          localeEl.appendChild(input);
-          localeDemoContainer.appendChild(localeEl);
-
-          localeEl = document.createElement("div");
-          localeEl.setAttribute("class", "locale");
-          label = document.createElement("calcite-label");
-          label.setAttribute("for", locale);
-          label.appendChild(document.createTextNode(`${locale} (with group separator)`));
-          input = document.createElement("calcite-input");
-          (locale === "ar" || locale === "he") && input.setAttribute("dir", "rtl");
-          input.setAttribute("group-separator", true);
-          input.setAttribute("id", `${locale}-group-separator`);
-          input.setAttribute("locale", locale);
-          input.setAttribute("name", `${locale}-group-separator`);
-          input.setAttribute("scale", "s");
-          input.setAttribute("type", "number");
-          input.setAttribute("value", "1234.56");
-          localeEl.appendChild(label);
-          localeEl.appendChild(input);
-          localeDemoContainer.appendChild(localeEl);
-        });
-      </script>
-
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">
-          <calcite-button type="reset" width="half">Reset</calcite-button>
-        </div>
-      </div>
-
-      <hr />
-
-      <!--
-      ******************************************************************
-      * LOCALES
-      ******************************************************************
-    -->
-      <div class="parent-flex">
-        <div class="child-flex right-aligned-text"></div>
-        <div class="child-flex font header">Locales</div>
-      </div>
-
-      <!-- default locale number input -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">default locale number input</div>
-        <div class="child-flex">
-          <calcite-input type="number" name="default" placeholder="default locale number input"></calcite-input>
-        </div>
-      </div>
-
-      <!-- default locale number input with group -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">default locale number input with group</div>
-        <div class="child-flex">
-          <calcite-input
-            type="number"
-            name="default-group"
-            placeholder="default locale number input with group"
-            group-separator
-          ></calcite-input>
-        </div>
-      </div>
-
-      <!-- french number input -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">french number input</div>
-        <div class="child-flex">
-          <calcite-input type="number" name="french" locale="fr" placeholder="french number input"></calcite-input>
-        </div>
-      </div>
-
-      <!-- french number input with group separator -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">french number input with group separator</div>
-        <div class="child-flex">
-          <calcite-input
-            type="number"
-            name="french-group"
-            locale="fr"
-            group-separator
-            placeholder="french number input with group separator"
-          ></calcite-input>
-        </div>
-      </div>
+  <script>
+    calciteCheckValueButton.addEventListener("click", () => {
+      const email = calciteForm.elements.email.value;
+      const password = calciteForm.elements.password.value;
 
-      <!-- set to undefined -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">set to undefined</div>
-        <div class="child-flex">
-          <calcite-input type="number" name="set-to-undefined" placeholder="set to undefined"></calcite-input>
-        </div>
-      </div>
+      window.alert(`email: ${email}\npassword: ${password}`);
+    });
+  </script>
 
-      <!-- minlength=2 maxlength=3 -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">minlength=2 maxlength=3</div>
-        <div class="child-flex">
-          <calcite-input
-            type="number"
-            name="minmax"
-            minLength="2"
-            maxLength="3"
-            placeholder="minlength=2 maxlength=3"
-            required
-          ></calcite-input>
-        </div>
-      </div>
+  <p>Native inputs:</p>
 
-      <!-- no-locale number -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">no-locale number</div>
-        <div class="child-flex">
-          <calcite-input type="number" name="no-locale-number" placeholder="no-locale-number" value="4"></calcite-input>
-        </div>
-      </div>
+  <form id="nativeForm" action="auth.html" method="GET">
+    <label>
+      Email
+      <input type="email" name="emailNative" />
+    </label>
 
-      <!-- arabic -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">arabic</div>
-        <div class="child-flex">
-          <calcite-input type="number" locale="ar" name="arabic"></calcite-input>
-        </div>
-      </div>
+    <label>
+      Password
+      <input type="password" name="passwordNative" />
+    </label>
 
-      <!-- french-whole -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">french-whole</div>
-        <div class="child-flex">
-          <calcite-input type="number" locale="fr" name="french-whole" value="1234" step="1"></calcite-input>
-        </div>
-      </div>
+    <calcite-button type="submit">submit</calcite-button>
+  </form>
 
-      <!-- french-novalue -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">french-novalue</div>
-        <div class="child-flex">
-          <calcite-input
-            type="number"
-            locale="fr"
-            name="french-novalue"
-            placeholder="french-novalue"
-            step="1"
-          ></calcite-input>
-        </div>
-      </div>
+  <button id="nativeCheckValueButton">Click me to display "value" of email and password inputs.</button>
 
-      <!-- step-any -->
-      <div class="parent-flex">
-        <div class="child-flex font right-aligned-text">step-any</div>
-        <div class="child-flex">
-          <calcite-input type="number" name="step-any" step="any" placeholder='step="any"'></calcite-input>
-        </div>
-      </div>
-    </demo-dom-swapper>
-  </body>
   <script>
-    document.addEventListener("calciteInputInput", ({ detail }) => console.log(`input: ${detail.value}`));
+    nativeCheckValueButton.addEventListener("click", () => {
+      const email = nativeForm.elements.emailNative.value;
+      const password = nativeForm.elements.passwordNative.value;
+
+      window.alert(`email: ${email}\npassword: ${password}`);
+    });
   </script>
 </html>

From 555160d3884ed4c1d15e49af261025e0753030aa Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 25 Aug 2022 16:48:04 -0700
Subject: [PATCH 2/3] fix(input): preventing the input from losing focus on
 keypress in Safari when autofill occurs

---
 src/utils/form.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/utils/form.tsx b/src/utils/form.tsx
index ab861bf4936..37c29b5193a 100644
--- a/src/utils/form.tsx
+++ b/src/utils/form.tsx
@@ -292,6 +292,8 @@ function syncHiddenFormInput(component: FormComponent): void {
       docFrag = ownerDocument!.createDocumentFragment();
     }
 
+    input.inert = true;
+
     docFrag.append(input);
 
     // emits when hidden input is autofilled

From 071403a9aa5413a4e704a83c019eb11232b28c48 Mon Sep 17 00:00:00 2001
From: Erik Harper <eharperdicianno@esri.com>
Date: Thu, 25 Aug 2022 16:57:11 -0700
Subject: [PATCH 3/3] restoring input.html

---
 src/demos/input.html | 1337 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 1294 insertions(+), 43 deletions(-)

diff --git a/src/demos/input.html b/src/demos/input.html
index d51d9977bc0..8516bce776d 100644
--- a/src/demos/input.html
+++ b/src/demos/input.html
@@ -115,62 +115,1313 @@
     </script>
   </head>
 
-  <p>This page is to test browser autofill of email and password fields.</p>
+  <body>
+    <demo-dom-swapper>
+      <!--
+      ******************************************************************
+      * STANDARD
+      ******************************************************************
+    -->
+      <!-- Sizes -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text"></div>
+        <div class="child-flex font">Small</div>
+        <div class="child-flex font">Medium</div>
+        <div class="child-flex font">Large</div>
+      </div>
 
-  <form id="calciteForm" action="auth.html" method="GET">
-    <calcite-label>
-      Regular input
-      <calcite-input name="regular"></calcite-input>
-    </calcite-label>
+      <!-- Standard -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Standard</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="s"></calcite-input>
+          </calcite-label>
+        </div>
 
-    <calcite-label>
-      Email
-      <calcite-input type="email" name="email"></calcite-input>
-    </calcite-label>
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="m"></calcite-input>
+          </calcite-label>
+        </div>
 
-    <calcite-label>
-      Password
-      <calcite-input type="password" name="password"></calcite-input>
-    </calcite-label>
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="l"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
 
-    <calcite-button type="submit">submit</calcite-button>
-  </form>
+      <!-- Standard with icon -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Standard with icon</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="s" icon="search"></calcite-input>
+          </calcite-label>
+        </div>
 
-  <button id="calciteCheckValueButton">Click me to display "value" of email and password inputs.</button>
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="m" icon="search"></calcite-input>
+          </calcite-label>
+        </div>
 
-  <script>
-    calciteCheckValueButton.addEventListener("click", () => {
-      const email = calciteForm.elements.email.value;
-      const password = calciteForm.elements.password.value;
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="l" icon="search"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
 
-      window.alert(`email: ${email}\npassword: ${password}`);
-    });
-  </script>
+      <!-- Standard Prefix/Suffix -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Standard Prefix/Suffix</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="s"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+          </calcite-label>
+        </div>
 
-  <p>Native inputs:</p>
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="m"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+          </calcite-label>
+        </div>
 
-  <form id="nativeForm" action="auth.html" method="GET">
-    <label>
-      Email
-      <input type="email" name="emailNative" />
-    </label>
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="l"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
 
-    <label>
-      Password
-      <input type="password" name="passwordNative" />
-    </label>
+      <!-- Number Vertical -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Number Vertical</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input>
+          </calcite-label>
+        </div>
 
-    <calcite-button type="submit">submit</calcite-button>
-  </form>
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="m" value="123" step="1"></calcite-input>
+          </calcite-label>
+        </div>
 
-  <button id="nativeCheckValueButton">Click me to display "value" of email and password inputs.</button>
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
 
-  <script>
-    nativeCheckValueButton.addEventListener("click", () => {
-      const email = nativeForm.elements.emailNative.value;
-      const password = nativeForm.elements.passwordNative.value;
+      <!-- Number Vertical Prefix/Suffix -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Number Vertical Prefix/Suffix</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Number Horizontal -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Number Horizontal</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Number Horizontal Prefix/Suffix -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Number Horizontal Prefix/Suffix</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Input Label
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              number-button-type="horizontal"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Color -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Color Picker</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Color input
+            <calcite-input type="color" value="#ff0000" scale="s"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            Color input
+            <calcite-input type="color" value="#ff0000" scale="m"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Color input
+            <calcite-input type="color" value="#ff0000" scale="l"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- File upload -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">File upload</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="s"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="m"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="l"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Text area -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Text area</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            File input
+            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="s"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            File input
+            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="m"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            File input
+            <calcite-input type="textarea" placeholder="The quick brown fox jumped" scale="l"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <hr />
+
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Filled(can edit)</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Filled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+        <div class="child-flex">
+          <calcite-label>
+            Filled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Filled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Read Only (can't edit)</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Read only spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              read-only
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+        <div class="child-flex">
+          <calcite-label>
+            Read only spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              read-only
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Read only spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              read-only
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Disabled (can't edit)</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            Disabled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="s"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              disabled
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+        <div class="child-flex">
+          <calcite-label>
+            Disabled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="m"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              disabled
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+        <div class="child-flex">
+          <calcite-label scale="l">
+            Disabled spinner input
+            <calcite-input
+              type="number"
+              placeholder="Placeholder"
+              scale="l"
+              value="123"
+              step="1"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+              disabled
+            >
+            </calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+      <hr />
+      <!--
+      ******************************************************
+      * DATE PICKER INPUT
+      ******************************************************
+    -->
+
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">Date-picker</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text"></div>
+        <div class="child-flex font">Small</div>
+        <div class="child-flex font">Medium</div>
+        <div class="child-flex font">Large</div>
+      </div>
+
+      <!-- Standard -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Text area</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value="2020-12-12"
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="s"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value="2020-12-12"
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="m"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value="2020-12-12"
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="l"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Range -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Range</div>
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="s"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="horizontal"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="m"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="horizontal"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="l"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="horizontal"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+      </div>
+
+      <!-- Range Vertical -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Range Vertical</div>
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="s"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="vertical"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="m"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="vertical"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input-date-picker
+            scale="l"
+            start="2020-12-12"
+            end="2020-12-16"
+            min="2016-08-09"
+            max="2023-12-18"
+            locale="en"
+            next-month-label="Next month"
+            prev-month-label="Previous month"
+            range=""
+            layout="vertical"
+            role="application"
+          ></calcite-input-date-picker>
+        </div>
+      </div>
+
+      <!-- Start day of locale -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Start day of locale</div>
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value=""
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="s"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value=""
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="m"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input-date-picker
+              icon="calendar"
+              type="date"
+              value=""
+              min="2016-08-09"
+              max="2023-12-18"
+              intl-next-month="Next month"
+              intl-prev-month="Previous month"
+              scale="l"
+            ></calcite-input-date-picker>
+          </calcite-label>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      ******************************************************
+      * TIME PICKER INPUT
+      ******************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">Time-picker</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text"></div>
+        <div class="child-flex font">Small</div>
+        <div class="child-flex font">Medium</div>
+        <div class="child-flex font">Large</div>
+      </div>
+
+      <!-- Standard -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Standard</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            <calcite-input icon type="time" step="1" value="01:02" scale="s"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input icon type="time" step="1" value="01:02" scale="m"></calcite-input>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            <calcite-input icon type="time" step="1" value="01:02" scale="l"></calcite-input>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- With seconds -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">With seconds</div>
+        <div class="child-flex">
+          <calcite-input icon type="time" step="1" value="01:02:03" scale="s"></calcite-input>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input icon type="time" step="1" value="01:02:03" scale="m"></calcite-input>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input icon type="time" step="1" value="01:02:03" scale="l"></calcite-input>
+        </div>
+      </div>
+
+      <!-- Null -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Null</div>
+        <div class="child-flex">
+          <calcite-input icon type="text" clearable scale="s"></calcite-input>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input icon type="text" clearable scale="m"></calcite-input>
+        </div>
+
+        <div class="child-flex">
+          <calcite-input icon type="text" clearable scale="l"></calcite-input>
+        </div>
+      </div>
+
+      <hr />
 
-      window.alert(`email: ${email}\npassword: ${password}`);
-    });
+      <!--
+      ******************************************************
+      * MESSAGE INFO
+      ******************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">Messages</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text"></div>
+        <div class="child-flex font">Small</div>
+        <div class="child-flex font">Medium</div>
+        <div class="child-flex font">Large</div>
+      </div>
+
+      <!-- Message Info -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Message Info</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="idle">
+            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
+            <calcite-input-message scale="s" active icon> Info message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="idle">
+            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
+            <calcite-input-message scale="m" active icon> Info message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="idle">
+            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
+            <calcite-input-message scale="l" active icon> Info message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Message Success -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Message Success</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="valid">
+            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
+            <calcite-input-message scale="s" active icon> Success message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="valid">
+            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
+            <calcite-input-message scale="m" active icon> Success message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="valid">
+            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
+            <calcite-input-message scale="l" active icon> Success message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Message Warning -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Message Warning</div>
+        <div class="child-flex">
+          <calcite-label scale="s">
+            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
+            <calcite-input-message scale="s" active icon="exclamation-mark-triangle">
+              Warning message
+            </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label>
+            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
+            <calcite-input-message scale="m" active icon="exclamation-mark-triangle">
+              Warning message
+            </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l">
+            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
+            <calcite-input-message scale="l" active icon="exclamation-mark-triangle">
+              Warning message
+            </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Message Error -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Message Error</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            <calcite-input type="text" placeholder="Placeholder" scale="s"> </calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            <calcite-input type="text" placeholder="Placeholder" scale="m"> </calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            <calcite-input type="text" placeholder="Placeholder" scale="l"> </calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      ******************************************************
+      * ERROR STATES
+      ******************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">Error states</div>
+      </div>
+
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text"></div>
+        <div class="child-flex font">Small</div>
+        <div class="child-flex font">Medium</div>
+        <div class="child-flex font">Large</div>
+      </div>
+
+      <!-- Standard -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Standard</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="s"></calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="m"></calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            Input Label
+            <calcite-input type="text" placeholder="Placeholder" scale="l"></calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Prefix/Suffix -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Prefix/Suffix</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="s"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="m"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            Input Label
+            <calcite-input
+              type="text"
+              placeholder="Placeholder"
+              scale="l"
+              prefix-text="Prefix"
+              suffix-text="Suffix"
+            ></calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Color -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Color</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            Input Label
+            <calcite-input type="color" value="#0000ff" scale="s"></calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            Input Label
+            <calcite-input type="color" value="#0000ff" scale="m"></calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            Input Label
+            <calcite-input type="color" value="#0000ff" scale="l"></calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- Number -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">Number</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="s" value="123" step="1"></calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="m" value="123" step="1"></calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            Input Label
+            <calcite-input type="number" placeholder="Placeholder" scale="l" value="123" step="1"></calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <!-- File upload -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">File upload</div>
+        <div class="child-flex">
+          <calcite-label scale="s" status="invalid">
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="s"></calcite-input>
+            <calcite-input-message scale="s" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label status="invalid">
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="m"></calcite-input>
+            <calcite-input-message scale="m" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+
+        <div class="child-flex">
+          <calcite-label scale="l" status="invalid">
+            File input
+            <calcite-input type="file" placeholder="No file chosen" scale="l"></calcite-input>
+            <calcite-input-message scale="l" active icon> Error message </calcite-input-message>
+          </calcite-label>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      ******************************************************************
+      * NUMBER INPUTS
+      ******************************************************************
+    -->
+      <demo-form>
+        <div class="parent-flex">
+          <div class="child-flex right-aligned-text"></div>
+          <div class="child-flex font header">Number input</div>
+        </div>
+
+        <form name="demo-form">
+          <demo-spacer>
+            <div id="locales"></div>
+          </demo-spacer>
+        </form>
+      </demo-form>
+
+      <script>
+        const localeDemoContainer = document.getElementById("locales");
+        locales.forEach((locale) => {
+          let localeEl = document.createElement("div");
+          localeEl.setAttribute("class", "locale");
+          let label = document.createElement("calcite-label");
+          label.setAttribute("for", locale);
+          label.appendChild(document.createTextNode(locale));
+          let input = document.createElement("calcite-input");
+          (locale === "ar" || locale === "he") && input.setAttribute("dir", "rtl");
+          input.setAttribute("id", locale);
+          input.setAttribute("locale", locale);
+          input.setAttribute("name", locale);
+          input.setAttribute("scale", "s");
+          input.setAttribute("type", "number");
+          input.setAttribute("value", "1234.56");
+          localeEl.appendChild(label);
+          localeEl.appendChild(input);
+          localeDemoContainer.appendChild(localeEl);
+
+          localeEl = document.createElement("div");
+          localeEl.setAttribute("class", "locale");
+          label = document.createElement("calcite-label");
+          label.setAttribute("for", locale);
+          label.appendChild(document.createTextNode(`${locale} (with group separator)`));
+          input = document.createElement("calcite-input");
+          (locale === "ar" || locale === "he") && input.setAttribute("dir", "rtl");
+          input.setAttribute("group-separator", true);
+          input.setAttribute("id", `${locale}-group-separator`);
+          input.setAttribute("locale", locale);
+          input.setAttribute("name", `${locale}-group-separator`);
+          input.setAttribute("scale", "s");
+          input.setAttribute("type", "number");
+          input.setAttribute("value", "1234.56");
+          localeEl.appendChild(label);
+          localeEl.appendChild(input);
+          localeDemoContainer.appendChild(localeEl);
+        });
+      </script>
+
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">
+          <calcite-button type="reset" width="half">Reset</calcite-button>
+        </div>
+      </div>
+
+      <hr />
+
+      <!--
+      ******************************************************************
+      * LOCALES
+      ******************************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text"></div>
+        <div class="child-flex font header">Locales</div>
+      </div>
+
+      <!-- default locale number input -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">default locale number input</div>
+        <div class="child-flex">
+          <calcite-input type="number" name="default" placeholder="default locale number input"></calcite-input>
+        </div>
+      </div>
+
+      <!-- default locale number input with group -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">default locale number input with group</div>
+        <div class="child-flex">
+          <calcite-input
+            type="number"
+            name="default-group"
+            placeholder="default locale number input with group"
+            group-separator
+          ></calcite-input>
+        </div>
+      </div>
+
+      <!-- french number input -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">french number input</div>
+        <div class="child-flex">
+          <calcite-input type="number" name="french" locale="fr" placeholder="french number input"></calcite-input>
+        </div>
+      </div>
+
+      <!-- french number input with group separator -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">french number input with group separator</div>
+        <div class="child-flex">
+          <calcite-input
+            type="number"
+            name="french-group"
+            locale="fr"
+            group-separator
+            placeholder="french number input with group separator"
+          ></calcite-input>
+        </div>
+      </div>
+
+      <!-- set to undefined -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">set to undefined</div>
+        <div class="child-flex">
+          <calcite-input type="number" name="set-to-undefined" placeholder="set to undefined"></calcite-input>
+        </div>
+      </div>
+
+      <!-- minlength=2 maxlength=3 -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">minlength=2 maxlength=3</div>
+        <div class="child-flex">
+          <calcite-input
+            type="number"
+            name="minmax"
+            minLength="2"
+            maxLength="3"
+            placeholder="minlength=2 maxlength=3"
+            required
+          ></calcite-input>
+        </div>
+      </div>
+
+      <!-- no-locale number -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">no-locale number</div>
+        <div class="child-flex">
+          <calcite-input type="number" name="no-locale-number" placeholder="no-locale-number" value="4"></calcite-input>
+        </div>
+      </div>
+
+      <!-- arabic -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">arabic</div>
+        <div class="child-flex">
+          <calcite-input type="number" locale="ar" name="arabic"></calcite-input>
+        </div>
+      </div>
+
+      <!-- french-whole -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">french-whole</div>
+        <div class="child-flex">
+          <calcite-input type="number" locale="fr" name="french-whole" value="1234" step="1"></calcite-input>
+        </div>
+      </div>
+
+      <!-- french-novalue -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">french-novalue</div>
+        <div class="child-flex">
+          <calcite-input
+            type="number"
+            locale="fr"
+            name="french-novalue"
+            placeholder="french-novalue"
+            step="1"
+          ></calcite-input>
+        </div>
+      </div>
+
+      <!-- step-any -->
+      <div class="parent-flex">
+        <div class="child-flex font right-aligned-text">step-any</div>
+        <div class="child-flex">
+          <calcite-input type="number" name="step-any" step="any" placeholder='step="any"'></calcite-input>
+        </div>
+      </div>
+    </demo-dom-swapper>
+  </body>
+  <script>
+    document.addEventListener("calciteInputInput", ({ detail }) => console.log(`input: ${detail.value}`));
   </script>
 </html>
