flowbite-svelte 0.29.9 → 0.29.11

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.29.11](https://github.com/themesberg/flowbite-svelte/compare/v0.29.10...v0.29.11) (2023-01-16)
+
+
+### Features
+
+* indicator comp ([#532](https://github.com/themesberg/flowbite-svelte/issues/532)) ([57ce4fc](https://github.com/themesberg/flowbite-svelte/commit/57ce4fcdce3965921c0f6edf71f6ae42c2d42b40))
+* make <TableHead> slot more flexible ([#527](https://github.com/themesberg/flowbite-svelte/issues/527)) ([33803f2](https://github.com/themesberg/flowbite-svelte/commit/33803f23ce90f9425417f6417c70bc6928337bbe))
+
+
+### Bug Fixes
+
+* update badge component's style and doc ([#531](https://github.com/themesberg/flowbite-svelte/issues/531)) ([ce9af8c](https://github.com/themesberg/flowbite-svelte/commit/ce9af8cff8f6979f625b00fd165aa2ffadc41604))
+
+### [0.29.10](https://github.com/themesberg/flowbite-svelte/compare/v0.29.9...v0.29.10) (2023-01-13)
+
+
+### Features
+
+* add on:input to textarea ([#518](https://github.com/themesberg/flowbite-svelte/issues/518)) ([318ffbf](https://github.com/themesberg/flowbite-svelte/commit/318ffbf676366fcc7bd08c538270800d90ce5189))
+* make Select receive custom options ([#514](https://github.com/themesberg/flowbite-svelte/issues/514)) ([a58b410](https://github.com/themesberg/flowbite-svelte/commit/a58b410a3ffce29432907457baeae8c20977ef42))
+
+
+### Bug Fixes
+
+* [#530](https://github.com/themesberg/flowbite-svelte/issues/530) ([16c6650](https://github.com/themesberg/flowbite-svelte/commit/16c66504d42a378705a120fae5a6ca147a776bd4))
+* export slide params ([#516](https://github.com/themesberg/flowbite-svelte/issues/516)) ([c8dd81d](https://github.com/themesberg/flowbite-svelte/commit/c8dd81d5493b908a903648104f0371ac143c1167))
+* modal layout ([#526](https://github.com/themesberg/flowbite-svelte/issues/526)) ([6b25019](https://github.com/themesberg/flowbite-svelte/commit/6b250190f25feefe21191b3d8cab709fe28c6908))
+* npm run check corrections ([#517](https://github.com/themesberg/flowbite-svelte/issues/517)) ([f1f89e3](https://github.com/themesberg/flowbite-svelte/commit/f1f89e30221fd3bb63fed174fe825a46f780d1c7))
+
 ### [0.29.9](https://github.com/themesberg/flowbite-svelte/compare/v0.29.8...v0.29.9) (2023-01-01)
 
 

package/accordions/AccordionItem.svelte

@@ -35,7 +35,7 @@ onMount(() => {
     // this will trigger unsubscribe on destroy
     return selected.subscribe((x) => (open = x === self));
 });
-const handleToggle = (e) => selected.set(open ? {} : self);
+const handleToggle = (_) => selected.set(open ? {} : self);
 let buttonClass;
 $: buttonClass = classNames(defaultClass, ctx.flush ? 'py-5' : 'p-5', open && (ctx.flush ? 'text-gray-900 dark:text-white' : activeClasses || ctx.activeClasses), !open && (ctx.flush ? 'text-gray-500 dark:text-gray-400' : inactiveClasses || ctx.inactiveClasses), $$props.class);
 </script>

package/avatar/Avatar.svelte

@@ -1,14 +1,16 @@
 <script>import classNames from 'classnames';
 import AvatarPlaceholder from './Placeholder.svelte';
-import Dot from './Dot.svelte';
+import Indicator from '../indicators/Indicator.svelte';
 export let src = '';
 export let href = undefined;
 export let rounded = false;
 export let border = false;
 export let stacked = false;
-export let dot = { top: false, color: 'bg-gray-300 dark:bg-gray-500' };
+export let dot = undefined;
 export let alt = '';
 export let size = 'md';
+$: dot = dot && { placement: 'top-right', color: 'gray', size: 'lg', ...dot };
+$: dot && console.log(dot);
 const sizes = {
     xs: 'w-6 h-6',
     sm: 'w-8 h-8',
@@ -20,20 +22,21 @@ let avatarClass;
 $: avatarClass = classNames(rounded ? 'rounded' : 'rounded-full', border && 'p-1 ring-2 ring-gray-300 dark:ring-gray-500', sizes[size], stacked && 'border-2 -ml-4 border-white dark:border-gray-800', 'bg-gray-100 dark:bg-gray-600 text-gray-600 dark:text-gray-300', $$props.class);
 </script>
 
-<Dot show={$$props.dot} {rounded} {...dot} {size} class={sizes[size]}>
-  {#if src}
-    <img {alt} {src} {...$$restProps} class={avatarClass} />
-  {:else if $$slots.default}
-    <svelte:element
-      this={href ? 'a' : 'div'}
-      {href}
-      {...$$restProps}
-      class="flex justify-center items-center text-xs font-medium {avatarClass}">
-      <slot />
-    </svelte:element>
-  {:else}
-    <svelte:element this={href ? 'a' : 'div'} {href} {...$$restProps} class={avatarClass}>
-      <AvatarPlaceholder {rounded} />
-    </svelte:element>
-  {/if}
-</Dot>
+{#if !src || !!href || $$slots.default || dot}
+  <svelte:element
+    this={href ? 'a' : 'div'}
+    {href}
+    {...$$restProps}
+    class="relative flex justify-center items-center {avatarClass}">
+    {#if src}
+      <img {alt} {src} class={rounded ? 'rounded' : 'rounded-full'} />
+    {:else}
+      <slot><AvatarPlaceholder {rounded} /></slot>
+    {/if}
+    {#if dot}
+      <Indicator border offset={rounded} {...dot} />
+    {/if}
+  </svelte:element>
+{:else}
+  <img {alt} {src} {...$$restProps} class={avatarClass} />
+{/if}

package/avatar/Avatar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import type { DotType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -8,7 +7,7 @@ declare const __propDef: {
         rounded?: boolean | undefined;
         border?: boolean | undefined;
         stacked?: boolean | undefined;
-        dot?: DotType | undefined;
+        dot?: object | undefined;
         alt?: string | undefined;
         size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
     };

package/badges/Badge.svelte

@@ -1,22 +1,22 @@
-<script>import classNames from 'classnames';
+<script>import { createEventDispatcher } from 'svelte';
+import classNames from 'classnames';
 import CloseButton from '../utils/CloseButton.svelte';
 export let color = 'blue';
 export let large = false;
+export let border = false;
 export let href = undefined;
 export let rounded = false;
 export let index = false;
 export let dismissable = false;
-export let baseClass = 'inline-flex items-center justify-center -mb-0.5';
-let hidden = false;
 const colors = {
-    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
     dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
-    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
-    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
-    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
-    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
-    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-900',
-    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-900',
+    red: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+    green: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-300',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-300',
     ['!blue']: 'bg-blue-500 text-blue-100',
     ['!dark']: 'bg-gray-500 text-gray-100',
     ['!red']: 'bg-red-500 text-white',
@@ -26,26 +26,74 @@ const colors = {
     ['!purple']: 'bg-purple-500 text-purple-100',
     ['!pink']: 'bg-pink-500 text-pink-100'
 };
-const hovers = {
-    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
-    dark: 'hover:bg-gray-200 dark:hover:bg-gray-300',
-    red: 'hover:bg-red-200 dark:hover:bg-red-300',
-    green: 'hover:bg-green-200 dark:hover:bg-green-300',
-    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
-    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300',
-    purple: 'hover:bg-purple-200 dark:hover:bg-purple-300',
-    pink: 'hover:bg-pink-200 dark:hover:bg-pink-300'
+const borderedColors = {
+    blue: 'bg-blue-100 text-blue-800 dark:bg-gray-700 dark:text-blue-400 border-blue-400',
+    dark: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400 border-gray-500',
+    red: 'bg-red-100 text-red-800 dark:bg-gray-700 dark:text-red-400 border-red-400',
+    green: 'bg-green-100 text-green-800 dark:bg-gray-700 dark:text-green-400 border-green-400',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-gray-700 dark:text-yellow-300 border-yellow-300',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-gray-700 dark:text-indigo-400 border-indigo-400',
+    purple: 'bg-purple-100 text-purple-800 dark:bg-gray-700 dark:text-purple-400 border-purple-400',
+    pink: 'bg-pink-100 text-pink-800 dark:bg-gray-700 dark:text-pink-400 border-pink-400'
+};
+const hoverColors = {
+    blue: 'hover:bg-blue-200',
+    dark: 'hover:bg-gray-200',
+    red: 'hover:bg-red-200',
+    green: 'hover:bg-green-200',
+    yellow: 'hover:bg-yellow-200',
+    indigo: 'hover:bg-indigo-200',
+    purple: 'hover:bg-purple-200',
+    pink: 'hover:bg-pink-200'
 };
+const baseClass = 'font-medium inline-flex items-center justify-center px-2.5 py-0.5';
+let transition = false;
 let badgeClass;
-$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href && (hovers[color] ?? hovers.blue), rounded ? 'rounded-full p-1' : 'rounded px-2.5 py-0.5', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), $$props.class);
+$: badgeClass = classNames(baseClass, large ? 'text-sm' : 'text-xs', border ? `border ${borderedColors[color]}` : colors[color], href && hoverColors[color], rounded ? 'rounded-full' : 'rounded', index && 'absolute font-bold border-2 border-white dark:border-gray-900', index && (large ? 'w-7 h-7 -top-3 -right-3' : 'w-6 h-6 -top-2 -right-2'), transition && 'transition-opacity duration-300 ease-out opacity-0', $$props.class);
+const closeBtnBaseClass = 'inline-flex items-center !p-0.5 !m-0 !ml-2 text-sm bg-transparent rounded-sm focus:!ring-0';
+// uncomment the following lines to completely overwrite <CloseButton>'s color palette
+// in case <CloseButton>'s color palette is changed in the future
+// const closeBtnColors = {
+//   blue: '!text-blue-400 hover:!bg-blue-200 hover:!text-blue-900 dark:hover:!bg-blue-800 dark:hover:!text-blue-300',
+//   dark: '!text-gray-400 hover:!bg-gray-200 hover:!text-gray-900 dark:hover:!bg-gray-600 dark:hover:!text-gray-300',
+//   red: '!text-red-400 hover:!bg-red-200 hover:!text-red-900 dark:hover:!bg-red-800 dark:hover:!text-red-300',
+//   green: '!text-green-400 hover:!bg-green-200 hover:!text-green-900 dark:hover:!bg-green-800 dark:hover:!text-green-300',
+//   yellow: '!text-yellow-400 hover:!bg-yellow-200 hover:!text-yellow-900 dark:hover:!bg-yellow-800 dark:hover:!text-yellow-300',
+//   indigo: '!text-indigo-400 hover:!bg-indigo-200 hover:!text-indigo-900 dark:hover:!bg-indigo-800 dark:hover:!text-indigo-300',
+//   purple: '!text-purple-400 hover:!bg-purple-200 hover:!text-purple-900 dark:hover:!bg-purple-800 dark:hover:!text-purple-300',
+//   pink: '!text-pink-400 hover:!bg-pink-200 hover:!text-pink-900 dark:hover:!bg-pink-800 dark:hover:!text-pink-300'
+// };
+// only overwrite necessary colors (<CloseButton> v0.29.10)
+const closeBtnColors = {
+    blue: 'text-blue-400 hover:text-blue-900 dark:hover:!bg-blue-800 dark:hover:text-blue-300',
+    dark: 'text-gray-400 hover:!text-gray-400 hover:!bg-gray-200 dark:hover:!text-gray-300',
+    red: 'text-red-400 hover:text-red-900 dark:hover:!bg-red-800 dark:hover:text-red-300',
+    green: 'text-green-400 hover:text-green-900 dark:hover:!bg-green-800 dark:hover:text-green-300',
+    yellow: 'text-yellow-400 hover:text-yellow-900 dark:hover:!bg-yellow-800 dark:hover:text-yellow-300',
+    indigo: 'text-indigo-400 hover:text-indigo-900 dark:hover:!bg-indigo-800 dark:hover:text-indigo-300',
+    purple: 'text-purple-400 hover:text-purple-900 dark:hover:!bg-purple-800 dark:hover:text-purple-300',
+    pink: 'text-pink-400 hover:text-pink-900 dark:hover:!bg-pink-800 dark:hover:text-pink-300'
+};
+let closeBtnClass;
+$: closeBtnClass = classNames(closeBtnBaseClass, closeBtnColors[color]);
+let hidden = false;
+const dispatch = createEventDispatcher();
 const handleHide = () => {
-    hidden = !hidden;
+    transition = true;
+    setTimeout(() => {
+        hidden = true;
+    }, 300);
+    dispatch('dismiss', {
+        message: 'The badge will be dismissed.'
+    });
 };
 </script>
 
 <svelte:element this={href ? 'a' : 'span'} {href} {...$$restProps} class={badgeClass} class:hidden>
   <slot />
   {#if dismissable}
-    <CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} class="ml-1.5 -mr-1.5" />
+    <slot name="closeBtn" {handleHide}>
+      <CloseButton {color} on:click={handleHide} size={large ? 'sm' : 'xs'} name="Remove badge" class={closeBtnClass} />
+    </slot>
   {/if}
 </svelte:element>

package/badges/Badge.svelte.d.ts

@@ -4,17 +4,22 @@ declare const __propDef: {
         [x: string]: any;
         color?: "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "blue" | "dark" | undefined;
         large?: boolean | undefined;
+        border?: boolean | undefined;
         href?: string | undefined;
         rounded?: boolean | undefined;
         index?: boolean | undefined;
         dismissable?: boolean | undefined;
-        baseClass?: string | undefined;
     };
     events: {
+        dismiss: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {};
+        closeBtn: {
+            handleHide: () => void;
+        };
     };
 };
 export type BadgeProps = typeof __propDef.props;

package/drawer/Drawer.svelte.d.ts

@@ -14,7 +14,7 @@ declare const __propDef: {
         backdrop?: boolean | undefined;
         bgColor?: string | undefined;
         bgOpacity?: string | undefined;
-        placement?: "top" | "bottom" | "left" | "right" | undefined;
+        placement?: "bottom" | "left" | "right" | "top" | undefined;
         id?: string | undefined;
         divClass?: string | undefined;
         transitionParams?: drawerTransitionParamTypes | undefined;

package/footer/FooterCopyright.svelte

@@ -5,6 +5,7 @@ export let year = new Date().getFullYear();
 export let href = '';
 export let by = '';
 export let target = undefined;
+export let copyrightMessage = 'All Rights Reserved.';
 </script>
 
 <span class={classNames(spanClass, $$props.class)}>
@@ -16,5 +17,5 @@ export let target = undefined;
   {:else}
     <span class="ml-1">{by}</span>
   {/if}
-  . All Rights Reserved.
+  . {copyrightMessage}
 </span>

package/footer/FooterCopyright.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         href?: string | undefined;
         by?: string | undefined;
         target?: string | undefined;
+        copyrightMessage?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/footer/FooterLink.svelte

@@ -1,5 +1,4 @@
-<script>import A from '../typography/A.svelte';
-import classNames from 'classnames';
+<script>import classNames from 'classnames';
 export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';

package/forms/Select.svelte

@@ -17,9 +17,13 @@ $: selectClass = classNames(common, underline ? underlineClass : defaultClass, s
 </script>
 
 <select {...$$restProps} bind:value class={selectClass} on:change on:contextmenu on:input>
-  <option disabled selected value="">{placeholder}</option>
+  {#if placeholder}
+    <option disabled selected value="">{placeholder}</option>
+  {/if}
 
   {#each items as { value, name }}
     <option {value}>{name}</option>
+  {:else}
+    <slot />
   {/each}
 </select>

package/forms/Select.svelte.d.ts

@@ -18,7 +18,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;

package/forms/Textarea.svelte

@@ -30,6 +30,7 @@ $: innerWrapperClass = classNames('py-2 px-4 bg-white dark:bg-gray-800', $$slots
       on:click
       on:contextmenu
       on:focus
+      on:input
       on:keydown
       on:keypress
       on:keyup

package/forms/Textarea.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         click: MouseEvent;
         contextmenu: MouseEvent;
         focus: FocusEvent;
+        input: Event;
         keydown: KeyboardEvent;
         keypress: KeyboardEvent;
         keyup: KeyboardEvent;

package/index.d.ts

@@ -41,6 +41,7 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+export { default as Indicator } from './indicators/Indicator.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
 export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';

package/index.js

@@ -56,6 +56,8 @@ export { default as SimpleSearch } from './forms/SimpleSearch.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 export { default as VoiceSearch } from './forms/VoiceSearch.svelte';
+// Indicator
+export { default as Indicator } from './indicators/Indicator.svelte';
 // Kbd
 export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';

package/indicators/Indicator.svelte

@@ -0,0 +1,61 @@
+<script>import classNames from 'classnames';
+export let color = 'gray';
+export let rounded = false;
+export let size = 'md';
+export let border = false;
+export let placement = undefined;
+export let offset = true;
+const colors = {
+    gray: 'bg-gray-200',
+    dark: 'bg-gray-900 dark:bg-gray-700',
+    blue: 'bg-blue-600',
+    green: 'bg-green-500',
+    red: 'bg-red-500',
+    purple: 'bg-purple-500',
+    indigo: 'bg-indigo-500',
+    yellow: 'bg-yellow-300',
+    teal: 'bg-teal-500',
+    none: ''
+};
+const sizes = {
+    xs: 'w-2 h-2',
+    sm: 'w-2.5 h-2.5',
+    md: 'w-3 h-3',
+    lg: 'w-3.5 h-3.5',
+    xl: 'w-6 h-6'
+};
+const placements = {
+    // top
+    'top-left': 'top-0 left-0',
+    'top-center': 'top-0 left-1/2 -translate-x-1/2',
+    'top-right': 'top-0 right-0',
+    // center
+    'center-left': 'top-1/2 -translate-y-1/2 left-0',
+    center: 'top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2',
+    'center-right': 'top-1/2 -translate-y-1/2 right-0',
+    // bottom
+    'bottom-left': 'bottom-0 left-0',
+    'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
+    'bottom-right': 'bottom-0 right-0'
+};
+const offsets = {
+    // top
+    'top-left': '-translate-x-1/3 -translate-y-1/3',
+    'top-center': '-translate-y-1/3',
+    'top-right': 'translate-x-1/3 -translate-y-1/3',
+    // center
+    'center-left': '-translate-x-1/3',
+    center: '',
+    'center-right': 'translate-x-1/3',
+    // bottom
+    'bottom-left': '-translate-x-1/3 translate-y-1/3',
+    'bottom-center': 'translate-y-1/3',
+    'bottom-right': 'translate-x-1/3 translate-y-1/3'
+};
+let dotClass;
+$: dotClass = classNames('flex-shrink-0', rounded ? 'rounded' : 'rounded-full', border && 'border-2 border-white dark:border-gray-800', sizes[size], colors[color], $$slots.default && 'inline-flex items-center justify-center', placement && 'absolute ' + placements[placement], placement && offset && offsets[placement], $$props.class);
+let divClass;
+$: divClass = classNames('relative flex-shrink-0');
+</script>
+
+<div class={dotClass}><slot /></div>

package/indicators/Indicator.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: "gray" | "red" | "yellow" | "green" | "indigo" | "purple" | "blue" | "dark" | "none" | "teal" | undefined;
+        rounded?: boolean | undefined;
+        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        border?: boolean | undefined;
+        placement?: 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | undefined;
+        offset?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type IndicatorProps = typeof __propDef.props;
+export type IndicatorEvents = typeof __propDef.events;
+export type IndicatorSlots = typeof __propDef.slots;
+export default class Indicator extends SvelteComponentTyped<IndicatorProps, IndicatorEvents, IndicatorSlots> {
+}
+export {};

package/modals/Modal.svelte

@@ -62,15 +62,14 @@ const sizes = {
 const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
-        open = false;
+        hide(e);
 };
-const hide = () => {
+const hide = (e) => {
+    e.preventDefault();
     open = false;
 };
-let mainClass;
-$: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full', backdropClasses, ...getPlacementClasses());
 let frameClass;
-$: frameClass = classNames('relative flex flex-col w-full h-full md:h-auto', $$props.class);
+$: frameClass = classNames('relative flex flex-col mx-auto', $$props.class);
 const isScrollable = (e) => [
     e.scrollWidth > e.clientWidth && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowX) >= 0,
     e.scrollHeight > e.clientHeight && ['scroll', 'auto'].indexOf(getComputedStyle(e).overflowY) >= 0
@@ -82,22 +81,28 @@ function preventWheelDefault(e) {
 }
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
-        return hide();
+        return hide(e);
 }
 </script>
 
 {#if open}
+  <!-- backdrop -->
+  <div class={classNames('fixed inset-0 z-40', backdropClasses)} />
+  <!-- dialog -->
   <div
-    tabindex="-1"
-    class={mainClass}
-    aria-modal="true"
-    role="dialog"
-    on:keydown|preventDefault={handleKeys}
+    on:keydown={handleKeys}
     on:wheel|preventDefault
     use:prepareFocus
     use:focusTrap
-    on:click={autoclose ? onAutoClose : null}>
-    <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
+    on:click={autoclose ? onAutoClose : null}
+    class={classNames(
+      'fixed top-0 left-0 right-0 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex',
+      ...getPlacementClasses()
+    )}
+    tabindex="-1"
+    aria-modal="true"
+    role="dialog">
+    <div class="flex relative {sizes[size]} w-full max-h-full">
       <!-- Modal content -->
       <Frame rounded shadow {...$$restProps} class={frameClass}>
         <!-- Modal header -->

package/navbar/NavUl.svelte

@@ -5,6 +5,7 @@ import Frame from '../utils/Frame.svelte';
 export let divClass = 'w-full md:block md:w-auto';
 export let ulClass = 'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
 export let hidden = true;
+export let slideParams = { delay: 250, duration: 500, easing: quintOut };
 let _divClass;
 $: _divClass = classNames(divClass, $$props.class);
 let _ulClass;
@@ -14,7 +15,7 @@ $$props.class);
 </script>
 
 {#if !hidden}
-  <div {...$$restProps} class={_divClass} transition:slide={{ delay: 250, duration: 500, easing: quintOut }}>
+  <div {...$$restProps} class={_divClass} transition:slide={slideParams}>
     <Frame tag="ul" border rounded color="navbarUl" class={_ulClass}>
       <slot />
     </Frame>

package/navbar/NavUl.svelte.d.ts

@@ -1,10 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
+import { type SlideParams } from 'svelte/transition';
 declare const __propDef: {
     props: {
         [x: string]: any;
         divClass?: string | undefined;
         ulClass?: string | undefined;
         hidden?: boolean | undefined;
+        slideParams?: SlideParams | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.29.9",
+  "version": "0.29.11",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -108,7 +108,6 @@
     "./accordions/AccordionItem.svelte": "./accordions/AccordionItem.svelte",
     "./alerts/Alert.svelte": "./alerts/Alert.svelte",
     "./avatar/Avatar.svelte": "./avatar/Avatar.svelte",
-    "./avatar/Dot.svelte": "./avatar/Dot.svelte",
     "./avatar/Placeholder.svelte": "./avatar/Placeholder.svelte",
     "./badges/Badge.svelte": "./badges/Badge.svelte",
     "./breadcrumbs/Breadcrumb.svelte": "./breadcrumbs/Breadcrumb.svelte",
@@ -155,6 +154,7 @@
     "./forms/Toggle.svelte": "./forms/Toggle.svelte",
     "./forms/VoiceSearch.svelte": "./forms/VoiceSearch.svelte",
     ".": "./index.js",
+    "./indicators/Indicator.svelte": "./indicators/Indicator.svelte",
     "./kbd/ArrowKeyDown.svelte": "./kbd/ArrowKeyDown.svelte",
     "./kbd/ArrowKeyLeft.svelte": "./kbd/ArrowKeyLeft.svelte",
     "./kbd/ArrowKeyRight.svelte": "./kbd/ArrowKeyRight.svelte",

package/paginations/PaginationItem.svelte

@@ -1,5 +1,5 @@
 <script>import classNames from 'classnames';
-import { getContext, onMount } from 'svelte';
+import { getContext } from 'svelte';
 export let href = undefined;
 export let active = false;
 export let activeClass = '';

package/ratings/Rating.svelte

@@ -17,12 +17,12 @@ let grayStars = total - roundedRating;
     <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">{rating}</p>
     <slot />
   {:else}
-    {#each Array(roundedRating) as _, star}
+    {#each Array(roundedRating) as _}
       <slot name="ratingUp">
         <Star variation="solid" {size} class="text-yellow-300 dark:text-yellow-200" />
       </slot>
     {/each}
-    {#each Array(grayStars) as _, star}
+    {#each Array(grayStars) as _}
       <slot name="ratingDown">
         <Star {size} class="text-gray-300 dark:text-gray-500" />
       </slot>

package/ratings/RatingComment.svelte

@@ -10,55 +10,55 @@ let grayStars = comment.total - roundedRating;
 </script>
 
 <article>
-	<div class="flex items-center mb-4 space-x-4">
-		<img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
-		<div class="space-y-1 font-medium dark:text-white">
-			<p>
-				{comment.user.name}
-				<time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
-					>{comment.user.joined}</time>
-			</p>
-		</div>
-	</div>
-	<div class="flex items-center mb-1">
-		{#each Array(roundedRating) as _, star}
-			<slot name="ratingUp">
-				<Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
-			</slot>
-		{/each}
-		{#each Array(grayStars) as _, star}
-			<slot name="ratingDown">
-				<Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
-			</slot>
-		{/each}
-		{#if comment.heading}
-			<h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
-				{comment.heading}
-			</h3>
-		{/if}
-	</div>
-	{#if comment.address || comment.datetime}
-		<footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
-			<p>Reviewed in {comment.address} on {comment.datetime}</p>
-		</footer>
-	{/if}
-	<slot />
-	<aside>
-		<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
-			<slot name="evaluation" />
-		</p>
-		{#if helpfullink || abuselink}
-			<div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
-				{#if helpfullink}
-					<Button size="xs" href="/" color="dark">Helpful</Button>
-				{/if}
-				{#if abuselink}
-					<a
-						href={abuselink}
-						class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
-						>Report abuse</a>
-				{/if}
-			</div>
-		{/if}
-	</aside>
+  <div class="flex items-center mb-4 space-x-4">
+    <img class="w-10 h-10 rounded-full" src={comment.user.img.src} alt={comment.user.img.alt} />
+    <div class="space-y-1 font-medium dark:text-white">
+      <p>
+        {comment.user.name}
+        <time datetime="2014-08-16 19:00" class="block text-sm text-gray-500 dark:text-gray-400"
+          >{comment.user.joined}</time>
+      </p>
+    </div>
+  </div>
+  <div class="flex items-center mb-1">
+    {#each Array(roundedRating) as _}
+      <slot name="ratingUp">
+        <Star variation="solid" size="24" class="text-yellow-300 dark:text-yellow-200" />
+      </slot>
+    {/each}
+    {#each Array(grayStars) as _}
+      <slot name="ratingDown">
+        <Star size="24" class="px-0.5 text-gray-300 dark:text-gray-500" />
+      </slot>
+    {/each}
+    {#if comment.heading}
+      <h3 class="ml-2 text-sm font-semibold text-gray-900 dark:text-white">
+        {comment.heading}
+      </h3>
+    {/if}
+  </div>
+  {#if comment.address || comment.datetime}
+    <footer class="mb-5 text-sm text-gray-500 dark:text-gray-400">
+      <p>Reviewed in {comment.address} on {comment.datetime}</p>
+    </footer>
+  {/if}
+  <slot />
+  <aside>
+    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <slot name="evaluation" />
+    </p>
+    {#if helpfullink || abuselink}
+      <div class="flex items-center mt-3 space-x-3 divide-x divide-gray-200 dark:divide-gray-600">
+        {#if helpfullink}
+          <Button size="xs" href="/" color="dark">Helpful</Button>
+        {/if}
+        {#if abuselink}
+          <a
+            href={abuselink}
+            class="pl-4 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+            >Report abuse</a>
+        {/if}
+      </div>
+    {/if}
+  </aside>
 </article>

package/tables/TableHead.svelte

@@ -1,6 +1,7 @@
 <script>import classNames from 'classnames';
 import { getContext } from 'svelte';
 export let theadClass = 'text-xs uppercase';
+export let defaultRow = true;
 let color;
 color = getContext('color');
 let noborder = getContext('noborder');
@@ -31,7 +32,11 @@ $: theadClassfinal = classNames(theadClass, textColor, striped && borderColors,
 </script>
 
 <thead {...$$restProps} class={theadClassfinal}>
-  <tr>
+  {#if defaultRow}
+    <tr>
+      <slot />
+    </tr>
+  {:else}
     <slot />
-  </tr>
+  {/if}
 </thead>

package/tables/TableHead.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         theadClass?: string | undefined;
+        defaultRow?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/types.d.ts

@@ -93,7 +93,7 @@ export interface ListGroupItemType {
     [propName: string]: any;
 }
 export interface LinkType {
-    name: number;
+    name: string;
     href?: string;
     rel?: string;
     active?: boolean;

package/typography/Blockquote.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         bgClass?: string | undefined;
         bg?: boolean | undefined;
         baseClass?: string | undefined;
-        alignment?: "left" | "right" | "center" | undefined;
+        alignment?: "center" | "left" | "right" | undefined;
         size?: "xs" | "sm" | "lg" | "xl" | "base" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | undefined;
     };
     events: {

package/typography/P.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         color?: string | undefined;
         height?: "normal" | "relaxed" | "loose" | undefined;
-        align?: "left" | "right" | "center" | undefined;
+        align?: "center" | "left" | "right" | undefined;
         justify?: boolean | undefined;
         italic?: boolean | undefined;
         firstupper?: boolean | undefined;

package/utils/backdrop.d.ts

@@ -1,6 +1,6 @@
 export declare let open: boolean;
 export declare let placement: string;
-export declare const init: (node: any, _open: any) => {
-    update(_open: any): void;
+export declare const init: (node: HTMLElement, _open: boolean) => {
+    update(_open: boolean): void;
     destroy(): void;
 };

package/utils/backdrop.js

@@ -15,7 +15,6 @@ export let placement;
 export const init = (node, _open) => {
     getPlacementClasses().map((c) => node.classList.add(c));
     _open && createBackdrop(node);
-    console.log('init clicked');
     return {
         update(_open) {
             allPlacementClasses.map((c) => node.classList.remove(c));
@@ -58,7 +57,7 @@ const createBackdrop = (node) => {
     if (!backdropEl) {
         backdropEl = document.createElement('div');
         backdropEl.classList.add(...backdropClasses.split(' '));
-        const body = document.querySelector('body');
+        const body = document.body;
         body.append(backdropEl);
         body.style.overflow = 'hidden';
         document.addEventListener('keydown', handleEscape, true);
@@ -66,7 +65,7 @@ const createBackdrop = (node) => {
     dispatch('show', node);
 };
 const destroyBackdrop = (node) => {
-    const body = document.querySelector('body');
+    const body = document.body;
     body.style.overflow = 'auto';
     if (backdropEl)
         backdropEl.remove();

package/avatar/Dot.svelte

@@ -1,34 +0,0 @@
-<script>import classNames from 'classnames';
-export let show = false;
-export let top = false;
-export let color = 'bg-gray-300 dark:bg-gray-500';
-export let rounded = false;
-export let size = 'md';
-const sizes = {
-    xs: 'w-2.5 h-2.5',
-    sm: 'w-3 h-3',
-    md: 'w-3.5 h-3.5',
-    lg: 'w-6 h-6',
-    xl: 'w-10 h-10'
-};
-const offsets = {
-    xs: ['left-4', 'left-5'],
-    sm: ['left-6', 'left-6'],
-    md: ['left-7', 'left-8'],
-    lg: ['left-14', 'left-16'],
-    xl: ['left-24', 'left-32']
-};
-let dotClass;
-$: dotClass = classNames('absolute rounded-full border-white dark:border-gray-800 border-2', sizes[size], offsets[size][+rounded], top ? 'top-0' : 'bottom-0', rounded && top && 'transform -translate-y-1/2', rounded && !top && 'transform translate-y-1/4', color);
-let divClass;
-$: divClass = classNames('relative flex-shrink-0', $$props.class);
-</script>
-
-{#if show}
-  <div class={divClass}>
-    <slot />
-    <span class={dotClass} />
-  </div>
-{:else}
-  <slot />
-{/if}

package/avatar/Dot.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        show?: boolean | undefined;
-        top?: boolean | undefined;
-        color?: string | undefined;
-        rounded?: boolean | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DotProps = typeof __propDef.props;
-export type DotEvents = typeof __propDef.events;
-export type DotSlots = typeof __propDef.slots;
-export default class Dot extends SvelteComponentTyped<DotProps, DotEvents, DotSlots> {
-}
-export {};