@dorsk/tsumikit 0.18.2 → 0.18.4

package/dist/components/molecules/Popover.svelte

@@ -8,7 +8,7 @@
 	// would overflow. (CSS anchor positioning would replace the JS here once it
 	// ships beyond Chromium; the popover semantics above are the hard part and
 	// are broadly supported today.)
-	import type { Snippet } from 'svelte';
+	import { tick, type Snippet } from 'svelte';
 	import { place } from '../../floating';
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
@@ -67,13 +67,22 @@
 	const id = `pop-${Math.random().toString(36).slice(2, 8)}`;
 	let triggerEl = $state<HTMLButtonElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
+	// Panel content is mounted only after the first open, then kept alive so
+	// 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);
 
 	function reposition() {
 		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
 	}
 
-	function onToggle(e: ToggleEvent) {
+	async function onToggle(e: ToggleEvent) {
 		if (e.newState === 'open') {
+			const firstOpen = !opened;
+			opened = true;
+			// On the first open the content snippet mounts this tick; measure the
+			// panel only once it has, so placement accounts for its real size.
+			if (firstOpen) await tick();
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
@@ -121,7 +130,9 @@
 	aria-label={label}
 	ontoggle={onToggle}
 >
-	{@render children()}
+	{#if opened}
+		{@render children()}
+	{/if}
 </div>
 
 <style>

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

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
 type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';

package/dist/components/molecules/Tabs.svelte

@@ -43,9 +43,13 @@
 	function select(id: string, focus = false) {
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		value = id;
-		if (focus) {
-			queueMicrotask(() => listEl?.querySelector<HTMLButtonElement>(`#${baseId}-tab-${id}`)?.focus());
-		}
+		queueMicrotask(() => {
+			const el = listEl?.querySelector<HTMLButtonElement>(`#${baseId}-tab-${id}`);
+			// The list scrolls when it is too narrow, so keyboard selection has to
+			// bring the tab back into view or it moves somewhere unseen.
+			el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+			if (focus) el?.focus();
+		});
 	}
 	// Step to the next non-disabled tab in a direction, wrapping around.
 	function step(from: number, dir: 1 | -1): number {
@@ -99,9 +103,13 @@
 		display: flex;
 		gap: var(--sp-1);
 		border-bottom: 1px solid var(--border);
+		overflow-x: auto;
+		scrollbar-width: thin;
 	}
 	.tab {
 		display: inline-flex;
+		flex: 0 0 auto;
+		white-space: nowrap;
 		align-items: center;
 		gap: var(--sp-2);
 		padding: var(--sp-2) var(--sp-3);

package/package.json

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