noph-ui 0.52.0 → 0.53.0

package/dist/date-picker/dateUtils.js

@@ -1,5 +1,5 @@
-import { getFormatter, numericDateOptions, pad } from './formatters.js';
-import { getDayPeriodLabels, HOURS_IN_DAY, MINUTES_IN_HOUR, timeOptions, uses12HourClock, withMinutes, } from './timeUtils.js';
+import { getFormatter, getPattern, numericDateOptions, pad, readFields } from './formatters.js';
+import { getDayPeriodLabels, HOURS_IN_DAY, MINUTES_IN_HOUR, readHour, timeOptions, uses12HourClock, withMinutes, } from './timeUtils.js';
 export { compareTimes, formatMinutes, formatTime, formatTwoDigits, getDayPeriodLabels, getHourLabels, getTimePattern, HOURS_IN_DAY, isMinuteWithin, isTimeWithin, MINUTES_IN_DAY, MINUTES_IN_HOUR, minutesOfDay, parseISOTime, parseTimeInput, toISOTime, uses12HourClock, withMinutes, } from './timeUtils.js';
 export const DAYS_IN_WEEK = 7;
 export const MAX_CALENDAR_ROWS = 6;
@@ -93,37 +93,18 @@ export const getMonthNames = (locale, month) => {
 const numericOptions = numericDateOptions;
 export const formatDate = (date, locale) => getFormatter(locale, numericOptions).format(date);
 export const formatDateMedium = (date, locale) => getFormatter(locale, { year: 'numeric', month: 'short', day: 'numeric' }).format(date);
+/** The headline of the modal picker, as M3 shows it: "Mon, Aug 17". */
+export const formatDateHeadline = (date, locale) => getFormatter(locale, { weekday: 'short', month: 'short', day: 'numeric' }).format(date);
+/** Each end in the headline of the range picker, as M3 shows it: "Aug 17". */
+export const formatMonthDay = (date, locale) => getFormatter(locale, { month: 'short', day: 'numeric' }).format(date);
 export const formatDateLong = (date, locale) => getFormatter(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);
 export const formatMonthYear = (date, locale) => getFormatter(locale, { year: 'numeric', month: 'long' }).format(date);
-const getFieldOrder = (locale) => getFormatter(locale, numericOptions)
-    .formatToParts(new Date(2024, 0, 2))
-    .filter((part) => part.type === 'year' || part.type === 'month' || part.type === 'day')
-    .map((part) => part.type);
-export const getDatePattern = (locale) => getFormatter(locale, numericOptions)
-    .formatToParts(new Date(2024, 0, 2))
-    .map((part) => {
-    if (part.type === 'year')
-        return 'YYYY';
-    if (part.type === 'month')
-        return 'MM';
-    if (part.type === 'day')
-        return 'DD';
-    return part.value;
-})
-    .join('');
+export const getDatePattern = (locale) => getPattern(locale, numericOptions);
 export const parseDateInput = (value, locale) => {
-    const groups = value.match(/\d+/g);
-    if (!groups || groups.length !== 3)
+    const { year, month, day } = readFields(value, locale, numericOptions) ?? {};
+    if (year?.length !== 4 || !month || !day)
         return undefined;
-    const order = getFieldOrder(locale);
-    const year = order.indexOf('year');
-    const month = order.indexOf('month');
-    const day = order.indexOf('day');
-    if (year < 0 || month < 0 || day < 0)
-        return undefined;
-    if (groups[year].length !== 4)
-        return undefined;
-    return createDate(Number(groups[year]), Number(groups[month]) - 1, Number(groups[day]));
+    return createDate(Number(year), Number(month) - 1, Number(day));
 };
 const leadingOffset = (month, firstDayOfWeek) => (startOfMonth(month).getDay() - firstDayOfWeek + DAYS_IN_WEEK) % DAYS_IN_WEEK;
 export const getWeekRowCount = (month, firstDayOfWeek) => {
@@ -139,7 +120,6 @@ export const getCalendarDays = (month, firstDayOfWeek, rows = MAX_CALENDAR_ROWS)
         return { date, inMonth: date.getMonth() === first.getMonth() };
     });
 };
-const DATE_TIME_PROBE = new Date(2024, 0, 2, 13, 45);
 export const toISODateTime = (date) => `${toISODate(date)}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
 export const createDateTime = (year, month, day, hours, minutes) => {
     if (hours < 0 || hours >= HOURS_IN_DAY || minutes < 0 || minutes >= MINUTES_IN_HOUR) {
@@ -169,66 +149,13 @@ const dateTimeOptions = (hour12) => ({
     ...timeOptions(hour12),
 });
 export const formatDateTime = (date, locale, hour12 = uses12HourClock(locale)) => getFormatter(locale, dateTimeOptions(hour12)).format(date);
-export const getDateTimePattern = (locale, hour12 = uses12HourClock(locale)) => {
-    const [am, pm] = getDayPeriodLabels(locale);
-    return getFormatter(locale, dateTimeOptions(hour12))
-        .formatToParts(DATE_TIME_PROBE)
-        .map((part) => {
-        if (part.type === 'year')
-            return 'YYYY';
-        if (part.type === 'month')
-            return 'MM';
-        if (part.type === 'day')
-            return 'DD';
-        if (part.type === 'hour')
-            return hour12 ? 'hh' : 'HH';
-        if (part.type === 'minute')
-            return 'mm';
-        if (part.type === 'dayPeriod')
-            return `${am}/${pm}`;
-        return part.value;
-    })
-        .join('');
-};
-const getDateTimeFieldOrder = (locale, hour12) => getFormatter(locale, dateTimeOptions(hour12))
-    .formatToParts(DATE_TIME_PROBE)
-    .filter((part) => part.type === 'year' ||
-    part.type === 'month' ||
-    part.type === 'day' ||
-    part.type === 'hour' ||
-    part.type === 'minute')
-    .map((part) => part.type);
+export const getDateTimePattern = (locale, hour12 = uses12HourClock(locale)) => getPattern(locale, dateTimeOptions(hour12), getDayPeriodLabels(locale).join('/'));
 export const parseDateTimeInput = (value, locale, hour12 = uses12HourClock(locale)) => {
-    const groups = value.match(/\d+/g);
-    if (!groups || groups.length !== 5)
+    const { year, month, day, hour, minute } = readFields(value, locale, dateTimeOptions(hour12)) ?? {};
+    if (year?.length !== 4 || !month || !day || !hour || !minute)
         return undefined;
-    const order = getDateTimeFieldOrder(locale, hour12);
-    if (order.length !== 5)
+    const hours = readHour(hour, value, locale, hour12);
+    if (hours === undefined)
         return undefined;
-    const at = (field) => {
-        const index = order.indexOf(field);
-        return index < 0 ? undefined : groups[index];
-    };
-    const year = at('year');
-    const month = at('month');
-    const day = at('day');
-    const minute = at('minute');
-    const hour = at('hour');
-    if (!year || !month || !day || !hour || !minute)
-        return undefined;
-    if (year.length !== 4)
-        return undefined;
-    let hours = Number(hour);
-    if (hour12) {
-        const [am, pm] = getDayPeriodLabels(locale);
-        const text = value.toLocaleLowerCase(locale);
-        const isPm = text.includes(pm.toLocaleLowerCase(locale)) || /\bpm\b/.test(text);
-        const isAm = text.includes(am.toLocaleLowerCase(locale)) || /\bam\b/.test(text);
-        if (isPm === isAm)
-            return undefined;
-        if (hours > 12)
-            return undefined;
-        hours = (hours % 12) + (isPm ? 12 : 0);
-    }
     return createDateTime(Number(year), Number(month) - 1, Number(day), hours, Number(minute));
 };

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

@@ -1,22 +1,29 @@
 import { afterExit } from '../animation.js';
 export const exitVisibility = () => {
     let visible = $state(false);
-    let cancelExit;
-    $effect(() => () => cancelExit?.());
+    let pending;
+    $effect(() => () => pending?.cancel());
     return {
         get visible() {
             return visible;
         },
         show: () => {
-            cancelExit?.();
-            cancelExit = undefined;
+            // Opened again while the last close still animates: its cleanup runs now, so the new
+            // opening starts from the state a finished close leaves.
+            const unfinished = pending;
+            pending = undefined;
+            unfinished?.cancel();
+            unfinished?.onDone?.();
             visible = true;
         },
         scheduleExit: (element, onDone) => {
-            cancelExit = afterExit(element, () => {
+            const exit = { cancel: () => { }, onDone };
+            pending = exit;
+            exit.cancel = afterExit(element, () => {
+                if (pending === exit)
+                    pending = undefined;
                 visible = false;
                 onDone?.();
-                cancelExit = undefined;
             });
         },
     };

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

@@ -2,3 +2,19 @@ export declare const pad: (value: number, length?: number) => string;
 export declare const getFormatter: (locale: string | undefined, options: Intl.DateTimeFormatOptions) => Intl.DateTimeFormat;
 export declare const formatTwoDigits: (value: number, locale?: string) => string;
 export declare const numericDateOptions: Intl.DateTimeFormatOptions;
+/** A moment whose every field differs, to read a locale's format from. */
+export declare const PROBE: Date;
+type Field = 'year' | 'month' | 'day' | 'hour' | 'minute';
+/**
+ * A hint like `DD.MM.YYYY` or `hh:mm AM/PM` for a text field's supporting text, written the way the
+ * locale formats with `options`. `dayPeriod` stands in for the locale's AM and PM.
+ */
+export declare const getPattern: (locale: string | undefined, options: Intl.DateTimeFormatOptions, dayPeriod?: string) => string;
+/**
+ * Splits typed text into its numbers and names each by the field the locale writes in its place.
+ * The field order comes from the locale's own format rather than a per-locale regex. Digits typed
+ * without separators, such as 08172025, are cut into the fields when they fill them exactly. Text
+ * with a number too many or too few is not read.
+ */
+export declare const readFields: (value: string, locale: string | undefined, options: Intl.DateTimeFormatOptions) => Partial<Record<Field, string>> | undefined;
+export {};

package/dist/date-picker/formatters.js

@@ -2,25 +2,58 @@ export const pad = (value, length = 2) => `${value}`.padStart(length, '0');
 const formatterCache = new Map();
 export const getFormatter = (locale, options) => {
     const key = `${locale ?? ''}|${JSON.stringify(options)}`;
-    let formatter = formatterCache.get(key);
-    if (!formatter) {
-        formatter = new Intl.DateTimeFormat(locale, options);
-        formatterCache.set(key, formatter);
-    }
-    return formatter;
+    return formatterCache.getOrInsertComputed(key, () => new Intl.DateTimeFormat(locale, options));
 };
 const numberFormatterCache = new Map();
-export const formatTwoDigits = (value, locale) => {
-    const key = locale ?? '';
-    let formatter = numberFormatterCache.get(key);
-    if (!formatter) {
-        formatter = new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false });
-        numberFormatterCache.set(key, formatter);
-    }
-    return formatter.format(value);
-};
+export const formatTwoDigits = (value, locale) => numberFormatterCache
+    .getOrInsertComputed(locale ?? '', () => new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false }))
+    .format(value);
 export const numericDateOptions = {
     year: 'numeric',
     month: '2-digit',
     day: '2-digit',
 };
+/** A moment whose every field differs, to read a locale's format from. */
+export const PROBE = new Date(2024, 0, 2, 13, 45);
+const TOKENS = {
+    year: 'YYYY',
+    month: 'MM',
+    day: 'DD',
+    minute: 'mm',
+};
+/**
+ * A hint like `DD.MM.YYYY` or `hh:mm AM/PM` for a text field's supporting text, written the way the
+ * locale formats with `options`. `dayPeriod` stands in for the locale's AM and PM.
+ */
+export const getPattern = (locale, options, dayPeriod = '') => getFormatter(locale, options)
+    .formatToParts(PROBE)
+    .map((part) => {
+    if (part.type === 'hour')
+        return options.hour12 ? 'hh' : 'HH';
+    if (part.type === 'dayPeriod')
+        return dayPeriod;
+    return TOKENS[part.type] ?? part.value;
+})
+    .join('');
+const WIDTHS = { year: 4, month: 2, day: 2, hour: 2, minute: 2 };
+/**
+ * Splits typed text into its numbers and names each by the field the locale writes in its place.
+ * The field order comes from the locale's own format rather than a per-locale regex. Digits typed
+ * without separators, such as 08172025, are cut into the fields when they fill them exactly. Text
+ * with a number too many or too few is not read.
+ */
+export const readFields = (value, locale, options) => {
+    const order = getFormatter(locale, options)
+        .formatToParts(PROBE)
+        .map((part) => part.type)
+        .filter((type) => type in TOKENS || type === 'hour');
+    let groups = value.match(/\d+/g);
+    const digits = groups?.length === 1 && order.length > 1 ? groups[0] : '';
+    if (digits.length === order.reduce((sum, field) => sum + WIDTHS[field], 0)) {
+        let at = 0;
+        groups = order.map((field) => digits.slice(at, (at += WIDTHS[field])));
+    }
+    if (!groups || groups.length !== order.length)
+        return undefined;
+    return Object.fromEntries(order.map((field, index) => [field, groups[index]]));
+};

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

@@ -1,7 +1,65 @@
+import type { DockedFieldProps } from '../internal/fieldTypes.js';
+import type { TextFieldElement } from '../text-field/types.js';
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TimeOption } from './types.ts';
+import type { DatePickerShortcutLabels, TimeOption } from './types.ts';
 export interface TimeColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> {
     options: TimeOption[];
     value?: number;
     onselect?: (value: number) => void;
 }
+export interface DockedPickerFieldProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DockedFieldProps {
+    /** Names its classes and tokens, such as np-docked-date-picker. */
+    kind: 'date-picker' | 'date-time-picker' | 'time-picker';
+    value?: string | number | null;
+    /** The value the field holds, as the picker writes it. */
+    current: string | undefined;
+    /** The value a form reset brings back. */
+    resetValue: string | undefined;
+    menuElement?: HTMLDivElement;
+    /** The format to type in, shown as supporting text. */
+    pattern: string;
+    openLabel: string;
+    invalidMessage: string;
+    /** The value the field holds, as text in the field. */
+    format: () => string;
+    /** Typed text as a value the picker takes, or undefined. */
+    parse: (text: string) => string | undefined;
+    icon: Snippet;
+    onopen?: () => void;
+    /** Once the menu has closed and finished its animation. */
+    onclosed?: () => void;
+    onrestore?: () => void;
+    /** A usable value was typed. */
+    ontyped?: (value: string) => void;
+    /** A key pressed anywhere in the menu. */
+    onmenukeydown?: (event: KeyboardEvent) => void;
+    onchange?: (value: string | undefined) => void;
+    children: Snippet;
+}
+export interface MonthPanelProps {
+    /** The month on show, its first day. */
+    month: Date;
+    selected?: Date;
+    min?: Date;
+    max?: Date;
+    locale?: string;
+    firstDayOfWeek: number;
+    yearRange: [number, number];
+    isDateEnabled?: (date: Date) => boolean;
+    adjacentMonthDays?: boolean;
+    today: Date;
+    previousMonthLabel: string;
+    nextMonthLabel: string;
+    previousYearLabel: string;
+    nextYearLabel: string;
+    selectMonthLabel: string;
+    selectYearLabel: string;
+    selectedDateLabel: string;
+    shortcutLabels?: Partial<DatePickerShortcutLabels>;
+    /** Shows another month, given by any day in it. */
+    onmonth: (date: Date) => void;
+    onselect: (date: Date) => void;
+    /** Enter on a day, to save it and close. */
+    onconfirm?: (date: Date) => void;
+}

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

@@ -0,0 +1,11 @@
+import type { DatePickerShortcutLabels } from './types.ts';
+/** The keys a calendar takes, shown in the tooltips of the controls they stand for. */
+export declare const DEFAULT_SHORTCUT_LABELS: DatePickerShortcutLabels;
+/** A control's tooltip: what it does, then its key, as in "Previous year (Shift+Page up)". */
+export declare const withShortcut: (label: string, keys: string) => string;
+/**
+ * The picker key an event presses. The picker listens on the whole of itself, so the keys work
+ * wherever focus is in it. A text field takes them as typing, and the days take Page up and Page
+ * down first, as they move focus.
+ */
+export declare const pickerShortcut: (event: KeyboardEvent) => keyof DatePickerShortcutLabels | undefined;

package/dist/date-picker/shortcuts.js

@@ -0,0 +1,40 @@
+/** The keys a calendar takes, shown in the tooltips of the controls they stand for. */
+export const DEFAULT_SHORTCUT_LABELS = {
+    previousMonth: 'Page up',
+    nextMonth: 'Page down',
+    previousYear: 'Shift+Page up',
+    nextYear: 'Shift+Page down',
+    monthList: 'Shift+M',
+    yearList: 'Shift+Y',
+};
+/** A control's tooltip: what it does, then its key, as in "Previous year (Shift+Page up)". */
+export const withShortcut = (label, keys) => (keys ? `${label} (${keys})` : label);
+/**
+ * The picker key an event presses. The picker listens on the whole of itself, so the keys work
+ * wherever focus is in it. A text field takes them as typing, and the days take Page up and Page
+ * down first, as they move focus.
+ */
+export const pickerShortcut = (event) => {
+    if (event.defaultPrevented || event.ctrlKey || event.altKey || event.metaKey)
+        return undefined;
+    if (event.target instanceof Element && event.target.closest('input, textarea, [contenteditable]'))
+        return undefined;
+    if (event.key === 'PageUp')
+        return event.shiftKey ? 'previousYear' : 'previousMonth';
+    if (event.key === 'PageDown')
+        return event.shiftKey ? 'nextYear' : 'nextMonth';
+    if (!event.shiftKey)
+        return undefined;
+    // A layout without Latin letters, such as Cyrillic, has M and Y where QWERTY has them. Only a
+    // letter falls back to its key position, so a symbol on that key, like `?` on AZERTY, is typing.
+    if (!/^\p{L}$/u.test(event.key))
+        return undefined;
+    const letter = /^[a-z]$/i.test(event.key)
+        ? event.key.toLowerCase()
+        : event.code.slice(3).toLowerCase();
+    if (letter === 'm')
+        return 'monthList';
+    if (letter === 'y')
+        return 'yearList';
+    return undefined;
+};

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

@@ -10,6 +10,10 @@ export declare const toISOTime: (minutes: number) => string;
 export declare const parseISOTime: (value: ISOTime | number | null | undefined) => number | undefined;
 export declare const clampMinutes: (minutes: number, min?: number, max?: number) => number;
 export declare const isMinuteWithin: (minutes: number, min?: number, max?: number) => boolean;
+/** A minute step as the pickers use it: a whole number of at least 1. */
+export declare const stepOf: (minuteStep: number) => number;
+/** Whether an hour has a minute on the step grid that `usable` lets through. */
+export declare const isHourReachable: (hour: number, step: number, usable: (minutes: number) => boolean) => boolean;
 /**
  * Snaps the minute part to the nearest multiple of `step` without ever rolling into the next hour,
  * so dragging the dial past the last step lands on it rather than changing the hour.
@@ -27,8 +31,9 @@ export declare const formatMinutes: (minutes: number, locale?: string, hour12?:
 /** A hint like `HH:mm` or `hh:mm AM/PM`, for a text field's supporting text. */
 export declare const getTimePattern: (locale?: string, hour12?: boolean) => string;
 /**
- * Reads typed text as minutes since midnight. The field order comes from the locale's own format
- * rather than a per-locale regex, and the day period is matched against the locale's labels with an
- * `am`/`pm` fallback.
+ * Reads a typed hour as the hour of the day. A 12-hour clock takes 1 to 12 and needs its day period
+ * in `value`, matched against the locale's labels with an `am`/`pm` fallback.
  */
+export declare const readHour: (hour: string, value: string, locale: string | undefined, hour12: boolean) => number | undefined;
+/** Reads typed text as minutes since midnight. */
 export declare const parseTimeInput: (value: string, locale?: string, hour12?: boolean) => number | undefined;

package/dist/date-picker/timeUtils.js

@@ -1,9 +1,8 @@
-import { formatTwoDigits, getFormatter, pad } from './formatters.js';
+import { formatTwoDigits, getFormatter, getPattern, pad, PROBE, readFields } from './formatters.js';
 export { formatTwoDigits };
 export const MINUTES_IN_HOUR = 60;
 export const HOURS_IN_DAY = 24;
 export const MINUTES_IN_DAY = HOURS_IN_DAY * MINUTES_IN_HOUR;
-const TIME_PROBE = new Date(2024, 0, 2, 13, 45);
 export const minutesOfDay = (date) => date.getHours() * MINUTES_IN_HOUR + date.getMinutes();
 export const withMinutes = (date, minutes) => {
     const copy = new Date(date);
@@ -37,6 +36,16 @@ export const clampMinutes = (minutes, min, max) => {
     return minutes;
 };
 export const isMinuteWithin = (minutes, min, max) => (min === undefined || minutes >= min) && (max === undefined || minutes <= max);
+/** A minute step as the pickers use it: a whole number of at least 1. */
+export const stepOf = (minuteStep) => Math.max(1, Math.trunc(minuteStep) || 1);
+/** Whether an hour has a minute on the step grid that `usable` lets through. */
+export const isHourReachable = (hour, step, usable) => {
+    for (let minute = 0; minute < MINUTES_IN_HOUR; minute += step) {
+        if (usable(hour * MINUTES_IN_HOUR + minute))
+            return true;
+    }
+    return false;
+};
 /**
  * Snaps the minute part to the nearest multiple of `step` without ever rolling into the next hour,
  * so dragging the dial past the last step lands on it rather than changing the hour.
@@ -80,60 +89,33 @@ export const getHourLabels = (locale, hour12) => {
 };
 export const formatTime = (date, locale, hour12 = uses12HourClock(locale)) => getFormatter(locale, timeOptions(hour12)).format(date);
 /** The same as {@link formatTime}, taking minutes since midnight instead of a `Date`. */
-export const formatMinutes = (minutes, locale, hour12 = uses12HourClock(locale)) => formatTime(withMinutes(TIME_PROBE, minutes), locale, hour12);
+export const formatMinutes = (minutes, locale, hour12 = uses12HourClock(locale)) => formatTime(withMinutes(PROBE, minutes), locale, hour12);
 /** A hint like `HH:mm` or `hh:mm AM/PM`, for a text field's supporting text. */
-export const getTimePattern = (locale, hour12 = uses12HourClock(locale)) => {
-    const [am, pm] = getDayPeriodLabels(locale);
-    return getFormatter(locale, timeOptions(hour12))
-        .formatToParts(TIME_PROBE)
-        .map((part) => {
-        if (part.type === 'hour')
-            return hour12 ? 'hh' : 'HH';
-        if (part.type === 'minute')
-            return 'mm';
-        if (part.type === 'dayPeriod')
-            return `${am}/${pm}`;
-        return part.value;
-    })
-        .join('');
-};
-const getTimeFieldOrder = (locale, hour12) => getFormatter(locale, timeOptions(hour12))
-    .formatToParts(TIME_PROBE)
-    .filter((part) => part.type === 'hour' || part.type === 'minute')
-    .map((part) => part.type);
+export const getTimePattern = (locale, hour12 = uses12HourClock(locale)) => getPattern(locale, timeOptions(hour12), getDayPeriodLabels(locale).join('/'));
 /**
- * Reads typed text as minutes since midnight. The field order comes from the locale's own format
- * rather than a per-locale regex, and the day period is matched against the locale's labels with an
- * `am`/`pm` fallback.
+ * Reads a typed hour as the hour of the day. A 12-hour clock takes 1 to 12 and needs its day period
+ * in `value`, matched against the locale's labels with an `am`/`pm` fallback.
  */
-export const parseTimeInput = (value, locale, hour12 = uses12HourClock(locale)) => {
-    const groups = value.match(/\d+/g);
-    if (!groups || groups.length !== 2)
-        return undefined;
-    const order = getTimeFieldOrder(locale, hour12);
-    if (order.length !== 2)
-        return undefined;
-    const hour = groups[order.indexOf('hour')];
-    const minute = groups[order.indexOf('minute')];
-    if (hour === undefined || minute === undefined)
+export const readHour = (hour, value, locale, hour12) => {
+    const hours = Number(hour);
+    if (!hour12)
+        return hours < HOURS_IN_DAY ? hours : undefined;
+    const [am, pm] = getDayPeriodLabels(locale);
+    const text = value.toLocaleLowerCase(locale);
+    const isPm = text.includes(pm.toLocaleLowerCase(locale)) || /\bpm\b/.test(text);
+    const isAm = text.includes(am.toLocaleLowerCase(locale)) || /\bam\b/.test(text);
+    if (isPm === isAm || hours < 1 || hours > 12)
         return undefined;
-    let hours = Number(hour);
-    const minutes = Number(minute);
-    if (minutes >= MINUTES_IN_HOUR)
+    return (hours % 12) + (isPm ? 12 : 0);
+};
+/** Reads typed text as minutes since midnight. */
+export const parseTimeInput = (value, locale, hour12 = uses12HourClock(locale)) => {
+    const fields = readFields(value, locale, timeOptions(hour12));
+    if (!fields?.hour || !fields.minute)
         return undefined;
-    if (hour12) {
-        const [am, pm] = getDayPeriodLabels(locale);
-        const text = value.toLocaleLowerCase(locale);
-        const isPm = text.includes(pm.toLocaleLowerCase(locale)) || /\bpm\b/.test(text);
-        const isAm = text.includes(am.toLocaleLowerCase(locale)) || /\bam\b/.test(text);
-        if (isPm === isAm)
-            return undefined;
-        if (hours > 12 || hours < 1)
-            return undefined;
-        hours = (hours % 12) + (isPm ? 12 : 0);
-    }
-    else if (hours >= HOURS_IN_DAY) {
+    const hours = readHour(fields.hour, value, locale, hour12);
+    const minutes = Number(fields.minute);
+    if (hours === undefined || minutes >= MINUTES_IN_HOUR)
         return undefined;
-    }
     return hours * MINUTES_IN_HOUR + minutes;
 };

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

@@ -5,6 +5,8 @@ import type { TextFieldElement } from '../text-field/types.js';
 import type { HTMLAttributes } from 'svelte/elements';
 export type ISODate = string;
 export type ISODateTime = string;
+/** A modal picker's view: the calendar, or text fields to type into. */
+export type DatePickerMode = 'calendar' | 'input';
 export interface DateRange {
     start?: ISODate;
     end?: ISODate;
@@ -25,9 +27,20 @@ interface DatePickerCommonLabelProps {
     confirmLabel?: string;
     selectedDateLabel?: string;
 }
+/** The keys of a calendar's shortcuts, as its tooltips name them. */
+export interface DatePickerShortcutLabels {
+    previousMonth: string;
+    nextMonth: string;
+    previousYear: string;
+    nextYear: string;
+    monthList: string;
+    yearList: string;
+}
 interface MonthStepperLabelProps {
     nextMonthLabel?: string;
     previousMonthLabel?: string;
+    /** The keys named in the tooltips, in English by default. An empty one leaves its key out. */
+    shortcutLabels?: Partial<DatePickerShortcutLabels>;
 }
 interface DockedDateFieldProps extends DockedFieldProps {
     displayMonth?: ISODate;
@@ -78,6 +91,8 @@ export interface DatePickerDialogProps extends Omit<HTMLAttributes<HTMLDialogEle
     form?: string;
     title?: string;
     headline?: string;
+    /** The view it opens in. Bindable, so it holds the view a person switched to. */
+    mode?: DatePickerMode;
     modeToggle?: boolean;
     label?: string;
     supportingText?: string;
@@ -100,6 +115,11 @@ export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDialogElem
     form?: string;
     startLabel?: string;
     endLabel?: string;
+    /** The view it opens in. Bindable, so it holds the view a person switched to. */
+    mode?: DatePickerMode;
+    modeToggle?: boolean;
+    calendarModeLabel?: string;
+    inputModeLabel?: string;
     onchange?: (value: DateRange) => void;
     onconfirm?: (value: DateRange) => void;
     oncancel?: () => void;
@@ -123,6 +143,8 @@ export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onc
     tabStopDate?: Date;
     focusRoot?: HTMLElement;
     onselect?: (date: Date) => void;
+    /** Enter on a day: the picker saves it and closes. Without it, Enter picks the day as a click does. */
+    onconfirm?: (date: Date) => void;
     onfocusday?: (date: Date) => void;
     onmonthstep?: (delta: number) => void;
     monthSubhead?: Snippet<[string]>;

package/dist/icons/Icon.svelte

@@ -22,13 +22,10 @@
 		text-transform: none;
 		display: inline-block;
 		white-space: nowrap;
-		word-wrap: normal;
+		overflow-wrap: normal;
 		direction: ltr;
 		font-feature-settings: 'liga';
-		-webkit-font-feature-settings: 'liga';
 		-webkit-font-smoothing: antialiased;
-		transition-property: font-variation-settings;
-		transition-timing-function: ease-in;
 		transition: font-variation-settings 0.3s;
 		font-variation-settings: var(--np-icon-settings, 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24);
 	}

package/dist/internal/exit.css

@@ -1,10 +1,4 @@
-/* Browsers without an `overlay` transition, such as Safari, drop a closing dialog or popover from
-   the top layer at once, so its exit animation would never show. While it animates out it carries
-   data-np-exiting (see exitAnimation in animation.ts) and these rules keep it shown, over the page
-   but not blocking it. Browsers with the transition keep it in the top layer themselves. */
 @supports not (overlay: auto) {
-	/* Important, as each component hides its closed state with a rule of its own, scoped and so
-	   more specific than this one. It only ever holds for the moment of leaving. */
 	[popover][data-np-exiting]:not(:popover-open),
 	dialog[data-np-exiting]:not([open]) {
 		display: var(--np-exit-display, block) !important;
@@ -12,18 +6,11 @@
 		pointer-events: none !important;
 	}
 
-	/* A closed dialog is no longer :modal and would lose its place. Components that place their
-	   dialog themselves win over this. */
 	:where(dialog[data-np-exiting]:not([open])) {
 		position: fixed;
 		inset-block: 0;
 	}
 
-	/* Its ::backdrop is gone as well, so a dialog with a scrim draws one of its own that fades: a
-	   wide shadow around it, and one inside for a dialog whose box is transparent, as it sits under
-	   the content. A shadow rather than a pseudo element covers the screen even while the dialog
-	   moves. A dialog that is its own surface turns the inner one off with
-	   --np-exit-scrim-inner: 0 0 transparent. */
 	dialog.np-exit-scrim[data-np-exiting]:not([open]) {
 		--np-exit-scrim-color: color-mix(in srgb, var(--np-color-scrim) 32%, transparent);
 		box-shadow:
@@ -39,7 +26,6 @@
 	}
 }
 
-/* Registered, so the scrim's colour can fade. */
 @property --np-exit-scrim-color {
 	syntax: '<color>';
 	inherits: false;