noph-ui 0.44.0 → 0.45.0

package/dist/chip/index.js

@@ -1,4 +1,5 @@
 export { default as FilterChip } from './FilterChip.svelte';
 export { default as AssistChip } from './AssistChip.svelte';
 export { default as InputChip } from './InputChip.svelte';
+export { default as SuggestionChip } from './SuggestionChip.svelte';
 export { default as ChipSet } from './ChipSet.svelte';

package/dist/chip/types.d.ts

@@ -1,44 +1,59 @@
-import type { ButtonElement, ButtonProps } from '../button/types.js';
+import type { ButtonElement } from '../button/types.js';
 import type { Snippet } from 'svelte';
-import type { HTMLAttributes, MouseEventHandler } from 'svelte/elements';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes, MouseEventHandler } from 'svelte/elements';
 export interface ChipSetProps extends HTMLAttributes<HTMLDivElement> {
-    chipsCount?: number;
     element?: HTMLDivElement;
 }
-export interface AssistChipProps extends Omit<ButtonProps, 'variant' | 'start' | 'end' | 'element'> {
-    elevated?: boolean;
-    disabled?: boolean;
+/**
+ * Declared from the element attributes rather than `ButtonProps`, which leaked `size`, `shape`,
+ * `toggle`, `loading` and `selected` onto a chip. A chip has one size and one shape.
+ */
+export interface AssistChipProps extends HTMLAttributes<ButtonElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    variant?: 'outlined' | 'elevated';
+    disabled?: boolean | null;
     label?: string;
     icon?: Snippet;
     element?: HTMLElement;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
 }
+/**
+ * A suggestion chip carries a generated suggestion rather than an action, so it is text-first and
+ * takes no leading icon. Everything else matches an assist chip.
+ */
+export type SuggestionChipProps = Omit<AssistChipProps, 'icon'>;
 export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     removable?: boolean;
     disabled?: boolean;
-    elevated?: boolean;
+    variant?: 'outlined' | 'elevated';
     label?: string;
     icon?: Snippet;
-    ariaLabelRemove?: string;
+    removeAriaLabel?: string;
     element?: HTMLDivElement;
     name?: string;
     value?: string;
     group?: (string | number)[] | null;
     defaultSelected?: boolean | null;
     onremove?: MouseEventHandler<ButtonElement>;
+    issues?: {
+        message: string;
+    }[];
 }
 export interface InputChipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onclick'> {
     selected?: boolean;
     disabled?: boolean;
     label?: string;
     icon?: Snippet;
-    ariaLabelRemove?: string;
+    removeAriaLabel?: string;
     element?: HTMLDivElement;
     actionElement?: HTMLButtonElement;
     name?: string;
     value?: string | number;
     onclick?: MouseEventHandler<HTMLButtonElement>;
     onremove?: MouseEventHandler<ButtonElement>;
+    issues?: {
+        message: string;
+    }[];
 }
 export interface ChipSetContext {
     chips: {

package/dist/date-picker/Calendar.svelte

@@ -20,7 +20,7 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import { afterTwoFrames } from './enterAnimation.js'
+	import { afterTwoFrames } from '../animation.js'
 	import type { CalendarProps } from './types.js'
 
 	let {

package/dist/date-picker/DatePickerDialog.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
+	import { afterTwoFrames } from '../animation.js'
 	import Button from '../button/Button.svelte'
 	import IconButton from '../button/IconButton.svelte'
 	import Dialog from '../dialog/Dialog.svelte'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import Divider from '../divider/Divider.svelte'
+	import { exitVisibility } from './exitVisibility.svelte.js'
 	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import CalendarToday from '../icons/CalendarToday.svelte'
 	import ChevronLeftIcon from '../icons/ChevronLeftIcon.svelte'
@@ -29,7 +32,6 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import { afterTwoFrames } from './enterAnimation.js'
 	import type { DatePickerDialogProps, ISODate } from './types.js'
 
 	let {
@@ -48,6 +50,7 @@
 		headline,
 		label = 'Date',
 		supportingText,
+		issues,
 		name,
 		form,
 		modeToggle = false,
@@ -77,6 +80,8 @@
 	let confirming = false
 	let monthBeforeOpen: ISODate | undefined
 
+	const exit = exitVisibility()
+
 	let todayValue = $derived(getToday())
 	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
 	let minDate = $derived(parseISODate(min))
@@ -125,12 +130,25 @@
 		cancelYearEnter = afterTwoFrames(() => (yearEnter = false))
 	}
 
-	const isOpen = () => !!element?.matches(':popover-open')
+	/*
+	 * The same pair every overlay in the library exports. A trigger with `command="show-modal"` and
+	 * `commandfor` needs neither, so these are for the times there is no trigger to point at the
+	 * dialog. `open` follows either way, written back from the dialog's own toggle event.
+	 */
+	export const show = () => {
+		if (element && !element.open) element.showModal()
+	}
 
-	$effect(() => {
-		if (open && !isOpen()) element?.showPopover()
-		if (!open && isOpen()) element?.hidePopover()
-	})
+	export const close = () => {
+		if (element?.open) element.close()
+	}
+
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 
 	const setMonth = (date: Date) => {
 		displayMonth = toISODate(startOfMonth(date))
@@ -197,6 +215,7 @@
 		const nowOpen = event.newState === 'open'
 		open = nowOpen
 		if (nowOpen) {
+			exit.show()
 			monthBeforeOpen = displayMonth
 			confirming = false
 			pending = value ?? undefined
@@ -206,14 +225,16 @@
 			syncText()
 			focusCalendarWhenReady()
 		} else {
-			displayMonth = monthBeforeOpen
 			if (!confirming) oncancel?.()
 			confirming = false
+			// Handing the month back before the dialog has gone would step the calendar to another
+			// month in front of the user, so that waits for the fade as well.
+			exit.scheduleExit(element, () => (displayMonth = monthBeforeOpen))
 		}
 	}}
 >
 	<input class="np-date-picker-dialog-value" type="hidden" value={value ?? ''} {name} {form} />
-	{#if open}
+	{#if exit.visible}
 		<div class="np-date-picker-dialog-content">
 			<div class="np-date-picker-dialog-header">
 				<div class="np-date-picker-dialog-header-text">
@@ -247,6 +268,7 @@
 				<div class={['np-date-picker-dialog-input', modeEnter && modeEnter]}>
 					<TextField
 						{label}
+						{issues}
 						supportingText={supportingText ?? pattern}
 						value={text}
 						aria-invalid={inputInvalid ? 'true' : undefined}

package/dist/date-picker/DatePickerDialog.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DatePickerDialogProps } from './types.ts';
-declare const DatePickerDialog: import("svelte").Component<DatePickerDialogProps, {}, "element" | "value" | "displayMonth" | "open">;
+declare const DatePickerDialog: import("svelte").Component<DatePickerDialogProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "value" | "open" | "displayMonth">;
 type DatePickerDialog = ReturnType<typeof DatePickerDialog>;
 export default DatePickerDialog;

package/dist/date-picker/DateRangePicker.svelte

@@ -4,8 +4,10 @@
 	import Dialog from '../dialog/Dialog.svelte'
 	import Divider from '../divider/Divider.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import { tick } from 'svelte'
 	import Calendar from './Calendar.svelte'
+	import { exitVisibility } from './exitVisibility.svelte.js'
 	import {
 		clampDate,
 		compareDays,
@@ -34,6 +36,10 @@
 		isDateEnabled,
 		adjacentMonthDays = false,
 		title = 'Select range',
+		headline,
+		name,
+		endName,
+		form,
 		startLabel = 'Start date',
 		endLabel = 'End date',
 		cancelLabel = 'Cancel',
@@ -52,6 +58,8 @@
 	let focusedDay = $state<Date | undefined>(undefined)
 	let confirming = false
 
+	const exit = exitVisibility()
+
 	let todayValue = $derived(getToday())
 	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
 	let minDate = $derived(parseISODate(min))
@@ -108,12 +116,25 @@
 		if (target && scroller) scroller.scrollTop = target.offsetTop
 	}
 
-	const isOpen = () => !!element?.matches(':popover-open')
+	/*
+	 * The same pair every overlay in the library exports. A trigger with `command="show-modal"` and
+	 * `commandfor` needs neither, so these are for the times there is no trigger to point at the
+	 * dialog. `open` follows either way, written back from the dialog's own toggle event.
+	 */
+	export const show = () => {
+		if (element && !element.open) element.showModal()
+	}
 
-	$effect(() => {
-		if (open && !isOpen()) element?.showPopover()
-		if (!open && isOpen()) element?.hidePopover()
-	})
+	export const close = () => {
+		if (element?.open) element.close()
+	}
+
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 
 	let prepending = false
 
@@ -176,6 +197,7 @@
 		const nowOpen = event.newState === 'open'
 		open = nowOpen
 		if (nowOpen) {
+			exit.show()
 			confirming = false
 			pending = { ...value }
 			focusedDay = undefined
@@ -184,10 +206,19 @@
 		} else {
 			if (!confirming) oncancel?.()
 			confirming = false
+			exit.scheduleExit(element)
 		}
 	}}
 >
-	{#if open}
+	<input class="np-date-range-picker-value" type="hidden" value={value.start ?? ''} {name} {form} />
+	<input
+		class="np-date-range-picker-value"
+		type="hidden"
+		value={value.end ?? ''}
+		name={endName}
+		{form}
+	/>
+	{#if exit.visible}
 		<div class="np-date-range-picker-content">
 			<div class="np-date-range-picker-header">
 				<div class="np-date-range-picker-top-bar">
@@ -201,9 +232,13 @@
 				<div class="np-date-range-picker-header-text">
 					<span class="np-date-range-picker-title">{title}</span>
 					<h2 class="np-date-range-picker-headline">
-						<span class={[!startDate && 'placeholder']}>{headlineStart}</span>
-						<span aria-hidden="true">–</span>
-						<span class={[!endDate && 'placeholder']}>{headlineEnd}</span>
+						{#if headline}
+							<span>{headline}</span>
+						{:else}
+							<span class={[!startDate && 'placeholder']}>{headlineStart}</span>
+							<span aria-hidden="true">–</span>
+							<span class={[!endDate && 'placeholder']}>{headlineEnd}</span>
+						{/if}
 					</h2>
 				</div>
 			</div>
@@ -248,7 +283,7 @@
 	{/if}
 
 	{#snippet actions()}
-		{#if open}
+		{#if exit.visible}
 			<Button type="button" variant="text" onclick={cancel}>{cancelLabel}</Button>
 			<Button type="button" variant="text" disabled={!canConfirm} onclick={confirm}>
 				{confirmLabel}

package/dist/date-picker/DateRangePicker.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DateRangePickerProps } from './types.ts';
-declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {}, "element" | "value" | "open">;
+declare const DateRangePicker: import("svelte").Component<DateRangePickerProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "value" | "open">;
 type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/date-picker/DockedDatePicker.svelte

@@ -5,6 +5,7 @@
 	import CalendarToday from '../icons/CalendarToday.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import { onFormReset } from '../form-reset.js'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import TextField from '../text-field/TextField.svelte'
 	import { onMount, tick } from 'svelte'
 	import Calendar from './Calendar.svelte'
@@ -214,10 +215,23 @@
 		focusCalendar()
 	}
 
-	$effect(() => {
-		if (open) openPicker()
-		else if (isShowing()) menuElement?.hidePopover()
-	})
+	/*
+	 * The same pair every overlay in the library exports, for the times there is no trigger to point
+	 * at the picker. `close()` leaves focus where it is; only a close the user asked for, through the
+	 * field or the cancel button, hands focus back to the input.
+	 */
+	export const show = () => openPicker()
+
+	export const close = () => {
+		if (isShowing()) menuElement?.hidePopover()
+	}
+
+	syncOpenEffect(
+		() => menuElement,
+		() => open,
+		show,
+		close,
+	)
 
 	const focusCalendar = () => {
 		menuElement?.querySelector<HTMLElement>('.np-calendar-day[tabindex="0"]')?.focus()

package/dist/date-picker/DockedDatePicker.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DockedDatePickerProps } from './types.ts';
-declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {}, "element" | "value" | "displayMonth" | "open">;
+declare const DockedDatePicker: import("svelte").Component<DockedDatePickerProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "value" | "open" | "displayMonth">;
 type DockedDatePicker = ReturnType<typeof DockedDatePicker>;
 export default DockedDatePicker;

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -5,6 +5,7 @@
 	import CalendarToday from '../icons/CalendarToday.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import { onFormReset } from '../form-reset.js'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import TextField from '../text-field/TextField.svelte'
 	import { onMount, tick } from 'svelte'
 	import Calendar from './Calendar.svelte'
@@ -297,10 +298,23 @@
 		focusCalendar()
 	}
 
-	$effect(() => {
-		if (open) openPicker()
-		else if (isShowing()) menuElement?.hidePopover()
-	})
+	/*
+	 * The same pair every overlay in the library exports, for the times there is no trigger to point
+	 * at the picker. `close()` leaves focus where it is; only a close the user asked for, through the
+	 * field or the cancel button, hands focus back to the input.
+	 */
+	export const show = () => openPicker()
+
+	export const close = () => {
+		if (isShowing()) menuElement?.hidePopover()
+	}
+
+	syncOpenEffect(
+		() => menuElement,
+		() => open,
+		show,
+		close,
+	)
 
 	const focusCalendar = () => {
 		menuElement?.querySelector<HTMLElement>('.np-calendar-day[tabindex="0"]')?.focus()

package/dist/date-picker/DockedDateTimePicker.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { DockedDateTimePickerProps } from './types.ts';
-declare const DockedDateTimePicker: import("svelte").Component<DockedDateTimePickerProps, {}, "element" | "value" | "displayMonth" | "open">;
+declare const DockedDateTimePicker: import("svelte").Component<DockedDateTimePickerProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "value" | "open" | "displayMonth">;
 type DockedDateTimePicker = ReturnType<typeof DockedDateTimePicker>;
 export default DockedDateTimePicker;

package/dist/date-picker/SelectionList.svelte

@@ -2,41 +2,15 @@
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { Attachment } from 'svelte/attachments'
-	import type { HTMLAttributes } from 'svelte/elements'
+	import { revealSelected, tabStop } from './optionList.js'
+	import type { TimeColumnProps } from './types.js'
 
-	interface SelectionOption {
-		value: number
-		label: string
-		disabled?: boolean
-	}
-
-	interface SelectionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
-		options: SelectionOption[]
-		value?: number
-		onselect?: (value: number) => void
-	}
-
-	let { options, value, onselect, ...attributes }: SelectionListProps = $props()
+	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
 	const handleKeydown = arrowKeyNav('[role="option"]')
+	const reveal = revealSelected(true)
 
-	let tabStopValue = $derived.by(() => {
-		if (options.some((option) => option.value === value)) return value
-		const offered = options.filter((option) => !option.disabled)
-		const pool = offered.length ? offered : options
-		if (!pool.length) return undefined
-		if (value === undefined) return pool[0].value
-		return pool.reduce((nearest, option) =>
-			Math.abs(option.value - value) < Math.abs(nearest.value - value) ? option : nearest,
-		).value
-	})
-
-	const centerInList: Attachment<HTMLElement> = (element) => {
-		const list = element.closest<HTMLElement>('.np-date-picker-selection-list')
-		if (!list) return
-		list.scrollTop = element.offsetTop - list.clientHeight / 2 + element.offsetHeight / 2
-	}
+	let tabStopValue = $derived(tabStop(options, value))
 </script>
 
 <div
@@ -49,7 +23,7 @@
 	{#each options as option (option.value)}
 		{@const selected = option.value === value}
 		<button
-			{@attach selected && centerInList}
+			{@attach selected && reveal}
 			type="button"
 			role="option"
 			aria-selected={selected}

package/dist/date-picker/SelectionList.svelte.d.ts

@@ -1,14 +1,4 @@
-import type { HTMLAttributes } from 'svelte/elements';
-interface SelectionOption {
-    value: number;
-    label: string;
-    disabled?: boolean;
-}
-interface SelectionListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
-    options: SelectionOption[];
-    value?: number;
-    onselect?: (value: number) => void;
-}
-declare const SelectionList: import("svelte").Component<SelectionListProps, {}, "">;
+import type { TimeColumnProps } from './types.ts';
+declare const SelectionList: import("svelte").Component<TimeColumnProps, {}, "">;
 type SelectionList = ReturnType<typeof SelectionList>;
 export default SelectionList;

package/dist/date-picker/TimeColumn.svelte

@@ -1,40 +1,15 @@
 <script lang="ts">
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { Attachment } from 'svelte/attachments'
+	import { revealSelected, tabStop } from './optionList.js'
 	import type { TimeColumnProps } from './types.js'
 
 	let { options, value, onselect, ...attributes }: TimeColumnProps = $props()
 
 	const handleKeydown = arrowKeyNav('[role="option"]')
+	const reveal = revealSelected()
 
-	let tabStopValue = $derived.by(() => {
-		if (options.some((option) => option.value === value)) return value
-		const offered = options.filter((option) => !option.disabled)
-		const pool = offered.length ? offered : options
-		if (!pool.length) return undefined
-		if (value === undefined) return pool[0].value
-		return pool.reduce((nearest, option) =>
-			Math.abs(option.value - value) < Math.abs(nearest.value - value) ? option : nearest,
-		).value
-	})
-
-	let centred = false
-
-	const revealSelected: Attachment<HTMLElement> = (element) => {
-		const column = element.parentElement
-		if (!column) return
-		const top = element.offsetTop
-		const bottom = top + element.offsetHeight
-		if (!centred) {
-			centred = true
-			column.scrollTop = top - column.clientHeight / 2 + element.offsetHeight / 2
-		} else if (top < column.scrollTop) {
-			column.scrollTop = top
-		} else if (bottom > column.scrollTop + column.clientHeight) {
-			column.scrollTop = bottom - column.clientHeight
-		}
-	}
+	let tabStopValue = $derived(tabStop(options, value))
 </script>
 
 <div
@@ -47,7 +22,7 @@
 	{#each options as option (option.value)}
 		{@const selected = option.value === value}
 		<button
-			{@attach selected && revealSelected}
+			{@attach selected && reveal}
 			type="button"
 			role="option"
 			aria-selected={selected}

package/dist/date-picker/exitVisibility.svelte.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `visible` for a dialog that fades itself out, so it stays on screen after `open` has flipped to
+ * `false`. Content tied to `open` would leave the fading dialog empty a frame before it starts to
+ * leave, so this holds `visible` true until the exit animation has actually finished.
+ */
+export declare const exitVisibility: () => {
+    readonly visible: boolean;
+    show: () => void;
+    scheduleExit: (element: Element | undefined, onDone?: () => void) => void;
+};

package/dist/date-picker/exitVisibility.svelte.js

@@ -0,0 +1,30 @@
+import { afterExit } from '../animation.js';
+/**
+ * `visible` for a dialog that fades itself out, so it stays on screen after `open` has flipped to
+ * `false`. Content tied to `open` would leave the fading dialog empty a frame before it starts to
+ * leave, so this holds `visible` true until the exit animation has actually finished.
+ */
+export const exitVisibility = () => {
+    let visible = $state(false);
+    let cancelExit;
+    // A dialog torn down mid fade has nothing left to reveal, and running a stale `onDone` against a
+    // parent that has already dropped its state is worse than not running it at all.
+    $effect(() => () => cancelExit?.());
+    return {
+        get visible() {
+            return visible;
+        },
+        show: () => {
+            cancelExit?.();
+            cancelExit = undefined;
+            visible = true;
+        },
+        scheduleExit: (element, onDone) => {
+            cancelExit = afterExit(element, () => {
+                visible = false;
+                onDone?.();
+                cancelExit = undefined;
+            });
+        },
+    };
+};

package/dist/date-picker/optionList.d.ts

@@ -0,0 +1,16 @@
+import type { Attachment } from 'svelte/attachments';
+import type { TimeOption } from './types.ts';
+/**
+ * The option that carries the list's single tab stop: the selected one, or else the offered option
+ * nearest to the value, so arriving with the keyboard lands next to where the value already is.
+ */
+export declare const tabStop: (options: TimeOption[], value: number | undefined) => number | undefined;
+/**
+ * Scrolls the selected option into view inside its own list, rather than through `scrollIntoView`,
+ * which takes every scrollable ancestor with it and would move the page behind the picker.
+ *
+ * `centre` puts the option in the middle of the list every time it changes. Otherwise the list is
+ * centred once, on the option it opens with, and afterwards the selection is only pulled to the
+ * nearest edge when it has moved out of view, so stepping through options does not jump the list.
+ */
+export declare const revealSelected: (centre?: boolean) => Attachment<HTMLElement>;

package/dist/date-picker/optionList.js

@@ -0,0 +1,43 @@
+/**
+ * The option that carries the list's single tab stop: the selected one, or else the offered option
+ * nearest to the value, so arriving with the keyboard lands next to where the value already is.
+ */
+export const tabStop = (options, value) => {
+    if (options.some((option) => option.value === value))
+        return value;
+    const offered = options.filter((option) => !option.disabled);
+    const pool = offered.length ? offered : options;
+    if (!pool.length)
+        return undefined;
+    if (value === undefined)
+        return pool[0].value;
+    return pool.reduce((nearest, option) => Math.abs(option.value - value) < Math.abs(nearest.value - value) ? option : nearest).value;
+};
+/**
+ * Scrolls the selected option into view inside its own list, rather than through `scrollIntoView`,
+ * which takes every scrollable ancestor with it and would move the page behind the picker.
+ *
+ * `centre` puts the option in the middle of the list every time it changes. Otherwise the list is
+ * centred once, on the option it opens with, and afterwards the selection is only pulled to the
+ * nearest edge when it has moved out of view, so stepping through options does not jump the list.
+ */
+export const revealSelected = (centre = false) => {
+    let centred = false;
+    return (element) => {
+        const list = element.parentElement;
+        if (!list)
+            return;
+        const top = element.offsetTop;
+        const bottom = top + element.offsetHeight;
+        if (centre || !centred) {
+            centred = true;
+            list.scrollTop = top - list.clientHeight / 2 + element.offsetHeight / 2;
+        }
+        else if (top < list.scrollTop) {
+            list.scrollTop = top;
+        }
+        else if (bottom > list.scrollTop + list.clientHeight) {
+            list.scrollTop = bottom - list.clientHeight;
+        }
+    };
+};