@hyvor/design 0.0.34 → 0.0.35

package/dist/components/ActionList/ActionListItem.svelte

@@ -25,6 +25,8 @@ function handleClick() {
         }
     }}
     {...$$restProps}
+
+    on:click
 >
 
     {#if selection !== 'none'}

package/dist/components/ActionList/ActionListItem.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         type?: "default" | "danger" | undefined;
     };
     events: {
+        click: MouseEvent;
         select: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/Button/Button.svelte

@@ -149,13 +149,6 @@ export let button = {};
   --local-hover-shadow-size: 5px;
 }
 
-/* styles */
-/* .button.accent {
-    background-color: var(--accent);
-    color: var(--accent-text);
-    transition: .2s box-shadow;
-    --local-hover-shadow-color: var(--accent-light);
-} */
 .button.fill.accent {
   background-color: var(--accent);
   color: var(--accent-text);
@@ -163,30 +156,72 @@ export let button = {};
   --local-hover-shadow-color: var(--accent-light);
 }
 .button.fill.gray {
+  background-color: var(--gray-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--gray-light);
+}
+.button.fill.green {
+  background-color: var(--green-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--green-light);
+}
+.button.fill.red {
+  background-color: var(--red-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--red-light);
+}
+.button.fill.blue {
+  background-color: var(--blue-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--blue-light);
+}
+.button.fill.orange {
+  background-color: var(--orange-dark);
+  color: var(--text-white);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--orange-light);
+}
+.button.fill.input {
+  background-color: var(--input);
+  color: var(--text);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--input-hover);
+}
+.button.fill-light.accent {
+  background-color: var(--accent-light);
+  color: var(--accent);
+  transition: 0.2s box-shadow;
+  --local-hover-shadow-color: var(--accent-lightest);
+}
+.button.fill-light.gray {
   background-color: var(--gray-light);
   color: var(--gray-dark);
   transition: 0.2s box-shadow;
   --local-hover-shadow-color: color-mix(in srgb, var(--gray-light) 40%, transparent);
 }
-.button.fill.green {
+.button.fill-light.green {
   background-color: var(--green-light);
   color: var(--green-dark);
   transition: 0.2s box-shadow;
   --local-hover-shadow-color: color-mix(in srgb, var(--green-light) 40%, transparent);
 }
-.button.fill.red {
+.button.fill-light.red {
   background-color: var(--red-light);
   color: var(--red-dark);
   transition: 0.2s box-shadow;
   --local-hover-shadow-color: color-mix(in srgb, var(--red-light) 40%, transparent);
 }
-.button.fill.blue {
+.button.fill-light.blue {
   background-color: var(--blue-light);
   color: var(--blue-dark);
   transition: 0.2s box-shadow;
   --local-hover-shadow-color: color-mix(in srgb, var(--blue-light) 40%, transparent);
 }
-.button.fill.orange {
+.button.fill-light.orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
   transition: 0.2s box-shadow;
@@ -316,19 +351,10 @@ export let button = {};
   box-shadow: none !important;
   color: var(--orange-dark);
 }
-
-.button.soft {
-  background-color: var(--accent-light);
-  color: var(--accent);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: #eee;
-}
-
-.button.light {
-  background-color: #f5f5f5;
+.button.invisible.input:hover {
+  background-color: var(--input);
+  box-shadow: none !important;
   color: var(--text);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: var(--accent-light);
 }
 
 :global(:root.dark) .button.light {
@@ -345,13 +371,6 @@ export let button = {};
   box-shadow: none !important;
 }
 
-.button.danger {
-  background-color: var(--red-dark);
-  color: var(--text-white);
-  transition: 0.2s box-shadow;
-  --local-hover-shadow-color: var(--red-light);
-}
-
 /*Styles for button disabled state*/
 .button[disabled] {
   cursor: not-allowed;

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

@@ -4,9 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         as?: "button" | "a" | undefined;
         size?: "small" | "medium" | "large" | "x-small" | undefined;
-        color?: "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
+        color?: "input" | "accent" | "gray" | "green" | "red" | "blue" | "orange" | undefined;
         block?: boolean | undefined;
-        variant?: "fill" | "outline" | "invisible" | "outline-fill" | undefined;
+        variant?: "fill" | "fill-light" | "outline" | "invisible" | "outline-fill" | undefined;
         align?: "start" | "center" | undefined;
         button?: HTMLButtonElement | HTMLAnchorElement | undefined;
     };

package/dist/components/Modal/Modal.svelte

@@ -2,11 +2,27 @@
 import { IconX } from "@hyvor/icons";
 import IconButton from "./../IconButton/IconButton.svelte";
 import { scale } from "svelte/transition";
+import { onMount, tick } from "svelte";
 export let show = false;
 export let title = "";
 export let size = "medium";
 export let closeOnOutsideClick = true;
 export let closeOnEscape = true;
+let wrapEl;
+let innerEl;
+async function setFlex() {
+  await tick();
+  if (!wrapEl || !innerEl)
+    return;
+  if (innerEl.offsetHeight > wrapEl.offsetHeight - 60) {
+    wrapEl.style.alignItems = "flex-start";
+  } else {
+    wrapEl.style.alignItems = "center";
+  }
+}
+onMount(setFlex);
+$:
+  show, setFlex();
 </script>
 
 <svelte:window on:keyup={e => {
@@ -17,7 +33,10 @@ export let closeOnEscape = true;
 
 
 {#if show}
-    <div class="wrap">
+    <div 
+        class="wrap"
+        bind:this={wrapEl}
+    >
 
         <div 
             class="inner {size}"
@@ -26,6 +45,7 @@ export let closeOnEscape = true;
                 callback: () => show = false
             }}
             in:scale={{duration: 100, start: 0.9, opacity: 0.9}}
+            bind:this={innerEl}
         >
 
             <div class="header">
@@ -77,6 +97,8 @@ export let closeOnEscape = true;
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 30px;
+        overflow: auto;
     }
 
     .inner {
@@ -85,8 +107,6 @@ export let closeOnEscape = true;
         box-shadow: var(--box-shadow);
         width: 650px;
         max-width: 100%;
-        max-height: 100%;
-        overflow: auto;
         position: relative;
     }
 
@@ -99,7 +119,6 @@ export let closeOnEscape = true;
 
     .header {
         padding: 20px 25px;
-        border-bottom: 1px solid var(--box-border);
         display: flex;
         align-items: center;
     }

package/dist/components/Tag/Tag.svelte

@@ -1,4 +1,5 @@
-<script>export let size = "medium";
+<script>export let as = "span";
+export let size = "medium";
 export let color = "default";
 export let interactive = false;
 export let outline = false;
@@ -9,15 +10,31 @@ let styleClass = "default";
 if (outline) {
   styleClass = fill ? "outline-fill" : "outline";
 }
+let tabindex = interactive ? 0 : void 0;
 </script>
 
-<span
-    class="color-{color} style-{styleClass} size-{size}"
+
+<svelte:element
+    this={as}
+    role={interactive ? 'button' : undefined}
+    tabindex={tabindex}
+    class="button color-{color} style-{styleClass} size-{size}"
     class:interactive
     class:has-start={$$slots.start}
     class:has-end={$$slots.end}
     {...$$restProps}
 
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:change
+    
     style:background-color={bg}
     style:color={fg}
 >
@@ -32,7 +49,10 @@ if (outline) {
         <slot name="end" />
     {/if}
 
-</span>
+</svelte:element>
+
+
+
 
 <style>span {
   vertical-align: middle;
@@ -157,4 +177,10 @@ span.style-outline-fill.color-orange {
   background-color: var(--orange-light);
   color: var(--orange-dark);
   border: 1px solid var(--orange-dark);
+}
+
+.button[disabled] {
+  opacity: 0.5 !important;
+  cursor: not-allowed;
+  box-shadow: none !important;
 }</style>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        as?: "span" | "button" | "a" | undefined;
         size?: "small" | "medium" | "large" | "x-small" | undefined;
         color?: "default" | "accent" | "green" | "red" | "blue" | "orange" | undefined;
         interactive?: boolean | undefined;
@@ -11,6 +12,17 @@ declare const __propDef: {
         fg?: string | undefined;
     };
     events: {
+        keyup: KeyboardEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: MouseEvent;
+        mouseover: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/package.json

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