@dorsk/tsumikit 0.43.1 → 0.44.0

package/dist/components/molecules/Menu.svelte

@@ -120,10 +120,9 @@
 			focusAt(b.length - 1);
 		}
 	}
-	function select(item: MenuItem) {
+	function select(item: MenuItem, close: () => void) {
 		if (item.disabled) return;
-		// Close the popover, then run the action.
-		listEl?.closest<HTMLElement>('[popover]')?.hidePopover();
+		close();
 		item.onselect();
 	}
 </script>
@@ -158,6 +157,7 @@
 		onopen?.();
 	}}
 >
+	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button
@@ -169,7 +169,7 @@
 				class:on={item.pressed}
 				disabled={item.disabled}
 				tabindex="-1"
-				onclick={() => select(item)}
+				onclick={() => select(item, close)}
 			>
 				{#if item.content}
 					{@render item.content(item)}
@@ -189,6 +189,7 @@
 			</button>
 		{/each}
 	</div>
+	{/snippet}
 </Popover>
 
 <style>

package/dist/components/molecules/Popover.svelte

@@ -50,8 +50,9 @@
 		label: string;
 		/** Trigger content (rendered inside a button that owns the popover wiring). */
 		trigger: Snippet;
-		/** Panel content. */
-		children: Snippet;
+		/** Panel content. Receives `{ close }` to dismiss the panel from inside;
+		 *  zero-argument snippets keep working. */
+		children: Snippet<[{ close: () => void }]>;
 		/** Extra class on the trigger button — style it from your own scoped CSS,
 		 *  no :global needed (you supply the class). */
 		triggerClass?: string;
@@ -98,6 +99,12 @@
 	let opened = $state(false);
 	let open = $state(false);
 
+	function close() {
+		try {
+			panelEl?.hidePopover();
+		} catch {}
+	}
+
 	function reposition() {
 		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
 	}
@@ -166,7 +173,7 @@
 	ontoggle={onToggle}
 >
 	{#if opened}
-		{@render children()}
+		{@render children({ close })}
 	{/if}
 </div>
 

package/dist/components/molecules/Popover.svelte.d.ts

@@ -12,8 +12,11 @@ type $$ComponentProps = {
     label: string;
     /** Trigger content (rendered inside a button that owns the popover wiring). */
     trigger: Snippet;
-    /** Panel content. */
-    children: Snippet;
+    /** Panel content. Receives `{ close }` to dismiss the panel from inside;
+     *  zero-argument snippets keep working. */
+    children: Snippet<[{
+        close: () => void;
+    }]>;
     /** Extra class on the trigger button — style it from your own scoped CSS,
      *  no :global needed (you supply the class). */
     triggerClass?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.43.1",
+  "version": "0.44.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",