Dropdown update

src/DropdownItem.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from 'svelte';
 
 export interface DropdownItemProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['button']> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['li']> {
   active?: boolean;
   disabled?: boolean;
   divider?: boolean;

src/DropdownItem.svelte

@@ -34,6 +34,7 @@
   }
 </script>
 
+<li>
 {#if header}
   <h6 {...$$restProps} on:click on:click={handleItemClick} class={classes}>
     <slot />
@@ -51,3 +52,4 @@
     <slot />
   </button>
 {/if}
+</li>

src/DropdownMenu.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from 'svelte';
 
 export interface DropdownMenuProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['ul']> {
   dark?: boolean;
   end?: boolean;
   right?: boolean;

src/DropdownMenu.svelte

@@ -39,11 +39,11 @@
   });
 </script>
 
-<div
+<ul
   {...$$restProps}
   class={classes}
   data-bs-popper={$context.inNavbar ? 'static' : undefined}
   use:$context.popperContent={popperOptions}
 >
   <slot />
-</div>
+</ul>

src/DropdownToggle.svelte

@@ -22,7 +22,8 @@
   $: classes = classnames(className, {
     'dropdown-toggle': caret || split,
     'dropdown-toggle-split': split,
-    'nav-link': nav
+    'nav-link': nav,
+    'show' : $context.isOpen
   });
 
   function toggleButton(e) {

src/Popover.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { createPopper } from '@popperjs/core/dist/esm/popper';
+  import { createPopper } from '@popperjs/core';
   import classnames from './utils';
   import InlineContainer from './InlineContainer.svelte';
   import Portal from './Portal.svelte';