noph-ui 0.46.1 → 0.47.0

package/README.md

@@ -73,7 +73,8 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 [Select](https://noph.dev/components/select) ·
 [Slider](https://noph.dev/components/slider) ·
 [Switch](https://noph.dev/components/switch) ·
-[Text fields](https://noph.dev/components/text-field)
+[Text fields](https://noph.dev/components/text-field) ·
+[TimePicker](https://noph.dev/components/time-picker)
 
 **Navigation**
 [Menus](https://noph.dev/components/menu) ·

package/dist/button/ButtonGroup.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { reducedMotion } from '../media.js'
 	import { onMount } from 'svelte'
-	import { MediaQuery } from 'svelte/reactivity'
 	import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
 	import type { ButtonGroupProps } from './types.js'
 
@@ -13,8 +13,6 @@
 		...attributes
 	}: ButtonGroupProps = $props()
 
-	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
-
 	const settleRatio = 0.75
 
 	type Timing = { duration: number; easing: string }

package/dist/date-picker/DockedDatePicker.svelte

@@ -4,7 +4,7 @@
 	import Divider from '../divider/Divider.svelte'
 	import CalendarToday from '../icons/CalendarToday.svelte'
 	import Menu from '../menu/Menu.svelte'
-	import { onFormReset } from '../form-reset.js'
+	import { formReset } from '../form-reset.js'
 	import { syncOpenEffect } from '../popover.svelte.js'
 	import TextField from '../text-field/TextField.svelte'
 	import { onMount, tick } from 'svelte'
@@ -197,8 +197,6 @@
 		})
 	}
 
-	$effect(() => onFormReset(valueInput, restoreDefault))
-
 	const isShowing = () => !!menuElement?.matches(':popover-open')
 
 	const openPicker = () => {
@@ -343,6 +341,7 @@
 </TextField>
 <input
 	bind:this={valueInput}
+	{@attach formReset(restoreDefault)}
 	class="np-docked-date-picker-value"
 	type="hidden"
 	value={current ?? ''}

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -4,7 +4,7 @@
 	import Divider from '../divider/Divider.svelte'
 	import CalendarToday from '../icons/CalendarToday.svelte'
 	import Menu from '../menu/Menu.svelte'
-	import { onFormReset } from '../form-reset.js'
+	import { formReset } from '../form-reset.js'
 	import { syncOpenEffect } from '../popover.svelte.js'
 	import TextField from '../text-field/TextField.svelte'
 	import { onMount, tick } from 'svelte'
@@ -278,8 +278,6 @@
 		})
 	}
 
-	$effect(() => onFormReset(valueInput, restoreDefault))
-
 	const isShowing = () => !!menuElement?.matches(':popover-open')
 
 	const openPicker = () => {
@@ -436,6 +434,7 @@
 </TextField>
 <input
 	bind:this={valueInput}
+	{@attach formReset(restoreDefault)}
 	class="np-docked-date-time-picker-value"
 	type="hidden"
 	value={current ?? ''}

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

@@ -1,3 +1,5 @@
+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 type { ISOTime } from './timeUtils.js';
 export declare const DAYS_IN_WEEK = 7;
 export declare const MAX_CALENDAR_ROWS = 6;
 export declare const DEFAULT_YEAR_RANGE: [number, number];
@@ -39,22 +41,9 @@ export interface CalendarDay {
 }
 export declare const getWeekRowCount: (month: Date, firstDayOfWeek: number) => number;
 export declare const getCalendarDays: (month: Date, firstDayOfWeek: number, rows?: number) => CalendarDay[];
-export declare const MINUTES_IN_HOUR = 60;
-export declare const HOURS_IN_DAY = 24;
-export declare const MINUTES_IN_DAY: number;
-export declare const minutesOfDay: (date: Date) => number;
-export declare const withMinutes: (date: Date, minutes: number) => Date;
-export declare const toISOTime: (minutes: number) => string;
 export declare const toISODateTime: (date: Date) => string;
 export declare const createDateTime: (year: number, month: number, day: number, hours: number, minutes: number) => Date | undefined;
 export declare const parseISODateTime: (value: string | null | undefined, dateOnlyMinutes?: number) => Date | undefined;
-export declare const compareTimes: (a: Date, b: Date) => number;
-export declare const isTimeWithin: (date: Date, min?: Date, max?: Date) => boolean;
-export declare const uses12HourClock: (locale?: string) => boolean;
-export declare const getDayPeriodLabels: (locale?: string) => [string, string];
-export declare const getHourLabels: (locale: string | undefined, hour12: boolean) => string[];
-export declare const formatTwoDigits: (value: number, locale?: string) => string;
-export declare const formatTime: (date: Date, locale?: string, hour12?: boolean) => string;
 export declare const formatDateTime: (date: Date, locale?: string, hour12?: boolean) => string;
 export declare const getDateTimePattern: (locale?: string, hour12?: boolean) => string;
 export declare const parseDateTimeInput: (value: string, locale?: string, hour12?: boolean) => Date | undefined;

package/dist/date-picker/dateUtils.js

@@ -1,7 +1,9 @@
+import { getFormatter, numericDateOptions, pad } from './formatters.js';
+import { getDayPeriodLabels, HOURS_IN_DAY, MINUTES_IN_HOUR, 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;
 export const DEFAULT_YEAR_RANGE = [1900, 2100];
-const pad = (value, length = 2) => `${value}`.padStart(length, '0');
 export const toISODate = (date) => `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 export const parseISODate = (value) => {
     if (!value)
@@ -62,16 +64,6 @@ export const clampMonthInYear = (year, month, min, max) => {
     const upper = max && year === max.getFullYear() ? max.getMonth() : 11;
     return Math.min(Math.max(month, lower), upper);
 };
-const formatterCache = new Map();
-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;
-};
 export const getFirstDayOfWeek = (locale) => {
     try {
         const resolved = new Intl.Locale(locale ?? getFormatter(locale, {}).resolvedOptions().locale);
@@ -98,11 +90,7 @@ export const getMonthNames = (locale, month) => {
     const formatter = getFormatter(locale, { month });
     return Array.from({ length: 12 }, (_, index) => formatter.format(new Date(2024, index, 1)));
 };
-const numericOptions = {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-};
+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);
 export const formatDateLong = (date, locale) => getFormatter(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(date);
@@ -151,17 +139,7 @@ export const getCalendarDays = (month, firstDayOfWeek, rows = MAX_CALENDAR_ROWS)
         return { date, inMonth: date.getMonth() === first.getMonth() };
     });
 };
-export const MINUTES_IN_HOUR = 60;
-export const HOURS_IN_DAY = 24;
-export const MINUTES_IN_DAY = HOURS_IN_DAY * MINUTES_IN_HOUR;
 const DATE_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);
-    copy.setHours(Math.floor(minutes / MINUTES_IN_HOUR), minutes % MINUTES_IN_HOUR, 0, 0);
-    return copy;
-};
-export const toISOTime = (minutes) => `${pad(Math.floor(minutes / MINUTES_IN_HOUR))}:${pad(minutes % MINUTES_IN_HOUR)}`;
 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) {
@@ -186,50 +164,10 @@ export const parseISODateTime = (value, dateOnlyMinutes = 0) => {
     }
     return createDateTime(Number(year), Number(month) - 1, Number(day), Number(hours), Number(minutes));
 };
-const minuteStamp = (date) => {
-    const copy = new Date(date);
-    copy.setSeconds(0, 0);
-    return copy.getTime();
-};
-export const compareTimes = (a, b) => minuteStamp(a) - minuteStamp(b);
-export const isTimeWithin = (date, min, max) => (!min || compareTimes(date, min) >= 0) && (!max || compareTimes(date, max) <= 0);
-const hourOptions = (hour12) => ({
-    hour: '2-digit',
-    hour12,
-});
-const timeOptions = (hour12) => ({
-    ...hourOptions(hour12),
-    minute: '2-digit',
-});
 const dateTimeOptions = (hour12) => ({
     ...numericOptions,
     ...timeOptions(hour12),
 });
-export const uses12HourClock = (locale) => getFormatter(locale, { hour: 'numeric' }).resolvedOptions().hour12 ?? false;
-export const getDayPeriodLabels = (locale) => {
-    const formatter = getFormatter(locale, { hour: 'numeric', hour12: true });
-    const label = (hour, fallback) => formatter.formatToParts(new Date(2024, 0, 2, hour)).find((part) => part.type === 'dayPeriod')
-        ?.value ?? fallback;
-    return [label(9, 'AM'), label(21, 'PM')];
-};
-export const getHourLabels = (locale, hour12) => {
-    const formatter = getFormatter(locale, hourOptions(hour12));
-    return Array.from({ length: hour12 ? 12 : HOURS_IN_DAY }, (_, hour) => {
-        const parts = formatter.formatToParts(new Date(2024, 0, 2, hour));
-        return parts.find((part) => part.type === 'hour')?.value ?? `${hour}`;
-    });
-};
-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 formatTime = (date, locale, hour12 = uses12HourClock(locale)) => getFormatter(locale, timeOptions(hour12)).format(date);
 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);

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

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

package/dist/date-picker/formatters.js

@@ -0,0 +1,26 @@
+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;
+};
+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 numericDateOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+};

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

@@ -0,0 +1,34 @@
+import { formatTwoDigits } from './formatters.js';
+export { formatTwoDigits };
+export type ISOTime = string;
+export declare const MINUTES_IN_HOUR = 60;
+export declare const HOURS_IN_DAY = 24;
+export declare const MINUTES_IN_DAY: number;
+export declare const minutesOfDay: (date: Date) => number;
+export declare const withMinutes: (date: Date, minutes: number) => Date;
+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;
+/**
+ * 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.
+ */
+export declare const snapToStep: (minutes: number, step: number) => number;
+export declare const timeOptions: (hour12: boolean) => Intl.DateTimeFormatOptions;
+export declare const compareTimes: (a: Date, b: Date) => number;
+export declare const isTimeWithin: (date: Date, min?: Date, max?: Date) => boolean;
+export declare const uses12HourClock: (locale?: string) => boolean;
+export declare const getDayPeriodLabels: (locale?: string) => [string, string];
+export declare const getHourLabels: (locale: string | undefined, hour12: boolean) => string[];
+export declare const formatTime: (date: Date, locale?: string, hour12?: boolean) => string;
+/** The same as {@link formatTime}, taking minutes since midnight instead of a `Date`. */
+export declare const formatMinutes: (minutes: number, locale?: string, hour12?: boolean) => string;
+/** 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.
+ */
+export declare const parseTimeInput: (value: string, locale?: string, hour12?: boolean) => number | undefined;

package/dist/date-picker/timeUtils.js

@@ -0,0 +1,139 @@
+import { formatTwoDigits, getFormatter, pad } 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);
+    copy.setHours(Math.floor(minutes / MINUTES_IN_HOUR), minutes % MINUTES_IN_HOUR, 0, 0);
+    return copy;
+};
+export const toISOTime = (minutes) => `${pad(Math.floor(minutes / MINUTES_IN_HOUR))}:${pad(minutes % MINUTES_IN_HOUR)}`;
+export const parseISOTime = (value) => {
+    if (value === null || value === undefined || value === '')
+        return undefined;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value))
+            return undefined;
+        const minutes = Math.trunc(value);
+        return minutes >= 0 && minutes < MINUTES_IN_DAY ? minutes : undefined;
+    }
+    const match = /^(\d{1,2}):(\d{2})(?::\d{2}(?:\.\d+)?)?$/.exec(value.trim());
+    if (!match)
+        return undefined;
+    const hours = Number(match[1]);
+    const minutes = Number(match[2]);
+    if (hours >= HOURS_IN_DAY || minutes >= MINUTES_IN_HOUR)
+        return undefined;
+    return hours * MINUTES_IN_HOUR + minutes;
+};
+export const clampMinutes = (minutes, min, max) => {
+    if (min !== undefined && minutes < min)
+        return min;
+    if (max !== undefined && minutes > max)
+        return max;
+    return minutes;
+};
+export const isMinuteWithin = (minutes, min, max) => (min === undefined || minutes >= min) && (max === undefined || minutes <= max);
+/**
+ * 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.
+ */
+export const snapToStep = (minutes, step) => {
+    if (!Number.isFinite(step) || step <= 1)
+        return minutes;
+    const hour = Math.floor(minutes / MINUTES_IN_HOUR);
+    const last = Math.floor((MINUTES_IN_HOUR - 1) / step) * step;
+    const snapped = Math.min(Math.round((minutes % MINUTES_IN_HOUR) / step) * step, last);
+    return hour * MINUTES_IN_HOUR + snapped;
+};
+const hourOptions = (hour12) => ({
+    hour: '2-digit',
+    hour12,
+});
+export const timeOptions = (hour12) => ({
+    ...hourOptions(hour12),
+    minute: '2-digit',
+});
+const minuteStamp = (date) => {
+    const copy = new Date(date);
+    copy.setSeconds(0, 0);
+    return copy.getTime();
+};
+export const compareTimes = (a, b) => minuteStamp(a) - minuteStamp(b);
+export const isTimeWithin = (date, min, max) => (!min || compareTimes(date, min) >= 0) && (!max || compareTimes(date, max) <= 0);
+export const uses12HourClock = (locale) => getFormatter(locale, { hour: 'numeric' }).resolvedOptions().hour12 ?? false;
+export const getDayPeriodLabels = (locale) => {
+    const formatter = getFormatter(locale, { hour: 'numeric', hour12: true });
+    const label = (hour, fallback) => formatter.formatToParts(new Date(2024, 0, 2, hour)).find((part) => part.type === 'dayPeriod')
+        ?.value ?? fallback;
+    return [label(9, 'AM'), label(21, 'PM')];
+};
+export const getHourLabels = (locale, hour12) => {
+    const formatter = getFormatter(locale, hourOptions(hour12));
+    return Array.from({ length: hour12 ? 12 : HOURS_IN_DAY }, (_, hour) => {
+        const parts = formatter.formatToParts(new Date(2024, 0, 2, hour));
+        return parts.find((part) => part.type === 'hour')?.value ?? `${hour}`;
+    });
+};
+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);
+/** 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);
+/**
+ * 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.
+ */
+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)
+        return undefined;
+    let hours = Number(hour);
+    const minutes = Number(minute);
+    if (minutes >= MINUTES_IN_HOUR)
+        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) {
+        return undefined;
+    }
+    return hours * MINUTES_IN_HOUR + minutes;
+};

package/dist/fab/FabMenu.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+	import { reducedMotion } from '../media.js'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
 	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import { PRESS_DURATION } from '../press.svelte.js'
 	import { onMount } from 'svelte'
-	import { MediaQuery } from 'svelte/reactivity'
 	import Fab from './Fab.svelte'
 	import type { FabMenuProps } from './types.js'
 
@@ -27,7 +27,6 @@
 	const anchorName = `--np-fab-menu-${uid}`
 
 	let menuElement: HTMLDivElement | undefined = $state()
-	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
 
 	const ITEMS = 'button, a[href], [role="menuitem"]'
 	const attach = rovingTabindex(ITEMS)

package/dist/form-reset.d.ts

@@ -1 +1,2 @@
-export declare const onFormReset: (control: HTMLInputElement | HTMLSelectElement | undefined, restore: () => void) => (() => void) | undefined;
+import type { Attachment } from 'svelte/attachments';
+export declare const formReset: (restore: () => void) => Attachment<HTMLInputElement | HTMLSelectElement>;

package/dist/form-reset.js

@@ -1,6 +1,6 @@
 import { on } from 'svelte/events';
-export const onFormReset = (control, restore) => {
-    const form = control?.form;
+export const formReset = (restore) => (control) => {
+    const form = control.form;
     if (!form)
         return;
     return on(form, 'reset', restore);

package/dist/icons/KeyboardIcon.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+	><path
+		d="M160-200q-33 0-56.5-23.5T80-280v-400q0-33 23.5-56.5T160-760h640q33 0 56.5 23.5T880-680v400q0 33-23.5 56.5T800-200H160Zm0-80h640v-400H160v400Zm160-40h320v-80H320v80ZM200-440h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM200-560h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80Zm120 0h80v-80h-80v80ZM160-280v-400 400Z"
+	/></svg
+>

package/dist/icons/KeyboardIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default KeyboardIcon;
+type KeyboardIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const KeyboardIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/ScheduleIcon.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"
+	><path
+		d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"
+	/></svg
+>

package/dist/icons/ScheduleIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ScheduleIcon;
+type ScheduleIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ScheduleIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/index.d.ts

@@ -8,4 +8,6 @@ export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as KeyboardIcon } from './KeyboardIcon.svelte';
+export { default as ScheduleIcon } from './ScheduleIcon.svelte';
 export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/icons/index.js

@@ -8,4 +8,6 @@ export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as KeyboardIcon } from './KeyboardIcon.svelte';
+export { default as ScheduleIcon } from './ScheduleIcon.svelte';
 export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/index.d.ts

@@ -26,5 +26,6 @@ export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './time-picker/index.js';
 export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/index.js

@@ -26,5 +26,6 @@ export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './time-picker/index.js';
 export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/keyboard-nav.js

@@ -1,3 +1,4 @@
+import { on } from 'svelte/events';
 const focusable = (items) => items.filter((item) => !item.matches(':disabled'));
 const focusedItem = (node, itemSelector, items) => {
     const active = document.activeElement;
@@ -32,7 +33,7 @@ export const rovingTabindex = (itemSelector, options = {}) => {
             setTabstop(target);
         };
         sync();
-        node.addEventListener('focusin', onFocusIn);
+        const offFocusIn = on(node, 'focusin', onFocusIn);
         const observer = new MutationObserver(sync);
         observer.observe(node, {
             attributes: true,
@@ -41,7 +42,7 @@ export const rovingTabindex = (itemSelector, options = {}) => {
             childList: true,
         });
         return () => {
-            node.removeEventListener('focusin', onFocusIn);
+            offFocusIn();
             observer.disconnect();
         };
     };

package/dist/media.d.ts

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

package/dist/media.js

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

package/dist/menu/Menu.svelte

@@ -13,6 +13,7 @@
 		open = $bindable(),
 		style,
 		popover = 'auto',
+		role = 'menu',
 		anchor,
 		coverAnchor = true,
 		ontoggle,
@@ -71,7 +72,7 @@
 <svelte:window bind:innerHeight onresize={refreshValues} />
 <div
 	{...attributes}
-	role="menu"
+	{role}
 	bind:this={element}
 	ontoggle={(event) => {
 		let { newState } = event