noph-ui 0.39.1 → 0.40.1

package/dist/checkbox/Checkbox.svelte

@@ -7,13 +7,14 @@
 		checked = $bindable(),
 		element = $bindable(),
 		group = $bindable(),
-		error = false,
+		issues,
 		style,
 		value,
 		...attributes
 	}: CheckboxProps = $props()
 
 	let inputEl: HTMLInputElement | undefined = $state()
+	let hasError = $derived(!!issues?.length)
 
 	let groupValue = $derived(
 		typeof value === 'string' || typeof value === 'number' ? value : undefined,
@@ -39,7 +40,7 @@
 
 <div
 	{style}
-	class={['np-container', error && !attributes.disabled && 'np-error', attributes.class]}
+	class={['np-container', hasError && !attributes.disabled && 'np-error', attributes.class]}
 	bind:this={element}
 >
 	<div class="np-outline"></div>
@@ -62,7 +63,7 @@
 				bind:this={inputEl}
 				checked={groupChecked}
 				{onchange}
-				aria-invalid={error ? 'true' : undefined}
+				aria-invalid={hasError ? 'true' : undefined}
 				aria-checked={indeterminate ? 'mixed' : undefined}
 			/>
 		{:else}
@@ -74,7 +75,7 @@
 				bind:indeterminate
 				bind:checked
 				bind:this={inputEl}
-				aria-invalid={error ? 'true' : undefined}
+				aria-invalid={hasError ? 'true' : undefined}
 				aria-checked={indeterminate ? 'mixed' : undefined}
 			/>
 		{/if}

package/dist/checkbox/types.d.ts

@@ -2,5 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
     group?: (string | number)[] | null;
-    error?: boolean;
+    issues?: {
+        message: string;
+    }[];
 }

package/dist/date-picker/DockedDatePicker.svelte

@@ -4,6 +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 TextField from '../text-field/TextField.svelte'
 	import { onMount, tick } from 'svelte'
 	import Calendar from './Calendar.svelte'
@@ -32,6 +33,11 @@
 
 	let {
 		value = $bindable(),
+		defaultValue,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
+		type,
+		'aria-invalid': ariaInvalid,
+		style,
 		displayMonth = $bindable(),
 		open = $bindable(false),
 		element = $bindable(),
@@ -65,6 +71,8 @@
 		invalidDateMessage = 'Enter a valid date.',
 		selectedDateLabel = 'selected',
 		onchange,
+		oninput,
+		onblur,
 		...attributes
 	}: DockedDatePickerProps = $props()
 
@@ -72,23 +80,27 @@
 
 	const uid = $props.id()
 
-	let anchorElement = $state<HTMLDivElement>()
 	let menuElement = $state<HTMLDivElement>()
 	let mode = $state<'days' | 'months' | 'years'>('days')
 	let listMode = $state<'months' | 'years' | undefined>(undefined)
 	let pending = $state<ISODate | undefined>(undefined)
 	let focusedDay = $state<Date | undefined>(undefined)
 	let inputElement = $state<HTMLInputElement | HTMLTextAreaElement>()
+	let valueInput = $state<HTMLInputElement>()
 
 	let typed = $state.raw<{ source: ISODate | null | undefined; text: string } | undefined>()
 	let invalidText = $state<string | undefined>()
 	let monthBeforeOpen: ISODate | undefined
 
+	let current = $derived<ISODate | undefined>(
+		typeof value === 'string' ? value : typeof defaultValue === 'string' ? defaultValue : undefined,
+	)
+
 	let todayValue = $derived(getToday())
 	let week = $derived(firstDayOfWeek ?? getFirstDayOfWeek(locale))
 	let minDate = $derived(parseISODate(min))
 	let maxDate = $derived(parseISODate(max))
-	let committed = $derived(parseISODate(value))
+	let committed = $derived(parseISODate(current))
 	let pendingDate = $derived(open ? parseISODate(pending) : committed)
 	let mounted = $state(false)
 
@@ -122,7 +134,7 @@
 		return localeKnown ? formatDate(committed, locale) : toISODate(committed)
 	}
 
-	let text = $derived(typed && typed.source === value ? typed.text : formatValue())
+	let text = $derived(typed && typed.source === current ? typed.text : formatValue())
 
 	let inputInvalid = $derived(invalidText !== undefined && invalidText === text)
 
@@ -167,11 +179,25 @@
 	}
 
 	const commit = (next: ISODate | undefined) => {
-		if (value === next) return
+		if (current === next) return
 		value = next
 		onchange?.(next)
 	}
 
+	const restoreDefault = () => {
+		const next = typeof defaultValue === 'string' ? defaultValue : undefined
+		if (valueInput) valueInput.value = next ?? ''
+		queueMicrotask(() => {
+			typed = undefined
+			invalidText = undefined
+			pending = undefined
+			value = next
+			text = formatValue()
+		})
+	}
+
+	$effect(() => onFormReset(valueInput, restoreDefault))
+
 	const isShowing = () => !!menuElement?.matches(':popover-open')
 
 	const openPicker = () => {
@@ -200,7 +226,7 @@
 	const closePicker = (restoreFocus = true) => {
 		menuElement?.hidePopover()
 		if (restoreFocus) {
-			anchorElement?.querySelector<HTMLElement>('input')?.focus()
+			element?.querySelector<HTMLElement>('input')?.focus()
 		}
 	}
 
@@ -230,7 +256,7 @@
 		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: value, text: next }
+		typed = { source: current, text: next }
 		invalidText = undefined
 	}
 
@@ -266,182 +292,181 @@
 	}
 </script>
 
-<div {...attributes} bind:this={element} class={['np-docked-date-picker', attributes.class]}>
-	<div class="np-docked-date-picker-anchor" bind:this={anchorElement} style:anchor-name="--{uid}">
-		<TextField
-			{label}
-			{variant}
-			{issues}
+<TextField
+	{...attributes}
+	class={['np-docked-date-picker', attributes.class]}
+	style={`anchor-name:--${uid};${style ?? ''}`}
+	{label}
+	{variant}
+	{issues}
+	{disabled}
+	{readonly}
+	{required}
+	{noAsterisk}
+	{autocomplete}
+	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)
+	}}
+>
+	{#snippet end()}
+		<IconButton
+			type="button"
+			aria-label={openCalendarLabel}
+			aria-expanded={open}
+			aria-haspopup="dialog"
+			aria-controls={open ? `${uid}-calendar` : undefined}
 			{disabled}
-			{readonly}
-			{required}
-			{noAsterisk}
-			{autocomplete}
-			supportingText={supportingText ?? pattern}
-			bind:value={text}
-			bind:inputElement
-			aria-invalid={inputInvalid || issues?.length ? 'true' : undefined}
-			oninput={handleInput}
-			onblur={handleBlur}
+			onclick={() => {
+				if (open) closePicker()
+				else openPicker()
+			}}
 		>
-			{#snippet end()}
-				<IconButton
-					type="button"
-					aria-label={openCalendarLabel}
-					aria-expanded={open}
-					aria-haspopup="dialog"
-					aria-controls={open ? `${uid}-calendar` : undefined}
-					{disabled}
-					onclick={() => {
-						if (open) closePicker()
-						else openPicker()
-					}}
-				>
-					<CalendarToday />
-				</IconButton>
-			{/snippet}
-		</TextField>
-		<input
-			class="np-docked-date-picker-value"
-			type="hidden"
-			value={value ?? ''}
-			{name}
-			{form}
-			{disabled}
-		/>
-	</div>
-
-	<Menu
-		id="{uid}-calendar"
-		role="dialog"
-		aria-label={label}
-		aria-modal="false"
-		class="np-docked-date-picker-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-container-color="var(--np-docked-date-picker-container-color, var(--np-color-surface-container-high))"
-		--np-menu-container-shape="var(--np-docked-date-picker-container-shape, var(--np-shape-corner-large))"
-		anchor={anchorElement}
-		bind:element={menuElement}
-		bind:open
-		ontoggle={({ newState }) => {
-			if (newState === 'open') {
-				monthBeforeOpen = displayMonth
-				pending = value ?? undefined
-				focusCalendarWhenReady()
-			}
-			if (newState === 'closed') {
-				setMode('days')
-				listMode = undefined
-				focusedDay = undefined
-				displayMonth = monthBeforeOpen
-			}
-		}}
-	>
-		{#if open}
-			<div class="np-docked-date-picker-container" style:--np-calendar-rows={rowCount}>
-				<CalendarHeader
-					{mode}
-					monthLabel={shortMonthNames[monthDate.getMonth()]}
-					yearLabel={`${monthDate.getFullYear()}`}
-					{canPreviousMonth}
-					{canNextMonth}
-					{canPreviousYear}
-					{canNextYear}
-					{previousMonthLabel}
-					{nextMonthLabel}
-					{previousYearLabel}
-					{nextYearLabel}
-					{selectMonthLabel}
-					{selectYearLabel}
-					monthListId="{uid}-months"
-					yearListId="{uid}-years"
-					onpreviousmonth={() => setMonth(addMonths(monthDate, -1))}
-					onnextmonth={() => setMonth(addMonths(monthDate, 1))}
-					onpreviousyear={() => setMonth(addMonths(monthDate, -12))}
-					onnextyear={() => setMonth(addMonths(monthDate, 12))}
-					ontogglemonths={() => setMode(mode === 'months' ? 'days' : 'months')}
-					ontoggleyears={() => setMode(mode === 'years' ? 'days' : 'years')}
-				/>
-
-				<div class="np-docked-date-picker-views">
-					<div class="np-docked-date-picker-body" inert={mode !== 'days'}>
-						<Calendar
-							month={monthDate}
-							selected={pendingDate}
-							min={minDate}
-							max={maxDate}
-							{locale}
-							firstDayOfWeek={week}
-							{isDateEnabled}
-							{adjacentMonthDays}
-							dynamicRows
-							todayDate={todayValue}
-							focusedDate={focusedDay}
-							selectedLabel={selectedDateLabel}
-							onselect={selectDay}
-							onmonthstep={(delta) => setMonth(addMonths(monthDate, delta))}
-							onfocusday={(date) => {
-								focusedDay = date
-								if (
-									date.getMonth() !== monthDate.getMonth() ||
-									date.getFullYear() !== monthDate.getFullYear()
-								) {
-									setMonth(date)
-								}
-							}}
-						/>
-					</div>
+			<CalendarToday />
+		</IconButton>
+	{/snippet}
+</TextField>
+<input
+	bind:this={valueInput}
+	class="np-docked-date-picker-value"
+	type="hidden"
+	value={current ?? ''}
+	{name}
+	{form}
+	{disabled}
+/>
+
+<Menu
+	id="{uid}-calendar"
+	role="dialog"
+	aria-label={label}
+	aria-modal="false"
+	class="np-docked-date-picker-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-container-color="var(--np-docked-date-picker-container-color, var(--np-color-surface-container-high))"
+	--np-menu-container-shape="var(--np-docked-date-picker-container-shape, var(--np-shape-corner-large))"
+	anchor={element}
+	bind:element={menuElement}
+	bind:open
+	ontoggle={({ newState }) => {
+		if (newState === 'open') {
+			monthBeforeOpen = displayMonth
+			pending = current
+			focusCalendarWhenReady()
+		}
+		if (newState === 'closed') {
+			setMode('days')
+			listMode = undefined
+			focusedDay = undefined
+			displayMonth = monthBeforeOpen
+		}
+	}}
+>
+	{#if open}
+		<div class="np-docked-date-picker-container" style:--np-calendar-rows={rowCount}>
+			<CalendarHeader
+				{mode}
+				monthLabel={shortMonthNames[monthDate.getMonth()]}
+				yearLabel={`${monthDate.getFullYear()}`}
+				{canPreviousMonth}
+				{canNextMonth}
+				{canPreviousYear}
+				{canNextYear}
+				{previousMonthLabel}
+				{nextMonthLabel}
+				{previousYearLabel}
+				{nextYearLabel}
+				{selectMonthLabel}
+				{selectYearLabel}
+				monthListId="{uid}-months"
+				yearListId="{uid}-years"
+				onpreviousmonth={() => setMonth(addMonths(monthDate, -1))}
+				onnextmonth={() => setMonth(addMonths(monthDate, 1))}
+				onpreviousyear={() => setMonth(addMonths(monthDate, -12))}
+				onnextyear={() => setMonth(addMonths(monthDate, 12))}
+				ontogglemonths={() => setMode(mode === 'months' ? 'days' : 'months')}
+				ontoggleyears={() => setMode(mode === 'years' ? 'days' : 'years')}
+			/>
+
+			<div class="np-docked-date-picker-views">
+				<div class="np-docked-date-picker-body" inert={mode !== 'days'}>
+					<Calendar
+						month={monthDate}
+						selected={pendingDate}
+						min={minDate}
+						max={maxDate}
+						{locale}
+						firstDayOfWeek={week}
+						{isDateEnabled}
+						{adjacentMonthDays}
+						dynamicRows
+						todayDate={todayValue}
+						focusedDate={focusedDay}
+						selectedLabel={selectedDateLabel}
+						onselect={selectDay}
+						onmonthstep={(delta) => setMonth(addMonths(monthDate, delta))}
+						onfocusday={(date) => {
+							focusedDay = date
+							if (
+								date.getMonth() !== monthDate.getMonth() ||
+								date.getFullYear() !== monthDate.getFullYear()
+							) {
+								setMonth(date)
+							}
+						}}
+					/>
+				</div>
 
-					{#if listMode}
-						<div class={['np-docked-date-picker-menu-view', mode !== 'days' && 'open']}>
-							<div class="np-docked-date-picker-menu-shade">
-								<Divider --np-divider-color="var(--np-color-outline-variant)" />
-								{#if listMode === 'months'}
-									<SelectionList
-										id="{uid}-months"
-										aria-label={selectMonthLabel}
-										options={monthOptions}
-										value={monthDate.getMonth()}
-										onselect={chooseMonth}
-									/>
-								{:else}
-									<SelectionList
-										id="{uid}-years"
-										aria-label={selectYearLabel}
-										options={yearOptions}
-										value={monthDate.getFullYear()}
-										onselect={chooseYear}
-									/>
-								{/if}
-							</div>
+				{#if listMode}
+					<div class={['np-docked-date-picker-menu-view', mode !== 'days' && 'open']}>
+						<div class="np-docked-date-picker-menu-shade">
+							<Divider --np-divider-color="var(--np-color-outline-variant)" />
+							{#if listMode === 'months'}
+								<SelectionList
+									id="{uid}-months"
+									aria-label={selectMonthLabel}
+									options={monthOptions}
+									value={monthDate.getMonth()}
+									onselect={chooseMonth}
+								/>
+							{:else}
+								<SelectionList
+									id="{uid}-years"
+									aria-label={selectYearLabel}
+									options={yearOptions}
+									value={monthDate.getFullYear()}
+									onselect={chooseYear}
+								/>
+							{/if}
 						</div>
-					{/if}
-				</div>
+					</div>
+				{/if}
+			</div>
 
-				<div class="np-docked-date-picker-actions">
-					<Button type="button" variant="text" onclick={() => closePicker()}>{cancelLabel}</Button>
-					<Button type="button" variant="text" onclick={confirm}>{confirmLabel}</Button>
-				</div>
+			<div class="np-docked-date-picker-actions">
+				<Button type="button" variant="text" onclick={() => closePicker()}>{cancelLabel}</Button>
+				<Button type="button" variant="text" onclick={confirm}>{confirmLabel}</Button>
 			</div>
-		{/if}
-	</Menu>
-</div>
+		</div>
+	{/if}
+</Menu>
 
 <style>
-	.np-docked-date-picker {
-		display: inline-flex;
-		flex-direction: column;
-	}
-
-	.np-docked-date-picker-anchor {
-		display: inline-flex;
-		position: relative;
-	}
-
 	:global(.np-docked-date-picker-menu .np-menu) {
 		padding: 0;
 	}