@dorsk/tsumikit 0.58.0 → 0.58.1

package/dist/components/molecules/Menu.svelte

@@ -103,16 +103,6 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
-	$effect(() => {
-		const pop = listEl?.closest<HTMLElement>('[popover]');
-		if (!pop) return;
-		const isOpen = pop.matches(':popover-open');
-		try {
-			if (open && !isOpen) pop.showPopover();
-			else if (!open && isOpen) pop.hidePopover();
-		} catch {}
-	});
-
 	function buttons(): HTMLButtonElement[] {
 		return listEl
 			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
@@ -167,12 +157,9 @@
 	{gap}
 	role="menu"
 	haspopup="menu"
-	onclose={() => {
-		open = false;
-		onclose?.();
-	}}
+	bind:open
+	{onclose}
 	onopen={() => {
-		open = true;
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}

package/dist/components/molecules/Popover.svelte

@@ -76,6 +76,8 @@
 		role?: PanelRole;
 		/** `aria-haspopup` announced on the trigger. */
 		haspopup?: HasPopup;
+		/** Bindable open state; setting it opens or closes the panel, even before its first open. */
+		open?: boolean;
 		onopen?: () => void;
 		onclose?: () => void;
 		class?: string;
@@ -110,6 +112,7 @@
 		href,
 		role = 'dialog',
 		haspopup = 'dialog',
+		open = $bindable(false),
 		onopen,
 		onclose,
 		class: klass = '',
@@ -133,7 +136,14 @@
 	// reopening is instant. The panel element itself always renders — the native
 	// `popovertarget` wiring needs its id present in the DOM at all times.
 	let opened = $state(false);
-	let open = $state(false);
+
+	let shown = false;
+
+	$effect(() => {
+		if (!panelEl) return;
+		if (open && !shown) show();
+		else if (!open && shown) close();
+	});
 
 	function close() {
 		try {
@@ -210,6 +220,7 @@
 	}
 
 	async function onToggle(e: ToggleEvent) {
+		shown = e.newState === 'open';
 		if (e.newState === 'open') {
 			const firstOpen = !opened;
 			opened = true;

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

@@ -62,6 +62,8 @@ type Own = {
     role?: PanelRole;
     /** `aria-haspopup` announced on the trigger. */
     haspopup?: HasPopup;
+    /** Bindable open state; setting it opens or closes the panel, even before its first open. */
+    open?: boolean;
     onopen?: () => void;
     onclose?: () => void;
     class?: string;
@@ -71,6 +73,6 @@ type Own = {
     panelStyle?: string;
 };
 type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
-declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/molecules/SplitButton.svelte

@@ -78,16 +78,10 @@
 	const height = $derived(control ? 'var(--control-height)' : HEIGHT[size]);
 	const caretDisabled = $derived(disabled || menuDisabled);
 
-	let caretEl = $state<HTMLSpanElement | null>(null);
-
-	function openMenu() {
-		caretEl?.querySelector<HTMLButtonElement>('[popovertarget]')?.click();
-	}
-
 	function onPrimaryKeydown(e: KeyboardEvent) {
 		if (e.key !== 'ArrowDown' || caretDisabled) return;
 		e.preventDefault();
-		openMenu();
+		open = true;
 	}
 </script>
 
@@ -114,7 +108,7 @@
 			{@render children()}
 		</Button>
 	</span>
-	<span class="split-caret" bind:this={caretEl}>
+	<span class="split-caret">
 		<Menu
 			{label}
 			{items}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.58.0",
+  "version": "0.58.1",
   "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",