@likable-hair/svelte 0.0.36 → 0.0.39

package/forms/Switch.svelte

@@ -1,7 +1,7 @@
 <script >export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
 </script>
 
-<span 
+<div 
   style:--switch-toggle-active-color={toggleActiveColor}
   style:--switch-toggle-deactive-color={toggleDeactiveColor}
   style:--switch-animation-duration={animationDuration}
@@ -19,12 +19,13 @@
     <input 
       bind:checked={value}
       type="checkbox"
+      on:change
     >
     <span
       class="slider"
     ></span>
   </div>
-</span>
+</div>
 
 <style>
   .container {

package/forms/Switch.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         animationDuration?: string;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/forms/Textfield.svelte

@@ -1,4 +1,4 @@
-<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderWeight = "2px", borderRadius = "5px", borderColor = undefined, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = undefined, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text';
+<script >export let label = "", placeholder = "", color = null, value = "", variant = 'outlined', width = "100%", textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text';
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -23,6 +23,7 @@ $: if (!!labelElement) {
     height: 50px;
     position: relative;
     --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
+    --textfield-final-border-color: var(--textfield-border-color, var(--textfield-final-color))
   }
 
   /* outlined input */
@@ -44,7 +45,7 @@ $: if (!!labelElement) {
   }
 
   .focused .fieldset-outlined {
-    border: var(--textfield-border-weight) solid var(--textfield-final-color);
+    border: var(--textfield-border-weight) solid var(--textfield-final-border-color);
     color: var(--textfield-final-color);
   }
 
@@ -74,11 +75,14 @@ $: if (!!labelElement) {
   /* boxed input */
 
   .fieldset-boxed {
-    border: var(--textfield-border-weight) solid var(--textfield-final-color);
     padding: 5px;
     transition: border 0.3s ease, box-shadow 0.3s ease;
   }
 
+  .not-focused .fieldset-boxed {
+    border: var(--textfield-border-weight) solid var(--textfield-final-border-color);
+  }
+
   .focused .fieldset-boxed {
     border: var(--textfield-border-weight) solid var(--textfield-focus-border-color, var(--textfield-final-color));
     box-shadow: var(--textfield-focused-box-shadow);
@@ -115,12 +119,12 @@ $: if (!!labelElement) {
   style:--textfield-focused-box-shadow={focusedBoxShadow}
   class="input-container" 
   class:focused={focused}
+  class:not-focused={!focused}
   class:texted={focused || !!value}
 >
   <fieldset 
     aria-hidden="true"
     style:border-radius={borderRadius}
-    style:border-color={borderColor}
     style:background-color={backgroundColor}
     style:padding={padding}
     style:padding-left={paddingLeft}
@@ -164,6 +168,9 @@ $: if (!!labelElement) {
               on:focus
               on:blur={handleBlur}
               on:blur
+              on:keydown
+              on:keypress
+              on:keyup
             />
           {:else if type == 'text'}
             <input 
@@ -181,6 +188,9 @@ $: if (!!labelElement) {
               on:focus
               on:blur={handleBlur}
               on:blur
+              on:keydown
+              on:keypress
+              on:keyup
             />
           {/if}
           <div>
@@ -210,6 +220,9 @@ $: if (!!labelElement) {
             on:focus
             on:blur={handleBlur}
             on:blur
+            on:keydown
+              on:keypress
+              on:keyup
           />
         {:else if type == 'text'}
           <input
@@ -227,6 +240,9 @@ $: if (!!labelElement) {
             on:focus
             on:blur={handleBlur}
             on:blur
+            on:keydown
+            on:keypress
+            on:keyup
           />
         {/if}
         <div>

package/forms/Textfield.svelte.d.ts

@@ -27,6 +27,9 @@ declare const __propDef: {
         input: Event;
         focus: FocusEvent;
         blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.36",
+  "version": "0.0.39",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",