flowbite-svelte 0.36.2 → 0.36.5

package/dist/device-mockup/Ios.svelte.d.ts

@@ -1,24 +1,20 @@
-/** @typedef {typeof __propDef.props}  IosProps */
-/** @typedef {typeof __propDef.events}  IosEvents */
-/** @typedef {typeof __propDef.slots}  IosSlots */
-export default class Ios extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IosProps = typeof __propDef.props;
-export type IosEvents = typeof __propDef.events;
-export type IosSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        iosTop?: string | undefined;
+        iosLeftTop?: string | undefined;
+        iosLeftBot?: string | undefined;
+        iosRight?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type IosProps = typeof __propDef.props;
+export type IosEvents = typeof __propDef.events;
+export type IosSlots = typeof __propDef.slots;
+export default class Ios extends SvelteComponentTyped<IosProps, IosEvents, IosSlots> {
+}
 export {};
 //# sourceMappingURL=Ios.svelte.d.ts.map

package/dist/device-mockup/Ios.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte.js"],"names":[],"mappings":"AASA,kDAAkD;AAClD,oDAAoD;AACpD,kDAAkD;AAElD;;;;;CACC;uBALa,OAAO,UAAU,KAAK;wBACtB,OAAO,UAAU,MAAM;uBACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Ios.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Ios.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE9C,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,oBAAoB,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;CACnF"}

package/dist/device-mockup/Smartwatch.svelte

@@ -0,0 +1,6 @@
+<script>export let smartRightTop = 'h-[41px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[40px] rounded-r-lg';
+export let smartRightBot = 'h-[32px] w-[6px] bg-gray-800 dark:bg-gray-800 absolute -right-[16px] top-[88px] rounded-r-lg';
+</script>
+
+<div class={smartRightTop} />
+<div class={smartRightBot} />

package/dist/device-mockup/Smartwatch.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        smartRightTop?: string | undefined;
+        smartRightBot?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SmartwatchProps = typeof __propDef.props;
+export type SmartwatchEvents = typeof __propDef.events;
+export type SmartwatchSlots = typeof __propDef.slots;
+export default class Smartwatch extends SvelteComponentTyped<SmartwatchProps, SmartwatchEvents, SmartwatchSlots> {
+}
+export {};
+//# sourceMappingURL=Smartwatch.svelte.d.ts.map

package/dist/device-mockup/Smartwatch.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Smartwatch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Smartwatch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAaD,QAAA,MAAM,SAAS;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/device-mockup/Tablet.svelte

@@ -1,4 +1,10 @@
-<div class="h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg"></div>
-<div class="h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg"></div>
-<div class="h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg"></div>
+<script>export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[72px] rounded-l-lg';
+export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
+export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
+export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+</script>
+
+<div class={tabletLeftTop} />
+<div class={tabletLeftMid} />
+<div class={tabletLeftBot} />
+<div class={tabletRight} />

package/dist/device-mockup/Tablet.svelte.d.ts

@@ -1,24 +1,20 @@
-/** @typedef {typeof __propDef.props}  TabletProps */
-/** @typedef {typeof __propDef.events}  TabletEvents */
-/** @typedef {typeof __propDef.slots}  TabletSlots */
-export default class Tablet extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TabletProps = typeof __propDef.props;
-export type TabletEvents = typeof __propDef.events;
-export type TabletSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        tabletLeftTop?: string | undefined;
+        tabletLeftMid?: string | undefined;
+        tabletLeftBot?: string | undefined;
+        tabletRight?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
+export type TabletProps = typeof __propDef.props;
+export type TabletEvents = typeof __propDef.events;
+export type TabletSlots = typeof __propDef.slots;
+export default class Tablet extends SvelteComponentTyped<TabletProps, TabletEvents, TabletSlots> {
+}
 export {};
 //# sourceMappingURL=Tablet.svelte.d.ts.map

package/dist/device-mockup/Tablet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte.js"],"names":[],"mappings":"AASA,qDAAqD;AACrD,uDAAuD;AACvD,qDAAqD;AAErD;;;;;CACC;0BALa,OAAO,UAAU,KAAK;2BACtB,OAAO,UAAU,MAAM;0BACvB,OAAO,UAAU,KAAK;qCAXC,QAAQ;AAQ7C;;;;;;;;EAA8E"}
+{"version":3,"file":"Tablet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/Tablet.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmBD,QAAA,MAAM,SAAS;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/dropdowns/Dropdown.svelte

@@ -25,7 +25,7 @@ $: popoverClass = classNames('divide-y divide-gray-100 dark:divide-gray-600', fr
     <slot />
   </ul>
   {#if $$slots.footer}
-    <div class="py-1  overflow-hidden rounded-b">
+    <div class="py-1 overflow-hidden rounded-b">
       <slot name="footer" />
     </div>
   {/if}

package/dist/dropdowns/DropdownHeader.svelte

@@ -6,8 +6,8 @@ export let divider = true;
 </script>
 
 <div {...$$restProps} class={classNames(divClass, $$props.class)}>
-	<slot />
+  <slot />
 </div>
 {#if divider}
-	<DropdownDivider />
+  <DropdownDivider />
 {/if}

package/dist/dropdowns/DropdownItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;;eAD6E,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;CAChC,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DropdownItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/DropdownItem.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4BD,QAAA,MAAM,SAAS;;;;eAD6E,MAAM,GAAG,SAAS;;;;;;;;;;;;;;;;;CAChC,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/footer/FooterLinkGroup.svelte

@@ -3,5 +3,5 @@ export let ulClass = 'text-gray-600 dark:text-gray-400';
 </script>
 
 <ul class={classNames(ulClass, $$props.class)}>
-	<slot />
+  <slot />
 </ul>

package/dist/forms/Dropzone.svelte

@@ -25,5 +25,13 @@ function keydown(ev) {
   on:dragover
   on:drop>
   <slot />
-  <input {...$$restProps} bind:value bind:files bind:this={input} type="file" class="hidden" on:change on:click />
+  <input
+    {...$$restProps}
+    bind:value
+    bind:files
+    bind:this={input}
+    type="file"
+    class="hidden"
+    on:change
+    on:click />
 </label>

package/dist/forms/FloatingLabelInput.svelte

@@ -69,45 +69,42 @@ function setType(node, _type) {
         }
     };
 }
-;
 </script>
 
 <div class={divClasses[style]}>
-	<input
-		{id}
-		{...$$restProps}
-		bind:value
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:input
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		on:paste
-		use:setType={type}
-		placeholder=" "
-		class={classNames(
-			inputClasses[style],
-			inputColorClasses[color],
-			inputSizes[style][size],
-			$$props.class
-		)}
-	/>
+  <input
+    {id}
+    {...$$restProps}
+    bind:value
+    on:blur
+    on:change
+    on:click
+    on:focus
+    on:input
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mouseenter
+    on:mouseleave
+    on:mouseover
+    on:paste
+    use:setType={type}
+    placeholder=" "
+    class={classNames(
+      inputClasses[style],
+      inputColorClasses[color],
+      inputSizes[style][size],
+      $$props.class
+    )} />
 
-	<label
-		for={id}
-		class={classNames(
-			labelClasses[style],
-			labelColorClasses[color],
-			labelSizes[style][size],
-			$$props.labelClass
-		)}
-	>
-		{label}
-	</label>
+  <label
+    for={id}
+    class={classNames(
+      labelClasses[style],
+      labelColorClasses[color],
+      labelSizes[style][size],
+      $$props.labelClass
+    )}>
+    {label}
+  </label>
 </div>

package/dist/forms/FloatingLabelInput.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAiH1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"FloatingLabelInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/FloatingLabelInput.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgH1C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/forms/Helper.svelte

@@ -10,5 +10,5 @@ const colorClasses = {
 </script>
 
 <p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
-	<slot />
+  <slot />
 </p>

package/dist/forms/RadioInline.svelte

@@ -1,3 +1,3 @@
 <div class="flex">
-	<slot />
+  <slot />
 </div>

package/dist/forms/VoiceSearch.svelte

@@ -15,49 +15,35 @@ const handleVoiceBtn = () => {
 </script>
 
 <form class="flex items-center" on:submit>
-	<label for={id} class={labelClass}>Search</label>
-	<div class="relative w-full">
-		<div class={iconDivClass}>
-			<svg
-				class={iconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</div>
-		<input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
-		<button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
-			<svg
-				class={voiceIconClass}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-				><path
-					fill-rule="evenodd"
-					d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
-					clip-rule="evenodd"
-				/></svg
-			>
-		</button>
-	</div>
-	<button type="submit" class={btnClass}
-		><svg
-			class="mr-2 -ml-1 w-5 h-5"
-			fill="none"
-			stroke="currentColor"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			><path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-			/></svg
-		>Search</button
-	>
+  <label for={id} class={labelClass}>Search</label>
+  <div class="relative w-full">
+    <div class={iconDivClass}>
+      <svg class={iconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          clip-rule="evenodd" /></svg>
+    </div>
+    <input {...$$restProps} type="text" {id} class={inputClass} {placeholder} />
+    <button type="button" class={voiceBtnClass} on:click={handleVoiceBtn}>
+      <svg class={voiceIconClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+        ><path
+          fill-rule="evenodd"
+          d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z"
+          clip-rule="evenodd" /></svg>
+    </button>
+  </div>
+  <button type="submit" class={btnClass}
+    ><svg
+      class="mr-2 -ml-1 w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      ><path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg
+    >Search</button>
 </form>

package/dist/forms/VoiceSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoiceSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/VoiceSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA2CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"VoiceSearch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/forms/VoiceSearch.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/gallery/Gallery.svelte

@@ -10,8 +10,8 @@ function init(node) {
 <div {...$$restProps} class={divClass} use:init>
   {#each items as item}
     <slot {item}>
-      <div><img src={item.src} alt={item.alt} class='h-auto max-w-full rounded-lg' /></div>
-    </slot>  
+      <div><img src={item.src} alt={item.alt} class="h-auto max-w-full rounded-lg" /></div>
+    </slot>
   {:else}
     <slot />
   {/each}

package/dist/kbd/ArrowKeyDown.svelte

@@ -3,13 +3,11 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z" /></svg>

package/dist/kbd/ArrowKeyLeft.svelte

@@ -3,13 +3,11 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z" /></svg>

package/dist/kbd/ArrowKeyRight.svelte

@@ -3,13 +3,11 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z" /></svg>

package/dist/kbd/ArrowKeyUp.svelte

@@ -3,13 +3,11 @@ export let svgClass = 'w-4 h-4';
 </script>
 
 <svg
-	{...$$restProps}
-	class={classNames(svgClass, $$props.class)}
-	aria-hidden="true"
-	fill="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 320 512"
-	><path
-		d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"
-	/></svg
->
+  {...$$restProps}
+  class={classNames(svgClass, $$props.class)}
+  aria-hidden="true"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 320 512"
+  ><path
+    d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z" /></svg>

package/dist/kbd/Kbd.svelte

@@ -3,5 +3,5 @@ export let kbdClass = 'text-xs font-semibold text-gray-800 bg-gray-100 border bo
 </script>
 
 <kbd class={classNames(kbdClass, $$props.class)}>
-	<slot />
+  <slot />
 </kbd>

package/dist/modals/Modal.svelte

@@ -11,6 +11,7 @@ export let autoclose = false;
 export let permanent = false;
 export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
 export let defaultClass = 'relative flex flex-col mx-auto';
+export let outsideclose = false;
 const dispatch = createEventDispatcher();
 $: dispatch(open ? 'open' : 'hide');
 function prepareFocus(node) {
@@ -63,7 +64,9 @@ const sizes = {
 const onAutoClose = (e) => {
     const target = e.target;
     if (autoclose && target?.tagName === 'BUTTON')
-        hide(e);
+        hide(e); // close on any button click
+    if (outsideclose && target === e.currentTarget)
+        hide(e); // close on click outside
 };
 const hide = (e) => {
     e.preventDefault();
@@ -75,11 +78,6 @@ 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
 ];
-function preventWheelDefault(e) {
-    // @ts-ignore
-    const [x, y] = isScrollable(this);
-    return x || y || e.preventDefault();
-}
 function handleKeys(e) {
     if (e.key === 'Escape' && !permanent)
         return hide(e);
@@ -126,7 +124,6 @@ function handleKeys(e) {
         {/if}
         <!-- Modal body -->
         <div
-          id="modal"
           class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
           on:keydown|stopPropagation={handleKeys}
           on:wheel|stopPropagation|passive>

package/dist/modals/Modal.svelte.d.ts

@@ -22,7 +22,7 @@ declare const __propDef: {
         draggable?: import("svelte/elements").Booleanish | null | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
-        id?: string | null | undefined;
+        id?: string | undefined;
         lang?: string | null | undefined;
         part?: string | null | undefined;
         placeholder?: string | null | undefined;
@@ -249,6 +249,8 @@ declare const __propDef: {
         autoclose?: boolean | undefined;
         permanent?: boolean | undefined;
         backdropClasses?: string | undefined;
+        defaultClass?: string | undefined;
+        outsideclose?: boolean | undefined;
     };
     events: {
         wheel: WheelEvent;

package/dist/modals/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAsK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/modals/Modal.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAMD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAqK3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

package/dist/navbar/Menu.svelte

@@ -22,15 +22,15 @@ $: switch (variation) {
 </script>
 
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	class={$$props.class}
-	{...$$restProps}
-	aria-label={ariaLabel}
-	fill="none"
-	{viewBox}
-	stroke-width="2"
-	on:click>
-	{@html svgpath}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class={$$props.class}
+  {...$$restProps}
+  aria-label={ariaLabel}
+  fill="none"
+  {viewBox}
+  stroke-width="2"
+  on:click>
+  {@html svgpath}
 </svg>

package/dist/navbar/NavBrand.svelte

@@ -3,5 +3,5 @@ export let href = '';
 </script>
 
 <a {href} {...$$restProps} class={classNames('flex items-center', $$props.class)}>
-	<slot />
+  <slot />
 </a>

package/dist/navbar/NavHamburger.svelte

@@ -5,5 +5,5 @@ export let btnClass = 'ml-3 md:hidden';
 </script>
 
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-	<Menu class="h-6 w-6 shrink-0" />
+  <Menu class="h-6 w-6 shrink-0" />
 </ToolbarButton>

package/dist/navbar/NavSidebarHamburger.svelte

@@ -5,5 +5,5 @@ export let btnClass = 'ml-3 md:hidden';
 </script>
 
 <ToolbarButton name="Open main menu" on:click {...$$restProps} class={classNames(btnClass, $$props.class)}>
-	<SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
+  <SidebarMenu class="h-6 w-6 shrink-0" variation="solid" />
 </ToolbarButton>

package/dist/navbar/SidebarMenu.svelte

@@ -22,15 +22,15 @@ export let ariaLabel = 'bars 3';
 </script>
 
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	width={size}
-	height={size}
-	class={$$props.class}
-	{...$$restProps}
-	aria-label={ariaLabel}
-	fill="none"
-	{viewBox}
-	stroke-width="2"
-	on:click>
-	{@html svgpath}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class={$$props.class}
+  {...$$restProps}
+  aria-label={ariaLabel}
+  fill="none"
+  {viewBox}
+  stroke-width="2"
+  on:click>
+  {@html svgpath}
 </svg>