@dorsk/tsumikit 0.43.1 → 0.44.1

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;
@@ -63,8 +64,10 @@
 		variant?: TriggerVariant;
 		tone?: TriggerTone;
 		size?: TriggerSize;
-		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
-		 *  the default trigger is the `md` 2.25rem box. */
+		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
+		 *  pinning the square exactly. The default trigger floors at the `sm` box
+		 *  and grows with its content; override that floor from `triggerClass`
+		 *  with `--pop-box`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
@@ -98,6 +101,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 +175,7 @@
 	ontoggle={onToggle}
 >
 	{#if opened}
-		{@render children()}
+		{@render children({ close })}
 	{/if}
 </div>
 
@@ -177,13 +186,16 @@
 	/* Default trigger chrome. Zero specificity (`:where`) so any consumer class
 	   (triggerClass) overrides it; `:not(.bare)` keeps it off bare triggers such
 	   as the Timestamp <time>, which stay plain inline text. */
+	/* The square is one knob, `--pop-box`: the `box` prop sets it inline, and a
+	   consumer's `triggerClass` can set it too (`--pop-box: var(--box-xs)`) — a
+	   plain width/height there would not have beaten a `min-*` floor. */
 	:where(.pop-trigger:not(.bare)) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-height: var(--box-md);
-		min-width: var(--box-md);
-		padding: var(--sp-2);
+		min-height: var(--pop-box, var(--box-sm));
+		min-width: var(--pop-box, var(--box-sm));
+		padding: var(--sp-1);
 		border: 1px solid transparent;
 		border-radius: var(--r-md);
 		background: transparent;

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;
@@ -25,8 +28,10 @@ type $$ComponentProps = {
     variant?: TriggerVariant;
     tone?: TriggerTone;
     size?: TriggerSize;
-    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger;
-     *  the default trigger is the `md` 2.25rem box. */
+    /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
+     *  pinning the square exactly. The default trigger floors at the `sm` box
+     *  and grows with its content; override that floor from `triggerClass`
+     *  with `--pop-box`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;

package/package.json

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