noph-ui 0.44.0 → 0.45.1

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,20 @@
 		cancelYearEnter = afterTwoFrames(() => (yearEnter = false))
 	}
 
-	const isOpen = () => !!element?.matches(':popover-open')
+	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 +210,7 @@
 		const nowOpen = event.newState === 'open'
 		open = nowOpen
 		if (nowOpen) {
+			exit.show()
 			monthBeforeOpen = displayMonth
 			confirming = false
 			pending = value ?? undefined
@@ -206,14 +220,14 @@
 			syncText()
 			focusCalendarWhenReady()
 		} else {
-			displayMonth = monthBeforeOpen
 			if (!confirming) oncancel?.()
 			confirming = false
+			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">
@@ -225,9 +239,6 @@
 						type="button"
 						aria-label={mode === 'calendar' ? inputModeLabel : calendarModeLabel}
 						onclick={() => {
-							// The calendar moves `pending` on without touching the field, so the text has to
-							// catch up before it is shown again. Otherwise the field contradicts the headline
-							// and OK confirms a date the user never saw there.
 							if (mode === 'calendar') syncText()
 							setMode(mode === 'calendar' ? 'input' : 'calendar')
 							showYearPicker(false)
@@ -247,6 +258,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,20 @@
 		if (target && scroller) scroller.scrollTop = target.offsetTop
 	}
 
-	const isOpen = () => !!element?.matches(':popover-open')
+	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 +192,7 @@
 		const nowOpen = event.newState === 'open'
 		open = nowOpen
 		if (nowOpen) {
+			exit.show()
 			confirming = false
 			pending = { ...value }
 			focusedDay = undefined
@@ -184,10 +201,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 +227,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 +278,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'
@@ -34,7 +35,6 @@
 	let {
 		value = $bindable(),
 		defaultValue,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,
@@ -214,10 +214,18 @@
 		focusCalendar()
 	}
 
-	$effect(() => {
-		if (open) openPicker()
-		else if (isShowing()) menuElement?.hidePopover()
-	})
+	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()
@@ -255,7 +263,6 @@
 		const parsed = usableDate(next)
 		commit(parsed ? toISODate(parsed) : undefined)
 		if (parsed) setMonth(parsed)
-		// Recorded after the commit, so that it is remembered against the value it just produced.
 		typed = { source: current, text: next }
 		invalidText = undefined
 	}
@@ -267,8 +274,6 @@
 		}
 		const parsed = usableDate(text)
 		invalidText = parsed ? undefined : text
-		// Leaving the field tidies a loose entry: dropping what was typed falls back to the
-		// canonical formatting of the value it produced.
 		if (parsed) typed = undefined
 	}
 
@@ -285,8 +290,6 @@
 	}
 
 	const chooseYear = (year: number) => {
-		// A year is offered as soon as any of its days is in range, so keeping the month the list was
-		// opened from can land on a month where nothing at all is selectable.
 		setMonth(new Date(year, clampMonthInYear(year, monthDate.getMonth(), minDate, maxDate), 1))
 		leaveList()
 	}

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'
@@ -48,7 +49,6 @@
 	let {
 		value = $bindable(),
 		defaultValue,
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
 		style,
@@ -118,8 +118,6 @@
 	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
 	let minDate = $derived(parseISODateTime(min))
 	let maxDate = $derived(parseISODateTime(max, MINUTES_IN_DAY - 1))
-	// `as('datetime-local')` types its value as `string | number` and carries the last submission in
-	// `defaultValue`, so both are funnelled into one ISO string the rest of the component reads.
 	let current = $derived<string | undefined>(
 		typeof value === 'string' ? value : typeof defaultValue === 'string' ? defaultValue : undefined,
 	)
@@ -297,10 +295,18 @@
 		focusCalendar()
 	}
 
-	$effect(() => {
-		if (open) openPicker()
-		else if (isShowing()) menuElement?.hidePopover()
-	})
+	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,5 @@
+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,23 @@
+import { afterExit } from '../animation.js';
+export const exitVisibility = () => {
+    let visible = $state(false);
+    let cancelExit;
+    $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,4 @@
+import type { Attachment } from 'svelte/attachments';
+import type { TimeOption } from './types.ts';
+export declare const tabStop: (options: TimeOption[], value: number | undefined) => number | undefined;
+export declare const revealSelected: (centre?: boolean) => Attachment<HTMLElement>;

package/dist/date-picker/optionList.js

@@ -0,0 +1,31 @@
+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;
+};
+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;
+        }
+    };
+};

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

@@ -101,11 +101,11 @@ export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'o
     value?: number;
     onselect?: (value: number) => void;
 }
-export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
+export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
     value?: ISODate | null;
     displayMonth?: ISODate;
     open?: boolean;
-    element?: HTMLDivElement;
+    element?: HTMLDialogElement;
     name?: string;
     form?: string;
     title?: string;
@@ -113,6 +113,9 @@ export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDivElemen
     modeToggle?: boolean;
     label?: string;
     supportingText?: string;
+    issues?: {
+        message: string;
+    }[];
     selectYearLabel?: string;
     calendarModeLabel?: string;
     inputModeLabel?: string;
@@ -120,11 +123,15 @@ export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDivElemen
     onconfirm?: (value: ISODate | undefined) => void;
     oncancel?: () => void;
 }
-export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps {
+export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps {
     value?: DateRange;
     open?: boolean;
-    element?: HTMLDivElement;
+    element?: HTMLDialogElement;
     title?: string;
+    headline?: string;
+    name?: string;
+    endName?: string;
+    form?: string;
     startLabel?: string;
     endLabel?: string;
     onchange?: (value: DateRange) => void;