flowbite-svelte 0.27.4 → 0.27.6

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.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)
+
+
+### Features
+
+* add fetchMarkdownPosts in utils/index ([#333](https://github.com/themesberg/flowbite-svelte/issues/333)) ([b604c0c](https://github.com/themesberg/flowbite-svelte/commit/b604c0c31c99b743817d814b3b043c42ccfaf14c))
+
+
+### Bug Fixes
+
+* accordion slots + docs ([#349](https://github.com/themesberg/flowbite-svelte/issues/349)) ([78a2542](https://github.com/themesberg/flowbite-svelte/commit/78a25427e31f61ba86ce825d9127515326448afa))
+* props using vite named import ([#347](https://github.com/themesberg/flowbite-svelte/issues/347)) ([7072e03](https://github.com/themesberg/flowbite-svelte/commit/7072e03b7ec8bac2e3d74d53f87c54dab772e159))
+* use vite to import a file as text ([#342](https://github.com/themesberg/flowbite-svelte/issues/342)) ([07ac592](https://github.com/themesberg/flowbite-svelte/commit/07ac592b0a06cda8afd71d918145693a0834b4f3))
+
 ### [0.27.4](https://github.com/themesberg/flowbite-svelte/compare/v0.27.3...v0.27.4) (2022-09-26)
 
 

package/accordions/Accordion.svelte

@@ -0,0 +1,24 @@
+<script context="module">import { writable } from 'svelte/store';
+</script>
+
+<script>import Frame from '../utils/Frame.svelte';
+import classNames from 'classnames';
+import { setContext } from 'svelte';
+export let single = true;
+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';
+export let defaultClass = 'text-gray-500 dark:text-gray-400';
+const ctx = {
+    flush,
+    activeClasses,
+    inactiveClasses,
+    selected: single ? writable() : undefined
+};
+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);
+</script>
+
+<Frame class={frameClass} color="none" border={!flush}>
+  <slot />
+</Frame>

package/accordions/Accordion.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Writable } from 'svelte/store';
+export interface AccordionCtxType {
+    flush: boolean;
+    activeClasses: string;
+    inactiveClasses: string;
+    selected?: Writable<object>;
+}
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        single?: boolean | undefined;
+        flush?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AccordionProps = typeof __propDef.props;
+export declare type AccordionEvents = typeof __propDef.events;
+export declare type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponentTyped<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/accordions/AccordionItem.svelte

@@ -1,76 +1,42 @@
-<script>import classNames from 'classnames';
+<script>import ChevronDown from '../utils/ChevronDown.svelte';
+import ChevronUp from '../utils/ChevronUp.svelte';
+import classNames from 'classnames';
+import { getContext, onMount } from 'svelte';
+import { writable } from 'svelte/store';
 import { slide } from 'svelte/transition';
-export let flush = false;
-export let id = '';
-export let slotClass = 'border-gray-200 dark:border-gray-700';
-let classSlot = classNames(slotClass, flush ? 'py-5 border-b' : 'p-5 border border-t-0');
-export let isOpen = false;
-export let color = false;
-export let btnClass = 'flex items-center justify-between w-full font-medium text-left text-gray-500 border-gray-200 dark:border-gray-700 dark:text-gray-400';
-let classBtn = classNames(btnClass, flush
-    ? 'py-5 border-b'
-    : 'focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 p-5 border hover:bg-gray-100 dark:hover:bg-gray-800');
-export let colorClass = 'focus:ring-blue-200 dark:focus:ring-blue-800 hover:bg-blue-100 text-blue-500 bg-blue-200 text-blue-700';
-const handleToggle = (id) => {
-    isOpen = !isOpen;
-};
+export let open = false;
+export let activeClasses = undefined;
+export let inactiveClasses = undefined;
+export let defaultClass = 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl';
+const ctx = getContext('ctx') ?? {};
+// single selection
+const self = {};
+const selected = ctx.selected ?? writable();
+onMount(() => {
+    if (open)
+        $selected = self;
+    // this will trigger unsubscribe on destroy
+    return selected.subscribe((x) => (open = x === self));
+});
+const handleToggle = (e) => selected.set(open ? {} : self);
 let buttonClass;
-$: if (color && isOpen) {
-    buttonClass = classBtn + colorClass;
-}
-else {
-    buttonClass = classBtn;
-}
+$: 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>
 
-<h2 aria-expanded={isOpen}>
-	<button
-		on:click={() => handleToggle(id)}
-		type="button"
-		class:rounded-t-xl={id === '1'}
-		class:border-t-0={id !== '1'}
-		class={classNames(buttonClass, $$props.class)}
-	>
-		<slot name="header" />
-		{#if isOpen}
-			{#if $$slots.arrowup}
-				<slot name="arrowup" />
-			{:else}
-				<svg
-					data-accordion-icon
-					class="w-6 h-6 rotate-180 shrink-0"
-					fill="currentColor"
-					viewBox="0 0 20 20"
-					xmlns="http://www.w3.org/2000/svg"
-					><path
-						fill-rule="evenodd"
-						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-						clip-rule="evenodd"
-					/></svg
-				>
-			{/if}
-		{:else if $$slots.arrowdown}
-			<slot name="arrowdown" />
-		{:else}
-			<svg
-				data-accordion-icon
-				class="w-6 h-6 shrink-0"
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		{/if}
-	</button>
+<h2 aria-expanded={open} class="group">
+  <button on:click={handleToggle} type="button" class={buttonClass}>
+    <slot name="header" />
+    {#if open}
+      <slot name="arrowup"><ChevronUp /></slot>
+    {:else}
+      <slot name="arrowdown"><ChevronDown /></slot>
+    {/if}
+  </button>
 </h2>
-{#if isOpen}
-	<div transition:slide={{ duration: 500 }}>
-		<div class={classSlot}>
-			<slot name="body" />
-		</div>
-	</div>
+{#if open}
+  <div transition:slide={{ duration: 500 }}>
+    <div class={ctx.flush ? 'py-5' : 'p-5'}>
+      <slot />
+    </div>
+  </div>
 {/if}

package/accordions/AccordionItem.svelte.d.ts

@@ -2,13 +2,10 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        flush?: boolean | undefined;
-        id?: string | undefined;
-        slotClass?: string | undefined;
-        isOpen?: boolean | undefined;
-        color?: boolean | undefined;
-        btnClass?: string | undefined;
-        colorClass?: string | undefined;
+        open?: boolean | undefined;
+        activeClasses?: string | undefined;
+        inactiveClasses?: string | undefined;
+        defaultClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -17,7 +14,7 @@ declare const __propDef: {
         header: {};
         arrowup: {};
         arrowdown: {};
-        body: {};
+        default: {};
     };
 };
 export declare type AccordionItemProps = typeof __propDef.props;

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/buttongroups/ButtonGroup.svelte

@@ -1,10 +1,10 @@
 <script>import { setContext } from 'svelte';
 import classNames from 'classnames';
-export let divClass = 'inline-flex rounded-lg shadow-sm w-fit';
-setContext('group', true);
-setContext('background', true);
+export let size = 'md';
+export let divClass = 'inline-flex rounded-lg shadow-sm';
+setContext('group', { size });
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)} role="group">
-	<slot />
+  <slot />
 </div>

package/buttongroups/ButtonGroup.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
+import type { SizeType } from '../types';
 declare const __propDef: {
     props: {
         [x: string]: any;
+        size?: SizeType | undefined;
         divClass?: string | undefined;
     };
     events: {

package/buttons/Button.svelte

@@ -10,7 +10,6 @@ export let btnClass = undefined;
 export let type = 'button';
 export let color = group ? (outline ? 'dark' : 'alternative') : 'blue';
 export let shadow = null;
-const background = getContext('background');
 const colorClasses = {
     blue: 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
     dark: 'text-white bg-gray-800 hover:bg-gray-900 focus:ring-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700',
@@ -77,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' &&
-        (background
+    : 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' &&
-        (background
-            ? '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;