noph-ui 0.51.2 → 0.53.0

package/dist/button/buttonGroup.js

@@ -21,12 +21,3 @@ export const expandedWidths = (widths, index, expandedRatio, compressionLimit) =
     }
     return next;
 };
-export const parseMotion = (token) => {
-    const [time, ...rest] = token.trim().split(/\s+/);
-    const value = Number.parseFloat(time);
-    const easing = rest.join(' ');
-    return {
-        duration: Number.isNaN(value) ? 0 : time.endsWith('ms') ? value : value * 1000,
-        easing: easing || 'linear',
-    };
-};

package/dist/button/groupContext.d.ts

@@ -0,0 +1,10 @@
+/** What a `ButtonGroup` decides for its buttons: their size and shape, and with `selection` which are selected. */
+export interface ButtonGroupContext {
+    readonly selection: 'single' | 'multiple' | undefined;
+    readonly size: 'xs' | 's' | 'm' | 'l' | 'xl' | undefined;
+    readonly shape: 'round' | 'square' | undefined;
+    isSelected: (value: string) => boolean;
+    toggle: (value: string) => void;
+}
+export declare const setButtonGroupContext: (context: ButtonGroupContext) => ButtonGroupContext;
+export declare const getButtonGroupContext: () => ButtonGroupContext | undefined;

package/dist/button/groupContext.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('np-button-group');
+export const setButtonGroupContext = (context) => setContext(key, context);
+export const getButtonGroupContext = () => getContext(key);

package/dist/button/types.d.ts

@@ -25,12 +25,31 @@ export interface IconButtonProps extends BaseButtonProps {
 }
 export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     variant?: 'standard' | 'connected';
+    /** Size of the buttons that don't set their own. */
+    size?: BaseButtonProps['size'];
+    /** Shape of the buttons that don't set their own. */
+    shape?: BaseButtonProps['shape'];
+    /**
+     * Lets the group manage selection: its buttons with a `value` become toggles, and `value`
+     * holds the selected one (`single`) or the selected ones (`multiple`).
+     */
+    selection?: 'single' | 'multiple';
+    value?: string | string[] | null;
+    /** With `selection`, keeps at least one button selected and makes a form require one. */
+    required?: boolean;
+    /** With `selection`, submits the selected values under this name, like a radio or checkbox group. */
+    name?: string;
+    form?: string;
+    /** Arrow keys move between the buttons, which share one tab stop. Off, Tab visits each. */
+    arrowKeys?: boolean;
     expandedRatio?: number;
     compressionLimit?: number;
     element?: HTMLElement;
 }
 export interface SplitButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     label?: string;
+    /** Shows only `icon` on the leading button. `label` then names it and becomes its tooltip. */
+    iconOnly?: boolean;
     icon?: Snippet;
     menu?: Snippet<[string]>;
     variant?: Exclude<ButtonProps['variant'], 'text'>;

package/dist/card/Card.svelte

@@ -66,6 +66,7 @@
 		aria-disabled={disabled}
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -82,6 +83,7 @@
 		{disabled}
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -98,6 +100,7 @@
 		role="link"
 		class={[
 			'np-card-container',
+			'np-focus-ring',
 			`np-card-${variant}`,
 			disabled && 'np-card-disabled',
 			attributes.class,
@@ -111,7 +114,6 @@
 	.np-card-elevated {
 		border-width: 0;
 		box-shadow: var(--np-elevation-1);
-		color: var(--np-color-on-surface);
 		--background-color: var(
 			--np-elevated-card-container-color,
 			var(--np-color-surface-container-low)
@@ -123,7 +125,6 @@
 	}
 	.np-card-filled {
 		border-width: 0;
-		color: var(--np-color-on-surface);
 		--background-color: var(
 			--np-filled-card-container-color,
 			var(--np-color-surface-container-highest)
@@ -134,7 +135,6 @@
 		--background-color: var(--np-color-surface-variant);
 	}
 	.np-card-outlined {
-		color: var(--np-color-on-surface);
 		border: 1px solid var(--np-color-outline-variant);
 		--background-color: var(--np-outlined-card-container-color, var(--np-color-surface));
 		--border-radius: var(--np-outlined-card-container-shape, var(--np-shape-corner-medium));
@@ -159,21 +159,6 @@
 		cursor: pointer;
 	}
 
-	.np-card-container:focus-visible :global(.np-ripple-surface)::before {
-		opacity: var(--np-ripple-focus-opacity, 0.1);
-	}
-
-	.np-card-container:focus-visible {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		.np-card-container:focus-visible {
-			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-		}
-	}
 	.np-card-disabled {
 		opacity: 0.38;
 		cursor: unset;
@@ -199,7 +184,6 @@
 		flex: 1 0 auto;
 		min-width: calc(100% - 32px);
 		margin: 1rem;
-		grid-gap: 0.5rem;
 		gap: 0.5rem;
 	}
 

package/dist/card/types.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { ElementKindProps } from '../internal/elementTag.js';
 export type CardElement = HTMLDivElement | HTMLButtonElement | HTMLAnchorElement;
-export interface CardProps extends ElementKindProps<CardElement> {
+interface CardBaseProps extends ElementKindProps<CardElement> {
     variant?: 'elevated' | 'filled' | 'outlined';
     image?: string | null;
     /** Describes `image` for assistive technology. Leave it out for a decorative image. */
@@ -10,5 +10,15 @@ export interface CardProps extends ElementKindProps<CardElement> {
     headline?: string | null;
     subhead?: string | null;
     supportingText?: string | null;
-    action?: Snippet<[]>;
 }
+export type CardProps = CardBaseProps & ({
+    action?: undefined;
+} | {
+    action?: Snippet<[]>;
+    type?: 'text' | null;
+    href?: never;
+    onclick?: never;
+    command?: never;
+    popovertarget?: never;
+});
+export {};

package/dist/carousel/Carousel.svelte

@@ -62,13 +62,47 @@
 			: undefined,
 	)
 
-	let arrowHandler = $derived(arrowKeyNav('.np-carousel-item', axis, { wrap: false }))
+	const ITEMS = '.np-carousel-item:is(button, a[href]):not(.np-carousel-item-disabled)'
+	const TABBABLE =
+		'a[href], button, input:not([type="hidden"]), select, textarea, summary, [tabindex], [contenteditable]'
+
+	let arrowHandler = $derived(arrowKeyNav(ITEMS, axis, { wrap: false }))
+
+	const tabbable = (node: HTMLElement) =>
+		node.tabIndex >= 0 &&
+		!node.matches(':disabled') &&
+		!node.closest('[inert]') &&
+		node.checkVisibility({ visibilityProperty: true })
+
+	const leave = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) => {
+		const { key, target, currentTarget: carousel } = event
+		if (vertical || (key !== 'ArrowUp' && key !== 'ArrowDown')) return
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+		if (!(target instanceof HTMLElement) || !target.matches(ITEMS)) return
+
+		// A modal dialog makes the rest of the page inert without an [inert] attribute.
+		const modal = carousel.closest('dialog')
+		const scope = modal?.matches(':modal') ? modal : document
+		const nodes = [...scope.querySelectorAll<HTMLElement>(TABBABLE)]
+		const after = (node: HTMLElement) =>
+			!!(carousel.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING)
+		const candidates =
+			key === 'ArrowDown' ? nodes.filter(after) : nodes.filter((node) => !after(node)).reverse()
+		for (const node of candidates) {
+			if (carousel.contains(node) || node.contains(carousel) || !tabbable(node)) continue
+			node.focus()
+			if (document.activeElement !== node) continue
+			event.preventDefault()
+			return
+		}
+	}
 
 	const handleKeydown = (
 		event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement },
 	) => {
 		userKeydown?.(event)
 		if (!event.defaultPrevented) arrowHandler(event)
+		if (!event.defaultPrevented) leave(event)
 	}
 
 	let places = $derived(new Map(items.map((item, index) => [item, index + 1])))
@@ -81,7 +115,10 @@
 		const notch =
 			place > 0 ? (snapPoints?.children[place - 1] as HTMLElement | undefined) : undefined
 		if (notch) notch.scrollIntoView({ block: 'start', inline: 'start', behavior })
-		else item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior })
+		else {
+			const inline = alignment === 'center' && !vertical ? 'center' : 'nearest'
+			item.scrollIntoView({ block: 'nearest', inline, behavior })
+		}
 	}
 
 	const carouselContext: CarouselContext = {
@@ -113,6 +150,7 @@
 		`np-carousel-${variant}`,
 		`np-carousel-${axis}`,
 		snapping && 'np-carousel-snap',
+		alignment === 'center' && !morphing && 'np-carousel-center',
 		cropping && 'np-carousel-cropping',
 		attributes.class,
 	]}
@@ -302,29 +340,20 @@
 
 		.np-carousel-cropping.np-carousel-horizontal .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: view(inline), view(inline);
-			clip-path: inset(
-				0 var(--_crop-end) 0 var(--_crop-start) round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(0 var(--_crop-end) 0 var(--_crop-start) round var(--_carousel-item-corner));
 			--np-carousel-parallax: var(--_shift) 0;
 		}
 
 		.np-carousel-cropping.np-carousel-horizontal
 			.np-carousel-track:dir(rtl)
 			:global(.np-carousel-item) {
-			clip-path: inset(
-				0 var(--_crop-start) 0 var(--_crop-end) round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(0 var(--_crop-start) 0 var(--_crop-end) round var(--_carousel-item-corner));
 			--_shift: calc(var(--_visible, 0.3333) * (var(--_in) - var(--_out)) * 100%);
 		}
 
 		.np-carousel-cropping.np-carousel-vertical .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: view(block), view(block);
-			clip-path: inset(
-				var(--_crop-start) 0 var(--_crop-end) 0 round
-					var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))
-			);
+			clip-path: inset(var(--_crop-start) 0 var(--_crop-end) 0 round var(--_carousel-item-corner));
 			--np-carousel-parallax: 0 var(--_shift);
 		}
 
@@ -332,6 +361,20 @@
 			inset-inline-start: var(--_crop-start);
 			inset-inline-end: var(--_crop-end);
 		}
+
+		.np-carousel-cropping.np-carousel-horizontal
+			.np-carousel-track
+			:global(.np-carousel-item::after) {
+			inset-inline-start: var(--_crop-start);
+			inset-inline-end: var(--_crop-end);
+		}
+
+		.np-carousel-cropping.np-carousel-vertical
+			.np-carousel-track
+			:global(.np-carousel-item::after) {
+			inset-block-start: var(--_crop-start);
+			inset-block-end: var(--_crop-end);
+		}
 	}
 
 	@supports (animation-timeline: scroll(nearest inline)) {
@@ -346,6 +389,14 @@
 		:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item) {
 			animation-timeline: scroll(nearest block);
 		}
+
+		:global(.np-carousel-morphing-inline) .np-carousel-track :global(.np-carousel-item::after) {
+			inset-inline: var(--np-carousel-clip);
+		}
+
+		:global(.np-carousel-morphing-block) .np-carousel-track :global(.np-carousel-item::after) {
+			inset-block: var(--np-carousel-clip);
+		}
 	}
 
 	.np-carousel-snap-points > span {
@@ -374,6 +425,18 @@
 		scroll-snap-align: start;
 	}
 
+	.np-carousel-snap.np-carousel-center .np-carousel-track :global(.np-carousel-item) {
+		scroll-snap-align: center;
+	}
+
+	.np-carousel-center.np-carousel-horizontal .np-carousel-scroller {
+		scroll-padding-inline: var(--_pad);
+	}
+
+	.np-carousel-center.np-carousel-vertical .np-carousel-scroller {
+		scroll-padding-block: var(--_pad);
+	}
+
 	:global(.np-carousel-morphing) .np-carousel-track :global(.np-carousel-item) {
 		scroll-snap-align: none;
 	}

package/dist/carousel/CarouselItem.svelte

@@ -16,7 +16,6 @@
 		disabled = false,
 		children,
 		element = $bindable(),
-		onpointerdown,
 		style,
 		...attributes
 	}: CarouselItemProps = $props()
@@ -39,20 +38,20 @@
 			.join(';'),
 	)
 
+	let text = $derived(attributes['aria-label'] ?? label ?? imageAlt)
 	let accessibleName = $derived(
-		attributes['aria-label'] ??
-			(tag !== 'div' && label && position > 0
-				? carouselContext.itemLabel(label, position, total)
-				: undefined),
+		tag !== 'div' && text && position > 0
+			? carouselContext.itemLabel(text, position, total)
+			: (attributes['aria-label'] ?? undefined),
 	)
 
 	let labelHidden = $derived(accessibleName !== undefined)
 
-	const handlePointerdown = (
-		event: PointerEvent & { currentTarget: EventTarget & CarouselItemElement },
+	const handleClick = (
+		event: MouseEvent & { currentTarget: EventTarget & CarouselItemElement },
 	) => {
-		onpointerdown?.(event)
-		if (!disabled && tag !== 'div') press.press()
+		if (!disabled) press.press()
+		attributes.onclick?.(event)
 	}
 </script>
 
@@ -100,7 +99,7 @@
 		{disabled}
 		aria-disabled={disabled}
 		aria-label={accessibleName}
-		onpointerdown={handlePointerdown}
+		onclick={handleClick}
 		style={itemStyle}
 		class={[
 			'np-carousel-item',
@@ -120,7 +119,7 @@
 		aria-disabled={disabled}
 		aria-label={accessibleName}
 		tabindex={disabled ? -1 : undefined}
-		onpointerdown={handlePointerdown}
+		onclick={handleClick}
 		style={itemStyle}
 		class={[
 			'np-carousel-item',
@@ -135,6 +134,12 @@
 {/if}
 
 <style>
+	@property --_carousel-item-corner {
+		syntax: '<length-percentage>';
+		inherits: false;
+		initial-value: 0px;
+	}
+
 	.np-carousel-item {
 		position: relative;
 		box-sizing: border-box;
@@ -154,7 +159,11 @@
 		inline-size: var(--np-carousel-item-width, 12.5rem);
 		block-size: var(--np-carousel-item-height, auto);
 		align-self: stretch;
-		border-radius: var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large));
+		--_carousel-item-corner: var(
+			--np-carousel-item-container-shape,
+			var(--np-shape-corner-extra-large)
+		);
+		border-radius: var(--_carousel-item-corner);
 		box-shadow: var(--np-carousel-item-elevation, none);
 		background-color: var(--np-carousel-item-container-color, transparent);
 		--np-ripple-hover-color: var(--np-carousel-item-state-layer-color, var(--np-color-on-surface));
@@ -271,11 +280,14 @@
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-carousel-item {
-			transition: border-radius var(--np-motion-expressive-fast-effects);
+			transition: --_carousel-item-corner var(--np-motion-expressive-fast-effects);
 		}
 
 		.np-carousel-item:is(button, a):is(:active, .np-carousel-item-pressed) {
-			border-radius: var(--np-carousel-item-pressed-container-shape, var(--np-shape-corner-medium));
+			--_carousel-item-corner: var(
+				--np-carousel-item-pressed-container-shape,
+				var(--np-shape-corner-large)
+			);
 		}
 	}
 

package/dist/carousel/carouselMorph.js

@@ -57,7 +57,7 @@ export const carouselMorph = (options) => (scroller) => {
             sheet.replaceSync('');
             return;
         }
-        const shape = 'var(--np-carousel-item-container-shape, var(--np-shape-corner-extra-large))';
+        const shape = 'var(--_carousel-item-corner)';
         const offset = (along) => vertical ? `inset-block-start:${px(along)}` : `inset-inline-start:${px(along)}`;
         const mask = (clip) => vertical ? `inset(${px(clip)} 0 round ${shape})` : `inset(0 ${px(clip)} round ${shape})`;
         const at = (percent) => `${Math.round(percent * 1000) / 1000}%`;

package/dist/carousel/carouselStrategy.js

@@ -103,7 +103,7 @@ const build = (input, sizes, counts) => {
         keylines.push({
             kind,
             size,
-            loc: stride / 2 + (index - focal) * stride,
+            loc: stride / 2 + index * stride,
             locOffset: offset + size / 2,
         });
         offset += size;
@@ -120,7 +120,7 @@ const build = (input, sizes, counts) => {
         loc: keylines[keylines.length - 1].loc + stride,
         locOffset: availableSpace + spacing / 2,
     });
-    const scrollMax = Math.max(0, (itemCount - order.length + focal) * stride);
+    const scrollMax = Math.max(0, (itemCount - order.length) * stride);
     return {
         smallCount: counts.small,
         mediumCount: counts.medium,
@@ -221,38 +221,39 @@ const withOrder = (arrangement, order) => {
         keylines: [keylines[0], ...shifted, keylines[keylines.length - 1]],
     };
 };
+const movableSlots = (arrangement, towards) => {
+    const order = arrangement.keylines.slice(1, -1);
+    const first = order.findIndex((slot) => slot.kind === 'large');
+    if (first < 0)
+        return 0;
+    if (towards === 'start')
+        return first;
+    return order.length - 1 - order.findLastIndex((slot) => slot.kind === 'large');
+};
 export const shiftSteps = (arrangement, towards) => {
     const states = [arrangement];
-    if (arrangement.keylines.length === 0)
-        return states;
-    const order = arrangement.keylines.slice(1, -1);
-    const movable = order.filter((slot) => slot.kind !== 'large').length;
-    if (movable === 0 || !order.some((slot) => slot.kind === 'large'))
-        return states;
-    const working = [...order];
+    const movable = movableSlots(arrangement, towards);
+    const working = arrangement.keylines.slice(1, -1);
     for (let step = 0; step < movable; step += 1) {
         if (towards === 'end') {
             const [moved] = working.splice(working.length - 1, 1);
-            working.splice(working.findIndex((slot) => slot.kind === 'large'), 0, moved);
+            const first = working.findIndex((slot) => slot.kind === 'large');
+            const larger = working.findIndex((slot, index) => index < first && slot.size > moved.size);
+            working.splice(larger < 0 ? first : larger, 0, moved);
         }
         else {
             const [moved] = working.splice(0, 1);
-            working.splice(working.findLastIndex((slot) => slot.kind === 'large') + 1, 0, moved);
+            const last = working.findLastIndex((slot) => slot.kind === 'large');
+            const smaller = working.findIndex((slot, index) => index > last && slot.size < moved.size);
+            working.splice(smaller < 0 ? working.length : smaller, 0, moved);
         }
         states.push(withOrder(arrangement, working));
     }
     return states;
 };
-const shiftDistance = (arrangement) => {
-    const moving = arrangement.keylines
-        .slice(1, -1)
-        .filter((keyline) => keyline.kind !== 'large').length;
-    return moving * arrangement.stride;
-};
 export const morphTrack = (arrangement) => {
-    const shift = shiftDistance(arrangement);
-    const startShift = arrangement.focal > 1 ? shift : 0;
-    const endShift = shift;
+    const startShift = movableSlots(arrangement, 'start') * arrangement.stride;
+    const endShift = movableSlots(arrangement, 'end') * arrangement.stride;
     const scrollMax = arrangement.scrollMax + startShift + endShift;
     return {
         arrangement,
@@ -290,14 +291,11 @@ export const placeItemOnTrack = (track, index, scroll) => {
     return { x: base.x + held, clip: base.clip };
 };
 export const notches = (track) => {
-    const { arrangement, startShift, scrollMax } = track;
-    const uniform = arrangement.keylines.length === 0 || arrangement.stride <= 0;
-    const step = uniform ? Math.max(1, arrangement.stride) : arrangement.stride;
-    const last = uniform ? scrollMax : arrangement.scrollMax;
-    const base = uniform ? 0 : startShift;
+    const { arrangement, scrollMax } = track;
+    const step = Math.max(1, arrangement.stride);
     const out = [0];
-    for (let at = step; at <= last + 0.001; at += step)
-        out.push(base + at);
+    for (let at = step; at <= scrollMax + 0.001; at += step)
+        out.push(at);
     if (scrollMax > out[out.length - 1] + 0.001)
         out.push(scrollMax);
     return out;

package/dist/checkbox/Checkbox.svelte

@@ -54,7 +54,7 @@
 		<rect class="mark short" />
 		<rect class="mark long" />
 	</svg>
-	<div class="np-input-wrapper">
+	<div class="np-input-wrapper np-focus-ring-within">
 		{#if !attributes.disabled}
 			<Ripple forElement={inputEl} />
 		{/if}
@@ -87,6 +87,7 @@
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 		margin: var(--np-checkbox-margin, max(0px, (48px - 18px)/2));
+		--np-ripple-pressed-color: var(--np-color-primary);
 	}
 	:global(label) {
 		-webkit-tap-highlight-color: transparent;
@@ -114,13 +115,6 @@
 		cursor: inherit;
 	}
 
-	.np-input-wrapper:has(input:focus-visible) {
-		outline-style: solid;
-		outline-color: var(--np-color-secondary);
-		outline-width: 3px;
-		outline-offset: 2px;
-		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
-	}
 	.np-outline,
 	.np-background,
 	.np-icon {
@@ -188,6 +182,10 @@
 	.np-error .np-icon {
 		fill: var(--np-color-on-error);
 	}
+	.np-checkbox-container:not(.np-error):has(input:checked, input:indeterminate) {
+		--np-ripple-hover-color: var(--np-color-primary);
+		--np-ripple-pressed-color: var(--np-color-on-surface);
+	}
 	.np-error {
 		--np-ripple-hover-color: var(--np-color-error);
 		--np-ripple-pressed-color: var(--np-color-error);

package/dist/chip/ChipSet.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { arrowKeyNav, focusableItems, focusedItem, rovingTabindex } from '../keyboard-nav.js'
 	import type { ChipSetProps } from './types.js'
 
 	let { children, element = $bindable(), ...attributes }: ChipSetProps = $props()
@@ -9,7 +9,33 @@
 		currentAttr: 'aria-current',
 		currentValue: 'true',
 	})
-	const onkeydown = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
+	const arrows = arrowKeyNav(CHIP_SELECTOR, 'horizontal')
+
+	// In a set that wraps, ↑ and ↓ move to the chip closest above or below the focused one.
+	const toRow = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		const chips = focusableItems(event.currentTarget, CHIP_SELECTOR)
+		const focused = focusedItem(event.currentTarget, CHIP_SELECTOR, chips)
+		if (!focused) return
+		const from = focused.getBoundingClientRect()
+		const fromX = from.left + from.width / 2
+		const below = event.key === 'ArrowDown'
+		const candidates = chips
+			.map((chip) => ({ chip, box: chip.getBoundingClientRect() }))
+			.filter(({ box }) => (below ? box.top >= from.bottom : box.bottom <= from.top))
+		if (!candidates.length) return
+		const rowTop = below
+			? Math.min(...candidates.map(({ box }) => box.top))
+			: Math.max(...candidates.map(({ box }) => box.top))
+		const row = candidates.filter(({ box }) => Math.abs(box.top - rowTop) < 1)
+		const distance = (box: DOMRect) => Math.abs(box.left + box.width / 2 - fromX)
+		row.sort((a, b) => distance(a.box) - distance(b.box))[0].chip.focus()
+		event.preventDefault()
+	}
+
+	const onkeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		if (event.key === 'ArrowUp' || event.key === 'ArrowDown') toRow(event)
+		else arrows(event)
+	}
 </script>
 
 <div {...attributes} bind:this={element} class={['np-chip-set-wrapper', attributes.class]}>