@hyvor/design 0.0.31 → 0.0.33

package/dist/components/Button/Button.svelte

@@ -4,6 +4,7 @@ export let color = "accent";
 export let block = false;
 export let variant = "fill";
 export let align = "center";
+export let button = {};
 </script>
 
 <svelte:element 
@@ -25,6 +26,8 @@ export let align = "center";
     role="button"
     tabindex="0"
 
+    bind:this={button}
+
     {...$$restProps}
 >
 

package/dist/components/Button/Button.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         block?: boolean | undefined;
         variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
         align?: "start" | "center" | undefined;
+        button?: HTMLButtonElement | HTMLAnchorElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/components/Checkbox/Checkbox.svelte

@@ -1,7 +1,7 @@
 <script>export let checked = void 0;
 export let group = [];
 export let value = "on";
-let input;
+export let input = {};
 function handleChange() {
   const index = group.indexOf(value);
   if (checked === void 0)

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         checked?: boolean | undefined;
         group?: (string | number)[] | undefined;
         value?: string | number | undefined;
+        input?: HTMLInputElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/components/Modal/Modal.svelte

@@ -31,7 +31,11 @@ export let closeOnEscape = true;
             <div class="header">
 
                 <div class="title">
-                    {title}
+                    {#if $$slots.title}
+                        <slot name="title" />
+                    {:else}
+                        <span>{title}</span>
+                    {/if}
                 </div>
 
                 <div class="close-wrap">
@@ -64,7 +68,7 @@ export let closeOnEscape = true;
         position: fixed;
         top: 0;
         left: 0;
-        z-index: 1000;
+        z-index: 10000000;
         width: 100%;
         height: 100%;
         background: rgba(0,0,0,0.5);
@@ -94,8 +98,6 @@ export let closeOnEscape = true;
     .header {
         padding: 20px 25px;
         border-bottom: 1px solid var(--box-border);
-        font-size: 1.2em;
-        font-weight: 600;
         display: flex;
         align-items: center;
     }
@@ -103,6 +105,10 @@ export let closeOnEscape = true;
     .title {
         flex: 1;
     }
+    .title span {
+        font-size: 1.2em;
+        font-weight: 600;
+    }
 
     .content {
         padding: 20px 25px;

package/dist/components/Modal/Modal.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        title: {};
         default: {};
         footer: {};
     };

package/dist/components/Radio/Radio.svelte

@@ -1,13 +1,15 @@
 <script>export let value = "";
 export let group = "";
+export let input = {};
 </script>
 
 <label>
 
-    <input 
+    <input
         type="radio"
 
         bind:group
+        bind:this={input}
         {value}
 
         on:keyup

package/dist/components/Radio/Radio.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         value?: string | number | undefined;
         group?: string | number | undefined;
+        input?: HTMLInputElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/components/Switch/Switch.svelte

@@ -1,11 +1,13 @@
 <script>export let checked = false;
+export let input = {};
 </script>
 
 <label class="switch-wrap">
     <span class="switch">
         <input 
             type="checkbox" 
-            bind:checked  
+            bind:checked
+            bind:this={input}
             {...$$restProps} 
             
             on:keyup

package/dist/components/Switch/Switch.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        input?: HTMLInputElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/components/TabNav/TabNavItem.svelte

@@ -14,6 +14,8 @@ function handleClick() {
     class:active={isActive}
     on:click={handleClick}
     {...$$restProps}
+
+    on:click
 >
     {#if $$slots.start}
         <span class="start">

package/dist/components/TabNav/TabNavItem.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         name: string;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/TextInput/TextInput.svelte

@@ -2,7 +2,7 @@
 export let size = "medium";
 export let block = false;
 export let value = void 0;
-let input;
+export let input = {};
 </script>
 
 

package/dist/components/TextInput/TextInput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         size?: "small" | "medium" | "large" | "x-small" | undefined;
         block?: boolean | undefined;
         value?: any;
+        input?: HTMLInputElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/dist/components/Textarea/Textarea.svelte

@@ -3,16 +3,16 @@ export let block = false;
 export let rows = 5;
 export let cols = 40;
 export let state = "default";
-let input;
+export let textarea = {};
 </script>
 
 
 <span class="input-wrap state-{state}" 
     class:block
-    on:click={() => input.focus()}
+    on:click={() => textarea.focus()}
     on:keydown={(e) => {
         if (e.key === 'Enter') {
-            input.blur();
+            textarea.blur();
         }
     }}
     role="textbox"
@@ -29,7 +29,7 @@ let input;
 
     <textarea 
         bind:value={value}
-        bind:this={input}
+        bind:this={textarea}
         
 
         on:keyup

package/dist/components/Textarea/Textarea.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         rows?: number | undefined;
         cols?: number | undefined;
         state?: "default" | "error" | "success" | "warning" | undefined;
+        textarea?: HTMLTextAreaElement | undefined;
     };
     events: {
         keyup: KeyboardEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.31",
+	"version": "0.0.33",
 	"license": "MIT",
 	"private": false,
 	"scripts": {