noph-ui 0.40.0 → 0.40.2

package/dist/card/Card.svelte

@@ -193,6 +193,7 @@
 		display: grid;
 		position: relative;
 		align-self: start;
+		flex: 1 0 auto;
 		min-width: calc(100% - 32px);
 		margin: 1rem;
 		grid-gap: 0.5rem;
@@ -215,7 +216,8 @@
 
 	.np-card-action {
 		display: flex;
-		margin-top: 1.5rem;
+		margin-top: auto;
+		padding-top: 1.5rem;
 		justify-content: flex-end;
 	}
 

package/dist/date-picker/DockedDatePicker.svelte

@@ -37,6 +37,7 @@
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
+		style,
 		displayMonth = $bindable(),
 		open = $bindable(false),
 		element = $bindable(),
@@ -70,6 +71,8 @@
 		invalidDateMessage = 'Enter a valid date.',
 		selectedDateLabel = 'selected',
 		onchange,
+		oninput,
+		onblur,
 		...attributes
 	}: DockedDatePickerProps = $props()
 
@@ -77,7 +80,6 @@
 
 	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)
@@ -224,7 +226,7 @@
 	const closePicker = (restoreFocus = true) => {
 		menuElement?.hidePopover()
 		if (restoreFocus) {
-			anchorElement?.querySelector<HTMLElement>('input')?.focus()
+			element?.querySelector<HTMLElement>('input')?.focus()
 		}
 	}
 
@@ -290,185 +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 || ariaInvalid === true || ariaInvalid === 'true'
-				? '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
-			bind:this={valueInput}
-			class="np-docked-date-picker-value"
-			type="hidden"
-			value={current ?? ''}
-			{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 = 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>
+			<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;
 	}

package/dist/date-picker/DockedDateTimePicker.svelte

@@ -51,6 +51,7 @@
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars -- absorbed on purpose
 		type,
 		'aria-invalid': ariaInvalid,
+		style,
 		displayMonth = $bindable(),
 		open = $bindable(false),
 		element = $bindable(),
@@ -90,6 +91,8 @@
 		minuteLabel = 'Minute',
 		dayPeriodLabel = 'AM or PM',
 		onchange,
+		oninput,
+		onblur,
 		...attributes
 	}: DockedDateTimePickerProps = $props()
 
@@ -98,7 +101,6 @@
 
 	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)
@@ -307,7 +309,7 @@
 	const closePicker = (restoreFocus = true) => {
 		menuElement?.hidePopover()
 		if (restoreFocus) {
-			anchorElement?.querySelector<HTMLElement>('input')?.focus()
+			element?.querySelector<HTMLElement>('input')?.focus()
 		}
 	}
 
@@ -380,225 +382,217 @@
 	}
 </script>
 
-<div {...attributes} bind:this={element} class={['np-docked-date-time-picker', attributes.class]}>
-	<div
-		class="np-docked-date-time-picker-anchor"
-		bind:this={anchorElement}
-		style:anchor-name="--{uid}"
-	>
-		<TextField
-			{label}
-			{variant}
-			{issues}
+<TextField
+	{...attributes}
+	class={['np-docked-date-time-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 || ariaInvalid === true || ariaInvalid === 'true'
-				? '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
-			bind:this={valueInput}
-			class="np-docked-date-time-picker-value"
-			type="hidden"
-			value={current ?? ''}
-			{name}
-			{form}
-			{disabled}
-		/>
-	</div>
-
-	<Menu
-		id="{uid}-calendar"
-		role="dialog"
-		aria-label={label}
-		aria-modal="false"
-		class="np-docked-date-time-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-time-picker-container-color, var(--np-color-surface-container-high))"
-		--np-menu-container-shape="var(--np-docked-date-time-picker-container-shape, var(--np-shape-corner-large))"
-		anchor={anchorElement}
-		bind:element={menuElement}
-		bind:open
-		ontoggle={({ newState }) => {
-			if (newState === 'open') {
-				monthBeforeOpen = displayMonth
-				pendingDay = committed ? toISODate(committed) : undefined
-				pendingMinutes = committed ? minutesOfDay(committed) : defaultMinutes
-				focusCalendarWhenReady()
-			}
-			if (newState === 'closed') {
-				setMode('days')
-				listMode = undefined
-				focusedDay = undefined
-				displayMonth = monthBeforeOpen
-			}
-		}}
-	>
-		{#if open}
-			<div
-				class="np-docked-date-time-picker-container"
-				style:--np-calendar-rows={rowCount}
-				style:--np-time-columns={hour12 ? 3 : 2}
-			>
-				<div class="np-docked-date-time-picker-panels">
-					<div class="np-docked-date-time-picker-date">
-						<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-time-picker-views">
-							<div class="np-docked-date-time-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-time-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-time-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-time-picker-container-color, var(--np-color-surface-container-high))"
+	--np-menu-container-shape="var(--np-docked-date-time-picker-container-shape, var(--np-shape-corner-large))"
+	anchor={element}
+	bind:element={menuElement}
+	bind:open
+	ontoggle={({ newState }) => {
+		if (newState === 'open') {
+			monthBeforeOpen = displayMonth
+			pendingDay = committed ? toISODate(committed) : undefined
+			pendingMinutes = committed ? minutesOfDay(committed) : defaultMinutes
+			focusCalendarWhenReady()
+		}
+		if (newState === 'closed') {
+			setMode('days')
+			listMode = undefined
+			focusedDay = undefined
+			displayMonth = monthBeforeOpen
+		}
+	}}
+>
+	{#if open}
+		<div
+			class="np-docked-date-time-picker-container"
+			style:--np-calendar-rows={rowCount}
+			style:--np-time-columns={hour12 ? 3 : 2}
+		>
+			<div class="np-docked-date-time-picker-panels">
+				<div class="np-docked-date-time-picker-date">
+					<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-time-picker-views">
+						<div class="np-docked-date-time-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-time-picker-menu-view', mode !== 'days' && 'open']}>
-									<div class="np-docked-date-time-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-time-picker-menu-view', mode !== 'days' && 'open']}>
+								<div class="np-docked-date-time-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>
 
-					<div class="np-docked-date-time-picker-time">
-						<div class="np-docked-date-time-picker-columns">
-							<TimeColumn
-								aria-label={hourLabel}
-								options={hourOptions}
-								value={pendingHour}
-								onselect={(hour) =>
-									setTime(hour * MINUTES_IN_HOUR + (pendingMinutes % MINUTES_IN_HOUR))}
-							/>
+				<div class="np-docked-date-time-picker-time">
+					<div class="np-docked-date-time-picker-columns">
+						<TimeColumn
+							aria-label={hourLabel}
+							options={hourOptions}
+							value={pendingHour}
+							onselect={(hour) =>
+								setTime(hour * MINUTES_IN_HOUR + (pendingMinutes % MINUTES_IN_HOUR))}
+						/>
+						<TimeColumn
+							aria-label={minuteLabel}
+							options={minuteOptions}
+							value={pendingMinutes % MINUTES_IN_HOUR}
+							onselect={(minute) => setTime(pendingHour * MINUTES_IN_HOUR + minute)}
+						/>
+						{#if hour12}
 							<TimeColumn
-								aria-label={minuteLabel}
-								options={minuteOptions}
-								value={pendingMinutes % MINUTES_IN_HOUR}
-								onselect={(minute) => setTime(pendingHour * MINUTES_IN_HOUR + minute)}
+								aria-label={dayPeriodLabel}
+								options={periodOptions}
+								value={pendingPeriod}
+								onselect={(period) => setTime((pendingMinutes % HALF_DAY) + period * HALF_DAY)}
 							/>
-							{#if hour12}
-								<TimeColumn
-									aria-label={dayPeriodLabel}
-									options={periodOptions}
-									value={pendingPeriod}
-									onselect={(period) => setTime((pendingMinutes % HALF_DAY) + period * HALF_DAY)}
-								/>
-							{/if}
-						</div>
+						{/if}
 					</div>
 				</div>
+			</div>
 
-				<Divider --np-divider-color="var(--np-color-outline-variant)" />
-				<div class="np-docked-date-time-picker-actions">
-					<Button type="button" variant="text" onclick={() => closePicker()}>{cancelLabel}</Button>
-					<Button type="button" variant="text" onclick={confirm}>{confirmLabel}</Button>
-				</div>
+			<Divider --np-divider-color="var(--np-color-outline-variant)" />
+			<div class="np-docked-date-time-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-time-picker {
-		display: inline-flex;
-		flex-direction: column;
-	}
-
-	.np-docked-date-time-picker-anchor {
-		display: inline-flex;
-		position: relative;
-	}
-
 	:global(.np-docked-date-time-picker-menu .np-menu) {
 		padding: 0;
 	}

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { TextFieldElement } from '../text-field/types.js';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 export type ISODate = string;
 export type ISODateTime = string;
@@ -26,11 +27,11 @@ interface MonthStepperLabelProps {
     nextMonthLabel?: string;
     previousMonthLabel?: string;
 }
-export interface DockedDatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
+export interface DockedDatePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, DatePickerRangeProps, DatePickerCommonLabelProps, MonthStepperLabelProps {
     value?: ISODate | number | null;
     displayMonth?: ISODate;
     open?: boolean;
-    element?: HTMLDivElement;
+    element?: HTMLSpanElement;
     name?: string;
     form?: string;
     required?: boolean;
@@ -54,11 +55,11 @@ export interface DockedDatePickerProps extends Omit<HTMLAttributes<HTMLDivElemen
     invalidDateMessage?: string;
     onchange?: (value: ISODate | undefined) => void;
 }
-export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps {
+export interface DockedDateTimePickerProps extends Omit<HTMLAttributes<TextFieldElement>, 'onchange'>, DatePickerLocaleProps, Omit<DatePickerRangeProps, 'min' | 'max'>, DatePickerCommonLabelProps, MonthStepperLabelProps {
     value?: ISODateTime | number | null;
     displayMonth?: ISODate;
     open?: boolean;
-    element?: HTMLDivElement;
+    element?: HTMLSpanElement;
     min?: ISODate | ISODateTime;
     max?: ISODate | ISODateTime;
     name?: string;

package/dist/select/NativeSelect.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import type { HTMLSelectAttributes } from 'svelte/elements'
 	interface SelectProps extends HTMLSelectAttributes {
 		label?: string
@@ -64,9 +65,9 @@
 		</div>
 		<div class="np-select-state-layer"></div>
 	{/if}
-	<svg class="arrow" height="6" viewBox="7 10 10 5" focusable="false">
-		<polygon stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
-	</svg>
+	<span class="arrow">
+		<ArrowDropDownIcon />
+	</span>
 	<select
 		oninput={(event) => {
 			if (
@@ -198,11 +199,7 @@
 	}
 
 	.arrow {
-		padding-inline: 0.375rem;
-		padding-block: 0.5625rem;
-		box-sizing: border-box;
-		width: 24px;
-		height: 24px;
+		display: flex;
 		fill: currentColor;
 		position: absolute;
 		pointer-events: none;

package/dist/select/Select.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onFormReset } from '../form-reset.js'
+	import ArrowDropDownIcon from '../icons/ArrowDropDownIcon.svelte'
 	import Item from '../list/Item.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import Check from './Check.svelte'
@@ -256,10 +257,9 @@
 </script>
 
 {#snippet arrows()}
-	<svg height="5" viewBox="7 10 10 5" focusable="false">
-		<polygon class="down" stroke="none" fill-rule="evenodd" points="7 10 12 15 17 10"></polygon>
-		<polygon class="up" stroke="none" fill-rule="evenodd" points="7 15 12 10 17 15"></polygon>
-	</svg>
+	<span class="arrow">
+		<ArrowDropDownIcon />
+	</span>
 {/snippet}
 
 <div
@@ -806,16 +806,18 @@
 		opacity: 1;
 	}
 
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .down,
-	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .down {
+	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))).menu-open .arrow,
+	.field:not(:has(select:is(:user-invalid, [aria-invalid='true']))):focus .arrow {
 		color: var(--np-color-primary);
 	}
-	.icon .down {
-		transition: color 75ms linear 75ms;
+	.icon .arrow {
+		display: flex;
+		transition:
+			color 75ms linear 75ms,
+			rotate 150ms cubic-bezier(0.2, 0, 0, 1);
 	}
-	.icon .up {
-		opacity: 0;
-		transition: color 75ms linear 75ms;
+	.field.menu-open .icon .arrow {
+		rotate: 180deg;
 	}
 
 	.content {

package/dist/slider/Slider.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SliderProps } from './types.ts';
-declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "element" | "endValue" | "inputElement" | "endInputElement">;
+declare const Slider: import("svelte").Component<SliderProps, {}, "value" | "element" | "inputElement" | "endValue" | "endInputElement">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/dist/text-field/TextField.svelte

@@ -460,6 +460,14 @@
 		margin-inline-start: 1rem;
 		margin-inline-end: 0.75rem;
 	}
+	.start:has(:global(.np-icon-button)) {
+		margin-inline-start: 0.25rem;
+		margin-inline-end: 0.5rem;
+	}
+	.end:has(:global(.np-icon-button)) {
+		margin-inline-start: 0.5rem;
+		margin-inline-end: 0.25rem;
+	}
 	.field:has(input:is(:user-invalid, [aria-invalid='true'])) .end,
 	.field:has(textarea:is(:user-invalid, [aria-invalid='true'])) .end {
 		color: var(--np-color-error);

package/package.json

@@ -1,108 +1,106 @@
 {
-	"name": "noph-ui",
-	"version": "0.40.0",
-	"license": "MIT",
-	"homepage": "https://noph.dev",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/cnolte/noph-ui.git"
-	},
-	"author": {
-		"name": "cnolte"
-	},
-	"imports": {
-		"#lib": "./src/lib/index.js",
-		"#lib/*": "./src/lib/*"
-	},
-	"keywords": [
-		"svelte",
-		"svelte 5",
-		"material",
-		"material 3",
-		"expressive",
-		"material you",
-		"material expressive",
-		"m3",
-		"ui",
-		"frontend",
-		"design-system",
-		"ui-library",
-		"theming"
-	],
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run prepack",
-		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
-		"prepack": "svelte-kit sync && svelte-package && publint",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check . && eslint .",
-		"format": "prettier --write .",
-		"docs:toc": "node scripts/build-toc.ts",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e",
-		"test:e2e": "playwright install && playwright test"
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		},
-		"./icons": {
-			"types": "./dist/icons/index.d.ts",
-			"svelte": "./dist/icons/index.js"
-		},
-		"./types": {
-			"types": "./dist/types.d.ts"
-		},
-		"./defaultTheme": {
-			"types": "./dist/themes/defaultTheme.css.d.ts",
-			"import": "./dist/themes/defaultTheme.css",
-			"require": "./dist/themes/defaultTheme.css"
-		}
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"peerDependencies": {
-		"svelte": "^5.40.0"
-	},
-	"devDependencies": {
-		"@eslint/js": "^10.0.1",
-		"@materialx/material-color-utilities": "^0.4.8",
-		"@playwright/test": "^1.62.1",
-		"@sveltejs/adapter-vercel": "7.0.0-next.6",
-		"@sveltejs/kit": "3.0.0-next.23",
-		"@sveltejs/package": "3.0.0-next.7",
-		"@sveltejs/vite-plugin-svelte": "7.3.0",
-		"@types/node": "^24",
-		"@types/prismjs": "^1.26.6",
-		"@vitest/browser-playwright": "^4.1.10",
-		"eslint": "^10.8.1",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.22.0",
-		"globals": "^17.9.0",
-		"playwright": "^1.62.1",
-		"prettier": "^3.9.6",
-		"prettier-plugin-svelte": "^4.1.1",
-		"prismjs": "^1.30.0",
-		"publint": "^0.3.23",
-		"svelte": "^5.56.8",
-		"svelte-check": "^4.7.5",
-		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.66.0",
-		"vite": "8.2.1",
-		"vitest": "^4.1.10",
-		"vitest-browser-svelte": "^2.1.1"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"packageManager": "pnpm@11.9.0"
-}
+  "name": "noph-ui",
+  "version": "0.40.2",
+  "license": "MIT",
+  "homepage": "https://noph.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cnolte/noph-ui.git"
+  },
+  "author": {
+    "name": "cnolte"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
+  },
+  "keywords": [
+    "svelte",
+    "svelte 5",
+    "material",
+    "material 3",
+    "expressive",
+    "material you",
+    "material expressive",
+    "m3",
+    "ui",
+    "frontend",
+    "design-system",
+    "ui-library",
+    "theming"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "svelte": "./dist/icons/index.js"
+    },
+    "./types": {
+      "types": "./dist/types.d.ts"
+    },
+    "./defaultTheme": {
+      "types": "./dist/themes/defaultTheme.css.d.ts",
+      "import": "./dist/themes/defaultTheme.css",
+      "require": "./dist/themes/defaultTheme.css"
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.40.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@materialx/material-color-utilities": "^0.4.8",
+    "@playwright/test": "^1.62.1",
+    "@sveltejs/adapter-vercel": "7.0.0-next.6",
+    "@sveltejs/kit": "3.0.0-next.23",
+    "@sveltejs/package": "3.0.0-next.7",
+    "@sveltejs/vite-plugin-svelte": "7.3.0",
+    "@types/node": "^24",
+    "@types/prismjs": "^1.26.6",
+    "@vitest/browser-playwright": "^4.1.10",
+    "eslint": "^10.8.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.22.0",
+    "globals": "^17.9.0",
+    "playwright": "^1.62.1",
+    "prettier": "^3.9.6",
+    "prettier-plugin-svelte": "^4.1.1",
+    "prismjs": "^1.30.0",
+    "publint": "^0.3.23",
+    "svelte": "^5.56.8",
+    "svelte-check": "^4.7.5",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.66.0",
+    "valibot": "^1.4.2",
+    "vite": "8.2.1",
+    "vitest": "^4.1.10",
+    "vitest-browser-svelte": "^2.1.1"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run prepack",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
+    "docs:toc": "node scripts/build-toc.ts",
+    "test:unit": "vitest",
+    "test": "npm run test:unit -- --run && npm run test:e2e",
+    "test:e2e": "playwright install && playwright test"
+  }
+}