@dorsk/tsumikit 0.67.0 → 0.68.0

package/dist/components/layouts/NavBar.svelte

@@ -1,28 +1,43 @@
 <script lang="ts">
-	// Horizontal route navigation: a `<nav>` landmark of `<a>` links, one marked
-	// `aria-current="page"`. `placement="bar"` pins it to the bottom edge over
-	// `--z-nav` and pads for the iOS home indicator with `--safe-bottom`;
-	// `placement="inline"` is a plain row for a header. `orientation` stacks the
-	// icon over the label (phone bar) or sits it beside (header).
+	// Horizontal navigation: a `<nav>` landmark of items, one marked current.
+	// An item with `href` is an `<a aria-current="page">`; one without is a
+	// `<button>` that sets the bindable `value`. When every item is a button the
+	// row is a `tablist` (roving tabindex, ←/→/Home/End, `aria-selected`).
+	// `placement="bar"` pins it to the bottom edge over `--z-nav` with safe-area
+	// padding; `variant="floating"` makes it an inset rounded card. `center`
+	// reserves a notch in the middle of the row, items split around it.
+	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
 
 	export interface NavBarItem {
-		href: string;
+		/** Renders an `<a>`; without it the item is a `<button>`. */
+		href?: string;
+		/** Selects the item through the bar's `value`. */
+		value?: string;
 		label: string;
 		icon?: IconName;
 		/** Rendered instead of `icon` when set. */
 		emoji?: string;
 		/** Count or short text pinned to the glyph. 0 / '' render nothing. */
 		badge?: number | string;
+		/** Overrides the `value` match. */
 		current?: boolean;
+		/** `preventDefault()` skips the `value` change. */
+		onclick?: (e: MouseEvent) => void;
+		/** Id of the panel a tab shows (`aria-controls`). */
+		controls?: string;
 	}
 
 	let {
 		items,
 		label,
+		value = $bindable(),
+		onchange,
+		center,
 		placement = 'inline',
 		orientation = 'stacked',
+		variant = 'flush',
 		maxWidth,
 		class: klass = '',
 		style: styleProp = '',
@@ -31,11 +46,18 @@
 		items: NavBarItem[];
 		/** Accessible name of the `<nav>` landmark. */
 		label: string;
+		/** `value` of the current item, for in-page views without routes. */
+		value?: string;
+		onchange?: (value: string) => void;
+		/** Fills a notch in the middle of the row (`--navbar-center-w`), may rise above it (`--navbar-center-raise`). */
+		center?: Snippet;
 		/** 'bar' = fixed to the bottom edge with safe-area padding. */
 		placement?: 'bar' | 'inline';
 		/** Icon over label vs icon beside label. */
 		orientation?: 'stacked' | 'inline';
-		/** Caps and centres the row of links. */
+		/** 'floating' = rounded elevated card inset from the edges. */
+		variant?: 'flush' | 'floating';
+		/** Caps and centres the row of items. */
 		maxWidth?: string;
 		class?: string;
 		style?: string;
@@ -44,38 +66,127 @@
 
 	const hasBadge = (badge: NavBarItem['badge']) =>
 		badge !== undefined && badge !== null && badge !== '' && badge !== 0;
+
+	const tabs = $derived(items.length > 0 && items.every((item) => !item.href));
+	const isCurrent = (item: NavBarItem) =>
+		item.current ?? (item.value !== undefined && item.value === value);
+	const focusIndex = $derived(Math.max(0, items.findIndex(isCurrent)));
+	const split = $derived(Math.ceil(items.length / 2));
+
+	function select(item: NavBarItem, e: MouseEvent) {
+		item.onclick?.(e);
+		if (e.defaultPrevented || item.value === undefined || item.value === value) return;
+		value = item.value;
+		onchange?.(item.value);
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const list = e.currentTarget as HTMLElement;
+		const all = [...list.querySelectorAll<HTMLButtonElement>('[role="tab"]')];
+		const i = all.indexOf(e.target as HTMLButtonElement);
+		if (i < 0) return;
+		let next: number;
+		if (e.key === 'ArrowRight') next = (i + 1) % all.length;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + all.length) % all.length;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = all.length - 1;
+		else return;
+		e.preventDefault();
+		all[next].focus();
+		all[next].click();
+	}
 </script>
 
+{#snippet glyph(item: NavBarItem)}
+	<span class="navbar-glyph">
+		{#if item.emoji}
+			<span class="navbar-emoji" aria-hidden="true">{item.emoji}</span>
+		{:else if item.icon}
+			<Icon name={item.icon} size={20} />
+		{/if}
+		{#if hasBadge(item.badge)}
+			<span class="navbar-badge">{item.badge}</span>
+		{/if}
+	</span>
+	<span class="navbar-label">{item.label}</span>
+{/snippet}
+
+{#snippet entry(item: NavBarItem, i: number)}
+	{#if item.href}
+		<a
+			href={item.href}
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-current={isCurrent(item) ? 'page' : undefined}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</a>
+	{:else if tabs}
+		<button
+			type="button"
+			role="tab"
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-selected={isCurrent(item)}
+			aria-controls={item.controls}
+			tabindex={i === focusIndex ? 0 : -1}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</button>
+	{:else}
+		<button
+			type="button"
+			class="navbar-link"
+			class:current={isCurrent(item)}
+			aria-current={isCurrent(item) ? 'page' : undefined}
+			onclick={(e) => select(item, e)}
+		>
+			{@render glyph(item)}
+		</button>
+	{/if}
+{/snippet}
+
 <nav
 	data-tsu="NavBar"
 	aria-label={label}
 	class="navbar {klass}"
 	class:bar={placement === 'bar'}
+	class:floating={variant === 'floating'}
 	class:stacked={orientation === 'stacked'}
 	style="{maxWidth ? `--navbar-max: ${maxWidth};` : ''}{styleProp}"
 	{...rest}
 >
-	<div class="navbar-inner">
-		{#each items as item, i (`${i}:${item.href}`)}
-			<a
-				href={item.href}
-				class="navbar-link"
-				class:current={item.current}
-				aria-current={item.current ? 'page' : undefined}
-			>
-				<span class="navbar-glyph">
-					{#if item.emoji}
-						<span class="navbar-emoji" aria-hidden="true">{item.emoji}</span>
-					{:else if item.icon}
-						<Icon name={item.icon} size={20} />
-					{/if}
-					{#if hasBadge(item.badge)}
-						<span class="navbar-badge">{item.badge}</span>
-					{/if}
-				</span>
-				<span class="navbar-label">{item.label}</span>
-			</a>
-		{/each}
+	<div class="navbar-row">
+		<div
+			class="navbar-inner"
+			class:split={!!center}
+			role={tabs ? 'tablist' : undefined}
+			aria-label={tabs ? label : undefined}
+			onkeydown={tabs ? onkeydown : undefined}
+		>
+			{#if center}
+				<div class="navbar-side" role="none">
+					{#each items.slice(0, split) as item, i (`${i}:${item.href ?? item.value ?? item.label}`)}
+						{@render entry(item, i)}
+					{/each}
+				</div>
+				<span class="navbar-notch" aria-hidden="true"></span>
+				<div class="navbar-side" role="none">
+					{#each items.slice(split) as item, j (`${split + j}:${item.href ?? item.value ?? item.label}`)}
+						{@render entry(item, split + j)}
+					{/each}
+				</div>
+			{:else}
+				{#each items as item, i (`${i}:${item.href ?? item.value ?? item.label}`)}
+					{@render entry(item, i)}
+				{/each}
+			{/if}
+		</div>
+		{#if center}
+			<div class="navbar-center">{@render center()}</div>
+		{/if}
 	</div>
 </nav>
 
@@ -84,16 +195,41 @@
 		--navbar-max: none;
 		min-width: 0;
 	}
+	.navbar-row {
+		position: relative;
+		min-width: 0;
+		max-width: var(--navbar-max);
+		margin-inline: auto;
+	}
 	.navbar-inner {
 		display: flex;
 		align-items: stretch;
 		justify-content: space-around;
 		gap: var(--sp-1);
 		min-width: 0;
-		max-width: var(--navbar-max);
-		margin-inline: auto;
 		min-height: var(--nav-h);
 	}
+	.navbar-inner.split {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) var(--navbar-center-w, 4.5rem) minmax(0, 1fr);
+	}
+	.navbar-side {
+		display: flex;
+		align-items: stretch;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	.navbar-center {
+		position: absolute;
+		top: calc(-1 * var(--navbar-center-raise, 0px));
+		bottom: var(--navbar-center-raise, 0px);
+		left: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--navbar-center-w, 4.5rem);
+		transform: translateX(-50%);
+	}
 	.bar {
 		position: fixed;
 		inset-inline: 0;
@@ -105,21 +241,39 @@
 		backdrop-filter: blur(12px);
 		border-top: 1px solid var(--border);
 	}
+	.floating {
+		padding: var(--sp-1);
+		border: 1px solid var(--border-strong);
+		border-radius: var(--r-md);
+		background: var(--bg-elevated);
+		box-shadow: var(--shadow-md);
+	}
+	.bar.floating {
+		left: calc(var(--sp-2) + var(--safe-left));
+		right: calc(var(--sp-2) + var(--safe-right));
+		bottom: calc(var(--sp-2) + var(--safe-bottom));
+		backdrop-filter: none;
+	}
 	.navbar-link {
 		position: relative;
 		display: flex;
 		flex: 1 1 0;
 		min-width: 0;
+		min-height: var(--touch-target);
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
 		gap: var(--sp-2);
 		padding: var(--sp-2);
+		border: none;
 		border-radius: var(--r-md);
+		background: none;
 		color: var(--text-muted);
+		font: inherit;
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-medium);
 		text-decoration: none;
+		cursor: pointer;
 		transition:
 			background 0.12s var(--ease),
 			color 0.12s var(--ease);

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

@@ -1,28 +1,44 @@
+import type { Snippet } from 'svelte';
 import type { IconName } from '../atoms/Icon.svelte';
 export interface NavBarItem {
-    href: string;
+    /** Renders an `<a>`; without it the item is a `<button>`. */
+    href?: string;
+    /** Selects the item through the bar's `value`. */
+    value?: string;
     label: string;
     icon?: IconName;
     /** Rendered instead of `icon` when set. */
     emoji?: string;
     /** Count or short text pinned to the glyph. 0 / '' render nothing. */
     badge?: number | string;
+    /** Overrides the `value` match. */
     current?: boolean;
+    /** `preventDefault()` skips the `value` change. */
+    onclick?: (e: MouseEvent) => void;
+    /** Id of the panel a tab shows (`aria-controls`). */
+    controls?: string;
 }
 type $$ComponentProps = {
     items: NavBarItem[];
     /** Accessible name of the `<nav>` landmark. */
     label: string;
+    /** `value` of the current item, for in-page views without routes. */
+    value?: string;
+    onchange?: (value: string) => void;
+    /** Fills a notch in the middle of the row (`--navbar-center-w`), may rise above it (`--navbar-center-raise`). */
+    center?: Snippet;
     /** 'bar' = fixed to the bottom edge with safe-area padding. */
     placement?: 'bar' | 'inline';
     /** Icon over label vs icon beside label. */
     orientation?: 'stacked' | 'inline';
-    /** Caps and centres the row of links. */
+    /** 'floating' = rounded elevated card inset from the edges. */
+    variant?: 'flush' | 'floating';
+    /** Caps and centres the row of items. */
     maxWidth?: string;
     class?: string;
     style?: string;
     [key: string]: unknown;
 };
-declare const NavBar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const NavBar: import("svelte").Component<$$ComponentProps, {}, "value">;
 type NavBar = ReturnType<typeof NavBar>;
 export default NavBar;

package/dist/components/molecules/FileButton.svelte

@@ -45,7 +45,7 @@
 		control?: boolean;
 		/** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
-		/** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		class?: string;
 	} = $props();
@@ -158,7 +158,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

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

@@ -24,7 +24,7 @@ type $$ComponentProps = {
     control?: boolean;
     /** Shared square box scale (`--box-xs/sm/md/lg`); implies `iconOnly`. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
-    /** Icon-only buttons grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only buttons grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     class?: string;
 };

package/dist/components/molecules/GlyphStack.svelte

@@ -20,6 +20,7 @@
 	import { tick } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { browser } from '../../env';
+	import { slideSelect } from '../../slide-select';
 
 	type Own = {
 		/** Glyphs as `{ inline, stacked? }` pairs; alternative to `children`. */
@@ -78,7 +79,6 @@
 		return el.parentElement;
 	}
 
-	const SLIDE_THRESHOLD = 12;
 	const CONTROL = 'button, a[href], input, select, textarea, [role="button"], [tabindex]:not([tabindex="-1"])';
 
 	const tiles = $derived(items?.slice(0, 4) ?? []);
@@ -86,7 +86,6 @@
 	let panel = $state<HTMLDivElement>();
 	let open = $state(false);
 	let armed = $state(-1);
-	let origin: { x: number; y: number } | null = null;
 
 	function show() {
 		try {
@@ -129,11 +128,13 @@
 	}
 
 	/** Tile under a drag from the press point: 0 top-left, 1 top-right, 2 bottom-left, 3 bottom-right. */
-	function corner(dx: number, dy: number): number {
-		if (Math.hypot(dx, dy) < SLIDE_THRESHOLD) return -1;
-		const i = (dy < 0 ? 0 : 2) + (dx < 0 ? 0 : 1);
-		return i < tiles.length ? i : -1;
-	}
+	const slide = slideSelect({
+		pick: ({ dx, dy }) => {
+			const i = (dy < 0 ? 0 : 2) + (dx < 0 ? 0 : 1);
+			return i < tiles.length ? i : -1;
+		},
+		onarm: (i) => (armed = i),
+	});
 
 	async function activate(i: number) {
 		const { action } = tiles[i];
@@ -153,29 +154,21 @@
 		if (!expandable || expand !== 'slide' || e.button !== 0) return;
 		e.preventDefault();
 		e.stopPropagation();
-		origin = { x: e.clientX, y: e.clientY };
-		armed = -1;
-		try {
-			root?.setPointerCapture(e.pointerId);
-		} catch {}
+		slide.down(e, root);
 		show();
 	}
 
 	function onPointerMove(e: PointerEvent) {
-		if (origin) armed = corner(e.clientX - origin.x, e.clientY - origin.y);
+		slide.move(e);
 	}
 
 	function onPointerUp() {
-		if (!origin) return;
-		origin = null;
-		const i = armed;
-		armed = -1;
+		const i = slide.up();
 		if (i >= 0) activate(i);
 	}
 
 	function onPointerCancel() {
-		origin = null;
-		armed = -1;
+		slide.cancel();
 	}
 
 	// Pointer clicks on the folded cells open the panel instead of hitting the

package/dist/components/molecules/IconButton.svelte

@@ -34,7 +34,7 @@
 		// Exact glyph size for SVG *and* text glyphs (px number or any CSS length),
 		// no emoji multiplier. Wins over `size`.
 		glyphSize?: number | string;
-		// Opt out of the 44px coarse-pointer hit slab in dense rows.
+		// Opt out of the coarse-pointer hit slab in dense rows.
 		hitArea?: 'auto' | 'compact';
 		// Borderless, compact icon affordance (chip-remove ✕, inline edit ✎) —
 		// no square box; just a muted glyph that brightens on hover. Pair with

package/dist/components/molecules/Popover.svelte

@@ -61,7 +61,7 @@
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
-		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+		/** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		/** Corner count indicator on the trigger, as on `Button`: hidden at
 		 *  0/undefined, capped at `countMax+`, the exact number joins `label`. */
@@ -449,10 +449,9 @@
 		padding: var(--pop-trigger-pad, 0);
 		flex: none;
 	}
-	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
-	   via an invisible slab; layout does not move. The slab grows towards the
-	   inline start only, so it never adds scrollable overflow to a scroll ancestor
-	   (see Button.svelte). */
+	/* Coarse pointers: icon-only triggers extend their hit area towards --touch-target
+	   via an invisible slab; layout does not move. Same geometry as Button.svelte:
+	   no inline-end growth, half the deficit towards the inline start. */
 	@media (pointer: coarse) {
 		.pop-trigger:not(.canonical, .hit-compact) {
 			position: relative;
@@ -461,7 +460,7 @@
 			content: '';
 			position: absolute;
 			inset-block: min(0px, calc((100% - var(--touch-target)) / 2));
-			inset-inline-start: min(0px, calc(100% - var(--touch-target)));
+			inset-inline-start: min(0px, calc((100% - var(--touch-target)) / 2));
 			inset-inline-end: 0;
 		}
 	}

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

@@ -46,7 +46,7 @@ type Own = {
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;
-    /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
+    /** Icon-only triggers grow a touch hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     /** Corner count indicator on the trigger, as on `Button`: hidden at
      *  0/undefined, capped at `countMax+`, the exact number joins `label`. */