noph-ui 0.51.2 → 0.52.0

package/dist/keyboard-nav.js

@@ -1,6 +1,7 @@
 import { on } from 'svelte/events';
-const focusable = (items) => items.filter((item) => !item.matches(':disabled'));
-const focusedItem = (node, itemSelector, items) => {
+// Items inside a hidden part, such as a section shown only when expanded, cannot take focus.
+export const focusableItems = (node, itemSelector) => Array.from(node.querySelectorAll(itemSelector)).filter((item) => !item.matches(':disabled') && !item.closest('[hidden]'));
+export const focusedItem = (node, itemSelector, items) => {
     const active = document.activeElement;
     if (!(active instanceof HTMLElement) || !node.contains(active))
         return null;
@@ -8,13 +9,13 @@ const focusedItem = (node, itemSelector, items) => {
     return item && items.includes(item) ? item : null;
 };
 export const rovingTabindex = (itemSelector, options = {}) => {
-    const { currentAttr = 'aria-current', currentValue = 'page' } = options;
+    const { currentAttr = 'aria-current', currentValue = 'page', current: currentSelector } = options;
     return (node) => {
-        const getItems = () => focusable(Array.from(node.querySelectorAll(itemSelector)));
+        const getItems = () => focusableItems(node, itemSelector);
         const setTabstop = (target) => {
             for (const i of getItems()) {
                 const wanted = i === target ? 0 : -1;
-                if (i.tabIndex !== wanted)
+                if (i.getAttribute('tabindex') !== String(wanted))
                     i.tabIndex = wanted;
             }
         };
@@ -23,7 +24,7 @@ export const rovingTabindex = (itemSelector, options = {}) => {
             if (items.length === 0)
                 return;
             const focused = focusedItem(node, itemSelector, items);
-            const current = items.find((i) => i.getAttribute(currentAttr) === currentValue);
+            const current = items.find((i) => currentSelector ? i.matches(currentSelector) : i.getAttribute(currentAttr) === currentValue);
             setTabstop(focused ?? current ?? items[0]);
         };
         const onFocusIn = (event) => {
@@ -47,14 +48,58 @@ export const rovingTabindex = (itemSelector, options = {}) => {
         };
     };
 };
-export const arrowKeyNav = (itemSelector, orientation = 'vertical', { wrap = true } = {}) => (event) => {
-    const [prev, next] = orientation === 'vertical'
-        ? ['ArrowUp', 'ArrowDown']
-        : ['ArrowLeft', 'ArrowRight'];
+// Inputs without text to edit, whose arrow keys are free to move between items.
+const NOT_EDITED = ['button', 'checkbox', 'color', 'file', 'image', 'radio', 'reset', 'submit'];
+/**
+ * Whether a field keeps an arrow, Home or End key for itself, so it moves the caret or changes the
+ * value instead of moving to the next item. A caret leaves its field once it reaches the end it
+ * moves towards.
+ */
+const fieldKeeps = (target, key, isNext) => {
+    const upDown = key === 'ArrowUp' || key === 'ArrowDown';
+    if (target instanceof HTMLSelectElement)
+        return upDown;
+    if (target instanceof HTMLInputElement && NOT_EDITED.includes(target.type))
+        return false;
+    const textArea = target instanceof HTMLTextAreaElement;
+    if (!textArea && !(target instanceof HTMLInputElement)) {
+        return target instanceof HTMLElement && target.isContentEditable;
+    }
+    const field = target;
+    // Email, number, date and range fields have no caret to read, so they keep every key.
+    if (field.selectionStart === null)
+        return true;
+    if (key === 'Home' || key === 'End')
+        return true;
+    if (upDown)
+        return textArea;
+    const { selectionStart: start, selectionEnd: end, value } = field;
+    if (start !== end)
+        return true;
+    return isNext ? end < value.length : start > 0;
+};
+export const arrowKeyNav = (itemSelector, 
+// `both`: ↓ and → move on, ↑ and ← move back, as in a list whose items hold several actions.
+orientation = 'vertical', { wrap = true } = {}) => (event) => {
     const { key } = event;
-    if (key !== prev && key !== next && key !== 'Home' && key !== 'End')
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(key))
+        return;
+    const rtl = orientation !== 'vertical' && getComputedStyle(event.currentTarget).direction === 'rtl';
+    const [left, right] = rtl ? ['ArrowRight', 'ArrowLeft'] : ['ArrowLeft', 'ArrowRight'];
+    const [prev, next] = orientation === 'vertical'
+        ? [['ArrowUp'], ['ArrowDown']]
+        : orientation === 'horizontal'
+            ? [[left], [right]]
+            : [
+                ['ArrowUp', left],
+                ['ArrowDown', right],
+            ];
+    const isNext = next.includes(key);
+    if (!isNext && !prev.includes(key) && key !== 'Home' && key !== 'End')
+        return;
+    if (fieldKeeps(event.target, key, isNext))
         return;
-    const items = focusable(Array.from(event.currentTarget.querySelectorAll(itemSelector)));
+    const items = focusableItems(event.currentTarget, itemSelector);
     if (items.length === 0)
         return;
     const focused = focusedItem(event.currentTarget, itemSelector, items);
@@ -69,9 +114,8 @@ export const arrowKeyNav = (itemSelector, orientation = 'vertical', { wrap = tru
         target = items[items.length - 1];
     }
     else {
-        const delta = key === next ? 1 : -1;
+        const delta = isNext ? 1 : -1;
         const index = currentIndex + delta;
-        // `delta` is only ever ±1, so wrapping is one modulo and clamping is one clamp.
         target =
             items[wrap
                 ? (index + items.length) % items.length
@@ -80,3 +124,49 @@ export const arrowKeyNav = (itemSelector, orientation = 'vertical', { wrap = tru
     target.focus();
     event.preventDefault();
 };
+const typesLetter = ({ key, ctrlKey, metaKey, altKey }) => key.length === 1 && key !== ' ' && !ctrlKey && !metaKey && !altKey;
+export const typeaheadBuffer = (timeout = 500) => {
+    let buffer = '';
+    let lastTime = 0;
+    return (event) => {
+        if (!typesLetter(event))
+            return undefined;
+        buffer = event.timeStamp - lastTime > timeout ? event.key : buffer + event.key;
+        lastTime = event.timeStamp;
+        return buffer;
+    };
+};
+export const typeaheadMatch = (labels, current, query) => {
+    const text = query.toLocaleLowerCase();
+    const find = (prefix, offset) => {
+        for (let i = 0; i < labels.length; i += 1) {
+            const index = (current + offset + i + labels.length) % labels.length;
+            if (labels[index].trim().toLocaleLowerCase().startsWith(prefix))
+                return index;
+        }
+        return -1;
+    };
+    const match = find(text, text.length === 1 ? 1 : 0);
+    if (match < 0 && [...text].every((char) => char === text[0]))
+        return find(text[0], 1);
+    return match;
+};
+export const typeahead = (itemSelector, labelOf, { timeout = 500 } = {}) => {
+    const collect = typeaheadBuffer(timeout);
+    return (event) => {
+        if (!typesLetter(event))
+            return;
+        const items = focusableItems(event.currentTarget, itemSelector);
+        const focused = focusedItem(event.currentTarget, itemSelector, items);
+        if (!focused)
+            return;
+        const query = collect(event);
+        if (!query)
+            return;
+        const target = items[typeaheadMatch(items.map(labelOf), items.indexOf(focused), query)];
+        if (!target)
+            return;
+        target.focus();
+        event.preventDefault();
+    };
+};

package/dist/list/Item.svelte

@@ -7,6 +7,7 @@
 	let {
 		selected = false,
 		start,
+		avatar,
 		end,
 		children,
 		supportingText,
@@ -23,7 +24,15 @@
 </script>
 
 {#snippet content()}
-	{#if start}
+	{#if avatar}
+		<div class="np-item-avatar" aria-hidden={typeof avatar === 'string' ? 'true' : undefined}>
+			{#if typeof avatar === 'string'}
+				{avatar}
+			{:else}
+				{@render avatar()}
+			{/if}
+		</div>
+	{:else if start}
 		<div class={['np-item-start', selected && 'selected', disabled && 'disabled']}>
 			{@render start()}
 		</div>
@@ -46,7 +55,14 @@
 	</div>
 
 	{#if end}
-		<div class={['np-item-end', selected && 'selected', disabled && 'disabled']}>
+		<div
+			class={[
+				'np-item-end',
+				typeof end === 'string' && 'np-item-end-text',
+				selected && 'selected',
+				disabled && 'disabled',
+			]}
+		>
 			{#if typeof end === 'string'}
 				{end}
 			{:else}
@@ -135,18 +151,47 @@
 		text-align: start;
 		overflow: hidden;
 		width: 100%;
-		padding-block: 0.625rem;
-		padding-inline: 1rem;
+		padding-block: 0.5rem;
+		padding-inline: var(--np-item-padding-inline, 1rem);
 		min-height: var(--np-item-container-height, 3.5rem);
-		gap: 0.75rem;
+		gap: var(--np-item-gap, 1rem);
 		text-decoration: none;
 		-webkit-tap-highlight-color: transparent;
 		color: var(--np-item-label-text-color, var(--np-color-on-surface));
 		box-sizing: border-box;
 	}
 
+	/* 12px above and below text with supporting text, so three lines come to 88px. */
 	.np-item:has(.np-item-supporting-text) {
 		min-height: var(--np-item-container-height, 4.5rem);
+		padding-block: 0.75rem;
+	}
+	.np-item-avatar {
+		display: flex;
+		flex: none;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+		overflow: hidden;
+		background-color: var(--np-item-avatar-container-color, var(--np-color-primary-container));
+		color: var(--np-item-avatar-label-text-color, var(--np-color-on-primary-container));
+		font-size: 1rem;
+		font-weight: 500;
+		letter-spacing: 0.009rem;
+	}
+	.np-item-avatar > :global(*) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+	/* Trailing text, such as a count, is label small. */
+	.np-item-end-text {
+		font-size: 0.6875rem;
+		line-height: 1rem;
+		font-weight: 500;
+		letter-spacing: 0.031rem;
 	}
 
 	.np-item-lazy {
@@ -197,17 +242,18 @@
 		flex: 1;
 		font-size: 1rem;
 		line-height: 1.5rem;
+		letter-spacing: 0.031rem;
 	}
 	.np-item-supporting-text {
 		color: var(--np-item-supporting-text-color, var(--np-color-on-surface-variant));
 		font-size: 0.875rem;
 		line-height: 1.25rem;
+		letter-spacing: 0.016rem;
 	}
 
 	.np-item.disabled {
 		pointer-events: none;
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
-		background-color: color-mix(in srgb, var(--np-color-on-surface) 10%, transparent);
 	}
 	.np-item.disabled .np-item-supporting-text {
 		color: inherit;

package/dist/list/List.svelte

@@ -1,10 +1,43 @@
 <script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { setListContext } from './context.js'
 	import type { ListProps } from './types.js'
 
-	let { element = $bindable(), children, ...attributes }: ListProps = $props()
+	let { element = $bindable(), selection, children, ...attributes }: ListProps = $props()
+
+	setListContext({
+		get selection() {
+			return selection
+		},
+	})
+
+	// The actions in a list share one tab stop, on the selected item or else the first. ↓ and → move
+	// to the next action, ↑ and ← back, wrapping at the ends.
+	const ACTIONS = "a[href], button, input:not([type='hidden']), select, textarea"
+	const roving = rovingTabindex(ACTIONS, {
+		current: "[aria-selected='true'], [aria-current]:not([aria-current='false']), .selected",
+	})
+	const arrows = arrowKeyNav(ACTIONS, 'both')
 </script>
 
-<ul bind:this={element} {...attributes}>
+<ul
+	bind:this={element}
+	role={selection ? 'listbox' : undefined}
+	aria-multiselectable={selection === 'multiple' ? 'true' : undefined}
+	{...attributes}
+	{@attach roving}
+	onkeydown={(event) => {
+		attributes.onkeydown?.(event)
+		if (event.defaultPrevented) return
+		arrows(event)
+		// Every action follows Space and Enter, links included.
+		const target = event.target
+		if (event.key === ' ' && target instanceof HTMLAnchorElement && target.matches(ACTIONS)) {
+			event.preventDefault()
+			target.click()
+		}
+	}}
+>
 	{#if children}
 		{@render children()}
 	{/if}

package/dist/list/ListItem.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
 	import Item from './Item.svelte'
+	import { getListContext } from './context.js'
 	import type { ListItemProps } from './types.js'
 
 	let { element = $bindable(), ...attributes }: ListItemProps = $props()
+
+	// In a listbox, the item is the option and the <li> around it steps aside.
+	const list = getListContext()
+	let option = $derived(!!list?.selection)
 </script>
 
-<li>
-	<Item bind:element {...attributes} />
+<li role={option ? 'none' : undefined}>
+	{#if option}
+		<Item
+			bind:element
+			{...attributes}
+			role="option"
+			aria-selected={attributes.selected ? 'true' : 'false'}
+		/>
+	{:else}
+		<Item bind:element {...attributes} />
+	{/if}
 </li>

package/dist/list/context.d.ts

@@ -0,0 +1,6 @@
+/** Tells the items of a `List` with `selection` to be options of a listbox. */
+export interface ListContext {
+    readonly selection: 'single' | 'multiple' | undefined;
+}
+export declare const setListContext: (context: ListContext) => ListContext;
+export declare const getListContext: () => ListContext | undefined;

package/dist/list/context.js

@@ -0,0 +1,4 @@
+import { getContext, setContext } from 'svelte';
+const key = Symbol('np-list');
+export const setListContext = (context) => setContext(key, context);
+export const getListContext = () => getContext(key);

package/dist/list/types.d.ts

@@ -5,6 +5,8 @@ export type ItemElement = HTMLButtonElement | HTMLAnchorElement | HTMLDivElement
 export interface ItemProps extends ElementKindProps<ItemElement> {
     selected?: boolean;
     start?: Snippet;
+    /** A 40px round avatar in place of `start`: initials as text, or a snippet holding an image. */
+    avatar?: string | Snippet;
     /** Trailing content, such as an icon or short supporting text like a count. */
     end?: string | Snippet;
     supportingText?: string | Snippet;
@@ -16,5 +18,10 @@ export interface ItemProps extends ElementKindProps<ItemElement> {
 }
 export type ListItemProps = ItemProps;
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /**
+     * Makes the list a listbox whose items are options, announcing each item's `selected` state.
+     * The selection itself stays with you, through `selected` and `onclick` on the items.
+     */
+    selection?: 'single' | 'multiple';
     element?: HTMLUListElement;
 }

package/dist/media.d.ts

@@ -2,3 +2,4 @@ import { MediaQuery } from 'svelte/reactivity';
 export declare const reducedMotion: MediaQuery;
 export declare const forcedColors: MediaQuery;
 export declare const coarsePointer: MediaQuery;
+export declare const compactWindow: MediaQuery;

package/dist/media.js

@@ -2,3 +2,4 @@ import { MediaQuery } from 'svelte/reactivity';
 export const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false);
 export const forcedColors = new MediaQuery('(forced-colors: active)', false);
 export const coarsePointer = new MediaQuery('(hover: none) and (pointer: coarse)', false);
+export const compactWindow = new MediaQuery('(max-width: 599.98px)', false);

package/dist/menu/Menu.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import '../internal/exit.css'
+	import { exitAnimation, motionOf } from '../animation.js'
+	import { reducedMotion } from '../media.js'
+	import type { Attachment } from 'svelte/attachments'
+	import { arrowKeyNav, rovingTabindex, typeahead } from '../keyboard-nav.js'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { MenuProps } from './types.js'
 
-	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
+	const MENU_ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]'
 	const attach = rovingTabindex(MENU_ITEM_SELECTOR)
 	const arrowHandler = arrowKeyNav(MENU_ITEM_SELECTOR)
+	const typeaheadHandler = typeahead(
+		MENU_ITEM_SELECTOR,
+		(item) => (item.querySelector('.np-item-headline') ?? item).textContent ?? '',
+	)
 
 	let {
 		children,
@@ -25,6 +33,24 @@
 
 	const controller = popoverController(() => element)
 
+	// Opens with a fade and a scale from the anchor, started just before the menu shows. Driven by
+	// script rather than @starting-style, which Safari does not apply again when a popover reopens.
+	const openAnimation: Attachment<HTMLElement> = (menu) => {
+		const onBeforeToggle = (event: Event) => {
+			if ((event as ToggleEvent).newState !== 'open' || reducedMotion.current) return
+			menu.animate(
+				[{ opacity: 0 }, { opacity: 1 }],
+				motionOf(menu, '--np-motion-expressive-fast-effects'),
+			)
+			menu.animate(
+				[{ scale: 0.8 }, { scale: 1 }],
+				motionOf(menu, '--np-motion-expressive-fast-spatial'),
+			)
+		}
+		menu.addEventListener('beforetoggle', onBeforeToggle)
+		return () => menu.removeEventListener('beforetoggle', onBeforeToggle)
+	}
+
 	export const show = () => controller.show()
 	export const close = () => controller.close()
 
@@ -74,9 +100,14 @@
 	{...attributes}
 	{role}
 	bind:this={element}
+	{@attach exitAnimation}
+	{@attach openAnimation}
 	ontoggle={(event) => {
 		let { newState } = event
 		open = newState === 'open'
+		if (open && role === 'menu') {
+			element?.querySelector<HTMLElement>(MENU_ITEM_SELECTOR)?.focus()
+		}
 		ontoggle?.(event)
 	}}
 	{popover}
@@ -85,6 +116,18 @@
 	onkeydown={(event) => {
 		attributes.onkeydown?.(event)
 		if (!event.defaultPrevented) arrowHandler(event)
+		if (!event.defaultPrevented) typeaheadHandler(event)
+		// Links only follow Enter, a menu item follows Space as well.
+		const item = event.target
+		if (
+			!event.defaultPrevented &&
+			event.key === ' ' &&
+			item instanceof HTMLAnchorElement &&
+			item.matches(MENU_ITEM_SELECTOR)
+		) {
+			event.preventDefault()
+			item.click()
+		}
 	}}
 >
 	<div {@attach attach} bind:clientHeight={contentHeight} class="np-menu" role="none">
@@ -99,6 +142,17 @@
 		flex: 1;
 		padding: 0.5rem 0;
 	}
+	/* Baseline menu items: 48dp high with 12dp at the sides, in action menus and listboxes alike. */
+	.np-menu-container:is([role='menu'], [role='listbox']) .np-menu {
+		--np-item-container-height: var(--np-menu-item-container-height, 3rem);
+		--np-item-padding-inline: var(--np-menu-item-padding-inline, 0.75rem);
+		--np-item-gap: var(--np-menu-item-gap, 0.75rem);
+	}
+	/* Select and AutoComplete match their field instead. */
+	.np-menu-container[role='menu'][popover] {
+		min-width: var(--np-menu-min-width, 7rem);
+		max-width: var(--np-menu-max-width, 17.5rem);
+	}
 	:global(.np-menu .np-divider) {
 		margin-block: 0.5rem;
 	}
@@ -135,25 +189,23 @@
 		align-self: center;
 	}
 
-	.np-menu-container:popover-open {
-		opacity: 1;
-		scale: 1;
-	}
 	@media (prefers-reduced-motion: no-preference) {
-		.np-menu-container:popover-open {
-			animation:
-				fadeIn var(--np-motion-expressive-fast-effects),
-				scaleIn var(--np-motion-expressive-fast-spatial);
-		}
-	}
-	@keyframes fadeIn {
-		from {
+		/* Closes with a fade and a slight shrink towards the anchor, on the default effects curve,
+		   which is gentler at the start than the fast one. It opens through openAnimation.
+		   NativeSelect's list closes the same way. */
+		.np-menu-container[popover] {
+			--_exit: var(--np-motion-expressive-default-effects);
 			opacity: 0;
+			scale: 0.95;
+			transition:
+				opacity var(--_exit),
+				scale var(--_exit),
+				display var(--_exit) allow-discrete,
+				overlay var(--_exit) allow-discrete;
 		}
-	}
-	@keyframes scaleIn {
-		from {
-			scale: 0.8;
+		.np-menu-container:popover-open {
+			opacity: 1;
+			scale: 1;
 		}
 	}
 </style>

package/dist/menu/Menu.svelte.d.ts

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

package/dist/menu/MenuItem.svelte

@@ -2,15 +2,21 @@
 	import Item from '../list/Item.svelte'
 	import type { MenuItemProps } from './types.js'
 
-	let { element = $bindable(), ...attributes }: MenuItemProps = $props()
+	let {
+		element = $bindable(),
+		role = 'menuitem',
+		selected,
+		...attributes
+	}: MenuItemProps = $props()
 </script>
 
 <div class="np-menu-item" role="none">
-	<!-- Without a link to follow, a menu item is still a button. -->
 	<Item
-		role="menuitem"
 		bind:element
 		{...attributes}
+		{role}
+		{selected}
+		aria-checked={role === 'menuitem' ? undefined : !!selected}
 		type={attributes.type ?? (attributes.href == null ? 'button' : undefined)}
 	/>
 </div>

package/dist/menu/types.d.ts

@@ -6,4 +6,10 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     open?: boolean;
     coverAnchor?: boolean;
 }
-export type MenuItemProps = Omit<ItemProps, 'variant' | 'softFocus'>;
+export interface MenuItemProps extends Omit<ItemProps, 'variant' | 'softFocus' | 'role'> {
+    /**
+     * `menuitemradio` for one choice out of several, `menuitemcheckbox` for a choice that can be
+     * toggled on its own. Both announce `selected` as checked, and a checkbox keeps the menu open.
+     */
+    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+}

package/dist/navigation-bar/NavigationBar.svelte

@@ -40,11 +40,11 @@
 		align-items: stretch;
 		box-sizing: border-box;
 		width: 100%;
-		min-height: 5rem;
-		padding-block: 0.75rem;
+		min-height: 4rem;
+		padding-block: 0.375rem;
 		padding-inline: 0.5rem;
 		background-color: var(--np-navigation-bar-container-color, var(--np-color-surface-container));
-		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+		padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
 		z-index: 8;
 	}
 
@@ -52,6 +52,12 @@
 		justify-content: center;
 		gap: 0.5rem;
 	}
+	/* Horizontal items keep their own width and sit centred as a group, so extra space goes to
+	   the ends of the bar. */
+	.np-navigation-bar:has(> :global(.np-navigation-bar-item-horizontal)) {
+		justify-content: center;
+		gap: 2rem;
+	}
 	:global(.np-navigation-bar-centered .np-navigation-bar-item.np-navigation-bar-item) {
 		flex: 0 0 auto;
 		min-width: 0;