@dorsk/tsumikit 0.69.0 → 0.70.0

package/README.md

@@ -348,9 +348,11 @@ hooks on head/row/cell; `responsive="stack"` turns rows into cards below
 `stackBelow` (48rem, measured on the table's own box) using `Column.role`
 `title | detail | meta | actions | hidden` — detail cells get a `data-label`
 prefix, `Column.stackLabel: false` drops it so metas join on one `·` line
-and details share lines, `--dt-meta-font` restyles meta values, the `<table>`
+and details share lines, `--dt-meta-font` restyles meta values (e.g. `var(--font-sans)`; a
+literal `inherit` falls back to mono), the `<table>`
 stays a table for assistive tech), FilterSearchBar /
-FilterInput (`size="sm"` compact bar on `--control-height-compact`,
+FilterInput (`size="sm"` compact bar on `--control-height-compact`, text
+floored at 16px under `pointer: coarse` so iOS does not zoom on focus,
 `shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
 outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`;
 `key="cwd"` puts FilterInput in single-key mode — `value` is the bare value
@@ -363,7 +365,11 @@ sidebar on desktop, overlay drawer on mobile, optionally resizable;
 the content column only, `stickySidebar` pins it to the viewport, and
 `sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
 children are `min-width: 0` so a wide title/actions row can't widen the grid on
-mobile), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
+mobile; the mobile drawer's state is `bind:open` with `onOpenChange(open)`, and
+`closeOnNavigate` (default `true`) closes it when a plain same-origin link inside
+it is clicked — a router can also close it, e.g. SvelteKit
+`afterNavigate(() => (navOpen = false))` with `<AppShell bind:open={navOpen}>`
+to cover `goto` and back/forward), NavBar (horizontal route bar — `<nav>` + `<a aria-current="page">`,
 icon/emoji + label + count badge; `placement="bar"` pins it to the bottom edge
 over `--z-nav` with `--safe-bottom` padding, `orientation` stacks or inlines the
 glyph, `maxWidth` centres the row; items without `href` are buttons that set a

package/dist/components/layouts/AppShell.svelte

@@ -7,10 +7,11 @@
 	//     nav content collapse to icons.
 	//   • mobile: the sidebar becomes an off-canvas drawer that slides in over a
 	//     scrim; AppShell renders the hamburger toggle for you (shown only on
-	//     mobile), locks body scroll while open, closes on Escape / scrim click,
-	//     and marks the rest of the page `inert` so focus stays in the drawer.
+	//     mobile), locks body scroll while open, closes on Escape / scrim click /
+	//     a same-origin link click inside it, and marks the rest of the page
+	//     `inert` so focus stays in the drawer. `bind:open` to drive it yourself.
 	// Switching to desktop auto-closes the drawer. Safe-area insets are honored.
-	import type { Snippet } from 'svelte';
+	import { untrack, type Snippet } from 'svelte';
 	import { browser } from '../../env';
 	import IconButton from '../molecules/IconButton.svelte';
 
@@ -28,6 +29,9 @@
 		layout = 'header-top',
 		stickySidebar = false,
 		sidebarPadding = 'md',
+		open = $bindable(false),
+		onOpenChange,
+		closeOnNavigate = true,
 		class: klass = '',
 		style: styleProp = '',
 	}: {
@@ -54,12 +58,42 @@
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
+		/** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+		open?: boolean;
+		/** Fires when AppShell itself opens or closes the drawer. */
+		onOpenChange?: (open: boolean) => void;
+		/** Close the mobile drawer when a same-origin link inside it is clicked
+		 *  (plain left click, no modifier keys, no `target` / `download`). */
+		closeOnNavigate?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
 
-	let open = $state(false);
 	let isMobile = $state(false);
+	let aside = $state<HTMLElement>();
+
+	function setOpen(next: boolean) {
+		if (open === next) return;
+		open = next;
+		onOpenChange?.(next);
+	}
+
+	function onSidebarClick(e: MouseEvent) {
+		if (!closeOnNavigate || !open) return;
+		if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		const link = (e.target as Element | null)?.closest?.('a[href]');
+		if (!link) return;
+		const target = link.getAttribute('target');
+		if ((target && target !== '_self') || link.hasAttribute('download')) return;
+		let url: URL;
+		try {
+			url = new URL(link.getAttribute('href') ?? '', document.baseURI);
+		} catch {
+			return;
+		}
+		if (url.origin !== location.origin) return;
+		setOpen(false);
+	}
 
 	// --- resizable sidebar (desktop) ---
 	function loadW(): number | null {
@@ -108,13 +142,20 @@
 		const mq = window.matchMedia('(max-width: 47.999rem)');
 		const sync = () => {
 			isMobile = mq.matches;
-			if (!isMobile) open = false; // desktop: drawer concept doesn't apply
+			if (!isMobile) setOpen(false);
 		};
-		sync();
+		untrack(sync);
 		mq.addEventListener('change', sync);
 		return () => mq.removeEventListener('change', sync);
 	});
 
+	$effect(() => {
+		const el = aside;
+		if (!el) return;
+		el.addEventListener('click', onSidebarClick);
+		return () => el.removeEventListener('click', onSidebarClick);
+	});
+
 	// Lock body scroll while the mobile drawer is open.
 	$effect(() => {
 		if (!browser) return;
@@ -128,7 +169,7 @@
 	const bgInert = $derived(open && isMobile);
 </script>
 
-<svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
+<svelte:window onkeydown={(e) => e.key === 'Escape' && setOpen(false)} />
 
 <div
 	class="shell {klass}"
@@ -147,7 +188,7 @@
 					icon="menu"
 					label="Toggle navigation"
 					aria-expanded={open}
-					onclick={() => (open = !open)}
+					onclick={() => setOpen(!open)}
 				/>
 			</div>
 		{/if}
@@ -160,7 +201,7 @@
 			class:show={open && isMobile}
 			tabindex="-1"
 			aria-hidden="true"
-			onclick={() => (open = false)}
+			onclick={() => setOpen(false)}
 		></button>
 		<aside
 			class="shell-sidebar"
@@ -168,6 +209,7 @@
 			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
+			bind:this={aside}
 		>
 			{@render sidebar()}
 			{#if resizableSidebar}

package/dist/components/layouts/AppShell.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 type $$ComponentProps = {
     header?: Snippet;
     sidebar?: Snippet;
@@ -23,9 +23,16 @@ type $$ComponentProps = {
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';
+    /** Mobile drawer state; reset to `false` when the viewport reaches 48rem. */
+    open?: boolean;
+    /** Fires when AppShell itself opens or closes the drawer. */
+    onOpenChange?: (open: boolean) => void;
+    /** Close the mobile drawer when a same-origin link inside it is clicked
+     *  (plain left click, no modifier keys, no `target` / `download`). */
+    closeOnNavigate?: boolean;
     class?: string;
     style?: string;
 };
-declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "open">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

package/dist/components/molecules/FilterInput.svelte

@@ -524,6 +524,14 @@
 		outline: none;
 		min-width: 0;
 	}
+	@media (pointer: coarse) {
+		.fi__input {
+			font-size: max(16px, var(--fs-md));
+		}
+		.fi--sm .fi__input {
+			font-size: max(16px, var(--fs-sm));
+		}
+	}
 	.fi__input::placeholder {
 		color: var(--text-faint);
 	}

package/package.json

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