diff --git a/agnosticui-svelte/.storybook/preview.js b/agnosticui-svelte/.storybook/preview.js
index 4cfa9a745..ad949c064 100644
--- a/agnosticui-svelte/.storybook/preview.js
+++ b/agnosticui-svelte/.storybook/preview.js
@@ -6,7 +6,7 @@ export const parameters = {
   docs: {
     theme: yourTheme,
   },
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: "^on.*" },
 };
 
 require('!style-loader!css-loader!../src/css/common.min.css')
diff --git a/agnosticui-svelte/copystyles.js b/agnosticui-svelte/copystyles.js
index e55600f2b..1c29ad81a 100644
--- a/agnosticui-svelte/copystyles.js
+++ b/agnosticui-svelte/copystyles.js
@@ -81,6 +81,20 @@ const headerNavItemSvelte = fs.readFileSync('./src/stories/HeaderNavItem.svelte'
 const headerNavItemSynchronized = headerNavItemSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);
 fs.writeFileSync('./src/stories/HeaderNavItem.svelte', headerNavItemSynchronized, 'utf8');
 
+
+/**
+ * Inputs 
+ */
+css = fs.readFileSync('../agnosticui-css/input.css', 'utf8');
+const inputSvelte = fs.readFileSync('./src/stories/Input.svelte', 'utf8');
+const inputSynchronized = inputSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);
+fs.writeFileSync('./src/stories/Input.svelte', inputSynchronized, 'utf8');
+
+css = fs.readFileSync('../agnosticui-css/inputaddonitem.css', 'utf8');
+const inputAddonItemSvelte = fs.readFileSync('./src/stories/InputAddonItem.svelte', 'utf8');
+const inputAddonItemSynchronized = inputAddonItemSvelte.replace(styleRegex, `<style>\n${css}\n</style>`);
+fs.writeFileSync('./src/stories/InputAddonItem.svelte', inputAddonItemSynchronized, 'utf8');
+
 /**
  * FlexGrid (grid, row, col all copied over. Svelte SFC requires this so that each
  * component gets it's own CSS <style>...</style> stuff copied over)
diff --git a/agnosticui-svelte/package.json b/agnosticui-svelte/package.json
index 8b8fb85d4..57100eaaf 100644
--- a/agnosticui-svelte/package.json
+++ b/agnosticui-svelte/package.json
@@ -41,6 +41,7 @@
     "rollup-plugin-svelte": "^6.0.0",
     "rollup-plugin-terser": "^7.0.0",
     "svelte": "^3.24.1",
+    "svelte-jester": "^1.1.5",
     "svelte-loader": "^2.13.6"
   },
   "dependencies": {
@@ -49,7 +50,7 @@
   "jest": {
     "transform": {
       "^.+\\.js$": "babel-jest",
-      "^.+\\.svelte$": "jest-transform-svelte"
+      "^.+\\.svelte$": "svelte-jester"
     },
     "moduleFileExtensions": [
       "js",
@@ -69,4 +70,4 @@
       "/storybook-static/"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
index f8abe8c5f..0a0645e6d 100644
--- a/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
+++ b/agnosticui-svelte/src/__snapshots__/Storyshots.test.js.snap
@@ -5,10 +5,12 @@ exports[`Storyshots Button Button Base 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn-base"
+    class="btn-base svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -20,10 +22,12 @@ exports[`Storyshots Button Button Blank 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-blank"
+    class="btn btn-blank svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -35,10 +39,12 @@ exports[`Storyshots Button Button Overrides 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn my-custom-css-klass"
+    class="btn my-custom-css-klass svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -50,10 +56,12 @@ exports[`Storyshots Button Button Type Reset 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn"
+    class="btn svelte-s3fba6"
     type="reset"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -65,10 +73,12 @@ exports[`Storyshots Button Button Type Submit 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn"
+    class="btn svelte-s3fba6"
     type="submit"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -80,10 +90,12 @@ exports[`Storyshots Button Default 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn"
+    class="btn svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -95,10 +107,12 @@ exports[`Storyshots Button Default Bordered 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-bordered"
+    class="btn btn-bordered svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -110,10 +124,12 @@ exports[`Storyshots Button Default Bordered Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-bordered btn-rounded"
+    class="btn btn-bordered btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -125,10 +141,12 @@ exports[`Storyshots Button Default Circle 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-circle btn-rounded"
+    class="btn btn-circle btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -140,10 +158,12 @@ exports[`Storyshots Button Default Raised 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-raised"
+    class="btn btn-raised svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -155,10 +175,12 @@ exports[`Storyshots Button Default Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-rounded"
+    class="btn btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -170,10 +192,13 @@ exports[`Storyshots Button Disabled 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn disabled"
+    class="btn disabled svelte-s3fba6"
+    disabled=""
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -186,25 +211,25 @@ exports[`Storyshots Button Groups Button Group 1`] = `
 >
   <div
     aria-label="Appropriate label for your button group"
-    class="btn-group"
+    class="btn-group svelte-olha2q"
     role="group"
   >
     <button
-      class="btn"
+      class="btn svelte-s3fba6"
       type="button"
     >
       One
     </button>
      
     <button
-      class="btn"
+      class="btn svelte-s3fba6"
       type="button"
     >
       Two
     </button>
      
     <button
-      class="btn"
+      class="btn svelte-s3fba6"
       type="button"
     >
       Three
@@ -213,25 +238,25 @@ exports[`Storyshots Button Groups Button Group 1`] = `
    
   <div
     aria-label="Appropriate label for your button group"
-    class="btn-group"
+    class="btn-group svelte-olha2q"
     role="group"
   >
     <button
-      class="btn btn-primary"
+      class="btn btn-primary svelte-s3fba6"
       type="button"
     >
       One
     </button>
      
     <button
-      class="btn btn-primary"
+      class="btn btn-primary svelte-s3fba6"
       type="button"
     >
       Two
     </button>
      
     <button
-      class="btn btn-primary"
+      class="btn btn-primary svelte-s3fba6"
       type="button"
     >
       Three
@@ -240,25 +265,25 @@ exports[`Storyshots Button Groups Button Group 1`] = `
    
   <div
     aria-label="Appropriate label for your button group"
-    class="btn-group"
+    class="btn-group svelte-olha2q"
     role="group"
   >
     <button
-      class="btn btn-secondary"
+      class="btn btn-secondary svelte-s3fba6"
       type="button"
     >
       One
     </button>
      
     <button
-      class="btn btn-secondary"
+      class="btn btn-secondary svelte-s3fba6"
       type="button"
     >
       Two
     </button>
      
     <button
-      class="btn btn-secondary"
+      class="btn btn-secondary svelte-s3fba6"
       type="button"
     >
       Three
@@ -271,25 +296,25 @@ exports[`Storyshots Button Groups Button Group 1`] = `
    
   <div
     aria-label="Appropriate label for your button group"
-    class="btn-group"
+    class="btn-group svelte-olha2q"
     role="group"
   >
     <button
-      class="btn btn-primary btn-bordered"
+      class="btn btn-primary btn-bordered svelte-s3fba6"
       type="button"
     >
       One
     </button>
      
     <button
-      class="btn btn-primary btn-bordered"
+      class="btn btn-primary btn-bordered svelte-s3fba6"
       type="button"
     >
       Two
     </button>
      
     <button
-      class="btn btn-primary btn-bordered"
+      class="btn btn-primary btn-bordered svelte-s3fba6"
       type="button"
     >
       Three
@@ -298,25 +323,25 @@ exports[`Storyshots Button Groups Button Group 1`] = `
    
   <div
     aria-label="Appropriate label for your button group"
-    class="btn-group"
+    class="btn-group svelte-olha2q"
     role="group"
   >
     <button
-      class="btn btn-secondary btn-bordered"
+      class="btn btn-secondary btn-bordered svelte-s3fba6"
       type="button"
     >
       One
     </button>
      
     <button
-      class="btn btn-secondary btn-bordered"
+      class="btn btn-secondary btn-bordered svelte-s3fba6"
       type="button"
     >
       Two
     </button>
      
     <button
-      class="btn btn-secondary btn-bordered"
+      class="btn btn-secondary btn-bordered svelte-s3fba6"
       type="button"
     >
       Three
@@ -333,14 +358,14 @@ exports[`Storyshots Button Icons Button Icons 1`] = `
     style="display: inline-flex;"
   >
     <button
-      class="btn btn-primary btn-rounded"
+      class="btn btn-primary btn-rounded svelte-s3fba6"
       type="button"
     >
       Download
     
       <svg
         aria-hidden="true"
-        class="btn-icon-right"
+        class="btn-icon-right svelte-12skoq3"
         data-custom-icon="true"
         fill="currentColor"
         focusable="false"
@@ -363,12 +388,12 @@ exports[`Storyshots Button Icons Button Icons 1`] = `
     </button>
      
     <button
-      class="btn btn-primary btn-rounded"
+      class="btn btn-primary btn-rounded svelte-s3fba6"
       type="button"
     >
       <svg
         aria-hidden="true"
-        class="btn-icon-left"
+        class="btn-icon-left svelte-12skoq3"
         data-custom-icon="true"
         fill="currentColor"
         focusable="false"
@@ -400,10 +425,12 @@ exports[`Storyshots Button Large 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-large"
+    class="btn btn-large svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -415,10 +442,12 @@ exports[`Storyshots Button Primary 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary"
+    class="btn btn-primary svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -430,10 +459,12 @@ exports[`Storyshots Button Primary Block 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-block"
+    class="btn btn-primary btn-block svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -445,10 +476,12 @@ exports[`Storyshots Button Primary Bordered 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-bordered"
+    class="btn btn-primary btn-bordered svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -460,10 +493,12 @@ exports[`Storyshots Button Primary Bordered Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-bordered btn-rounded"
+    class="btn btn-primary btn-bordered btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -475,10 +510,12 @@ exports[`Storyshots Button Primary Circle 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-bordered btn-circle"
+    class="btn btn-primary btn-bordered btn-circle svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -490,10 +527,12 @@ exports[`Storyshots Button Primary Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-rounded"
+    class="btn btn-primary btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -505,10 +544,12 @@ exports[`Storyshots Button Primary Rounded Raised 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-primary btn-rounded btn-raised"
+    class="btn btn-primary btn-rounded btn-raised svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -520,10 +561,12 @@ exports[`Storyshots Button Primary Test 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-circle"
+    class="btn btn-circle svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -535,10 +578,12 @@ exports[`Storyshots Button Secondary 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary"
+    class="btn btn-secondary svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -550,10 +595,12 @@ exports[`Storyshots Button Secondary Bordered 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary btn-bordered"
+    class="btn btn-secondary btn-bordered svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -565,10 +612,12 @@ exports[`Storyshots Button Secondary Bordered Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary btn-bordered btn-rounded"
+    class="btn btn-secondary btn-bordered btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -580,10 +629,12 @@ exports[`Storyshots Button Secondary Circle 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary btn-circle"
+    class="btn btn-secondary btn-circle svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -595,10 +646,12 @@ exports[`Storyshots Button Secondary Rounded 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary btn-rounded"
+    class="btn btn-secondary btn-rounded svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -610,10 +663,12 @@ exports[`Storyshots Button Secondary Rounded Raised 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-secondary btn-rounded btn-raised"
+    class="btn btn-secondary btn-rounded btn-raised svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -625,10 +680,12 @@ exports[`Storyshots Button Small 1`] = `
   class="storybook-snapshot-container"
 >
   <button
-    class="btn btn-small"
+    class="btn btn-small svelte-s3fba6"
     type="button"
   >
-    <span>
+    <span
+      class="svelte-c6swhi"
+    >
       Go
     </span>
   </button>
@@ -640,10 +697,10 @@ exports[`Storyshots Cards Card 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="card"
+    class="card svelte-1ymuaur"
   >
     <div
-      class="custom-wrap"
+      class="custom-wrap svelte-o6i4ru"
       style="flex: 1;"
     >
       <h1>
@@ -652,7 +709,7 @@ exports[`Storyshots Cards Card 1`] = `
     </div>
      
     <div
-      class="custom-wrap"
+      class="custom-wrap svelte-o6i4ru"
       style="flex: 2;"
     >
       <p>
@@ -683,10 +740,10 @@ exports[`Storyshots Cards Card 1`] = `
   </div>
    
   <div
-    class="card card-stacked"
+    class="card card-stacked svelte-1ymuaur"
   >
     <div
-      class="custom-wrap"
+      class="custom-wrap svelte-o6i4ru"
     >
       <h1
         style="flex: 1; display: flex; justify-content: center;"
@@ -725,10 +782,10 @@ exports[`Storyshots Cards Card 1`] = `
   </div>
    
   <div
-    class="card-base"
+    class="card-base svelte-1ymuaur"
   >
     <div
-      class="custom-card custom-wrap"
+      class="custom-card custom-wrap svelte-o6i4ru"
     >
       <h1>
         Card With No Skinning
@@ -759,23 +816,27 @@ exports[`Storyshots FlexGrid Grid 1`] = `
 >
   <section>
     <div
-      class="flexgrid-container custom-grid-klass"
+      class="flexgrid-container custom-grid-klass svelte-6z56j8"
     >
       <div
-        class="row"
+        class="row svelte-8v8gae"
       >
         <div
-          class="col-xs-12 col-xs-12 col-sm-4 col-lg-6 col-xl-4"
+          class="col-xs-12 col-xs-12 col-sm-4 col-lg-6 col-xl-4 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             xs=12 sm=4 lg=6 xl=4
           </p>
         </div>
          
         <div
-          class="col-xs-12 col-xs-12 col-sm-4 col-lg-6 col-xl-8"
+          class="col-xs-12 col-xs-12 col-sm-4 col-lg-6 col-xl-8 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             xs=12 sm=4 lg=6 xl=8
           </p>
         </div>
@@ -785,10 +846,10 @@ exports[`Storyshots FlexGrid Grid 1`] = `
    
   <section>
     <div
-      class="flexgrid-container customKlass1 customKlass2"
+      class="flexgrid-container customKlass1 customKlass2 svelte-6z56j8"
     >
       <div
-        class="row reverse-true"
+        class="row reverse-true svelte-8v8gae"
       >
         <h1>
           test
@@ -799,39 +860,47 @@ exports[`Storyshots FlexGrid Grid 1`] = `
    
   <section>
     <div
-      class="flexgrid-container"
+      class="flexgrid-container svelte-6z56j8"
     >
       <div
-        class="row"
+        class="row svelte-8v8gae"
       >
         <div
-          class="col-sm-2"
+          class="col-sm-2 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             sm="2"
           </p>
         </div>
          
         <div
-          class="col-sm-2 col-sm-offset-1"
+          class="col-sm-2 col-sm-offset-1 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             sm=2 smOffset=1
           </p>
         </div>
          
         <div
-          class="col-sm-2 col-sm-offset-1"
+          class="col-sm-2 col-sm-offset-1 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             sm=2 smOffset=1
           </p>
         </div>
          
         <div
-          class="col-sm-2 col-sm-offset-2"
+          class="col-sm-2 col-sm-offset-2 svelte-1o4mcc5"
         >
-          <p>
+          <p
+            class="svelte-1837d7s"
+          >
             sm=2 smOffset=2
           </p>
         </div>
@@ -845,10 +914,10 @@ exports[`Storyshots FlexGrid Grid 1`] = `
     </h1>
      
     <div
-      class="flexgrid-container custom-grid-klass"
+      class="flexgrid-container custom-grid-klass svelte-6z56j8"
     >
       <div
-        class="row start-sm center-md end-lg top-xl middle-xs bottom-xs around-sm between-lg"
+        class="row start-sm center-md end-lg top-xl middle-xs bottom-xs around-sm between-lg svelte-8v8gae"
       />
     </div>
   </section>
@@ -860,12 +929,13 @@ exports[`Storyshots Header Example Header Test 1`] = `
   class="storybook-snapshot-container"
 >
   <div
-    class="header header-sticky"
+    class="header header-sticky svelte-1yhgofs"
   >
     <div
-      class="header-content"
+      class="header-content svelte-1yhgofs"
     >
       <div
+        class="svelte-13f3vfs"
         slot="logoleft"
       >
         logo left
@@ -874,12 +944,13 @@ exports[`Storyshots Header Example Header Test 1`] = `
        
       <nav>
         <ul
-          class="header-nav nav-overrides"
+          class="header-nav nav-overrides svelte-xmqeos"
         >
           <li
-            class="header-nav-item"
+            class="header-nav-item svelte-luhjws"
           >
             <a
+              class="svelte-13f3vfs"
               href="#home"
             >
               Home
@@ -887,9 +958,10 @@ exports[`Storyshots Header Example Header Test 1`] = `
           </li>
            
           <li
-            class="header-nav-item"
+            class="header-nav-item svelte-luhjws"
           >
             <a
+              class="svelte-13f3vfs"
               href="#products"
             >
               Products
@@ -897,9 +969,10 @@ exports[`Storyshots Header Example Header Test 1`] = `
           </li>
            
           <li
-            class="header-nav-item"
+            class="header-nav-item svelte-luhjws"
           >
             <a
+              class="svelte-13f3vfs"
               href="#services"
             >
               Services
@@ -907,9 +980,10 @@ exports[`Storyshots Header Example Header Test 1`] = `
           </li>
            
           <li
-            class="header-nav-item"
+            class="header-nav-item svelte-luhjws"
           >
             <a
+              class="svelte-13f3vfs"
               href="#about"
             >
               About
@@ -920,6 +994,7 @@ exports[`Storyshots Header Example Header Test 1`] = `
        
        
       <div
+        class="svelte-13f3vfs"
         slot="logoright"
       >
         logo right
@@ -929,12 +1004,524 @@ exports[`Storyshots Header Example Header Test 1`] = `
 </section>
 `;
 
+exports[`Storyshots Input Addons Example Input Addons Test 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Input with addons
+    </label>
+     
+    <div
+      class="input-addon-container svelte-cuoxyv"
+    >
+      <div
+        slot="addonLeft"
+      >
+        <div
+          class="input-addon-left svelte-cf9ws0"
+        >
+          <span>
+            L
+          </span>
+        </div>
+      </div>
+       
+      <input
+        class="input input-has-left-addon input-has-right-addon svelte-cuoxyv"
+        id="myUniqueId"
+        type="text"
+      />
+       
+      <div
+        slot="addonRight"
+      >
+        <div
+          class="input-addon-right svelte-cf9ws0"
+        >
+          <span>
+            R
+          </span>
+        </div>
+      </div>
+    </div>
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Default 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Default input
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Disabled 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Disabled input
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      disabled=""
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Email 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Email
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="email"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Help Text 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Help text
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+    <span
+      class="field-help svelte-cuoxyv"
+    >
+      Some useful help text.
+    </span>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Invalid Text 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-error svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Invalid text
+    </label>
+     
+    <input
+      class="input input-error svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+    <span
+      class="field-error svelte-cuoxyv"
+    >
+      This field has errors.
+    </span>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Invalid Text Large 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-error label-large svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Invalid text large
+    </label>
+     
+    <input
+      class="input input-error input-large svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+    <span
+      class="field-error-large svelte-cuoxyv"
+    >
+      This field has errors.
+    </span>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Invalid Text Small 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-error label-small svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Invalid text small
+    </label>
+     
+    <input
+      class="input input-error input-small svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+    <span
+      class="field-error-small svelte-cuoxyv"
+    >
+      This field has errors.
+    </span>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Large 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-large svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Large input
+    </label>
+     
+    <input
+      class="input input-large svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Number 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Number
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="number"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Password 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Password
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="password"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Rounded input
+    </label>
+     
+    <input
+      class="input input-rounded svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Search 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Search
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="search"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Small 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-small svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Small input
+    </label>
+     
+    <input
+      class="input input-small svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Telephone 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Telephone
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="tel"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Textarea 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Textarea
+    </label>
+     
+    <textarea
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Textarea Large 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-large svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Textarea small
+    </label>
+     
+    <textarea
+      class="input input-large svelte-cuoxyv"
+      cols="5"
+      id="myUniqueId"
+      rows="10"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Textarea Small 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label label-small svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Textarea small
+    </label>
+     
+    <textarea
+      class="input input-small svelte-cuoxyv"
+      cols="5"
+      id="myUniqueId"
+      rows="10"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input URL 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      URL
+    </label>
+     
+    <input
+      class="input svelte-cuoxyv"
+      id="myUniqueId"
+      type="url"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Underlined 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Underlined input
+    </label>
+     
+    <input
+      class="input input-underlined svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
+exports[`Storyshots Input Underlined With Background 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div>
+    <label
+      class="label svelte-cuoxyv"
+      for="myUniqueId"
+    >
+      Underlined with background input
+    </label>
+     
+    <input
+      class="input input-underlined input-underlined-bg svelte-cuoxyv"
+      id="myUniqueId"
+      type="text"
+    />
+     
+  </div>
+</section>
+`;
+
 exports[`Storyshots Progress Progress CSS 1`] = `
 <section
   class="storybook-snapshot-container"
 >
   <progress
-    class="progress foo-bar-baz"
+    class="progress foo-bar-baz svelte-5xym5w"
     max="100"
     value="30"
   />
@@ -946,7 +1533,7 @@ exports[`Storyshots Progress Progress Test 1`] = `
   class="storybook-snapshot-container"
 >
   <progress
-    class="progress"
+    class="progress svelte-5xym5w"
     max="100"
     value="30"
   />
diff --git a/agnosticui-svelte/src/stories/Button.stories.js b/agnosticui-svelte/src/stories/Button.stories.js
index e23e03b4c..f6d316219 100644
--- a/agnosticui-svelte/src/stories/Button.stories.js
+++ b/agnosticui-svelte/src/stories/Button.stories.js
@@ -1,4 +1,36 @@
 import ButtonSlot from './ButtonSlot.svelte';
+import { action } from '@storybook/addon-actions';
+
+/*
+import Input from './Input.svelte';
+import { action } from '@storybook/addon-actions';
+
+const actionsData = {
+  'click': action('click'),
+  'blur': action('blur'),
+  'change': action('change'),
+  'input': action('input'),
+  'focus': action('focus'),
+}
+
+export default {
+  title: 'Input',
+  component: Input,
+};
+
+const Template = ({ ...args }) => ({
+  Component: Input,
+  props: args,
+  on: {
+    ...actionsData,
+  }
+});
+*/
+const actionsData = {
+  'click': action('click'),
+  'blur': action('blur'),
+  'focus': action('focus'),
+}
 
 export default {
   title: 'Button',
@@ -19,7 +51,9 @@ export default {
     size: {
       control: { type: 'select', options: ['small', 'large'] },
     },
-    onClick: { action: 'onClick' },
+    // on: {
+    //   ...actionsData,
+    // },
   },
 };
 
@@ -27,7 +61,7 @@ const Template = ({ onClick, ...args }) => ({
   Component: ButtonSlot,
   props: args,
   on: {
-    click: onClick,
+    ...actionsData,
   },
 });
 
diff --git a/agnosticui-svelte/src/stories/Button.svelte b/agnosticui-svelte/src/stories/Button.svelte
index c173c4133..0bda061be 100644
--- a/agnosticui-svelte/src/stories/Button.svelte
+++ b/agnosticui-svelte/src/stories/Button.svelte
@@ -1,11 +1,10 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   export let mode = "";
   export let size = "";
   export let isBordered = false;
   export let isBlock = false;
   export let isBlank = false;
-  export let isDisabled = false;
+  export let isDisabled = undefined;
   export let isRaised = false;
   export let isCircle = false;
   export let isRounded = false;
@@ -48,14 +47,6 @@
   ];
   klasses = klasses.filter((klass) => klass.length);
   klasses = klasses.join(" ");
-
-  export let onClick = null;
-
-  function handleClick(event) {
-    if (onClick) {
-      onClick(event);
-    }
-  }
 </script>
 
 <style>
@@ -438,6 +429,6 @@ Apply this class to the nth-of-type(2) onwards to ensure the borders line up pro
 }
 </style>
 
-<button {type} class={klasses} on:click={handleClick}>
+<button {type} class={klasses} on:click on:focus on:blur disabled={isDisabled}>
   <slot />
 </button>
diff --git a/agnosticui-svelte/src/stories/Button.test.js b/agnosticui-svelte/src/stories/Button.test.js
index c9b81a54c..1c71857c5 100644
--- a/agnosticui-svelte/src/stories/Button.test.js
+++ b/agnosticui-svelte/src/stories/Button.test.js
@@ -13,21 +13,3 @@ test("it should render slotted content", () => {
   const button = getByText('Go')
   expect(button.innerHTML).toBe("Go");
 });
-
-test('onClick fires', async () => {
-  let state = 'original'
-  const clickHandler = () => {
-    state = 'click event fired'
-  }
-
-  const { getByRole } = render(Button, {
-    onClick: clickHandler,
-  })
-  const button = getByRole("button");
-
-  // Note that using await when firing events unique to svelte--have to
-  // wait for next `tick` so Svelte flushes all pending state changes.
-  await fireEvent.click(button)
-
-  expect(state).toEqual('click event fired')
-})
diff --git a/agnosticui-svelte/src/stories/ButtonGroup.svelte b/agnosticui-svelte/src/stories/ButtonGroup.svelte
index 7c5a14faa..c474c97eb 100644
--- a/agnosticui-svelte/src/stories/ButtonGroup.svelte
+++ b/agnosticui-svelte/src/stories/ButtonGroup.svelte
@@ -1,9 +1,8 @@
 <script>
-  import { createEventDispatcher } from "svelte";
   export let ariaLabel = "";
   export let css = "";
   let klasses = ["btn-group", css ? `${css}` : ""];
-  klasses = klasses.filter(klass => klass.length);
+  klasses = klasses.filter((klass) => klass.length);
   klasses = klasses.join(" ");
 </script>
 
@@ -35,7 +34,6 @@
 
 </style>
 
-<div class={klasses} role="group" aria-label={ariaLabel}>
-
+<div class={klasses} role="group" aria-label={ariaLabel} on:click>
   <slot />
 </div>
diff --git a/agnosticui-svelte/src/stories/ButtonSlot.svelte b/agnosticui-svelte/src/stories/ButtonSlot.svelte
index e62b5a242..628000f84 100644
--- a/agnosticui-svelte/src/stories/ButtonSlot.svelte
+++ b/agnosticui-svelte/src/stories/ButtonSlot.svelte
@@ -35,6 +35,9 @@
   {isRounded}
   {isSkinned}
   {css}
-  {type}>
+  {type}
+  on:click
+  on:focus
+  on:blur>
   <span>Go</span>
 </Button>
diff --git a/agnosticui-svelte/src/stories/Card.svelte b/agnosticui-svelte/src/stories/Card.svelte
index a0669b071..84c5650d1 100644
--- a/agnosticui-svelte/src/stories/Card.svelte
+++ b/agnosticui-svelte/src/stories/Card.svelte
@@ -6,9 +6,9 @@
   let klasses = [
     isSkinned ? "card" : "card-base",
     isStacked ? "card-stacked" : "",
-    css ? `${css}` : ""
+    css ? `${css}` : "",
   ];
-  klasses = klasses.filter(klass => klass.length);
+  klasses = klasses.filter((klass) => klass.length);
   klasses = klasses.join(" ");
 </script>
 
@@ -79,6 +79,6 @@
 }
 </style>
 
-<div class={klasses}>
+<div class={klasses} on:click on:focus on:blur>
   <slot />
 </div>
diff --git a/agnosticui-svelte/src/stories/Input.stories.js b/agnosticui-svelte/src/stories/Input.stories.js
new file mode 100644
index 000000000..d30c91c4c
--- /dev/null
+++ b/agnosticui-svelte/src/stories/Input.stories.js
@@ -0,0 +1,199 @@
+import Input from './Input.svelte';
+import { action } from '@storybook/addon-actions';
+
+const actionsData = {
+  'click': action('click'),
+  'blur': action('blur'),
+  'change': action('change'),
+  'input': action('input'),
+  'focus': action('focus'),
+}
+
+export default {
+  title: 'Input',
+  component: Input,
+};
+
+const Template = ({ ...args }) => ({
+  Component: Input,
+  props: args,
+  on: {
+    ...actionsData,
+  }
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  uniqueId: "myUniqueId",
+  label: "Default input",
+};
+
+export const Rounded = Template.bind({});
+Rounded.args = {
+  uniqueId: "myUniqueId",
+  label: "Rounded input",
+  isRounded: true,
+};
+
+export const Underlined = Template.bind({});
+Underlined.args = {
+  uniqueId: "myUniqueId",
+  label: "Underlined input",
+  isUnderlined: true,
+};
+
+export const UnderlinedWithBackground = Template.bind({});
+UnderlinedWithBackground.args = {
+  uniqueId: "myUniqueId",
+  label: "Underlined with background input",
+  isUnderlined: true,
+  isUnderlinedWithBackground: true,
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  uniqueId: "myUniqueId",
+  label: "Large input",
+  size: "large",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  uniqueId: "myUniqueId",
+  label: "Small input",
+  size: "small",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  uniqueId: "myUniqueId",
+  label: "Disabled input",
+  disabled: true,
+};
+
+export const HelpText = Template.bind({});
+HelpText.args = {
+  uniqueId: "myUniqueId",
+  label: "Help text",
+  helpText: "Some useful help text."
+};
+
+export const InvalidText = Template.bind({});
+InvalidText.args = {
+  uniqueId: "myUniqueId",
+  label: "Invalid text",
+  invalidText: "This field has errors.",
+  isInvalid: true,
+};
+
+export const InvalidTextLarge = Template.bind({});
+InvalidTextLarge.args = {
+  uniqueId: "myUniqueId",
+  size: "large",
+  label: "Invalid text large",
+  invalidText: "This field has errors.",
+  isInvalid: true,
+};
+
+export const InvalidTextSmall = Template.bind({});
+InvalidTextSmall.args = {
+  uniqueId: "myUniqueId",
+  size: "small",
+  label: "Invalid text small",
+  invalidText: "This field has errors.",
+  isInvalid: true,
+};
+
+
+/*
+export const VModelInitialValueAndPropogatesAllNativeEvents = () => ({
+
+  components: { AgInput },
+  template: '<div><p>Open console and do things like backspace, blur, enter, etc. Becuase we bind $listeners, all native events should be available.</p><AgInput uniqueId="myUniqueId" v-model="name" @blur="onBlur" @keydown.delete="onBackspaceDelete" @keydown.esc="onEscape" @keyup.page-down="onPageDown" @keydown.enter="onEnter" label="Le Name" placeholder="Name" /><strong style="display: inline-block;margin-top: 24px;">Bound variable: {{ name }}</strong></div>',
+  data() {
+    return {
+      name: ''
+    }
+  },
+  methods: {
+    onEnter: (ev) => { console.log('onEnter: ', ev) },
+    onBlur: (ev) => { console.log('onBlur: ', ev) },
+    onEscape: (ev) => { console.log('onEscape: ', ev) },
+    onBackspaceDelete: (ev) => { console.log('onBackspaceDelete: ', ev) },
+    onPageDown: (ev) => { console.log('onPageDown: ', ev) },
+    onUpdate: (ev) => { console.log('onUpdate: ', ev) },
+  },
+})
+// https://vuejs.org/v2/guide/forms.html
+
+*/
+
+
+export const Search = Template.bind({});
+Search.args = {
+  uniqueId: "myUniqueId",
+  label: "Search",
+  type: "search",
+};
+
+export const Telephone = Template.bind({});
+Telephone.args = {
+  uniqueId: "myUniqueId",
+  label: "Telephone",
+  type: "tel",
+};
+
+export const URL = Template.bind({});
+URL.args = {
+  uniqueId: "myUniqueId",
+  label: "URL",
+  type: "url",
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  uniqueId: "myUniqueId",
+  label: "Number",
+  type: "number",
+};
+
+export const Email = Template.bind({});
+Email.args = {
+  uniqueId: "myUniqueId",
+  label: "Email",
+  type: "email",
+}
+
+export const Password = Template.bind({});
+Password.args = {
+  uniqueId: "myUniqueId",
+  label: "Password",
+  type: "password",
+}
+
+export const Textarea = Template.bind({});
+Textarea.args = {
+  uniqueId: "myUniqueId",
+  label: "Textarea",
+  type: "textarea",
+}
+
+export const TextareaSmall = Template.bind({});
+TextareaSmall.args = {
+  uniqueId: "myUniqueId",
+  label: "Textarea small",
+  type: "textarea",
+  size: "small",
+  rows: "10",
+  cols: "5",
+}
+
+export const TextareaLarge = Template.bind({});
+TextareaLarge.args = {
+  uniqueId: "myUniqueId",
+  label: "Textarea small",
+  type: "textarea",
+  size: "large",
+  rows: "10",
+  cols: "5",
+}
diff --git a/agnosticui-svelte/src/stories/Input.svelte b/agnosticui-svelte/src/stories/Input.svelte
new file mode 100644
index 000000000..782f024d3
--- /dev/null
+++ b/agnosticui-svelte/src/stories/Input.svelte
@@ -0,0 +1,423 @@
+<script>
+  const TYPES = [
+    "text",
+    "password",
+    "email",
+    "number",
+    "url",
+    "tel",
+    "search",
+    "textarea",
+  ];
+  // Looks like the way to propogate boilerplate events is to
+  // just declare in template like on:blur on:focus and so on
+  // https://github.com/sveltejs/svelte/issues/585
+  // Looks like this is what smelte is doing:
+  // https://github.com/matyunya/smelte/blob/master/src/components/TextField/TextField.svelte
+  export let label = "";
+  export let uniqueId = "";
+  export let labelCss = "";
+  export let helpText = "";
+  export let invalidText = "";
+  export let hasLeftAddon = false;
+  export let hasRightAddon = false;
+  export let isInvalid = false;
+  export let isRounded = false;
+  export let inputCss = "";
+  export let isSkinned = true;
+  export let isUnderlinedWithBackground = false;
+  export let isUnderlined = false;
+  export let size = "";
+  export let value = "";
+  export let type = "text";
+
+  $: if (!value) value = "";
+
+  const labelClasses = () => {
+    let labelKlasses = [
+      "label",
+      isInvalid ? "label-error" : "",
+      size ? `label-${size}` : "",
+      labelCss ? labelCss : "",
+    ];
+    labelKlasses = labelKlasses.filter((klass) => klass.length);
+    labelKlasses = labelKlasses.join(" ");
+    return labelKlasses;
+  };
+  const inputClasses = () => {
+    let inputKlasses = [
+      isSkinned ? "input" : "input-base",
+      isRounded ? "input-rounded" : "",
+      isUnderlined ? "input-underlined" : "",
+      hasLeftAddon ? "input-has-left-addon" : "",
+      hasRightAddon ? "input-has-right-addon" : "",
+      isInvalid ? "input-error" : "",
+      isUnderlinedWithBackground ? "input-underlined-bg" : "",
+      inputCss ? inputCss : "",
+      size ? `input-${size}` : "",
+    ];
+    inputKlasses = inputKlasses.filter((klass) => klass.length);
+    inputKlasses = inputKlasses.join(" ");
+    return inputKlasses;
+  };
+
+  const invalidClasses = () => {
+    return size ? `field-error-${size}` : "field-error";
+  };
+  const helpClasses = () => {
+    return size ? `field-help-${size}` : "field-help";
+  };
+  const addonContainerClasses = () => "input-addon-container";
+
+  const getInputType = () => {
+    if (!TYPES.includes(type)) {
+      console.warn(`allowed types are ${TYPES}`);
+      type = "text";
+    }
+    return type;
+  };
+</script>
+
+<style>
+.input-base,
+.input {
+  user-select: none;
+  appearance: none;
+  box-sizing: border-box;
+  /* Use the same color for the cursor */
+  caret-color: currentColor;
+}
+
+.label, .label-base {
+  padding: 0;
+  border: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+/* Electing to scope these as opposed to doing :root level definitions */
+.field-help,
+.field-help-large,
+.field-help-small,
+.field-error,
+.field-error-large,
+.field-error-small,
+.label-skin,
+.label,
+.input-addon-container,
+.input-small,
+.input-large,
+.input-skin,
+.input-underlined,
+.input-underlined-bg,
+.input {
+  /* These custom props all fallback on the agnosticui main variables so main theme is preserved */
+  --agnosticui-input-error-color: var(--agnosticui-error-color, var(--agnosticui-secondary));
+  --agnosticui-input-help-color: var(--agnosticui-help-color, var(--agnosticui-gray-dark));
+  --agnosticui-input-font-color: var(--agnosticui-font-color, var(--agnosticui-dark));
+  --agnosticui-input-font-weight: var(--agnosticui-font-weight, 300);
+  --agnosticui-input-font-size: var(--agnosticui-font-size, var(--Space-16));
+  --agnosticui-input-label-font-size: calc(var(--agnosticui-input-font-size) - 2px);
+  --agnosticui-input-border-size: var(--agnosticui-border-size, 1px);
+  --agnosticui-input-border-color: var(--agnosticui-border-color, var(--agnosticui-gray-light));
+  --agnosticui-input-radius: var(--agnosticui-border-radius, var(--Space-4));
+  --agnosticui-input-underlined-color: var(--agnosticui-underlined-color, var(--agnosticui-gray-mid-dark));
+  --agnosticui-input-underlined-bg-color: var(--agnosticui-underlined-bg-color, var(--agnosticui-gray-extra-light));
+
+  /* TODO -- share these with agnosticui buttons */
+  --agnosticui-input-disabled-bg: var(--agnosticui-disabled-bg, var(--agnosticui-gray-light));
+  --agnosticui-input-disabled-color: var(--agnostic-disabled-color, var(--agnosticui-gray-dark));
+
+  /* these can be overriden, but it might mess with the balance of the inputheights across variants */
+  --agnosticui-input-vertical-pad: var(--agnosticui-vertical-pad, var(--Space-8));
+  /* Provided --agnosticui-input-vertical-pad isn't overriden we'll get 20px
+  label w/a 6px margin then a 38px input = 64 which is on the 8pt grid */
+  --agnosticui-input-label-pad: var(--agnosticui-label-pad, var(--Space-6));
+  --agnosticui-input-line-height: var(--agnosticui-line-height, 20px);
+  --agnosticui-input-side-padding: var(--agnosticui-side-padding, var(--Space-12));
+  --agnosticui-input-font-family: var(--agnosticui-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
+  --agnosticui-input-btn-radius: var(--agnosticui-border-radius, var(--Space-4));
+  color: var(--agnosticui-input-font-color);
+  font-family: var(--agnosticui-input-font-family);
+  font-weight: var(--agnosticui-input-font-weight);
+  font-size: var(--agnosticui-input-font-size);
+  line-height: var(--agnosticui-input-line-height);
+  width: 100%;
+  max-width: 100%;
+}
+
+.input-skin,
+.input {
+  border-color: var(--agnosticui-input-border-size,
+    var(--agnosticui-default-btn-bgcolor)
+  );
+  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+  border-style: solid;
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  border-width: var(--agnosticui-input-border-size);
+  border-color: var(--agnosticui-input-border-color);
+  padding-top: var(--agnosticui-input-vertical-pad);
+  padding-bottom: var(--agnosticui-input-vertical-pad);
+  padding-left: var(--agnosticui-input-side-padding);
+  padding-right: var(--agnosticui-input-side-padding);
+
+  /* Note we only want to set properties that we actually want
+  to transition in. For example, if we transition "all", the
+  inputs will "grow in" on page load—not a happy effect :) */
+  transition-property: box-shadow;
+  transition-duration: var(--agnosticui-timing-medium);
+}
+
+.label {
+  display: inline-block;
+  margin: 0 0 var(--agnosticui-input-label-pad);
+  vertical-align: initial;
+}
+
+/* Reset labels and field errors to be 2px less then input font size */
+.field-help,
+.field-error,
+.label,
+.label-skin {
+  font-size: var(--agnosticui-input-label-font-size);
+}
+
+.label-inline,
+.input-inline {
+  width: auto;
+}
+
+/* When inlined, the margin-bottom will throw the label off-center with adjacent input */
+.label-inline {
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: var(--agnosticui-input-side-padding);
+}
+
+/**
+* Placeholder
+*/
+.input::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity var(--agnosticui-timing-fast) ease-out;
+}
+
+.input::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity var(--agnosticui-timing-fast) ease-out;
+}
+
+.input::-ms-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity var(--agnosticui-timing-fast) ease-out;
+}
+
+.input:-ms-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity var(--agnosticui-timing-fast) ease-out;
+}
+
+/**
+* Underlined inputs
+*/
+.input-underlined {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-color: var(--agnosticui-input-underlined-color);
+  background-color: transparent;
+}
+
+.input-underlined-bg {
+  background-color: var(--agnosticui-input-underlined-bg-color);
+}
+
+/**
+* Rounded inputs
+*/
+.input-rounded {
+  border-radius: var(--agnosticui-input-radius);
+}
+
+/**
+ * Errors
+ * We provide a class-based approach to setting errors which means we do
+ * not support :invalid, so it requires custom use of html4 validation API
+ * (see https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
+ * of the example in corresponding input.html file). The reason I elected to
+ * not include :invalid, is it seems to result in "shouting" at the user as
+ * I did not find an easy way to only kick in errors after a certain number
+ * of characters have been type (blur is actually better but I did not
+ * implement that in the contrived example).
+ */
+.label-error {
+  color: var(--agnosticui-input-error-color);
+}
+.input-error {
+  border-color: var(--agnosticui-input-error-color);
+}
+
+.label-error,
+.field-error,
+.field-error-small,
+.field-error-large {
+  color: var(--agnosticui-input-error-color);
+}
+
+.field-help,
+.field-help-small,
+.field-help-large {
+  color: var(--agnosticui-input-help-color);
+}
+
+.field-help,
+.field-help-small,
+.field-help-large,
+.field-error,
+.field-error-small,
+.field-error-large {
+  display: inline-block;
+  width: 100%;
+  margin-top: calc(var(--agnosticui-input-vertical-pad) / 2);
+}
+
+/**
+  * Sizes
+  */
+.input-large {
+  font-size: calc(var(--agnosticui-input-font-size) + 4px);
+  line-height: calc(var(--agnosticui-input-line-height) + 4px);
+}
+
+.field-help-large,
+.field-error-large,
+.label-large {
+  font-size: calc(var(--agnosticui-input-label-font-size) + 2px);
+}
+
+.input-small {
+  /* TODO -- use + var(--Space-4) if they fix the bug I logged: https://github.com/GoogleChrome/samples/issues/705 */
+  font-size: calc(var(--agnosticui-input-font-size) - 4px);
+  line-height: calc(var(--agnosticui-input-line-height) - 4px);
+}
+
+.field-help-small,
+.field-error-small,
+.label-small {
+  /* Since labels are already smaller, bringing them down var(--Space-4) here
+  just looks too small to my eye. */
+  font-size: calc(var(--agnosticui-input-label-font-size) - 2px);
+}
+
+.input:focus {
+  box-shadow: 0 0 0 3px rgba(55, 149, 225, 0.5);
+  /* High contrast mode outline */
+  outline: 3px solid transparent;
+  transition: box-shadow var(--agnosticui-timing-fast) ease-out;
+}
+/* Set the focus to transparent when there's an error since we use
+borders that visually conflict. */
+.input-error:focus {
+  box-shadow: 0 0 0 3px transparent;
+}
+
+/*
+* Disabled State
+*
+* The disabled state uses the class .disabled,
+* and the form attribute disabled="disabled".
+* The use of !important is only added because this is a state
+* that must be applied to all inputs when in a disabled state.
+*/
+.input.disabled,
+.input:disabled {
+  /* High contrast mode outline hacks */
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  background: var(--agnosticui-input-disabled-bg) !important;
+  color: var(--agnosticui-input-disabled-color) !important;
+  cursor: default !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  opacity: 0.8 !important;
+  cursor: not-allowed;
+}
+
+/**
+ * Input "has addon"
+ */
+
+.input-addon-container {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+.input-has-left-addon,
+.input-has-right-addon {
+  /* Maybe I should have defined another css prop for addon adjustments but trying
+  to avoid any extra variable explosion there--will need to keep an eye on this */
+  --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5);
+  flex: 1;
+}
+
+.input-has-left-addon  {
+  padding-left: calc(var(--addon-padding) * 2.25);
+}
+
+.input-has-right-addon  {
+  padding-right: calc(var(--addon-padding) * 2.25);
+}
+</style>
+
+<div>
+  <label class={labelClasses()} for={uniqueId}>{label}</label>
+  {#if type == 'textarea'}
+    <textarea
+      id={uniqueId}
+      {value}
+      class={inputClasses()}
+      on:blur
+      on:change
+      on:input
+      on:click
+      on:focus
+      {...$$restProps} />
+  {:else if hasLeftAddon || hasRightAddon}
+    <div class={addonContainerClasses()}>
+      <slot name="addonLeft" />
+      <input
+        id={uniqueId}
+        {value}
+        type={getInputType()}
+        class={inputClasses()}
+        on:blur
+        on:change
+        on:input
+        on:click
+        on:focus
+        {...$$restProps} />
+      <slot name="addonRight" />
+    </div>
+  {:else}
+    <input
+      id={uniqueId}
+      type={getInputType()}
+      {value}
+      class={inputClasses()}
+      on:blur
+      on:change
+      on:input
+      on:click
+      on:focus
+      {...$$restProps} />
+  {/if}
+  {#if isInvalid}
+    <span class={invalidClasses()}> {invalidText} </span>
+  {:else if helpText}<span class={helpClasses()}>{helpText}</span>{/if}
+</div>
diff --git a/agnosticui-svelte/src/stories/InputAddonItem.svelte b/agnosticui-svelte/src/stories/InputAddonItem.svelte
new file mode 100644
index 000000000..0b295b786
--- /dev/null
+++ b/agnosticui-svelte/src/stories/InputAddonItem.svelte
@@ -0,0 +1,40 @@
+<script>
+  export let css = "";
+  export let addonLeft = false;
+  export let addonRight = false;
+  let klasses = [
+    addonLeft ? "input-addon-left" : "",
+    addonRight ? "input-addon-right" : "",
+    css ? `${css}` : "",
+  ];
+  klasses = klasses.filter((klass) => klass.length);
+  klasses = klasses.join(" ");
+</script>
+
+<style>
+/*
+* Input addons e.g. icons inside the input
+*/
+.input-addon-right,
+.input-addon-left {
+  /* Maybe I should have defined another css prop for addon adjustments but trying
+  to avoid any extra variable explosion there--will need to keep an eye on this */
+  --addon-padding: calc(var(--agnosticui-input-side-padding) * 1.5);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.input-addon-left {
+  left: var(--addon-padding);
+}
+
+.input-addon-right {
+  right: var(--addon-padding);
+}
+
+</style>
+
+<div class={klasses}>
+  <slot />
+</div>
diff --git a/agnosticui-svelte/src/stories/InputAddons.stories.js b/agnosticui-svelte/src/stories/InputAddons.stories.js
new file mode 100644
index 000000000..3ed88e26a
--- /dev/null
+++ b/agnosticui-svelte/src/stories/InputAddons.stories.js
@@ -0,0 +1,9 @@
+import InputAddonsExample from "./InputAddonsExample.svelte";
+
+export default {
+  title: "Input Addons Example",
+}
+
+export const InputAddonsTest = () => ({
+  Component: InputAddonsExample,
+})
diff --git a/agnosticui-svelte/src/stories/InputAddonsExample.svelte b/agnosticui-svelte/src/stories/InputAddonsExample.svelte
new file mode 100644
index 000000000..5f9418b1d
--- /dev/null
+++ b/agnosticui-svelte/src/stories/InputAddonsExample.svelte
@@ -0,0 +1,19 @@
+<script>
+  import Input from "./Input.svelte";
+  import InputAddonItem from "./InputAddonItem.svelte";
+  // NOTE: this throws a bogus warning:
+  // https://github.com/sveltejs/svelte/issues/4546
+</script>
+
+<Input
+  hasLeftAddon={true}
+  hasRightAddon={true}
+  uniqueId="myUniqueId"
+  label="Input with addons">
+  <div slot="addonLeft">
+    <InputAddonItem addonLeft={true}><span>L</span></InputAddonItem>
+  </div>
+  <div slot="addonRight">
+    <InputAddonItem addonRight={true}><span>R</span></InputAddonItem>
+  </div>
+</Input>
diff --git a/agnosticui-vue/src/stories/Input.vue b/agnosticui-vue/src/stories/Input.vue
index d85243772..971f4bf2d 100644
--- a/agnosticui-vue/src/stories/Input.vue
+++ b/agnosticui-vue/src/stories/Input.vue
@@ -114,6 +114,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isSkinned: {
+      type: Boolean,
+      default: true,
+    },
     isRounded: {
       type: Boolean,
       default: false,
@@ -170,7 +174,8 @@ export default {
       // console.log("this.$style[input-large]: ", this.$style[sizeKlass]);
       // console.log("this.$style[input-large]: ", this.$style["input-large"]);
       return {
-        [this.$style["input"]]: true,
+        [this.$style["input"]]: this.isSkinned,
+        [this.$style["input-base"]]: !this.isSkinned,
         [this.$style["input-rounded"]]: this.isRounded,
         [this.$style["input-underlined"]]: this.isUnderlined,
         [this.$style["input-has-left-addon"]]: this.hasLeftAddon,
diff --git a/yarn.lock b/yarn.lock
index ec8e798ce..25d8d9a41 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13910,6 +13910,13 @@ svelte-dev-helper@^1.1.9:
   resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
   integrity sha1-fRh9tcbNu9ZNdaMvkbiZi94yc8M=
 
+svelte-jester@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/svelte-jester/-/svelte-jester-1.1.5.tgz#05a2ac2e0639d13501f3bd43a355e5400d56ef23"
+  integrity sha512-evidPi5i8u9+rBavsvuU7OrMwsXHQd0sCpdF8XlGW6bPuijBW2A5q+bXkiEYh1xaQlDXGuikkopOLrVJYS4pug==
+  dependencies:
+    cosmiconfig "^6.0.0"
+
 svelte-loader@^2.13.6:
   version "2.13.6"
   resolved "https://registry.yarnpkg.com/svelte-loader/-/svelte-loader-2.13.6.tgz#3d5efd5886c2bab034606d5af0cce659da3ee555"