flowbite-svelte 0.26.8 → 0.26.9

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.26.9](https://github.com/themesberg/flowbite-svelte/compare/v0.26.8...v0.26.9) (2022-09-04)
+
+
+### Features
+
+* add id to typograpy components ([64cbe1b](https://github.com/themesberg/flowbite-svelte/commit/64cbe1b6f2cbe43fdf5cb71a0d82e3a5caad1586))
+* add placement to Drawer component ([1b91e52](https://github.com/themesberg/flowbite-svelte/commit/1b91e52618da8935b326a69161d01f0cc7739158))
+* working on drawer ([07a8e02](https://github.com/themesberg/flowbite-svelte/commit/07a8e02ceac450e7e7ceeb2ad9b98bfac7c7c1cf))
+
+
+### Bug Fixes
+
+* folder names without s and update tests ([4e9c9ce](https://github.com/themesberg/flowbite-svelte/commit/4e9c9ce69e06b1a8e4394c3920c75606894c06d3))
+* no dropdown docs ([4f92d9b](https://github.com/themesberg/flowbite-svelte/commit/4f92d9b56a53677bed7264b6f044e64a10c42c7e))
+* update Htwo using scroll-mt-20 ([2006490](https://github.com/themesberg/flowbite-svelte/commit/200649069a05c6df4ed0e269d3479526092afe01))
+
 ### [0.26.8](https://github.com/themesberg/flowbite-svelte/compare/v0.26.7...v0.26.8) (2022-09-03)
 
 

package/buttons/Button.svelte

@@ -77,7 +77,7 @@ const hasBorder = () => outline || color === 'alternative' || color === 'light';
 let buttonClass;
 $: buttonClass = btnClass
     ? btnClass
-    : classNames('group 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
+    : 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
@@ -93,24 +93,23 @@ $: gradientOutlineClass = classNames('inline-flex items-center justify-center',
 </script>
 
 <svelte:element
-	this={href ? 'a' : 'button'}
-	type={href ? undefined : type}
-	{href}
-	{...$$restProps}
-	class={buttonClass}
-	on:click
-	on:change
-	on:keydown
-	on:keyup
-	on:mouseenter
-	on:mouseleave
->
-	{#if outline && gradient}
-		<!-- Trick to prentend outline without using border
+  this={href ? 'a' : 'button'}
+  type={href ? undefined : type}
+  {href}
+  {...$$restProps}
+  class={buttonClass}
+  on:click
+  on:change
+  on:keydown
+  on:keyup
+  on:mouseenter
+  on:mouseleave>
+  {#if outline && gradient}
+    <!-- Trick to prentend outline without using border
 		This has a limitation of no supporting transparency as
 		background is set to bg-white dark:bg-gray-900 -->
-		<span class={gradientOutlineClass}><slot /></span>
-	{:else}
-		<slot />
-	{/if}
+    <span class={gradientOutlineClass}><slot /></span>
+  {:else}
+    <slot />
+  {/if}
 </svelte:element>

package/drawer/Drawer.svelte

@@ -0,0 +1,54 @@
+<script>import classNames from 'classnames';
+import { fly, slide, blur, fade } from 'svelte/transition';
+import { clickOutside } from '../utils/clickOutside';
+export let hidden = true;
+export let position = 'fixed';
+export let width = 'w-80';
+export let backdrop = true;
+export let placement = 'left';
+export let id = 'drawer-example';
+export let divClass = 'overflow-y-auto z-50 p-4 bg-white dark:bg-gray-800';
+export let transitionParams = {};
+export let transitionType = 'fly';
+function multiple(node, params) {
+    switch (transitionType) {
+        case 'slide':
+            return slide(node, params);
+        case 'blur':
+            return blur(node, params);
+        case 'fly':
+            return fly(node, params);
+        case 'fade':
+            return fade(node, params);
+    }
+}
+const placements = {
+    left: 'inset-y-0 left-0',
+    right: 'inset-y-0 right-0',
+    top: 'inset-x-0 top-0',
+    bottom: 'inset-x-0 bottom-0'
+};
+const handleDrawer = () => {
+    hidden = !hidden;
+    console.log('clicked');
+};
+</script>
+
+{#if !hidden}
+  {#if backdrop}
+    <div
+      class="fixed top-0 left-0 z-50 w-full h-full bg-gray-900/70"
+      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}

package/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { drawerTransitionParamTypes, drawerTransitionTypes } from '../types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        hidden?: boolean;
+        position?: 'fixed' | 'absolute';
+        width?: string;
+        backdrop?: boolean;
+        placement?: 'left' | 'right' | 'top' | 'bottom';
+        id?: string;
+        divClass?: string;
+        transitionParams?: drawerTransitionParamTypes;
+        transitionType?: drawerTransitionTypes;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            hidden: boolean;
+        };
+    };
+};
+export declare type DrawerProps = typeof __propDef.props;
+export declare type DrawerEvents = typeof __propDef.events;
+export declare type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+}
+export {};

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as Carousel } from './carousels/Carousel.svelte';
 export { default as CarouselTransition } from './carousels/CarouselTransition.svelte';
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';
 export { default as DropdownHeader } from './dropdowns/DropdownHeader.svelte';

package/index.js

@@ -22,6 +22,8 @@ export { default as CarouselTransition } from './carousels/CarouselTransition.sv
 export { default as DarkMode } from './darkmode/DarkMode.svelte';
 // Datepicker
 export { default as Datepicker } from './datepicker/Datepicker.svelte';
+// Drawer
+export { default as Drawer } from './drawer/Drawer.svelte';
 // Dropdown
 export { default as Dropdown } from './dropdowns/Dropdown.svelte';
 export { default as DropdownDivider } from './dropdowns/DropdownDivider.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.8",
+  "version": "0.26.9",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -118,6 +118,7 @@
     "./darkmode/DarkMode.svelte": "./darkmode/DarkMode.svelte",
     "./datepicker/Calender.svelte": "./datepicker/Calender.svelte",
     "./datepicker/Datepicker.svelte": "./datepicker/Datepicker.svelte",
+    "./drawer/Drawer.svelte": "./drawer/Drawer.svelte",
     "./dropdowns/Dropdown.svelte": "./dropdowns/Dropdown.svelte",
     "./dropdowns/DropdownDivider.svelte": "./dropdowns/DropdownDivider.svelte",
     "./dropdowns/DropdownHeader.svelte": "./dropdowns/DropdownHeader.svelte",
@@ -232,7 +233,6 @@
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/Span.svelte": "./typography/Span.svelte",
     "./typography/Ul.svelte": "./typography/Ul.svelte",
-    "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/Chevron.svelte": "./utils/Chevron.svelte",
     "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",
     "./utils/ChevronLeft.svelte": "./utils/ChevronLeft.svelte",
@@ -244,6 +244,7 @@
     "./utils/Popper.svelte": "./utils/Popper.svelte",
     "./utils/UserCircle.svelte": "./utils/UserCircle.svelte",
     "./utils/Wrapper.svelte": "./utils/Wrapper.svelte",
+    "./utils/backdrop": "./utils/backdrop.js",
     "./utils/clickOutside": "./utils/clickOutside.js",
     "./utils/createEventDispatcher": "./utils/createEventDispatcher.js",
     "./utils/focusTrap": "./utils/focusTrap.js",

package/typography/A.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
+export let id;
 export let href = '#';
-export let textColor = 'text-blue-600 dark:text-blue-500';
+export let color = 'text-blue-600 dark:text-blue-500';
 export let aClass = 'inline-flex items-center hover:underline';
 </script>
 
-<a {href} class={classNames(aClass, textColor, $$props.class)}>
+<a {href} {id} class={classNames(aClass, color, $$props.class)}>
   <slot />
 </a>

package/typography/A.svelte.d.ts

@@ -2,8 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         href?: string;
-        textColor?: string;
+        color?: string;
         aClass?: string;
     };
     events: {

package/typography/Blockquote.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let border = false;
 export let italic = true;
 export let borderClass = 'border-l-4 border-gray-300 dark:border-gray-500';
@@ -30,6 +31,7 @@ const sizes = {
 </script>
 
 <blockquote
+  {id}
   class={classNames(
     baseClass,
     alignmentClasses[alignment],

package/typography/Blockquote.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         border?: boolean;
         italic?: boolean;
         borderClass?: string;

package/typography/DescriptionList.svelte

@@ -1,10 +1,11 @@
 <script>import classNames from 'classnames';
+export let id;
 export let tag;
 export let dtClass = 'text-gray-500 md:text-lg dark:text-gray-400';
 export let ddClass = 'text-lg font-semibold';
 let classDesc = classNames(tag === 'dt' ? dtClass : ddClass, $$props.class);
 </script>
 
-<svelte:element this={tag} class={classDesc}>
+<svelte:element this={tag} {id} class={classDesc}>
   <slot />
 </svelte:element>

package/typography/DescriptionList.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         tag: 'dt' | 'dd';
         dtClass?: string;
         ddClass?: string;

package/typography/Heading.svelte

@@ -1,7 +1,8 @@
 <script>import classNames from 'classnames';
 export let tag = 'h1';
-export let textColor = 'text-gray-900 dark:text-white';
+export let color = 'text-gray-900 dark:text-white';
 export let customSize;
+export let id;
 const textSizes = {
     h1: 'text-5xl font-extrabold',
     h2: 'text-4xl font-bold',
@@ -14,6 +15,7 @@ const textSizes = {
 
 <svelte:element
   this={tag}
-  class={classNames(customSize ? customSize : textSizes[tag], textColor, 'w-full', $$props.class)}>
+  {id}
+  class={classNames(customSize ? customSize : textSizes[tag], color, 'w-full', $$props.class)}>
   <slot />
 </svelte:element>

package/typography/Heading.svelte.d.ts

@@ -3,8 +3,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-        textColor?: string;
+        color?: string;
         customSize: string;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Hr.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let icon = false;
 export let width = 'w-full';
 export let height = 'h-px';
@@ -13,12 +14,12 @@ let middleClass = classNames(middleBgColor, icon ? iconDivClass : textSpanClass)
 </script>
 
 {#if $$slots}
-	<div class={classDiv}>
-		<hr class={horizontalClass} />
-		<div class={middleClass}>
-			<slot />
-		</div>
-	</div>
+  <div class={classDiv} {id}>
+    <hr class={horizontalClass} />
+    <div class={middleClass}>
+      <slot />
+    </div>
+  </div>
 {:else}
-	<hr class={horizontalClass} />
+  <hr class={horizontalClass} />
 {/if}

package/typography/Hr.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         icon?: boolean;
         width?: string;
         height?: string;

package/typography/Img.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let caption = undefined;
 export let src = undefined;
 export let srcset = undefined;
@@ -12,15 +13,19 @@ export let captionClass = 'mt-2 text-sm text-center text-gray-500 dark:text-gray
 </script>
 
 {#if caption}
-	<figure class={figClass}>
-		<img
-			class={classNames(imgClass, size, alignment, effect, $$props.class)}
-			{src}
-			{srcset}
-			{alt}
-		/>
-		<figcaption class={captionClass}>{@html caption}</figcaption>
-	</figure>
+  <figure class={figClass}>
+    <img
+      class={classNames(imgClass, size, alignment, effect, $$props.class)}
+      {src}
+      {srcset}
+      {alt} />
+    <figcaption class={captionClass}>{@html caption}</figcaption>
+  </figure>
 {:else}
-	<img class={classNames(imgClass, size, alignment, effect, $$props.class)} {src} {srcset} {alt} />
+  <img
+    {id}
+    class={classNames(imgClass, size, alignment, effect, $$props.class)}
+    {src}
+    {srcset}
+    {alt} />
 {/if}

package/typography/Img.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         caption?: string | undefined;
         src?: string | undefined;
         srcset?: string | undefined;

package/typography/Layout.svelte

@@ -1,10 +1,11 @@
 <script>import classNames from 'classnames';
+export let id;
 export let divClass = 'grid';
 export let cols = 'grid-cols-1 sm:grid-cols-2';
 export let gap;
 let classDiv = classNames(divClass, 'gap-' + String(gap), cols);
 </script>
 
-<div class={classDiv}>
+<div {id} class={classDiv}>
   <slot />
 </div>

package/typography/Layout.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        id: string;
         divClass?: string;
         cols?: string;
         gap: number;

package/typography/Li.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
+export let id;
 export let icon = false;
 export let liClass = '';
 let classLi = classNames(liClass, icon && 'flex items-center', $$props.class);
 </script>
 
-<li class={classLi}>
+<li {id} class={classLi}>
   <slot />
 </li>

package/typography/Li.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         icon?: boolean;
         liClass?: string;
     };

package/typography/List.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let tag = 'ul';
 export let list = 'disc';
 export let position = 'inside';
@@ -18,6 +19,6 @@ let positions = {
 let classList = classNames(color, tag === 'ul' ? ulClass : 'ol' ? olClass : dlClass, lists[list], positions[position], $$props.class);
 </script>
 
-<svelte:element this={tag} class={classList}>
+<svelte:element this={tag} {id} class={classList}>
   <slot />
 </svelte:element>

package/typography/List.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         tag?: 'ul' | 'ol' | 'dl';
         list?: 'disc' | 'none' | 'decimal';
         position?: 'inside' | 'outside';

package/typography/Mark.svelte

@@ -1,9 +1,10 @@
 <script>import classNames from 'classnames';
-export let textColor = 'text-white dark:bg-blue-500';
+export let id;
+export let color = 'text-white dark:bg-blue-500';
 export let bgColor = 'bg-blue-600';
 export let markClass = 'px-2 rounded';
 </script>
 
-<mark class={classNames(markClass, bgColor, textColor, $$props.class)}>
-	<slot />
+<mark {id} class={classNames(markClass, bgColor, color, $$props.class)}>
+  <slot />
 </mark>

package/typography/Mark.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textColor?: string;
+        id: string;
+        color?: string;
         bgColor?: string;
         markClass?: string;
     };

package/typography/P.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let color = 'text-gray-900 dark:text-white';
 export let height = 'normal';
 export let align = 'left';
@@ -72,6 +73,6 @@ let colorAndopacity = color
 let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
-<p class={classP}>
+<p {id} class={classP}>
   <slot />
 </p>

package/typography/P.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         color?: string;
         height?: 'normal' | 'relaxed' | 'loose';
         align?: 'left' | 'center' | 'right';

package/typography/Secondary.svelte

@@ -1,8 +1,9 @@
 <script>import classNames from 'classnames';
-export let textColor = 'text-gray-500 dark:text-gray-400';
+export let id;
+export let color = 'text-gray-500 dark:text-gray-400';
 export let secondaryClass = 'font-semibold';
 </script>
 
-<small class={classNames(textColor, secondaryClass, $$props.class)}>
-	<slot />
+<small {id} class={classNames(color, secondaryClass, $$props.class)}>
+  <slot />
 </small>

package/typography/Secondary.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textColor?: string;
+        id: string;
+        color?: string;
         secondaryClass?: string;
     };
     events: {

package/typography/Span.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let italic = false;
 export let underline = false;
 export let linethrough = false;
@@ -12,6 +13,6 @@ let underlineClass = classNames('underline', decorationClass);
 let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
-<span class={classSpan}>
+<span {id} class={classSpan}>
   <slot />
 </span>

package/typography/Span.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         italic?: boolean;
         underline?: boolean;
         linethrough?: boolean;

package/typography/Ul.svelte

@@ -1,4 +1,5 @@
 <script>import classNames from 'classnames';
+export let id;
 export let list = 'disc';
 export let position = 'inside';
 export let ulClass = 'max-w-md text-gray-500 dark:text-gray-400';
@@ -15,6 +16,6 @@ let classUl = classNames(ulClass, lists[list], positions[position], $$props.clas
 console.log('list', list);
 </script>
 
-<ul class={classUl} {list}>
+<ul {id} class={classUl} {list}>
   <slot />
 </ul>

package/typography/Ul.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        id: string;
         list?: 'disc' | 'none' | 'decimal';
         position?: 'inside' | 'outside';
         ulClass?: string;

package/utils/backdrop.d.ts

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

package/utils/backdrop.js

@@ -0,0 +1,90 @@
+import { createEventDispatcher } from 'svelte';
+export let open = false;
+const backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
+export let placement;
+// const placement:
+// 		| 'top-left'
+// 		| 'top-center'
+// 		| 'top-right'
+// 		| 'center-left'
+// 		| 'center'
+// 		| 'center-right'
+// 		| 'bottom-left'
+// 		| 'bottom-center'
+// 		| 'bottom-right'='center';
+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));
+            getPlacementClasses().map((c) => node.classList.add(c));
+            _open ? createBackdrop(node) : destroyBackdrop(node);
+        },
+        destroy() {
+            destroyBackdrop(node);
+        }
+    };
+};
+const getPlacementClasses = () => {
+    switch (placement) {
+        // top
+        case 'top-left':
+            return ['justify-start', 'items-start'];
+        case 'top-center':
+            return ['justify-center', 'items-start'];
+        case 'top-right':
+            return ['justify-end', 'items-start'];
+        // center
+        case 'center-left':
+            return ['justify-start', 'items-center'];
+        case 'center':
+            return ['justify-center', 'items-center'];
+        case 'center-right':
+            return ['justify-end', 'items-center'];
+        // bottom
+        case 'bottom-left':
+            return ['justify-start', 'items-end'];
+        case 'bottom-center':
+            return ['justify-center', 'items-end'];
+        case 'bottom-right':
+            return ['justify-end', 'items-end'];
+        default:
+            return ['justify-center', 'items-center'];
+    }
+};
+const createBackdrop = (node) => {
+    if (!backdropEl) {
+        backdropEl = document.createElement('div');
+        backdropEl.classList.add(...backdropClasses.split(' '));
+        const body = document.querySelector('body');
+        body.append(backdropEl);
+        body.style.overflow = 'hidden';
+        document.addEventListener('keydown', handleEscape, true);
+    }
+    dispatch('show', node);
+};
+const destroyBackdrop = (node) => {
+    const body = document.querySelector('body');
+    body.style.overflow = 'auto';
+    if (backdropEl)
+        backdropEl.remove();
+    backdropEl = undefined;
+    document.removeEventListener('keydown', handleEscape, true);
+    dispatch('hide', node);
+};
+let backdropEl;
+const handleEscape = (e) => {
+    if (open && e.key === 'Escape')
+        open = false;
+};
+const dispatch = createEventDispatcher();
+const allPlacementClasses = [
+    'justify-start',
+    'justify-center',
+    'justify-end',
+    'items-start',
+    'items-center',
+    'items-end'
+];

package/typography/Underline.svelte

@@ -1,7 +0,0 @@
-<script>import classNames from 'classnames';
-export let underlineClass = 'underline decoration-8 decoration-blue-400 dark:decoration-blue-600';
-</script>
-
-<span class={classNames(underlineClass, $$props.class)}>
-  <slot />
-</span>

package/typography/Underline.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        underlineClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type UnderlineProps = typeof __propDef.props;
-export declare type UnderlineEvents = typeof __propDef.events;
-export declare type UnderlineSlots = typeof __propDef.slots;
-export default class Underline extends SvelteComponentTyped<UnderlineProps, UnderlineEvents, UnderlineSlots> {
-}
-export {};