flowbite-svelte 0.27.5 → 0.27.6

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.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/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',
@@ -29,12 +29,12 @@ $: imgClass = classNames(reverse ? 'rounded-b-lg' : 'rounded-t-lg', horizontal &
 </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}
+  {#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,15 @@ 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}%" />
+<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}
+  {#if backdrop && activateClickOutside}
     <div class={backdropDivClass} on:click={() => !hidden && handleDrawer()} />
   {/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 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}
 {/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 {};

package/forms/Toggle.svelte

@@ -4,7 +4,7 @@ import Checkbox from './Checkbox.svelte';
 export let size = 'default';
 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');
 const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
@@ -26,16 +26,7 @@ let divClass;
 $: divClass = classNames(common, background ? 'dark:bg-gray-600 dark:border-gray-500' : 'dark:bg-gray-700 dark:border-gray-600', colors[$$restProps.color ?? 'blue'], sizes[size], 'relative');
 </script>
 
-<Checkbox
-	custom
-	{...$$restProps}
-	class={$$props.class}
-	{value}
-	bind:checked
-	bind:group
-	on:click
-	on:change
->
-	<div class={divClass} />
-	<slot />
+<Checkbox custom {...$$restProps} class={$$props.class} {value} bind:checked bind:group on:click on:change>
+  <span class={divClass} />
+  <slot />
 </Checkbox>

package/index.d.ts

@@ -32,6 +32,7 @@ export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
 export { default as InputAddon } from './forms/InputAddon.svelte';
 export { default as Label } from './forms/Label.svelte';
+export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/index.js

@@ -47,6 +47,7 @@ export { default as Iconinput } from './forms/Iconinput.svelte';
 export { default as Input } from './forms/Input.svelte';
 export { default as InputAddon } from './forms/InputAddon.svelte';
 export { default as Label } from './forms/Label.svelte';
+export { default as NumberInput } from './forms/NumberInput.svelte';
 export { default as RadioInline } from './forms/RadioInline.svelte';
 export { default as Radio } from './forms/Radio.svelte';
 export { default as Range } from './forms/Range.svelte';

package/list-group/ListgroupItem.svelte

@@ -16,49 +16,47 @@ let hoverClass = 'hover:bg-gray-100 hover:text-blue-700 dark:hover:bg-gray-600 d
 let state;
 $: state = disabled ? 'disabled' : current ? 'current' : 'normal';
 let itemClass;
-$: itemClass = classNames('py-2 px-4 w-full text-sm font-medium', 'first:rounded-t-lg last:rounded-b-lg', states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
+$: itemClass = classNames('py-2 px-0 sm:px-4 w-full text-sm font-medium', 'first:rounded-t-lg last:rounded-b-lg', states[state], active && state === 'disabled' && 'cursor-not-allowed', active && state === 'normal' && hoverClass, active && state === 'normal' && focusClass, $$props.class);
 </script>
 
 {#if !active}
-	<li class={itemClass}>
-		<slot item={$$props} />
-	</li>
+  <li class={itemClass}>
+    <slot item={$$props} />
+  </li>
 {:else if href}
-	<a
-		{href}
-		class="block {itemClass}"
-		on:click={() => dispatch('click', $$props)}
-		aria-current={current}
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-	>
-		<slot item={$$props} />
-	</a>
+  <a
+    {href}
+    class="block {itemClass}"
+    on:click={() => dispatch('click', $$props)}
+    aria-current={current}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover>
+    <slot item={$$props} />
+  </a>
 {:else}
-	<button
-		class="inline-flex relative items-center text-left {itemClass}"
-		{disabled}
-		on:click={() => dispatch('click', $$props)}
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		aria-current={current}
-	>
-		<slot item={$$props} />
-	</button>
+  <button
+    class="inline-flex relative items-center text-left {itemClass}"
+    {disabled}
+    on:click={() => dispatch('click', $$props)}
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    aria-current={current}>
+    <slot item={$$props} />
+  </button>
 {/if}

package/modals/Modal.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
         title?: string | undefined;
-        size?: any;
+        size?: SizeType | undefined;
         placement?: "top-left" | "top-center" | "top-right" | "center-left" | "center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right" | undefined;
         autoclose?: boolean | undefined;
         permanent?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.27.5",
+  "version": "0.27.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -13,8 +13,8 @@
   "license": "MIT",
   "devDependencies": {
     "@playwright/test": "^1.25.0",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/adapter-auto": "1.0.0-next.75",
+    "@sveltejs/kit": "1.0.0-next.484",
     "@sveltejs/package": "1.0.0-next.3",
     "@typescript-eslint/eslint-plugin": "^5.27.0",
     "@typescript-eslint/parser": "^5.27.0",
@@ -33,7 +33,6 @@
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",
     "svelte-preprocess": "^4.10.7",
-    "svelte-sidebar-menu": "^0.9.11",
     "svelte2tsx": "^0.5.18",
     "tailwindcss": "^3.1.5",
     "tslib": "^2.3.1",
@@ -101,6 +100,7 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./.DS_Store": "./.DS_Store",
     "./accordions/Accordion.svelte": "./accordions/Accordion.svelte",
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
@@ -142,6 +142,7 @@
     "./forms/Input.svelte": "./forms/Input.svelte",
     "./forms/InputAddon.svelte": "./forms/InputAddon.svelte",
     "./forms/Label.svelte": "./forms/Label.svelte",
+    "./forms/NumberInput.svelte": "./forms/NumberInput.svelte",
     "./forms/Radio.svelte": "./forms/Radio.svelte",
     "./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
     "./forms/Range.svelte": "./forms/Range.svelte",

package/ratings/Rating.svelte

@@ -1,4 +1,5 @@
 <script>import Star from './Star.svelte';
+import classNames from 'classnames';
 export let divClass = 'flex items-center';
 export let size = '24';
 export let total = 5;
@@ -10,24 +11,24 @@ let roundedRating = ceil ? Math.ceil(rating) : Math.floor(rating);
 let grayStars = total - roundedRating;
 </script>
 
-<div class={divClass}>
-	{#if count}
-		<Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
-		<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
-		<slot />
-	{:else}
-		{#each Array(roundedRating) as _, star}
-			<slot name="ratingUp">
-				<Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
-			</slot>
-		{/each}
-		{#each Array(grayStars) as _, star}
-			<slot name="ratingDown">
-				<Star size="24" class="text-gray-300 dark:text-gray-500" />
-			</slot>
-		{/each}
-		{#if $$slots.text}
-			<slot name="text" />
-		{/if}
-	{/if}
+<div class={classNames(divClass, $$props.class)}>
+  {#if count}
+    <Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
+    <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
+    <slot />
+  {:else}
+    {#each Array(roundedRating) as _, star}
+      <slot name="ratingUp">
+        <Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
+      </slot>
+    {/each}
+    {#each Array(grayStars) as _, star}
+      <slot name="ratingDown">
+        <Star {size} class="text-gray-300 dark:text-gray-500" />
+      </slot>
+    {/each}
+    {#if $$slots.text}
+      <slot name="text" />
+    {/if}
+  {/if}
 </div>

package/ratings/Rating.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         divClass?: string | undefined;
         size?: string | undefined;
         total?: number | undefined;

package/tables/Table.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         hoverable?: boolean | undefined;
         noborder?: boolean | undefined;
         shadow?: boolean | undefined;
-        color?: "default" | "blue" | "green" | "red" | "yellow" | "purple" | "custom" | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tables/TableSearch.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         striped?: boolean | undefined;
         hoverable?: boolean | undefined;
         placeholder?: string | undefined;
-        color?: "default" | "blue" | "green" | "red" | "yellow" | "purple" | "custom" | undefined;
+        color?: "red" | "yellow" | "green" | "default" | "purple" | "blue" | "custom" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/tooltips/Tooltip.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        style?: "dark" | "light" | "custom" | "auto" | undefined;
+        style?: "light" | "dark" | "custom" | "auto" | undefined;
         defaultClass?: string | undefined;
     };
     events: {

package/typography/P.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         whitespace?: "pre" | "normal" | "nowrap" | "preline" | "prewrap" | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
         space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
-        weight?: "bold" | "light" | "normal" | "thin" | "extralight" | "medium" | "semibold" | "extrabold" | "black" | undefined;
+        weight?: "light" | "bold" | "normal" | "thin" | "extralight" | "medium" | "semibold" | "extrabold" | "black" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/utils/Frame.svelte

@@ -82,7 +82,7 @@ $: divClass = classNames(bgColors[color], textColors[color], rounded && (color =
   this={tag}
   use:use={options}
   bind:this={node}
-  transition:transitionFunc={params}
+  transition:transitionFunc|local={params}
   {...$$restProps}
   class={divClass}
   on:mouseenter

package/utils/Frame.svelte.d.ts

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         tag?: string | undefined;
-        color?: string | undefined;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "default" | "purple" | "pink" | "blue" | "light" | "dark" | "dropdown" | "navbar" | "navbarUl" | "form" | "none" | undefined;
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         shadow?: boolean | undefined;

package/utils/Popper.svelte

@@ -60,7 +60,7 @@ function init(node, _triggerEl) {
             {
                 name: 'offset',
                 options: {
-                    offset: ({ placement, reference, popper }) => {
+                    offset: ({ reference, popper }) => {
                         // for full screen mega menu
                         return [yOnly ? popper.width / 2 - reference.width / 2 - reference.x : 0, offset];
                     }
@@ -112,25 +112,28 @@ onMount(() => {
         });
     };
 });
+function optional(pred, func) {
+    return pred && func;
+}
 </script>
 
 {#if !triggerEl}
-	<div id="empty" bind:this={contentEl} />
+  <div bind:this={contentEl} />
 {/if}
 
 {#if open && triggerEl}
-	<Frame
-		use={init}
-		options={triggerEl}
-		role="tooltip"
-		tabIndex={activeContent ? -1 : undefined}
-		on:focusin={activeContent ? showHandler : undefined}
-		on:focusout={activeContent ? hideHandler : undefined}
-		on:mouseenter={activeContent && !clickable ? showHandler : undefined}
-		on:mouseleave={activeContent && !clickable ? hideHandler : undefined}
-		{...$$restProps}
-		class={classNames('z-10 outline-none', $$props.class)}>
-		<slot />
-		{#if arrow}<div data-popper-arrow class="tooltip-arrow"/>{/if}
-	</Frame>
+  <Frame
+    use={init}
+    options={triggerEl}
+    role="tooltip"
+    tabIndex={activeContent ? -1 : undefined}
+    on:focusin={optional(activeContent, showHandler)}
+    on:focusout={optional(activeContent, hideHandler)}
+    on:mouseenter={optional(activeContent && !clickable, showHandler)}
+    on:mouseleave={optional(activeContent && !clickable, hideHandler)}
+    {...$$restProps}
+    class={classNames('z-10 outline-none', $$props.class)}>
+    <slot />
+    {#if arrow}<div data-popper-arrow class="tooltip-arrow border dark:border-gray-100" />{/if}
+  </Frame>
 {/if}

package/utils/focusTrap.js

@@ -1,18 +1,17 @@
 //
-// Focus trap copied from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
+// Taken from github.com/carbon-design-system/carbon/packages/react/src/internal/keyboard/navigation.js
 //
 
 // add all the elements inside modal which you want to make focusable
-const focusableElements =
-  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
-
-function getFocusable(node) {
-  const focusableContent = node.querySelectorAll(focusableElements);
-  return [focusableContent[0], focusableContent[focusableContent.length - 1]];
-}
+const selectorTabbable = `
+  a[href], area[href], input:not([disabled]):not([tabindex='-1']),
+  button:not([disabled]):not([tabindex='-1']),select:not([disabled]):not([tabindex='-1']),
+  textarea:not([disabled]):not([tabindex='-1']),
+  iframe, object, embed, *[tabindex]:not([tabindex='-1']):not([disabled]), *[contenteditable=true]
+`;
 
 export default function focusTrap(node) {
-  let firstFocusableElement, lastFocusableElement; // first and last element to be focused inside modal
+  const tabbable = Array.from(node.querySelectorAll(selectorTabbable));
 
   function handleFocusTrap(e) {
     let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
@@ -21,23 +20,15 @@ export default function focusTrap(node) {
       return;
     }
 
-    if (e.shiftKey) {
-      // if shift key pressed for shift + tab combination
-      if (document.activeElement === firstFocusableElement) {
-        lastFocusableElement.focus(); // add focus for the last focusable element
-        e.preventDefault();
-      }
-    } else {
-      // if tab key is pressed
-      if (document.activeElement === lastFocusableElement) {
-        // if focused has reached to last focusable element then focus first focusable element after pressing tab
-        firstFocusableElement.focus(); // add focus for the first focusable element
-        e.preventDefault();
-      }
-    }
+    let index = tabbable.indexOf(document.activeElement);
+    if (index === -1 && e.shiftKey) index = 0;
+    index += tabbable.length + (e.shiftKey ? -1 : 1);
+    index %= tabbable.length;
+    tabbable[index].focus();
+
+    e.preventDefault();
   }
 
-  [firstFocusableElement, lastFocusableElement] = getFocusable(node);
   document.addEventListener('keydown', handleFocusTrap, true);
 
   return {