flowbite-svelte 0.27.5 → 0.27.8

package/CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.27.8](https://github.com/themesberg/flowbite-svelte/compare/v0.27.7...v0.27.8) (2022-10-17)
+
+### [0.27.7](https://github.com/themesberg/flowbite-svelte/compare/v0.27.6...v0.27.7) (2022-10-17)
+
+
+### Bug Fixes
+
+* [#376](https://github.com/themesberg/flowbite-svelte/issues/376) ([#378](https://github.com/themesberg/flowbite-svelte/issues/378)) ([8b4c2e3](https://github.com/themesberg/flowbite-svelte/commit/8b4c2e3200c73448aa34f921738e8ea8d10ee538))
+* card - restProps ([#373](https://github.com/themesberg/flowbite-svelte/issues/373)) ([a7331fc](https://github.com/themesberg/flowbite-svelte/commit/a7331fcd5915e6142a99859113776ce74a72529a))
+* flitering ([#370](https://github.com/themesberg/flowbite-svelte/issues/370)) ([e8ac071](https://github.com/themesberg/flowbite-svelte/commit/e8ac07134518a373949da3fadc4f63c656fe2d59))
+* modal arrow keys ([#369](https://github.com/themesberg/flowbite-svelte/issues/369)) ([2a8bc1c](https://github.com/themesberg/flowbite-svelte/commit/2a8bc1c156c66a3dc0569312343b6f6b65a051ea))
+* remove |local from Frame componentso that toast transitions work ([6da412c](https://github.com/themesberg/flowbite-svelte/commit/6da412c0665f27a6f9dd33bbf89758c4a924d239))
+
+### [0.27.6](https://github.com/themesberg/flowbite-svelte/compare/v0.27.5...v0.27.6) (2022-10-09)
+
+
+### Bug Fixes
+
+* card padding-x in mobile view ([#358](https://github.com/themesberg/flowbite-svelte/issues/358)) ([639457f](https://github.com/themesberg/flowbite-svelte/commit/639457f5efc54f38fda9288aa9cf017c2d0f883d))
+* color flicker when changing theme using DarkMode ([#353](https://github.com/themesberg/flowbite-svelte/issues/353)) ([7e1daf1](https://github.com/themesberg/flowbite-svelte/commit/7e1daf14b1b91b0f3c0dac55c38e28fee42c4878))
+* improved focustrap ([#354](https://github.com/themesberg/flowbite-svelte/issues/354)) ([fb17cd3](https://github.com/themesberg/flowbite-svelte/commit/fb17cd357e748df4b1d95060bcbecf7b406d3f03))
+* input icons ([#350](https://github.com/themesberg/flowbite-svelte/issues/350)) ([7b72712](https://github.com/themesberg/flowbite-svelte/commit/7b727121b3b730eb552200c1de36f3cdc45f7977))
+* input number workaround ([#351](https://github.com/themesberg/flowbite-svelte/issues/351)) ([e4cb012](https://github.com/themesberg/flowbite-svelte/commit/e4cb01221c3b4334a2c860aa32ccee06df2fe41d))
+* remove // [@ts-ignore](https://github.com/ts-ignore) ([ea82a2b](https://github.com/themesberg/flowbite-svelte/commit/ea82a2bc22085bad26967a82d078d8ab86b2477d))
+* remove package-lock, pnpm-lock and node_modules and reinstall ([a8985ea](https://github.com/themesberg/flowbite-svelte/commit/a8985ea2fdb7c18eb23e61dd163e65da98a53ae4))
+* remove svelte-sidebar-menu ([2820488](https://github.com/themesberg/flowbite-svelte/commit/28204885bbefcb826e073a1e6b7127a0b488b752))
+* ts types for Popper ([#362](https://github.com/themesberg/flowbite-svelte/issues/362)) ([4a22230](https://github.com/themesberg/flowbite-svelte/commit/4a22230d66d780cb2d5c189266f97c87c251b70a))
+
 ### [0.27.5](https://github.com/themesberg/flowbite-svelte/compare/v0.27.4...v0.27.5) (2022-10-01)
 
 

package/README.md

@@ -446,4 +446,4 @@ Please read [How to contribute](https://github.com/themesberg/flowbite-svelte/bl
 
 ## Changelog
 
-[Changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md)
+[Changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md)

package/accordions/Accordion.svelte

@@ -4,7 +4,7 @@
 <script>import Frame from '../utils/Frame.svelte';
 import classNames from 'classnames';
 import { setContext } from 'svelte';
-export let single = true;
+export let multiple = false;
 export let flush = false;
 export let activeClasses = 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800';
 export let inactiveClasses = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 hover:dark:bg-gray-800';
@@ -13,7 +13,7 @@ const ctx = {
     flush,
     activeClasses,
     inactiveClasses,
-    selected: single ? writable() : undefined
+    selected: multiple ? undefined : writable()
 };
 setContext('ctx', ctx);
 let frameClass = classNames(defaultClass, 'divide-y divide-gray-200 dark:divide-gray-700', 'border-gray-200 dark:border-gray-700', 'rounded-t-xl', $$props.class);

package/accordions/Accordion.svelte.d.ts

@@ -9,7 +9,7 @@ export interface AccordionCtxType {
 declare const __propDef: {
     props: {
         [x: string]: any;
-        single?: boolean | undefined;
+        multiple?: boolean | undefined;
         flush?: boolean | undefined;
         activeClasses?: string | undefined;
         inactiveClasses?: string | undefined;

package/accordions/AccordionItem.svelte

@@ -12,8 +12,10 @@ const ctx = getContext('ctx') ?? {};
 // single selection
 const self = {};
 const selected = ctx.selected ?? writable();
+let _open = open;
+open = false;
 onMount(() => {
-    if (open)
+    if (_open)
         $selected = self;
     // this will trigger unsubscribe on destroy
     return selected.subscribe((x) => (open = x === self));

package/breadcrumbs/BreadcrumbItem.svelte

@@ -1,51 +1,44 @@
 <script>export let home = false;
+export let href = undefined;
 export let linkClass = 'ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white';
 export let spanClass = 'ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400';
 export let homeClass = 'inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white';
 </script>
 
-<li class="inline-flex items-center" {...$$props}>
-	{#if home}
-		<a class={homeClass} href={$$props.href}>
-			{#if $$slots.icon}
-				<slot name="icon" />
-			{:else}
-				<svg
-					class="w-4 h-4 mr-2"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-					/></svg
-				>
-			{/if}
-			<slot />
-		</a>
-	{:else}
-		{#if $$slots.icon}
-			<slot name="icon" />
-		{:else}
-			<svg
-				class="w-6 h-6 text-gray-400"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		{/if}
-		{#if $$props.href}
-			<a class={linkClass} href={$$props.href}>
-				<slot />
-			</a>
-		{:else}
-			<span class={spanClass}>
-				<slot />
-			</span>
-		{/if}
-	{/if}
+<li class="inline-flex items-center" {...$$restProps}>
+  {#if home}
+    <a class={homeClass} {href}>
+      {#if $$slots.icon}
+        <slot name="icon" />
+      {:else}
+        <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+          ><path
+            d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
+      {/if}
+      <slot />
+    </a>
+  {:else}
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {:else}
+      <svg
+        class="w-6 h-6 text-gray-400"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clip-rule="evenodd" /></svg>
+    {/if}
+    {#if href}
+      <a class={linkClass} {href}>
+        <slot />
+      </a>
+    {:else}
+      <span class={spanClass}>
+        <slot />
+      </span>
+    {/if}
+  {/if}
 </li>

package/breadcrumbs/BreadcrumbItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         home?: boolean | undefined;
+        href?: string | undefined;
         linkClass?: string | undefined;
         spanClass?: string | undefined;
         homeClass?: string | undefined;

package/buttons/Button.svelte

@@ -76,16 +76,12 @@ const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient
-        ? 'p-0.5'
-        : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
+    : classNames('text-center font-medium', group ? 'focus:ring-2' : 'focus:ring-4', group && 'focus:z-10', !group || color === 'alternative' || (outline && color === 'dark') || 'focus:outline-none', outline && gradient ? 'p-0.5' : 'inline-flex items-center justify-center ' + sizeClasses[size], gradient ? gradientClasses[color] : outline ? outlineClasses[color] : colorClasses[color], color === 'alternative' &&
         (group
             ? 'dark:bg-gray-700 dark:text-white dark:border-gray-700 dark:hover:border-gray-600 dark:hover:bg-gray-600'
             : 'dark:bg-transparent dark:border-gray-800 dark:hover:border-gray-700'), outline &&
         color === 'dark' &&
-        (group
-            ? 'dark:text-white dark:border-white'
-            : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
+        (group ? 'dark:text-white dark:border-white' : 'dark:text-gray-400 dark:border-gray-700'), hasBorder() && group && 'border-l-0 first:border-l', rounded(false), shadow && coloredShadowClasses[shadow], $$props.disabled && 'cursor-not-allowed opacity-50', $$props.class);
 let gradientOutlineClass;
 $: gradientOutlineClass = classNames('inline-flex items-center justify-center', sizeClasses[size], rounded(true), 'bg-white text-gray-900 dark:bg-gray-900 dark:text-white', // this is limitation - no transparency
 'transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit');

package/buttons/Button.svelte.d.ts

@@ -10,8 +10,8 @@ declare const __propDef: {
         href?: string | undefined;
         btnClass?: string | undefined;
         type?: ButtonType | undefined;
-        color?: "blue" | "dark" | "light" | "green" | "red" | "yellow" | "purple" | "cyan" | "teal" | "lime" | "pink" | "alternative" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
-        shadow?: "blue" | "green" | "red" | "purple" | "cyan" | "teal" | "lime" | "pink" | null | undefined;
+        color?: "red" | "yellow" | "green" | "purple" | "pink" | "blue" | "light" | "dark" | "cyan" | "teal" | "lime" | "alternative" | "purpleToBlue" | "cyanToBlue" | "greenToBlue" | "purpleToPink" | "pinkToOrange" | "tealToLime" | "redToYellow" | undefined;
+        shadow?: "red" | "green" | "purple" | "pink" | "blue" | "cyan" | "teal" | "lime" | null | undefined;
     };
     events: {
         click: MouseEvent;

package/cards/Card.svelte

@@ -8,10 +8,10 @@ export let padding = 'lg';
 export let size = 'sm';
 const paddings = {
     none: 'p-0',
-    sm: 'p-4',
-    md: 'p-5',
-    lg: 'p-6',
-    xl: 'p-8'
+    sm: 'p-4 sm:p-6 md:p-8',
+    md: 'p-4 sm:p-5',
+    lg: 'p-4 sm:p-6',
+    xl: 'p-4 sm:p-8'
 };
 const sizes = {
     xs: 'max-w-xs',
@@ -28,13 +28,13 @@ let imgClass;
 $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal && 'object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none', horizontal && (reverse ? 'md:rounded-r-lg' : 'md:rounded-l-lg'));
 </script>
 
-<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} class={cardClass}>
-	{#if img}
-		<img class={imgClass} src={img} alt="" />
-		<div class={innerPdding}>
-			<slot />
-		</div>
-	{:else}
-		<slot />
-	{/if}
+<Frame tag={href ? 'a' : 'div'} rounded shadow border {href} {...$$restProps} class={cardClass}>
+  {#if img}
+    <img class={imgClass} src={img} alt="" />
+    <div class={innerPdding}>
+      <slot />
+    </div>
+  {:else}
+    <slot />
+  {/if}
 </Frame>

package/cards/Card.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -6,8 +7,8 @@ declare const __propDef: {
         horizontal?: boolean | undefined;
         reverse?: boolean | undefined;
         img?: string | undefined;
-        padding?: "sm" | "md" | "lg" | "none" | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        padding?: "none" | "sm" | "md" | "lg" | "xl" | undefined;
+        size?: SizeType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/carousels/CarouselTransition.svelte

@@ -34,7 +34,7 @@ const multiple = (node, params) => {
 };
 // Slide
 // export let slideClass: string = 'hidden';
-let imageShowingIndex = 1;
+let imageShowingIndex = 0;
 // $: image = images[imageShowingIndex];
 const nextSlide = () => {
     if (imageShowingIndex === images.length - 1) {

package/carousels/Thumbnail.svelte

@@ -6,7 +6,16 @@ export let thumbWidth;
 export let selected = false;
 </script>
 
-<img class="opacity-40" class:active={selected} id={id.toString()} src={thumbImg} alt={altTag} title="Image from {titleLink}" on:click width="{thumbWidth}%" />
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<img
+  class="opacity-40"
+  class:active={selected}
+  id={id.toString()}
+  src={thumbImg}
+  alt={altTag}
+  title="Image from {titleLink}"
+  on:click
+  width="{thumbWidth}%" />
 
 <style>
   .active {

package/darkmode/DarkMode.svelte

@@ -1,31 +1,34 @@
-<script>import { onMount } from 'svelte';
-export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
-let dark = false;
+<script>export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
 const toggleTheme = () => {
-    dark = window.document.documentElement.classList.toggle('dark');
-    localStorage.setItem('color-theme', dark ? 'dark' : 'light');
+    const isDark = window.document.documentElement.classList.toggle('dark');
+    localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
 };
-onMount(() => {
-    localStorage.getItem('color-theme') === 'dark' ||
-        (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+</script>
+
+<svelte:head>
+  <script>
+    if (window) {
+      localStorage.getItem('color-theme') === 'dark' ||
+      (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
         ? window.document.documentElement.classList.add('dark')
         : window.document.documentElement.classList.remove('dark');
-    dark = window.document.documentElement.classList.contains('dark');
-});
-</script>
+    }
+  </script>
+</svelte:head>
 
 <button on:click={toggleTheme} aria-label="Dark mode" type="button" class={btnClass}>
-	{#if dark}
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-			<path
-				d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
-				fill-rule="evenodd"
-				clip-rule="evenodd"
-			/>
-		</svg>
-	{:else}
-		<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-			<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-		</svg>
-	{/if}
+  <span class="hidden dark:block">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+  0 100-2H3a1 1 0 000 2h1z"
+        fill-rule="evenodd"
+        clip-rule="evenodd" />
+    </svg>
+  </span>
+  <span class="dark:hidden">
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
+    </svg>
+  </span>
 </button>

package/drawer/Drawer.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 import { fly, slide, blur, fade } from 'svelte/transition';
 import { clickOutside } from '../utils/clickOutside';
+export let activateClickOutside = true;
 export let hidden = true;
 export let position = 'fixed';
 export let leftOffset = 'inset-y-0 left-0';
@@ -36,24 +37,36 @@ const placements = {
 };
 const handleDrawer = () => {
     hidden = !hidden;
-    console.log('clicked');
 };
 let backdropDivClass = classNames('fixed top-0 left-0 z-50 w-full h-full', backdrop && bgColor, backdrop && bgOpacity);
 </script>
 
 {#if !hidden}
-  {#if backdrop}
-    <div class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {#if backdrop && activateClickOutside}
+    <div role="presentation" class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
+  {/if}
+  {#if activateClickOutside}
+    <div
+      use:clickOutside={() => !hidden && handleDrawer()}
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
+  {:else}
+    <div
+      {id}
+      {...$$restProps}
+      class={classNames(divClass, width, position, placements[placement], $$props.class)}
+      transition:multiple={transitionParams}
+      tabindex="-1"
+      aria-controls={id}
+      aria-labelledby={id}>
+      <slot {hidden} />
+    </div>
   {/if}
-  <div
-    use:clickOutside={() => !hidden && handleDrawer()}
-    {id}
-    {...$$restProps}
-    class={classNames(divClass, width, position, placements[placement], $$props.class)}
-    transition:multiple={transitionParams}
-    tabindex="-1"
-    aria-controls={id}
-    aria-labelledby={id}>
-    <slot {hidden} />
-  </div>
 {/if}

package/drawer/Drawer.svelte.d.ts

@@ -3,6 +3,7 @@ import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types
 declare const __propDef: {
     props: {
         [x: string]: any;
+        activateClickOutside?: boolean | undefined;
         hidden?: boolean | undefined;
         position?: "fixed" | "absolute" | undefined;
         leftOffset?: string | undefined;

package/forms/Checkbox.svelte

@@ -7,7 +7,7 @@ export let custom = false;
 export let inline = false;
 export let group = [];
 export let value = '';
-export let checked = undefined;
+export let checked = false;
 // tinted if put in component having its own background
 let background = getContext('background');
 $: {
@@ -33,21 +33,20 @@ $: {
 </script>
 
 <Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
-	<input
-		type="checkbox"
-		bind:checked
-		on:keyup
-		on:keydown
-		on:keypress
-		on:focus
-		on:blur
-		on:click
-		on:mouseover
-		on:mouseenter
-		on:mouseleave
-		on:paste
-		{value}
-		{...$$restProps}
-		class={inputClass(custom, color, true, background, $$slots.default || $$props.class)}
-	/><slot />
+  <input
+    type="checkbox"
+    bind:checked
+    on:keyup
+    on:keydown
+    on:keypress
+    on:focus
+    on:blur
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:paste
+    {value}
+    {...$$restProps}
+    class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />
 </Label>

package/forms/FloatingLabelInput.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         style?: "filled" | "outlined" | "standard" | undefined;
         type?: InputType | undefined;
         size?: "default" | "small" | undefined;
-        color?: "green" | "red" | "base" | undefined;
+        color?: "red" | "green" | "base" | undefined;
         value?: string | undefined;
         label?: string | undefined;
     };

package/forms/Helper.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         helperClass?: string | undefined;
-        color?: "green" | "red" | "gray" | "disabled" | undefined;
+        color?: "gray" | "red" | "green" | "disabled" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/forms/Input.svelte

@@ -50,31 +50,33 @@ $: {
     const _color = color === 'base' && background ? 'tinted' : color;
     inputClass = classNames(defaultClass, $$slots.left && leftPadding[_size], $$slots.right && rightPadding[_size], ringClasses[color], colorClasses[_color], borderClasses[_color], inputPadding[_size], textSizes[_size], group || 'rounded-lg', group && 'first:rounded-l-lg last:rounded-r-lg', group && 'border-l-0 first:border-l last:border-r', $$props.class);
 }
-let floatClass = 'flex absolute inset-y-0 left-0 items-center pointer-events-none text-gray-500 dark:text-gray-400';
+let floatClass = 'flex absolute inset-y-0 items-center pointer-events-none text-gray-500 dark:text-gray-400';
 </script>
 
 <Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
   {#if $$slots.left}
-    <div class="{floatClass} pl-3"><slot name="left" /></div>
+    <div class="{floatClass} left-0 pl-2.5"><slot name="left" /></div>
   {/if}
-  <input
-    {...$$restProps}
-    bind:value
-    on:blur
-    on:change
-    on:click
-    on:focus
-    on:keydown
-    on:keypress
-    on:keyup
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:paste
-    on:input
-    use:setType={type}
-    class={inputClass} />
+  <slot props={{ ...$$restProps, class: inputClass }}>
+    <input
+      {...$$restProps}
+      bind:value
+      on:blur
+      on:change
+      on:click
+      on:focus
+      on:keydown
+      on:keypress
+      on:keyup
+      on:mouseover
+      on:mouseenter
+      on:mouseleave
+      on:paste
+      on:input
+      use:setType={type}
+      class={inputClass} />
+  </slot>
   {#if $$slots.right}
-    <div class="{floatClass} pr-3"><slot name="right" /></div>
+    <div class="{floatClass} right-0 pr-2.5"><slot name="right" /></div>
   {/if}
 </Wrapper>

package/forms/Input.svelte.d.ts

@@ -6,10 +6,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         type?: InputType | undefined;
-        value?: string | undefined;
+        value?: string | number | undefined;
         size?: FormSizeType | undefined;
         defaultClass?: string | undefined;
-        color?: "green" | "red" | "base" | undefined;
+        color?: "red" | "green" | "base" | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -29,6 +29,11 @@ declare const __propDef: {
     };
     slots: {
         left: {};
+        default: {
+            props: {
+                class: string;
+            };
+        };
         right: {};
     };
 };

package/forms/Label.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        color?: "green" | "red" | "gray" | "disabled" | undefined;
+        color?: "gray" | "red" | "green" | "disabled" | undefined;
         defaultClass?: string | undefined;
         show?: boolean | undefined;
     };

package/forms/NumberInput.svelte

@@ -0,0 +1,7 @@
+<script>import Input from './Input.svelte';
+export let value = 0;
+</script>
+
+<Input let:props>
+  <input {...props} type="number" bind:value />
+</Input>

package/forms/NumberInput.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NumberInputProps = typeof __propDef.props;
+export declare type NumberInputEvents = typeof __propDef.events;
+export declare type NumberInputSlots = typeof __propDef.slots;
+export default class NumberInput extends SvelteComponentTyped<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+}
+export {};