Add dropdown menu

src/pages/Dropdown.svelte

@@ -5,17 +5,20 @@
   import "@shoelace-style/shoelace/dist/components/menu/menu";
   import "@shoelace-style/shoelace/dist/components/menu-item/menu-item";
 
+  import { SLButton, SLDivider, SLDropdown, SLMenu, SLMenuItem } from "$src/shoelace";
+
   import Layout from "$src/layout/Layout.svelte";
 
+
   let selected = $state('');
 
   function onSelect(evt) {
     selected = evt.detail.item.value;
   }
-
 </script>
 <Layout>
   <h1>Dropdown</h1>
+  <h2>checkbox</h2>
   <p>
     <sl-dropdown onsl-select={onSelect}>
       <sl-button slot="trigger" caret>Dropdown</sl-button>
@@ -41,4 +44,19 @@
     <br>
     selected: { selected }
   </p>
+  <h2>action menu</h2>
+  <p>
+    <SLDropdown>
+      {#snippet trigger()}
+        <SLButton slot="trigger" caret>Edit</SLButton>
+      {/snippet}
+      <SLMenu>
+        <SLMenuItem onclick={() => console.log("edit")}>Edit</SLMenuItem>
+        <SLDivider></SLDivider>
+        <SLMenuItem
+          onclick={() => console.log("delete")}
+          ><span style="color: red">Delete</span></SLMenuItem>
+      </SLMenu>
+    </SLDropdown>
+  </p>
 </Layout>

src/shoelace.ts

@@ -1,12 +1,16 @@
-export { default as SLApp } from "$src/shoelace/SLApp.svelte";
+export { default as SLApp } from "./shoelace/SLApp.svelte";
 export { default as SLButton } from "./shoelace/SLButton.svelte";
 export { default as SLDialog } from "./shoelace/SLDialog.svelte";
+export { default as SLDivider } from "./shoelace/SLDivider.svelte";
+export { default as SLDropdown } from "./shoelace/SLDropdown.svelte";
 export { default as SLForm } from "./shoelace/SLForm.svelte";
 export { default as SLIcon } from "./shoelace/SLIcon.svelte";
 export { default as SLIconButton } from "./shoelace/SLIconButton.svelte";
+export { default as SLInput } from "./shoelace/SLInput.svelte";
+export { default as SLMenu } from "./shoelace/SLMenu.svelte";
+export { default as SLMenuItem } from "./shoelace/SLMenuItem.svelte";
 export { default as SLRadioButton } from "./shoelace/SLRadioButton.svelte";
 export { default as SLRadioGroup } from "./shoelace/SLRadioGroup.svelte";
-export { default as SLInput } from "./shoelace/SLInput.svelte";
 export { default as SLSwitch } from "./shoelace/SLSwitch.svelte";
 export { default as SLTab } from "./shoelace/SLTab.svelte";
 export { default as SLTabGroup } from "./shoelace/SLTabGroup.svelte";

src/shoelace/SLDivider.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+  import "@shoelace-style/shoelace/dist/components/divider/divider";
+</script>
+<sl-divider></sl-divider>

src/shoelace/SLDropdown.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import "@shoelace-style/shoelace/dist/components/dropdown/dropdown";
+
+
+  let {
+    children,
+    trigger = null,
+    onSelect = null,
+    ...props
+  }: {
+    children: Snippet
+    trigger: Snippet
+    onSelect?: (evt) => any
+  } = $props();
+</script>
+<sl-dropdown onsl-select={onSelect} {...props}>
+  {@render trigger()}
+  {@render children()}
+</sl-dropdown>

src/shoelace/SLMenu.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import "@shoelace-style/shoelace/dist/components/menu/menu";
+
+  let {
+    children,
+  }: {
+    children: Snippet
+  } = $props();
+</script>
+<sl-menu>{@render children()}</sl-menu>

src/shoelace/SLMenuItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  import SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item";
+
+
+  let {
+    children,
+    onclick = null,
+  }: {
+    children: Snippet
+    onclick: SLMenuItem["onclick"]
+  } = $props();
+</script>
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<sl-menu-item
+  {onclick}
+>
+  {@render children()}
+</sl-menu-item>