@dorsk/tsumikit 0.71.0 → 0.73.0

package/dist/components/molecules/SwipeRow.svelte

@@ -0,0 +1,349 @@
+<script lang="ts" module>
+	import type { IconName } from '../atoms/Icon.svelte';
+	import type { Tone } from '../../tone';
+
+	export interface SwipeAction {
+		label: string;
+		icon?: IconName;
+		tone?: Tone;
+		onaction: () => void;
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * List row with a hidden action on each side, revealed by a horizontal swipe.
+	 * A swipe past `threshold` (fraction of the row width) fires the action on
+	 * release; a shorter one snaps back. The axis is locked after a few pixels:
+	 * a drag that is more vertical than horizontal is left to the scroller.
+	 * The same actions are reachable as visually hidden buttons for keyboard
+	 * and screen-reader users.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Icon from '../atoms/Icon.svelte';
+	import { canonicalTone } from '../../tone';
+
+	type Own = {
+		children: Snippet;
+		/** Revealed on a rightward swipe. */
+		leadingAction?: SwipeAction;
+		/** Revealed on a leftward swipe. */
+		trailingAction?: SwipeAction;
+		/** Custom pane content; defaults to the action's icon and label. */
+		leading?: Snippet<[SwipeAction, boolean]>;
+		trailing?: Snippet<[SwipeAction, boolean]>;
+		/** Fraction of the row width the content must travel to fire. */
+		threshold?: number;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+	};
+
+	let {
+		children,
+		leadingAction,
+		trailingAction,
+		leading,
+		trailing,
+		threshold = 0.35,
+		disabled = false,
+		class: klass = '',
+		style: styleProp,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const SLOP = 8;
+	const FALLBACK_WIDTH = 320;
+
+	let offset = $state(0);
+	let dragging = $state(false);
+	let settling = $state(false);
+
+	let pointerId: number | null = null;
+	let startX = 0;
+	let startY = 0;
+	let width = $state(0);
+	let locked: 'x' | 'y' | null = null;
+	let swallowClick = false;
+	let settleTimer: ReturnType<typeof setTimeout> | undefined;
+
+	const armed = $derived(width > 0 && Math.abs(offset) >= width * threshold);
+	const side = $derived(offset > 0 ? 'leading' : offset < 0 ? 'trailing' : null);
+	const active = $derived(side === 'leading' ? leadingAction : side === 'trailing' ? trailingAction : undefined);
+	const tone = $derived(canonicalTone(active?.tone ?? 'neutral'));
+
+	function reducedMotion() {
+		return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
+
+	function release(el: HTMLElement) {
+		if (pointerId !== null && typeof el.releasePointerCapture === 'function') {
+			try {
+				el.releasePointerCapture(pointerId);
+			} catch {}
+		}
+		pointerId = null;
+		locked = null;
+		dragging = false;
+	}
+
+	function settle() {
+		clearTimeout(settleTimer);
+		if (reducedMotion()) {
+			offset = 0;
+			return;
+		}
+		settling = true;
+		offset = 0;
+		settleTimer = setTimeout(() => (settling = false), 220);
+	}
+
+	function onpointerdown(e: PointerEvent) {
+		swallowClick = false;
+		if (disabled || e.button !== 0 || pointerId !== null) return;
+		if (!leadingAction && !trailingAction) return;
+		const el = e.currentTarget as HTMLElement;
+		pointerId = e.pointerId;
+		startX = e.clientX;
+		startY = e.clientY;
+		width = el.clientWidth || FALLBACK_WIDTH;
+		locked = null;
+		clearTimeout(settleTimer);
+		settling = false;
+	}
+
+	function onpointermove(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		if (locked === null) {
+			if (Math.hypot(dx, dy) < SLOP) return;
+			if (Math.abs(dy) >= Math.abs(dx)) {
+				locked = 'y';
+				release(el);
+				return;
+			}
+			locked = 'x';
+			dragging = true;
+			swallowClick = true;
+			if (typeof el.setPointerCapture === 'function') {
+				try {
+					el.setPointerCapture(e.pointerId);
+				} catch {}
+			}
+		}
+		if (locked !== 'x') return;
+		const max = leadingAction ? width : 0;
+		const min = trailingAction ? -width : 0;
+		offset = Math.max(min, Math.min(max, dx));
+	}
+
+	function onpointerup(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		const el = e.currentTarget as HTMLElement;
+		const fire = locked === 'x' && armed ? active : undefined;
+		release(el);
+		settle();
+		fire?.onaction();
+	}
+
+	function onpointercancel(e: PointerEvent) {
+		if (pointerId !== e.pointerId) return;
+		release(e.currentTarget as HTMLElement);
+		settle();
+	}
+
+	function onclickcapture(e: MouseEvent) {
+		if (!swallowClick) return;
+		swallowClick = false;
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	function onlostpointercapture() {
+		if (pointerId === null) return;
+		pointerId = null;
+		locked = null;
+		dragging = false;
+		settle();
+	}
+</script>
+
+<div
+	data-tsu="SwipeRow"
+	class="swiperow {klass}"
+	class:swiperow--dragging={dragging}
+	class:swiperow--settling={settling}
+	class:swiperow--armed={armed}
+	class:swiperow--leading={side === 'leading'}
+	class:swiperow--trailing={side === 'trailing'}
+	class:swiperow-tone-accent={tone === 'accent'}
+	class:swiperow-tone-success={tone === 'ok'}
+	class:swiperow-tone-info={tone === 'info'}
+	class:swiperow-tone-warn={tone === 'warn'}
+	class:swiperow-tone-danger={tone === 'danger'}
+	style="--swiperow-x: {offset}px;{styleProp ?? ''}"
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	{onpointercancel}
+	{onlostpointercapture}
+	{onclickcapture}
+	{...rest}
+>
+	{#if leadingAction}
+		<div class="swiperow-pane swiperow-pane--leading" aria-hidden="true" data-part="leading">
+			{#if leading}
+				{@render leading(leadingAction, side === 'leading' && armed)}
+			{:else}
+				{#if leadingAction.icon}<Icon name={leadingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{leadingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	{#if trailingAction}
+		<div class="swiperow-pane swiperow-pane--trailing" aria-hidden="true" data-part="trailing">
+			{#if trailing}
+				{@render trailing(trailingAction, side === 'trailing' && armed)}
+			{:else}
+				{#if trailingAction.icon}<Icon name={trailingAction.icon} />{/if}
+				<span class="swiperow-pane-label">{trailingAction.label}</span>
+			{/if}
+		</div>
+	{/if}
+	<div class="swiperow-content" data-part="content">
+		{@render children()}
+	</div>
+	{#if leadingAction || trailingAction}
+		<div class="swiperow-actions" data-part="actions">
+			{#if leadingAction}
+				<button type="button" class="swiperow-sr" data-part="leading-button" {disabled} onclick={() => leadingAction?.onaction()}>
+					{leadingAction.label}
+				</button>
+			{/if}
+			{#if trailingAction}
+				<button type="button" class="swiperow-sr" data-part="trailing-button" {disabled} onclick={() => trailingAction?.onaction()}>
+					{trailingAction.label}
+				</button>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.swiperow {
+		--swiperow-tone: var(--bg-elevated-2);
+		--swiperow-ink: var(--text);
+		position: relative;
+		overflow: hidden;
+		touch-action: pan-y;
+		user-select: none;
+		-webkit-user-select: none;
+	}
+	.swiperow-tone-accent {
+		--swiperow-tone: var(--accent);
+		--swiperow-ink: var(--text-on-accent);
+	}
+	.swiperow-tone-success {
+		--swiperow-tone: var(--ok);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-info {
+		--swiperow-tone: var(--info);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-warn {
+		--swiperow-tone: var(--warn);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-tone-danger {
+		--swiperow-tone: var(--danger);
+		--swiperow-ink: var(--bg);
+	}
+	.swiperow-pane {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: 0 var(--sp-4);
+		background: var(--swiperow-tone);
+		color: var(--swiperow-ink);
+		font-size: var(--fs-sm);
+		font-weight: 600;
+		visibility: hidden;
+		pointer-events: none;
+	}
+	.swiperow-pane--leading {
+		justify-content: flex-start;
+	}
+	.swiperow-pane--trailing {
+		justify-content: flex-end;
+	}
+	.swiperow--leading .swiperow-pane--leading,
+	.swiperow--trailing .swiperow-pane--trailing {
+		visibility: visible;
+	}
+	.swiperow-pane :global(svg) {
+		transition: transform 120ms var(--ease);
+	}
+	.swiperow--armed .swiperow-pane :global(svg) {
+		transform: scale(1.2);
+	}
+	.swiperow-content {
+		position: relative;
+		background: var(--bg);
+		transform: translate3d(var(--swiperow-x), 0, 0);
+		will-change: transform;
+	}
+	.swiperow--settling .swiperow-content {
+		transition: transform 200ms var(--ease);
+	}
+	.swiperow--dragging .swiperow-content {
+		cursor: grabbing;
+	}
+	.swiperow-actions {
+		position: absolute;
+		inset: 0 0 0 auto;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-1);
+		padding: 0 var(--sp-2);
+		pointer-events: none;
+	}
+	.swiperow-sr {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	.swiperow-sr:focus-visible {
+		position: static;
+		width: auto;
+		height: auto;
+		margin: 0;
+		padding: var(--sp-1) var(--sp-2);
+		clip: auto;
+		pointer-events: auto;
+		font: inherit;
+		font-size: var(--fs-sm);
+		color: var(--swiperow-ink);
+		background: var(--swiperow-tone);
+		border-radius: var(--r-sm);
+		outline: 2px solid var(--accent);
+		outline-offset: 1px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.swiperow--settling .swiperow-content,
+		.swiperow-pane :global(svg) {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,37 @@
+import type { IconName } from '../atoms/Icon.svelte';
+import type { Tone } from '../../tone';
+export interface SwipeAction {
+    label: string;
+    icon?: IconName;
+    tone?: Tone;
+    onaction: () => void;
+}
+/**
+     * List row with a hidden action on each side, revealed by a horizontal swipe.
+     * A swipe past `threshold` (fraction of the row width) fires the action on
+     * release; a shorter one snaps back. The axis is locked after a few pixels:
+     * a drag that is more vertical than horizontal is left to the scroller.
+     * The same actions are reachable as visually hidden buttons for keyboard
+     * and screen-reader users.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
+    children: Snippet;
+    /** Revealed on a rightward swipe. */
+    leadingAction?: SwipeAction;
+    /** Revealed on a leftward swipe. */
+    trailingAction?: SwipeAction;
+    /** Custom pane content; defaults to the action's icon and label. */
+    leading?: Snippet<[SwipeAction, boolean]>;
+    trailing?: Snippet<[SwipeAction, boolean]>;
+    /** Fraction of the row width the content must travel to fire. */
+    threshold?: number;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const SwipeRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type SwipeRow = ReturnType<typeof SwipeRow>;
+export default SwipeRow;

package/dist/components/molecules/Tabs.svelte

@@ -86,6 +86,12 @@
 	let listEl = $state<HTMLDivElement | null>(null);
 	const baseId = `tabs-${Math.random().toString(36).slice(2, 8)}`;
 	const panelId = $derived(panel ? `${baseId}-panel` : undefined);
+	// The roving tab stop: the selected tab, or the first enabled one when the
+	// selection is unknown or disabled, so the strip never drops out of the Tab order.
+	const stop = $derived(
+		tabs.find((t) => t.id === value && !t.disabled) ?? tabs.find((t) => !t.disabled)
+	);
+	const tabId = (id: string) => `${baseId}-tab-${id}`;
 
 	function canClose(t: TabItem): boolean {
 		return t.closable ?? closable;
@@ -95,7 +101,7 @@
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		value = id;
 		queueMicrotask(() => {
-			const el = listEl?.querySelector<HTMLElement>(`#${baseId}-tab-${id}`);
+			const el = listEl?.ownerDocument.getElementById(tabId(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' });
@@ -129,7 +135,7 @@
 		close(id);
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const i = tabs.findIndex((t) => t.id === value);
+		const i = stop ? tabs.indexOf(stop) : -1;
 		if (i < 0) return;
 		if (e.key === 'Delete') {
 			if (!canClose(tabs[i])) return;
@@ -169,7 +175,7 @@
 						aria-selected={value === t.id}
 						aria-controls={panelId}
 						aria-disabled={t.disabled || undefined}
-						tabindex={value === t.id ? 0 : -1}
+						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab closable"
 						class:selected={value === t.id}
 						class:disabled={t.disabled}
@@ -202,7 +208,7 @@
 						aria-selected={value === t.id}
 						aria-controls={panelId}
 						disabled={t.disabled}
-						tabindex={value === t.id ? 0 : -1}
+						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab"
 						class:selected={value === t.id}
 						onclick={() => select(t.id)}
@@ -217,7 +223,7 @@
 		{/if}
 	</div>
 	{#if panel}
-		<div role="tabpanel" id={panelId} tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
+		<div role="tabpanel" id={panelId} aria-labelledby={value === undefined ? undefined : tabId(value)} tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
 			{#if value !== undefined}{@render panel(value)}{/if}
 		</div>
 	{/if}

package/dist/components/molecules/Timestamp.svelte

@@ -130,7 +130,7 @@
 	<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
 	<time class="{cls} ts-invalid" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar}>—</time>
 {:else if showPopover}
-	<Popover label="Timestamp details" placement="bottom-start" bare>
+	<Popover label="{label}, details" placement="bottom-start" bare>
 		{#snippet trigger()}
 			<time class="{cls} ts-trigger" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar} datetime={machine}>{label}</time>
 		{/snippet}

package/dist/components/molecules/Toaster.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	// Renders the toast queue bottom-centered in two live regions: polite for
 	// ok/info/neutral, assertive (role=alert) for errors. Mount once near the
-	// app root. The stack lives in a manual popover so it paints in the
-	// top layer above an open Modal <dialog>; without the Popover API the
-	// attribute is ignored and the fixed/z-index positioning applies instead.
+	// app root. The stack lives in a manual popover so it paints in the top
+	// layer; without the Popover API the attribute is ignored and the
+	// fixed/z-index positioning applies instead. While a modal <dialog> is open
+	// everything outside it is inert, top layer included, so the stack moves
+	// into the topmost modal dialog and back to its host when it closes.
 	import { toasts } from '../../stores/toast.svelte';
 	import Button from '../atoms/Button.svelte';
 	import Card from '../atoms/Card.svelte';
@@ -11,16 +13,61 @@
 
 	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
 
+	let host: HTMLDivElement | undefined = $state();
 	let el: HTMLDivElement | undefined = $state();
 	const polite = $derived(toasts.items.filter((t) => t.tone !== 'error'));
 	const assertive = $derived(toasts.items.filter((t) => t.tone === 'error'));
 
-	$effect(() => {
-		if (!el || typeof el.showPopover !== 'function') return;
+	function topModal(): HTMLDialogElement | null {
+		let found: HTMLDialogElement | null = null;
+		for (const d of document.querySelectorAll<HTMLDialogElement>('dialog[open]')) {
+			try {
+				if (d.matches(':modal')) found = d;
+			} catch {}
+		}
+		return found;
+	}
+
+	let shown = false;
+	function show(stack: HTMLDivElement) {
+		if (typeof stack.showPopover !== 'function') return;
 		try {
-			if (toasts.items.length) el.showPopover();
-			else el.hidePopover();
+			stack.showPopover();
+			shown = true;
 		} catch {}
+	}
+	function hide(stack: HTMLDivElement) {
+		if (!shown || typeof stack.hidePopover !== 'function') return;
+		shown = false;
+		try {
+			stack.hidePopover();
+		} catch {}
+	}
+
+	$effect(() => {
+		const stack = el;
+		const home = host;
+		if (!stack || !home) return;
+		if (!toasts.items.length) {
+			hide(stack);
+			return;
+		}
+		const place = () => {
+			const target = topModal() ?? home;
+			if (stack.parentNode !== target) {
+				hide(stack);
+				target.appendChild(stack);
+			}
+			show(stack);
+		};
+		place();
+		const observer = new MutationObserver(place);
+		observer.observe(document.body, { attributes: true, attributeFilter: ['open'], subtree: true });
+		return () => observer.disconnect();
+	});
+
+	$effect(() => () => {
+		if (el && host && el.parentNode !== host) host.appendChild(el);
 	});
 </script>
 
@@ -62,16 +109,21 @@
 	{/if}
 {/snippet}
 
-<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
-	<div class="region" role="status" aria-live="polite">
-		{#each polite as t (t.id)}{@render toast(t)}{/each}
-	</div>
-	<div class="region" role="alert" aria-live="assertive">
-		{#each assertive as t (t.id)}{@render toast(t)}{/each}
+<div class="toaster-host" bind:this={host}>
+	<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
+		<div class="region" role="status" aria-live="polite">
+			{#each polite as t (t.id)}{@render toast(t)}{/each}
+		</div>
+		<div class="region" role="alert" aria-live="assertive">
+			{#each assertive as t (t.id)}{@render toast(t)}{/each}
+		</div>
 	</div>
 </div>
 
 <style>
+	.toaster-host {
+		display: contents;
+	}
 	.toaster {
 		position: fixed;
 		inset: auto;
@@ -142,4 +194,9 @@
 			opacity: 0;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.toaster :global(.toast) {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/molecules/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
-	// focus of the trigger; hides on blur / mouseleave / Escape. The trigger is
+	// focus of the trigger; hides on blur / mouseleave / Escape (anywhere). The trigger is
 	// any snippet; an action wires `aria-describedby` onto its first focusable
 	// element so screen readers announce the text.
 	//
@@ -63,6 +63,11 @@
 		if (wrapEl && tipEl) place(wrapEl, tipEl, `${placement}-center`, 6);
 	}
 
+	// Escape must dismiss a hover-opened bubble even while focus sits elsewhere.
+	function onEscape(e: KeyboardEvent) {
+		if (e.key === 'Escape') hideNow();
+	}
+
 	function show() {
 		clearTimeout(hideTimer); // pointer came back within the grace period
 		clearTimeout(showTimer);
@@ -72,15 +77,20 @@
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
+			document.addEventListener('keydown', onEscape);
 		}, delay);
 	}
 	function hideNow() {
 		clearTimeout(showTimer);
 		clearTimeout(hideTimer);
-		if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		try {
+			if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		} catch {}
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
+		document.removeEventListener('keydown', onEscape);
 	}
+	$effect(() => () => hideNow());
 	// Debounced close: cancelled if the pointer/focus enters the panel (rich
 	// mode) or returns to the trigger before `closeDelay` elapses.
 	function scheduleHide() {
@@ -104,21 +114,23 @@
 			node.tabIndex = 0;
 			target = node;
 		}
-		target.setAttribute('aria-describedby', id);
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
+		// The trigger may already be described (a Field hint/error): append our
+		// id to the token list and take back only that token on destroy.
+		const describedBy = () => (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+		target.setAttribute('aria-describedby', [...describedBy().filter((t) => t !== id), id].join(' '));
 		node.addEventListener('mouseenter', show);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', show);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
-				target.removeAttribute('aria-describedby');
+				const rest = describedBy().filter((t) => t !== id);
+				if (rest.length) target.setAttribute('aria-describedby', rest.join(' '));
+				else target.removeAttribute('aria-describedby');
 				node.removeEventListener('mouseenter', show);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', show);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}
@@ -126,19 +138,16 @@
 	// Action for the panel: in rich mode it accepts the pointer/focus, which
 	// cancels the pending close (hovercard persistence).
 	function panel(node: HTMLElement) {
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
 		node.addEventListener('mouseenter', cancelHide);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', cancelHide);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
 				node.removeEventListener('mouseenter', cancelHide);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', cancelHide);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}