noph-ui 0.52.0 → 0.53.0

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

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

package/dist/date-picker/DockedPickerField.svelte

@@ -0,0 +1,221 @@
+<script lang="ts">
+	import IconButton from '../button/IconButton.svelte'
+	import { formReset } from '../form-reset.js'
+	import Menu from '../menu/Menu.svelte'
+	import TextField from '../text-field/TextField.svelte'
+	import { exitVisibility } from './exitVisibility.svelte.js'
+	import type { DockedPickerFieldProps } from './internalTypes.js'
+
+	let {
+		kind,
+		// eslint-disable-next-line no-useless-assignment
+		value = $bindable(),
+		current,
+		resetValue,
+		open = $bindable(false),
+		element = $bindable(),
+		menuElement = $bindable(),
+		pattern,
+		openLabel,
+		invalidMessage,
+		format,
+		parse,
+		icon,
+		onopen,
+		onclosed,
+		onrestore,
+		ontyped,
+		onmenukeydown,
+		children,
+		label,
+		supportingText,
+		issues,
+		name,
+		form,
+		disabled,
+		readonly,
+		'aria-invalid': ariaInvalid,
+		style,
+		onchange,
+		oninput,
+		onblur,
+		...attributes
+	}: DockedPickerFieldProps = $props()
+
+	const uid = $props.id()
+	const menuId = `${uid}-menu`
+	const exit = exitVisibility()
+
+	let menu = $state<Menu>()
+	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement>()
+	let valueInput = $state<HTMLInputElement>()
+
+	let typed = $state.raw<{ source: string | undefined; text: string } | undefined>()
+	let invalidText = $state<string | undefined>()
+	let text = $derived(typed && typed.source === current ? typed.text : format())
+	let inputInvalid = $derived(invalidText !== undefined && invalidText === text)
+
+	$effect(() => {
+		if (open && (disabled || readonly)) open = false
+	})
+
+	export const show = () => {
+		if (!disabled && !readonly) menu?.show()
+	}
+
+	export const close = () => menu?.close()
+
+	export const closePicker = () => {
+		close()
+		inputElement?.focus()
+	}
+
+	const commit = (next: string | undefined) => {
+		if (current === next) return
+		value = next
+		onchange?.(next)
+	}
+
+	/** Takes the value chosen in the menu. */
+	export const confirm = (next: string | undefined) => {
+		typed = undefined
+		invalidText = undefined
+		commit(next)
+		closePicker()
+	}
+
+	const restoreDefault = () => {
+		if (valueInput) valueInput.value = resetValue ?? ''
+		queueMicrotask(() => {
+			typed = undefined
+			invalidText = undefined
+			onrestore?.()
+			value = resetValue
+		})
+	}
+
+	const handleInput = (event: Event) => {
+		const next = (event.currentTarget as HTMLInputElement).value
+		const parsed = parse(next)
+		commit(parsed)
+		if (parsed !== undefined) ontyped?.(parsed)
+		typed = { source: current, text: next }
+		invalidText = undefined
+	}
+
+	const handleBlur = () => {
+		if (!text.trim()) {
+			invalidText = undefined
+			return
+		}
+		const parsed = parse(text)
+		invalidText = parsed === undefined ? text : undefined
+		if (parsed !== undefined) typed = undefined
+	}
+
+	$effect(() => {
+		if (!inputElement) return
+		const unusable = text.trim() !== '' && parse(text) === undefined
+		inputElement.setCustomValidity(unusable ? invalidMessage : '')
+	})
+</script>
+
+<TextField
+	{...attributes}
+	class={[`np-docked-${kind}`, attributes.class]}
+	style={`anchor-name:--${uid};${style ?? ''}`}
+	{label}
+	{issues}
+	{disabled}
+	{readonly}
+	supportingText={supportingText ?? pattern}
+	bind:value={text}
+	bind:element
+	bind:inputElement
+	aria-invalid={inputInvalid || issues?.length || ariaInvalid === true || ariaInvalid === 'true'
+		? 'true'
+		: undefined}
+	oninput={(event) => {
+		handleInput(event)
+		oninput?.(event)
+	}}
+	onblur={(event) => {
+		handleBlur()
+		onblur?.(event)
+	}}
+	onkeydown={(event) => {
+		// Enter formats the entry, as leaving the field does.
+		if (event.key === 'Enter') handleBlur()
+		attributes.onkeydown?.(event)
+	}}
+>
+	{#snippet end()}
+		<IconButton
+			type="button"
+			aria-label={openLabel}
+			aria-expanded={open}
+			aria-haspopup="dialog"
+			aria-controls={open ? menuId : undefined}
+			{disabled}
+			onclick={() => (open ? closePicker() : show())}
+		>
+			{@render icon()}
+		</IconButton>
+	{/snippet}
+</TextField>
+<input
+	bind:this={valueInput}
+	{@attach formReset(restoreDefault)}
+	class="np-docked-{kind}-value"
+	type="hidden"
+	value={current ?? ''}
+	{name}
+	{form}
+	{disabled}
+/>
+
+<Menu
+	bind:this={menu}
+	id={menuId}
+	role="dialog"
+	aria-label={label}
+	aria-modal="false"
+	class={['np-docked-picker-menu', `np-docked-${kind}-menu`]}
+	style={`position-anchor:--${uid};`}
+	--np-menu-justify-self="none"
+	--np-menu-position-area="bottom span-right"
+	--np-menu-over-anchor-position-area="span-all span-right"
+	--np-menu-margin="0"
+	--np-menu-elevation="none"
+	--np-menu-container-color={`var(--np-docked-${kind}-container-color, var(--np-color-surface-container-high))`}
+	--np-menu-container-shape={`var(--np-docked-${kind}-container-shape, var(--np-shape-corner-large))`}
+	anchor={element}
+	bind:element={menuElement}
+	bind:open
+	tabindex={-1}
+	onkeydown={onmenukeydown}
+	ontoggle={({ newState }) => {
+		if (newState === 'open') {
+			exit.show()
+			onopen?.()
+		} else {
+			// Reset once the menu is gone, not while it still shows.
+			exit.scheduleExit(menuElement, onclosed)
+		}
+	}}
+>
+	{#if open || exit.visible}
+		{@render children()}
+	{/if}
+</Menu>
+
+<style>
+	:global(.np-docked-picker-menu .np-menu) {
+		padding: 0;
+	}
+
+	/* The menu takes focus only after a click on a bare part of it, so its keys keep working. */
+	:global(.np-docked-picker-menu:focus) {
+		outline: none;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { DockedPickerFieldProps } from './internalTypes.js';
+declare const DockedPickerField: import("svelte").Component<DockedPickerFieldProps, {
+    show: () => void;
+    close: () => any;
+    closePicker: () => void;
+    /** Takes the value chosen in the menu. */ confirm: (next: string | undefined) => void;
+}, "open" | "element" | "value" | "menuElement">;
+type DockedPickerField = ReturnType<typeof DockedPickerField>;
+export default DockedPickerField;

package/dist/date-picker/MonthPanel.svelte

@@ -0,0 +1,291 @@
+<script lang="ts">
+	import Divider from '../divider/Divider.svelte'
+	import { flushSync } from 'svelte'
+	import Calendar from './Calendar.svelte'
+	import CalendarHeader from './CalendarHeader.svelte'
+	import SelectionList from './SelectionList.svelte'
+	import {
+		addMonths,
+		clampMonthInYear,
+		getMonthNames,
+		isMonthWithin,
+		isSameMonth,
+		isYearWithin,
+	} from './dateUtils.js'
+	import type { MonthPanelProps } from './internalTypes.js'
+	import { pickerShortcut } from './shortcuts.js'
+
+	// The month of a docked picker: its header, its days and the month and year lists that slide
+	// over them.
+	let {
+		month,
+		selected,
+		min,
+		max,
+		locale,
+		firstDayOfWeek,
+		yearRange,
+		isDateEnabled,
+		adjacentMonthDays = false,
+		today,
+		previousMonthLabel,
+		nextMonthLabel,
+		previousYearLabel,
+		nextYearLabel,
+		selectMonthLabel,
+		selectYearLabel,
+		selectedDateLabel,
+		shortcutLabels,
+		onmonth,
+		onselect,
+		onconfirm,
+	}: MonthPanelProps = $props()
+
+	const uid = $props.id()
+	let panel = $state<HTMLElement>()
+	let mode = $state<'days' | 'months' | 'years'>('days')
+	// The list stays while it slides away.
+	let listMode = $state<'months' | 'years' | undefined>(undefined)
+	let focusedDay = $state<Date | undefined>(undefined)
+
+	let year = $derived(month.getFullYear())
+	// How far each arrow steps, 0 where the step would leave the bounds.
+	let steps = $derived({
+		previousMonth: isMonthWithin(year, month.getMonth() - 1, min, max) ? -1 : 0,
+		nextMonth: isMonthWithin(year, month.getMonth() + 1, min, max) ? 1 : 0,
+		previousYear:
+			year > yearRange[0] && isMonthWithin(year - 1, month.getMonth(), min, max) ? -12 : 0,
+		nextYear: year < yearRange[1] && isMonthWithin(year + 1, month.getMonth(), min, max) ? 12 : 0,
+	})
+	let monthNames = $derived(getMonthNames(locale, 'long'))
+	let shortMonthNames = $derived(getMonthNames(locale, 'short'))
+
+	let monthOptions = $derived(
+		monthNames.map((label, index) => ({
+			value: index,
+			label,
+			disabled: !isMonthWithin(year, index, min, max),
+		})),
+	)
+	let yearOptions = $derived(
+		Array.from({ length: yearRange[1] - yearRange[0] + 1 }, (_, index) => {
+			const option = yearRange[0] + index
+			return { value: option, label: `${option}`, disabled: !isYearWithin(option, min, max) }
+		}),
+	)
+
+	const setMode = (next: 'days' | 'months' | 'years') => {
+		mode = next
+		if (next !== 'days') listMode = next
+	}
+
+	/** Focuses the day that takes focus. */
+	export const focus = () =>
+		panel?.querySelector<HTMLElement>('.np-calendar-day[tabindex="0"]')?.focus()
+
+	/** Back to the days, for the next time the picker opens. */
+	export const reset = () => {
+		mode = 'days'
+		listMode = undefined
+		focusedDay = undefined
+	}
+
+	// The view changes and focus moves in one step. A focused part that turns inert drops focus to the
+	// page, where the next key, such as Escape, would close the picker.
+	const backToDays = () => {
+		flushSync(() => (mode = 'days'))
+		focus()
+	}
+
+	// Shift+M and Shift+Y toggle a list as its button does: open on its chosen entry, also from the
+	// other list, or back to the days.
+	const toggleList = (next: 'months' | 'years') => {
+		if (mode === next) return backToDays()
+		flushSync(() => setMode(next))
+		panel?.querySelector<HTMLElement>(`#${uid}-${next} [role="option"][tabindex="0"]`)?.focus()
+	}
+
+	/**
+	 * The keys of the picker, for its whole menu: Shift+M and Shift+Y from anywhere in it, Page up
+	 * and Page down from the header, as the arrows they stand for. Escape with a list open goes back
+	 * to the days, before a second one closes the picker.
+	 */
+	export const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && mode !== 'days' && !event.defaultPrevented) {
+			event.preventDefault()
+			backToDays()
+			return
+		}
+		// The menu itself holds focus after a click on a bare part of it.
+		const target = event.target as Node
+		const onDate = target === event.currentTarget || !!panel?.contains(target)
+		const shortcut = pickerShortcut(event)
+		if (shortcut === 'monthList' || shortcut === 'yearList') {
+			event.preventDefault()
+			toggleList(shortcut === 'monthList' ? 'months' : 'years')
+		} else if (shortcut && mode === 'days' && onDate) {
+			event.preventDefault()
+			if (steps[shortcut]) onmonth(addMonths(month, steps[shortcut]))
+		}
+	}
+
+	const leaveList = (date: Date) => {
+		onmonth(date)
+		backToDays()
+	}
+</script>
+
+<div class="np-month-panel" bind:this={panel}>
+	<CalendarHeader
+		{mode}
+		monthLabel={shortMonthNames[month.getMonth()]}
+		yearLabel={`${year}`}
+		canPreviousMonth={steps.previousMonth !== 0}
+		canNextMonth={steps.nextMonth !== 0}
+		canPreviousYear={steps.previousYear !== 0}
+		canNextYear={steps.nextYear !== 0}
+		{previousMonthLabel}
+		{nextMonthLabel}
+		{previousYearLabel}
+		{nextYearLabel}
+		{selectMonthLabel}
+		{selectYearLabel}
+		{shortcutLabels}
+		monthListId="{uid}-months"
+		yearListId="{uid}-years"
+		onpreviousmonth={() => onmonth(addMonths(month, -1))}
+		onnextmonth={() => onmonth(addMonths(month, 1))}
+		onpreviousyear={() => onmonth(addMonths(month, -12))}
+		onnextyear={() => onmonth(addMonths(month, 12))}
+		ontogglemonths={() => setMode(mode === 'months' ? 'days' : 'months')}
+		ontoggleyears={() => setMode(mode === 'years' ? 'days' : 'years')}
+	/>
+
+	<div class="np-month-panel-views">
+		<div class="np-month-panel-days" inert={mode !== 'days'}>
+			<Calendar
+				{month}
+				{selected}
+				{min}
+				{max}
+				{locale}
+				{firstDayOfWeek}
+				{isDateEnabled}
+				{adjacentMonthDays}
+				dynamicRows
+				todayDate={today}
+				focusedDate={focusedDay}
+				selectedLabel={selectedDateLabel}
+				onselect={(date) => {
+					focusedDay = date
+					onselect(date)
+				}}
+				{onconfirm}
+				onmonthstep={(delta) => onmonth(addMonths(month, delta))}
+				onfocusday={(date) => {
+					focusedDay = date
+					if (!isSameMonth(date, month)) onmonth(date)
+				}}
+			/>
+		</div>
+
+		{#if listMode}
+			<div class={['np-month-panel-list', mode !== 'days' && 'open']}>
+				<div class="np-month-panel-shade">
+					<Divider --np-divider-color="var(--np-color-outline-variant)" />
+					{#if listMode === 'months'}
+						<SelectionList
+							id="{uid}-months"
+							aria-label={selectMonthLabel}
+							options={monthOptions}
+							value={month.getMonth()}
+							onselect={(index) => leaveList(new Date(year, index, 1))}
+						/>
+					{:else}
+						<SelectionList
+							id="{uid}-years"
+							aria-label={selectYearLabel}
+							options={yearOptions}
+							value={year}
+							onselect={(next) =>
+								leaveList(new Date(next, clampMonthInYear(next, month.getMonth(), min, max), 1))}
+						/>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.np-month-panel {
+		display: contents;
+	}
+
+	.np-month-panel :global(.np-date-picker-header) {
+		margin-inline: 0.75rem;
+	}
+
+	.np-month-panel-views {
+		position: relative;
+		margin-top: 1.875rem;
+	}
+
+	.np-month-panel-days {
+		padding-inline: 0.75rem;
+	}
+
+	.np-month-panel-list {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+		visibility: hidden;
+	}
+
+	.np-month-panel-list.open {
+		visibility: visible;
+	}
+
+	.np-month-panel-shade {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		translate: 0 -100%;
+		opacity: 0.6;
+		background-color: var(--np-menu-container-color, var(--np-color-surface-container-high));
+	}
+
+	.open .np-month-panel-shade {
+		translate: 0 0;
+		opacity: 1;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		/* Hidden only once the list has slid away. It shows at once, as a list still hidden while it
+		   starts to slide in cannot take focus. */
+		.np-month-panel-list {
+			transition: visibility var(--np-motion-expressive-default-effects);
+		}
+
+		.np-month-panel-list.open {
+			transition: none;
+		}
+
+		.np-month-panel-shade {
+			transition:
+				translate var(--np-motion-expressive-default-effects),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+
+		.open .np-month-panel-shade {
+			transition:
+				translate var(--np-motion-expressive-default-effects),
+				opacity var(--np-motion-expressive-default-effects);
+
+			@starting-style {
+				translate: 0 -100%;
+				opacity: 0.6;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,12 @@
+import type { MonthPanelProps } from './internalTypes.js';
+declare const MonthPanel: import("svelte").Component<MonthPanelProps, {
+    /** Focuses the day that takes focus. */ focus: () => void | undefined;
+    /** Back to the days, for the next time the picker opens. */ reset: () => void;
+    /**
+         * The keys of the picker, for its whole menu: Shift+M and Shift+Y from anywhere in it, Page up
+         * and Page down from the header, as the arrows they stand for. Escape with a list open goes back
+         * to the days, before a second one closes the picker.
+         */ handleKeydown: (event: KeyboardEvent) => void;
+}, "">;
+type MonthPanel = ReturnType<typeof MonthPanel>;
+export default MonthPanel;

package/dist/date-picker/SelectionList.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
@@ -29,7 +30,12 @@
 			aria-selected={selected}
 			aria-disabled={option.disabled}
 			tabindex={option.value === tabStopValue ? 0 : -1}
-			class={['np-date-picker-selection-option', selected && 'selected']}
+			class={[
+				'np-date-picker-selection-option',
+				'np-focus-ring',
+				'np-focus-ring-inset',
+				selected && 'selected',
+			]}
 			onclick={() => {
 				if (option.disabled) return
 				onselect?.(option.value)
@@ -114,9 +120,4 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-
-	.np-date-picker-selection-option:focus-visible {
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: -3px;
-	}
 </style>

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { TimeColumnProps } from './internalTypes.js';
 declare const SelectionList: import("svelte").Component<TimeColumnProps, {}, "">;
 type SelectionList = ReturnType<typeof SelectionList>;

package/dist/date-picker/TimeColumn.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import { arrowKeyNav } from '../keyboard-nav.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import { revealSelected, tabStop } from './optionList.js'
@@ -28,7 +29,7 @@
 			aria-selected={selected}
 			aria-disabled={option.disabled}
 			tabindex={option.value === tabStopValue ? 0 : -1}
-			class={['np-time-option', selected && 'selected']}
+			class={['np-time-option', 'np-focus-ring', 'np-focus-ring-inset', selected && 'selected']}
 			onclick={() => {
 				if (option.disabled) return
 				onselect?.(option.value)
@@ -106,9 +107,4 @@
 		cursor: default;
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 	}
-
-	.np-time-option:focus-visible {
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: -3px;
-	}
 </style>

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { TimeColumnProps } from './internalTypes.js';
 declare const TimeColumn: import("svelte").Component<TimeColumnProps, {}, "">;
 type TimeColumn = ReturnType<typeof TimeColumn>;

package/dist/date-picker/YearGrid.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import '../internal/focus-ring.css'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { Attachment } from 'svelte/attachments'
 	import type { HTMLAttributes } from 'svelte/elements'
@@ -98,6 +99,7 @@
 			tabindex={year === tabStopYear ? 0 : -1}
 			class={[
 				'np-date-picker-year',
+				'np-focus-ring',
 				selected && 'selected',
 				year === currentYear && !selected && 'current',
 			]}
@@ -132,12 +134,6 @@
 		scrollbar-width: thin;
 	}
 
-	.np-date-picker-year-grid.entering {
-		height: 0;
-		opacity: 0.6;
-		transition: none;
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
 		.np-date-picker-year-grid {
 			transition:
@@ -189,9 +185,4 @@
 		cursor: default;
 		color: color-mix(in srgb, var(--np-color-on-surface) 38%, transparent);
 	}
-
-	.np-date-picker-year:focus-visible {
-		outline: 3px solid var(--np-color-secondary);
-		outline-offset: 2px;
-	}
 </style>

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

@@ -1,3 +1,4 @@
+import '../internal/focus-ring.css';
 import type { HTMLAttributes } from 'svelte/elements';
 interface YearGridProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
     yearRange: [number, number];

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

@@ -31,6 +31,10 @@ export declare const getWeekdayLabels: (locale: string | undefined, firstDayOfWe
 export declare const getMonthNames: (locale: string | undefined, month: "long" | "short") => string[];
 export declare const formatDate: (date: Date, locale?: string) => string;
 export declare const formatDateMedium: (date: Date, locale?: string) => string;
+/** The headline of the modal picker, as M3 shows it: "Mon, Aug 17". */
+export declare const formatDateHeadline: (date: Date, locale?: string) => string;
+/** Each end in the headline of the range picker, as M3 shows it: "Aug 17". */
+export declare const formatMonthDay: (date: Date, locale?: string) => string;
 export declare const formatDateLong: (date: Date, locale?: string) => string;
 export declare const formatMonthYear: (date: Date, locale?: string) => string;
 export declare const getDatePattern: (locale?: string) => string;