noph-ui 0.51.2 → 0.52.0

package/dist/fab/Fab.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
-	import { pressMorph } from '../press.svelte.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
@@ -9,9 +8,8 @@
 	let {
 		variant = 'primary-container',
 		size = 's',
-		shape = 'round',
+		shape = 'square',
 		lowered = false,
-		disabled = false,
 		icon,
 		label,
 		element = $bindable(),
@@ -20,16 +18,9 @@
 
 	const uid = $props.id()
 
-	let isLink = $derived(attributes.href != null && !disabled)
-	let tooltipId = $derived(label && !disabled ? uid : undefined)
-
-	const morph = pressMorph()
-	morph.supersededBy(() => shape)
-
-	const handlePress = () => {
-		if (disabled) return
-		morph.press()
-	}
+	let isLink = $derived(attributes.href != null)
+	let tooltipId = $derived(label ? uid : undefined)
+	let tooltipNames = $derived(!!tooltipId && !attributes['aria-label'])
 
 	let classes = $derived([
 		'np-fab',
@@ -38,15 +29,12 @@
 		size,
 		shape,
 		lowered && 'np-fab-lowered',
-		morph.pressed && 'pressed',
 		attributes.class,
 	])
 </script>
 
 {#snippet content()}
-	{#if !disabled}
-		<Ripple forElement={element} />
-	{/if}
+	<Ripple forElement={element} />
 	{#if icon}
 		<span class="np-fab-icon">{@render icon()}</span>
 	{/if}
@@ -55,14 +43,10 @@
 {#if isLink}
 	<a
 		{...attributes}
-		onclick={(event) => {
-			handlePress()
-			attributes.onclick?.(event)
-		}}
 		bind:this={element}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={label || attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? label}
 		class={classes}
 	>
 		{@render content()}
@@ -70,16 +54,11 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		onclick={(event) => {
-			handlePress()
-			attributes.onclick?.(event)
-		}}
 		bind:this={element}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={label || attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? label}
 		type={(attributes['type'] as HTMLButtonAttributes['type']) ?? 'button'}
-		{disabled}
 		class={classes}
 	>
 		{@render content()}
@@ -116,18 +95,11 @@
 		border-radius: var(--np-fab-shape, var(--_square-radius));
 	}
 
-	@media (prefers-reduced-motion: no-preference) {
-		.round:not(:disabled):is(:active, .pressed) {
-			border-radius: var(--np-fab-pressed-shape, var(--_square-radius));
-		}
-		.square:not(:disabled):is(:active, .pressed) {
-			border-radius: var(--np-fab-pressed-shape, 50%);
-		}
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
 		.np-fab {
 			transition:
+				width var(--np-motion-expressive-default-spatial),
+				height var(--np-motion-expressive-default-spatial),
 				border-radius var(--np-motion-expressive-default-spatial),
 				box-shadow var(--np-motion-expressive-fast-effects),
 				background-color var(--np-motion-expressive-fast-effects);
@@ -183,21 +155,14 @@
 	}
 
 	@media (hover: hover) {
-		.np-fab:not(:disabled):hover {
+		.np-fab:hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-4));
 		}
-		.np-fab-lowered:not(:disabled):hover {
+		.np-fab-lowered:hover {
 			box-shadow: var(--np-fab-elevation, var(--np-elevation-2));
 		}
 	}
 
-	.np-fab:disabled {
-		cursor: default;
-		box-shadow: none;
-		background-color: color-mix(in srgb, var(--np-color-on-surface) 12%, transparent);
-		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
-	}
-
 	.np-fab-icon {
 		display: flex;
 		fill: currentColor;

package/dist/fab/FabMenu.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { reducedMotion } from '../media.js'
+	import '../internal/exit.css'
+	import { exitAnimation } from '../animation.js'
 	import CloseIcon from '../icons/CloseIcon.svelte'
-	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { arrowKeyNav, focusableItems, rovingTabindex, typeahead } from '../keyboard-nav.js'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
-	import { PRESS_DURATION } from '../press.svelte.js'
-	import { onMount } from 'svelte'
 	import Fab from './Fab.svelte'
 	import type { FabMenuProps } from './types.js'
 
@@ -16,7 +15,6 @@
 		variant = 'primary-container',
 		size = 's',
 		placement = 'block-start',
-		closeOnSelect = true,
 		open = $bindable(false),
 		element = $bindable(),
 		...attributes
@@ -28,38 +26,33 @@
 
 	let menuElement: HTMLDivElement | undefined = $state()
 
+	let colorSet = $derived(variant.replace('-container', '') as 'primary' | 'secondary' | 'tertiary')
+
 	const ITEMS = 'button, a[href], [role="menuitem"]'
 	const attach = rovingTabindex(ITEMS)
 	let arrowHandler = $derived(
 		arrowKeyNav(ITEMS, placement.startsWith('inline') ? 'horizontal' : 'vertical'),
 	)
+	const typeaheadHandler = typeahead(
+		ITEMS,
+		(item) => (item.querySelector('.children-wrapper') ?? item).textContent ?? '',
+	)
 
 	const controller = popoverController(() => menuElement)
 
 	export const show = () => controller.show()
 
-	export const close = () => {
-		clearTimeout(closeTimeout)
-		controller.close()
-	}
-
-	let closeTimeout: ReturnType<typeof setTimeout>
+	export const close = () => controller.close()
 
-	const closeAfterPress = () => {
-		if (reducedMotion.current) {
-			close()
-			return
-		}
-		clearTimeout(closeTimeout)
-		closeTimeout = setTimeout(close, PRESS_DURATION)
+	const openWithArrow = (event: KeyboardEvent) => {
+		if (!menuElement || (event.key !== 'ArrowDown' && event.key !== 'ArrowUp')) return
+		event.preventDefault()
+		show()
+		focusableItems(menuElement, ITEMS)
+			.at(event.key === 'ArrowDown' ? 0 : -1)
+			?.focus()
 	}
 
-	onMount(() => {
-		return () => {
-			clearTimeout(closeTimeout)
-		}
-	})
-
 	syncOpenEffect(
 		() => menuElement,
 		() => open,
@@ -83,19 +76,26 @@
 	{...attributes}
 	bind:this={element}
 	style="anchor-name: {anchorName}; {attributes.style ?? ''}"
-	class={['np-fab-menu', `np-fab-menu-${placement}`, attributes.class]}
+	class={[
+		'np-fab-menu',
+		`np-fab-menu-${placement}`,
+		`np-fab-menu-${size}`,
+		`np-fab-menu-set-${colorSet}`,
+		attributes.class,
+	]}
 >
 	<Fab
-		{variant}
-		{size}
+		variant={open ? colorSet : variant}
+		size={open ? 's' : size}
+		shape={open ? 'round' : undefined}
 		{label}
-		shape={open ? 'square' : 'round'}
 		command="toggle-popover"
 		commandfor={menuId}
 		aria-haspopup="menu"
 		aria-expanded={open}
 		class="np-fab-menu-trigger"
 		icon={triggerIcon}
+		onkeydown={openWithArrow}
 	/>
 
 	<div
@@ -108,11 +108,10 @@
 		aria-label={label}
 		class="np-fab-menu-list"
 		{@attach attach}
-		onkeydown={arrowHandler}
-		onclick={(event) => {
-			if (!closeOnSelect) return
-			const target = event.target as HTMLElement
-			if (target.closest(ITEMS)) closeAfterPress()
+		{@attach exitAnimation}
+		onkeydown={(event) => {
+			arrowHandler(event)
+			if (!event.defaultPrevented) typeaheadHandler(event)
 		}}
 		ontoggle={(event) => {
 			open = event.newState === 'open'
@@ -126,6 +125,35 @@
 	.np-fab-menu {
 		position: relative;
 		display: inline-flex;
+		width: var(--_size);
+		height: var(--_size);
+	}
+	.np-fab-menu-s {
+		--_size: 3.5rem;
+	}
+	.np-fab-menu-m {
+		--_size: 5rem;
+	}
+	.np-fab-menu-l {
+		--_size: 6rem;
+	}
+	.np-fab-menu > :global(.np-fab.np-fab-menu-trigger) {
+		position: absolute;
+		inset-block-start: 0;
+		inset-inline-end: 0;
+	}
+
+	.np-fab-menu-set-primary {
+		--np-tonal-button-container-color: var(--np-color-primary-container);
+		--np-tonal-button-label-text-color: var(--np-color-on-primary-container);
+	}
+	.np-fab-menu-set-secondary {
+		--np-tonal-button-container-color: var(--np-color-secondary-container);
+		--np-tonal-button-label-text-color: var(--np-color-on-secondary-container);
+	}
+	.np-fab-menu-set-tertiary {
+		--np-tonal-button-container-color: var(--np-color-tertiary-container);
+		--np-tonal-button-label-text-color: var(--np-color-on-tertiary-container);
 	}
 
 	.np-fab-menu-icons {
@@ -152,49 +180,79 @@
 
 	.np-fab-menu-list {
 		position: absolute;
+		box-sizing: border-box;
+		max-height: 100%;
 		margin: 0;
-		padding: 0;
+		padding: 0.5rem;
 		border: none;
 		background: none;
 		flex-direction: column;
 		align-items: flex-end;
 		gap: 0.25rem;
-		overflow: visible;
+		overflow: auto;
+		scrollbar-width: none;
 	}
 
 	.np-fab-menu-list:popover-open {
 		display: flex;
 	}
+	.np-fab-menu-list {
+		--np-exit-display: flex;
+	}
+	.np-fab-menu-list > :global(:focus-visible) {
+		z-index: 1;
+	}
 
 	.np-fab-menu-block-start .np-fab-menu-list {
-		position-area: block-start;
-		margin-block-end: 0.5rem;
-		flex-direction: column-reverse;
+		position-area: block-start span-inline-start;
 	}
 	.np-fab-menu-block-end .np-fab-menu-list {
-		position-area: block-end;
-		margin-block-start: 0.5rem;
+		position-area: block-end span-inline-start;
 	}
 	.np-fab-menu-inline-start .np-fab-menu-list {
 		position-area: inline-start;
-		margin-inline-end: 0.5rem;
-		flex-direction: row-reverse;
-		align-items: center;
 	}
 	.np-fab-menu-inline-end .np-fab-menu-list {
 		position-area: inline-end;
-		margin-inline-start: 0.5rem;
+	}
+	:is(.np-fab-menu-block-start, .np-fab-menu-block-end) .np-fab-menu-list {
+		margin-inline-end: -0.5rem;
+	}
+	:is(.np-fab-menu-inline-start, .np-fab-menu-inline-end) .np-fab-menu-list {
 		flex-direction: row;
 		align-items: center;
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
+		.np-fab-menu-list {
+			opacity: 0;
+			transition:
+				opacity var(--np-motion-expressive-fast-effects),
+				display var(--np-motion-expressive-fast-effects) allow-discrete,
+				overlay var(--np-motion-expressive-fast-effects) allow-discrete;
+		}
+		.np-fab-menu-list:popover-open {
+			opacity: 1;
+		}
 		.np-fab-menu-list:popover-open > :global(*) {
 			--_stagger-window: 210ms;
 			--_delay: calc((sibling-index() - 1) / sibling-count() * var(--_stagger-window));
 			animation: np-fab-menu-item-in var(--np-motion-expressive-default-spatial) both;
 			animation-delay: var(--_delay);
 		}
+		.np-fab-menu-list:popover-open > :global(:focus-visible) {
+			animation:
+				np-fab-menu-item-in var(--np-motion-expressive-default-spatial) both,
+				focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+			animation-delay: var(--_delay), 0s;
+		}
+		:is(.np-fab-menu-block-start, .np-fab-menu-inline-start)
+			.np-fab-menu-list:popover-open
+			> :global(*) {
+			--_delay: calc(
+				(sibling-count() - sibling-index()) / sibling-count() * var(--_stagger-window)
+			);
+		}
 	}
 
 	@keyframes np-fab-menu-item-in {

package/dist/fab/FabMenu.svelte.d.ts

@@ -1,7 +1,8 @@
+import '../internal/exit.css';
 import type { FabMenuProps } from './types.js';
 declare const FabMenu: import("svelte").Component<FabMenuProps, {
     show: () => void;
     close: () => void;
-}, "element" | "open">;
+}, "open" | "element">;
 type FabMenu = ReturnType<typeof FabMenu>;
 export default FabMenu;

package/dist/fab/FabMenuItem.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Button from '../button/Button.svelte'
+	import type { FabMenuItemProps } from './types.js'
+
+	let { icon, element = $bindable(), ...attributes }: FabMenuItemProps = $props()
+</script>
+
+<Button {...attributes} bind:element role="menuitem" variant="tonal" size="m" start={icon} />

package/dist/fab/FabMenuItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FabMenuItemProps } from './types.js';
+declare const FabMenuItem: import("svelte").Component<FabMenuItemProps, {}, "element">;
+type FabMenuItem = ReturnType<typeof FabMenuItem>;
+export default FabMenuItem;

package/dist/fab/index.d.ts

@@ -1,3 +1,4 @@
 export { default as ExtendedFab } from './ExtendedFab.svelte';
 export { default as Fab } from './Fab.svelte';
 export { default as FabMenu } from './FabMenu.svelte';
+export { default as FabMenuItem } from './FabMenuItem.svelte';

package/dist/fab/index.js

@@ -1,3 +1,4 @@
 export { default as ExtendedFab } from './ExtendedFab.svelte';
 export { default as Fab } from './Fab.svelte';
 export { default as FabMenu } from './FabMenu.svelte';
+export { default as FabMenuItem } from './FabMenuItem.svelte';

package/dist/fab/types.d.ts

@@ -1,14 +1,13 @@
-import type { ButtonElement } from '../button/types.js';
+import type { ButtonElement, ButtonProps } from '../button/types.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export type FabElement = ButtonElement;
-interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type' | 'disabled'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
     element?: FabElement;
     variant?: 'primary' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container';
     size?: 's' | 'm' | 'l';
     shape?: 'round' | 'square';
     lowered?: boolean;
-    disabled?: boolean | null;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
 export interface FabProps extends BaseFabProps {
@@ -20,6 +19,10 @@ export interface ExtendedFabProps extends BaseFabProps {
     label?: string;
     collapsed?: boolean;
 }
+export interface FabMenuItemProps extends Omit<ButtonProps, 'variant' | 'size' | 'start' | 'end' | 'toggle' | 'selected' | 'role'> {
+    /** Leading icon. Keep it, it tells the actions apart at a glance. */
+    icon?: Snippet;
+}
 export interface FabMenuProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     icon?: Snippet;
@@ -28,7 +31,6 @@ export interface FabMenuProps extends HTMLAttributes<HTMLDivElement> {
     size?: FabProps['size'];
     placement?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
     open?: boolean;
-    closeOnSelect?: boolean;
     element?: HTMLDivElement;
 }
 export {};

package/dist/icons/MenuIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
+>

package/dist/icons/MenuIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const MenuIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuIcon = ReturnType<typeof MenuIcon>;
+export default MenuIcon;

package/dist/icons/MenuOpenIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path
+		d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"
+	/></svg
+>

package/dist/icons/MenuOpenIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const MenuOpenIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuOpenIcon = ReturnType<typeof MenuOpenIcon>;
+export default MenuOpenIcon;

package/dist/icons/index.d.ts

@@ -9,5 +9,7 @@ export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as KeyboardIcon } from './KeyboardIcon.svelte';
+export { default as MenuIcon } from './MenuIcon.svelte';
+export { default as MenuOpenIcon } from './MenuOpenIcon.svelte';
 export { default as ScheduleIcon } from './ScheduleIcon.svelte';
 export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/icons/index.js

@@ -9,5 +9,7 @@ export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
 export { default as KeyboardIcon } from './KeyboardIcon.svelte';
+export { default as MenuIcon } from './MenuIcon.svelte';
+export { default as MenuOpenIcon } from './MenuOpenIcon.svelte';
 export { default as ScheduleIcon } from './ScheduleIcon.svelte';
 export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/internal/exit.css

@@ -0,0 +1,47 @@
+/* Browsers without an `overlay` transition, such as Safari, drop a closing dialog or popover from
+   the top layer at once, so its exit animation would never show. While it animates out it carries
+   data-np-exiting (see exitAnimation in animation.ts) and these rules keep it shown, over the page
+   but not blocking it. Browsers with the transition keep it in the top layer themselves. */
+@supports not (overlay: auto) {
+	/* Important, as each component hides its closed state with a rule of its own, scoped and so
+	   more specific than this one. It only ever holds for the moment of leaving. */
+	[popover][data-np-exiting]:not(:popover-open),
+	dialog[data-np-exiting]:not([open]) {
+		display: var(--np-exit-display, block) !important;
+		z-index: 1000 !important;
+		pointer-events: none !important;
+	}
+
+	/* A closed dialog is no longer :modal and would lose its place. Components that place their
+	   dialog themselves win over this. */
+	:where(dialog[data-np-exiting]:not([open])) {
+		position: fixed;
+		inset-block: 0;
+	}
+
+	/* Its ::backdrop is gone as well, so a dialog with a scrim draws one of its own that fades: a
+	   wide shadow around it, and one inside for a dialog whose box is transparent, as it sits under
+	   the content. A shadow rather than a pseudo element covers the screen even while the dialog
+	   moves. A dialog that is its own surface turns the inner one off with
+	   --np-exit-scrim-inner: 0 0 transparent. */
+	dialog.np-exit-scrim[data-np-exiting]:not([open]) {
+		--np-exit-scrim-color: color-mix(in srgb, var(--np-color-scrim) 32%, transparent);
+		box-shadow:
+			0 0 0 100vmax var(--np-exit-scrim-color),
+			var(--np-exit-scrim-inner, inset 0 0 0 100vmax var(--np-exit-scrim-color));
+		animation: np-exit-scrim var(--np-exit-scrim-motion, var(--np-motion-expressive-slow-effects))
+			forwards;
+	}
+	@keyframes np-exit-scrim {
+		to {
+			--np-exit-scrim-color: transparent;
+		}
+	}
+}
+
+/* Registered, so the scrim's colour can fade. */
+@property --np-exit-scrim-color {
+	syntax: '<color>';
+	inherits: false;
+	initial-value: transparent;
+}

package/dist/internal/fieldTypes.d.ts

@@ -7,6 +7,12 @@ export interface FieldProps {
     issues?: Issue[];
     prefixText?: string;
     suffixText?: string;
+    /** Spoken in place of `prefixText`, for example "Euro" for "€". */
+    prefixLabel?: string;
+    /** Spoken in place of `suffixText`, for example "at gmail dot com". */
+    suffixLabel?: string;
+    /** Spoken before the character counter. */
+    counterLabel?: string;
     variant?: 'outlined' | 'filled';
     start?: Snippet;
     end?: Snippet;

package/dist/internal/focus-ring.css

@@ -31,6 +31,10 @@
 	outline-width: 3px;
 	outline-offset: 2px;
 }
+/* The focused state layer, on top of the ring. */
+.np-focus-ring:focus-visible .np-ripple-surface::before {
+	opacity: var(--np-ripple-focus-opacity, 0.1);
+}
 @media (prefers-reduced-motion: no-preference) {
 	.np-focus-ring:focus-visible {
 		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;

package/dist/internal/interest.css

@@ -1,4 +1,6 @@
-[interestfor][aria-describedby] {
+/* A tooltip shows at once and lingers a little. Its anchor either points at it with
+   aria-describedby or, when the tooltip text is the anchor's name, is followed by it. */
+[interestfor]:is([aria-describedby], :has(+ [role='tooltip'])) {
 	interest-delay-start: 0s;
 	interest-delay-end: 500ms;
 }

package/dist/keyboard-nav.d.ts

@@ -1,10 +1,21 @@
 import type { Attachment } from 'svelte/attachments';
+export declare const focusableItems: (node: ParentNode, itemSelector: string) => HTMLElement[];
+export declare const focusedItem: (node: HTMLElement, itemSelector: string, items: HTMLElement[]) => HTMLElement | null;
 export declare const rovingTabindex: (itemSelector: string, options?: {
     currentAttr?: string;
     currentValue?: string;
+    /** Picks the current item by selector instead of `currentAttr` and `currentValue`. */
+    current?: string;
 }) => Attachment<HTMLElement>;
-export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal", { wrap }?: {
+export declare const arrowKeyNav: (itemSelector: string, orientation?: "vertical" | "horizontal" | "both", { wrap }?: {
     wrap?: boolean;
 }) => (event: KeyboardEvent & {
     currentTarget: EventTarget & HTMLElement;
 }) => void;
+export declare const typeaheadBuffer: (timeout?: number) => (event: KeyboardEvent) => string | undefined;
+export declare const typeaheadMatch: (labels: string[], current: number, query: string) => number;
+export declare const typeahead: (itemSelector: string, labelOf: (item: HTMLElement) => string, { timeout }?: {
+    timeout?: number;
+}) => (event: KeyboardEvent & {
+    currentTarget: EventTarget & HTMLElement;
+}) => void;