noph-ui 0.37.0 → 0.39.0

package/README.md

@@ -1,8 +1,6 @@
 # Noph UI
 
-Noph UI is a modern, powerful UI library for Svelte 5, fully aligned with the Material 3
-guidelines. Build stunning, consistent user interfaces with the efficiency and flexibility of
-Svelte and Google’s Material Design framework.
+Noph UI is a modern, powerful UI library for Svelte, fully aligned with the Material 3 Expressive guidelines. Build stunning, consistent user interfaces with the efficiency and flexibility of Svelte and Google’s Material Design framework.
 
 ## Install
 
@@ -50,33 +48,43 @@ body {
 }
 ```
 
-## Roadmap
-
-Beta
-
-- Auto complete
-- Badges
-- Buttons
-- Cards
-- Checkbox
-- Chips
-- DatePicker
-- Dialogs
-- Divider
-- Icon buttons
-- Lists
-- Loading indicator
-- Menus
-- Navigation Drawer
-- Navigation Rail
-- Progress indicators
-- Radio
-- Ripple
-- Segmented buttons
-- Select
-- Slider
-- Snackbar
-- Switch
-- Tabs
-- Text fields
-- Tooltips
+## Components
+
+Live demos and usage examples for every component are available on [noph.dev](https://noph.dev).
+
+**Actions**
+[Buttons](https://noph.dev/components/button) ·
+[Icon buttons](https://noph.dev/components/icon-button) ·
+[Segmented buttons](https://noph.dev/components/segmented-button) ·
+[Ripple](https://noph.dev/components/ripple)
+
+**Inputs & selection**
+[Autocomplete](https://noph.dev/components/autocomplete) ·
+[Checkbox](https://noph.dev/components/checkbox) ·
+[Chips](https://noph.dev/components/chip) ·
+[DatePicker](https://noph.dev/components/date-picker) ·
+[DateTimePicker](https://noph.dev/components/date-time-picker) ·
+[Radio](https://noph.dev/components/radio) ·
+[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)
+
+**Navigation**
+[Menus](https://noph.dev/components/menu) ·
+[Navigation Drawer](https://noph.dev/components/navigation-drawer) ·
+[Navigation Rail](https://noph.dev/components/navigation-rail) ·
+[Tabs](https://noph.dev/components/tabs)
+
+**Communication**
+[Badges](https://noph.dev/components/badge) ·
+[Dialogs](https://noph.dev/components/dialog) ·
+[Loading indicator](https://noph.dev/components/loading-indicator) ·
+[Progress indicators](https://noph.dev/components/progress) ·
+[Snackbar](https://noph.dev/components/snackbar) ·
+[Tooltips](https://noph.dev/components/tooltip)
+
+**Containment**
+[Cards](https://noph.dev/components/card) ·
+[Divider](https://noph.dev/components/divider) ·
+[Lists](https://noph.dev/components/list)

package/dist/autocomplete/AutoComplete.svelte

@@ -206,6 +206,7 @@
 	style="position-anchor:--{uid};{widthProp}:{clientWidth}px"
 	role="listbox"
 	class={[!displayOptions.length && 'np-auto-complete-empty']}
+	coverAnchor={false}
 	--np-menu-justify-self="none"
 	--np-menu-position-area="bottom span-right"
 	--np-menu-margin="2px 0"

package/dist/date-picker/Calendar.svelte

@@ -475,13 +475,9 @@
 
 	.np-calendar-cell.range-start::before {
 		inset-inline-start: 50%;
-		border-start-start-radius: var(--np-shape-corner-full);
-		border-end-start-radius: var(--np-shape-corner-full);
 	}
 
 	.np-calendar-cell.range-end::before {
 		inset-inline-end: 50%;
-		border-start-end-radius: var(--np-shape-corner-full);
-		border-end-end-radius: var(--np-shape-corner-full);
 	}
 </style>

package/dist/date-picker/CalendarHeader.svelte

@@ -173,6 +173,15 @@
 
 	.np-date-picker-stepper.hidden {
 		visibility: hidden;
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-date-picker-stepper {
+			transition:
+				opacity var(--np-motion-expressive-default-effects),
+				visibility var(--np-motion-expressive-default-effects);
+		}
 	}
 
 	.np-date-picker-stepper {

package/dist/date-picker/DateRangePicker.svelte

@@ -172,14 +172,6 @@
 	bind:element
 	aria-label={title}
 	class={['np-date-range-picker', attributes.class]}
-	--np-dialog-container-width="100%"
-	--np-dialog-container-min-width="0"
-	--np-dialog-inset="0"
-	--np-dialog-padding="0"
-	--np-dialog-max-height="100dvh"
-	--np-dialog-elevation="none"
-	--np-dialog-container-color="var(--np-date-range-picker-container-color, var(--np-color-surface))"
-	--np-dialog-container-shape="var(--np-date-range-picker-container-shape, var(--np-shape-corner-none))"
 	ontoggle={(event) => {
 		const nowOpen = event.newState === 'open'
 		open = nowOpen
@@ -198,7 +190,7 @@
 	{#if open}
 		<div class="np-date-range-picker-content">
 			<div class="np-date-range-picker-header">
-				<div class="np-date-range-picker-actions">
+				<div class="np-date-range-picker-top-bar">
 					<IconButton type="button" aria-label={cancelLabel} onclick={cancel}>
 						<CloseIcon />
 					</IconButton>
@@ -206,11 +198,14 @@
 						{confirmLabel}
 					</Button>
 				</div>
-				<h2 class="np-date-range-picker-headline">
-					<span class={[!startDate && 'placeholder']}>{headlineStart}</span>
-					<span aria-hidden="true">–</span>
-					<span class={[!endDate && 'placeholder']}>{headlineEnd}</span>
-				</h2>
+				<div class="np-date-range-picker-header-text">
+					<span class="np-date-range-picker-title">{title}</span>
+					<h2 class="np-date-range-picker-headline">
+						<span class={[!startDate && 'placeholder']}>{headlineStart}</span>
+						<span aria-hidden="true">–</span>
+						<span class={[!endDate && 'placeholder']}>{headlineEnd}</span>
+					</h2>
+				</div>
 			</div>
 			<Divider />
 
@@ -251,9 +246,35 @@
 			</div>
 		</div>
 	{/if}
+
+	{#snippet actions()}
+		{#if open}
+			<Button type="button" variant="text" onclick={cancel}>{cancelLabel}</Button>
+			<Button type="button" variant="text" disabled={!canConfirm} onclick={confirm}>
+				{confirmLabel}
+			</Button>
+		{/if}
+	{/snippet}
 </Dialog>
 
 <style>
+	:global(.np-date-range-picker) {
+		--np-dialog-container-width: 100%;
+		--np-dialog-container-min-width: 0;
+		--np-dialog-inset: 0;
+		--np-dialog-padding: 0;
+		--np-dialog-max-height: 100dvh;
+		--np-dialog-elevation: none;
+		--np-dialog-container-color: var(
+			--np-date-range-picker-container-color,
+			var(--np-color-surface)
+		);
+		--np-dialog-container-shape: var(
+			--np-date-range-picker-container-shape,
+			var(--np-shape-corner-none)
+		);
+	}
+
 	:global(.np-date-range-picker .np-dialog) {
 		height: 100dvh;
 	}
@@ -262,6 +283,10 @@
 		overflow: hidden;
 	}
 
+	:global(.np-date-range-picker .np-dialog .np-dialog-actions) {
+		display: none;
+	}
+
 	.np-date-range-picker-content {
 		display: flex;
 		flex-direction: column;
@@ -272,13 +297,18 @@
 	.np-date-range-picker-header,
 	.np-date-range-picker-weekdays,
 	.np-date-range-picker-months {
+		box-sizing: border-box;
 		max-width: var(--np-date-range-picker-content-width, 25.5rem);
 		margin-inline: auto;
 		width: 100%;
 	}
 
+	.np-date-range-picker-header,
+	.np-date-range-picker-weekdays {
+		flex: none;
+	}
+
 	.np-date-range-picker-header {
-		box-sizing: border-box;
 		min-height: 8rem;
 		display: flex;
 		flex-direction: column;
@@ -288,12 +318,24 @@
 		color: var(--np-color-on-surface-variant);
 	}
 
-	.np-date-range-picker-actions {
+	.np-date-range-picker-top-bar {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 	}
 
+	.np-date-range-picker-header-text {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+
+	.np-date-range-picker-title {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+	}
+
 	.np-date-range-picker-headline {
 		margin: 0;
 		display: flex;
@@ -314,10 +356,6 @@
 		align-items: center;
 		height: 3rem;
 		padding-inline: 0.75rem;
-		max-width: 25.5rem;
-		margin-inline: auto;
-		width: 100%;
-		box-sizing: border-box;
 		font-size: 1rem;
 		line-height: 1.5rem;
 		color: var(--np-color-on-surface);
@@ -330,10 +368,6 @@
 		overflow-y: auto;
 		overscroll-behavior: contain;
 		padding-inline: 0.75rem;
-		max-width: 25.5rem;
-		margin-inline: auto;
-		width: 100%;
-		box-sizing: border-box;
 		scrollbar-color: var(--np-color-on-surface-variant) transparent;
 		scrollbar-width: thin;
 	}
@@ -348,4 +382,50 @@
 		font-weight: 500;
 		color: var(--np-date-picker-range-month-subhead-color, var(--np-color-on-surface-variant));
 	}
+
+	@media (min-width: 37.5rem) {
+		:global(.np-date-range-picker) {
+			--np-dialog-container-width: fit-content;
+			--np-dialog-inset: 2rem 1rem;
+			--np-dialog-max-height: calc(100dvh - 3rem);
+			--np-dialog-elevation: var(--np-elevation-3);
+			--np-dialog-container-color: var(
+				--np-date-range-picker-container-color,
+				var(--np-color-surface-container-high)
+			);
+			--np-dialog-container-shape: var(
+				--np-date-range-picker-container-shape,
+				var(--np-shape-corner-extra-large)
+			);
+		}
+
+		:global(.np-date-range-picker .np-dialog) {
+			height: auto;
+		}
+
+		:global(.np-date-range-picker .np-dialog .np-dialog-actions) {
+			display: flex;
+			margin-top: 0;
+			padding: 0.5rem 0.75rem 0.75rem;
+		}
+
+		.np-date-range-picker-content {
+			width: var(--np-date-range-picker-content-width, 22.5rem);
+			max-width: 100%;
+		}
+
+		.np-date-range-picker-top-bar {
+			display: none;
+		}
+
+		.np-date-range-picker-header {
+			min-height: 7.5rem;
+			justify-content: flex-end;
+			padding: 1rem 0.75rem 0.75rem 1.5rem;
+		}
+
+		.np-date-range-picker-months {
+			max-height: var(--np-date-range-picker-months-max-height, 20rem);
+		}
+	}
 </style>

package/dist/date-picker/DockedDatePicker.svelte

@@ -28,7 +28,6 @@
 		toISODate,
 		today as getToday,
 	} from './dateUtils.js'
-	import { afterTwoFrames } from './enterAnimation.js'
 	import type { DockedDatePickerProps, ISODate } from './types.js'
 
 	let {
@@ -76,6 +75,7 @@
 	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>()
@@ -105,15 +105,16 @@
 	let shortMonthNames = $derived(getMonthNames(locale, 'short'))
 	let rowCount = $derived(getWeekRowCount(monthDate, week))
 
-	let viewEnter = $state(false)
-	let cancelViewEnter: (() => void) | undefined
-
 	const setMode = (next: 'days' | 'months' | 'years') => {
 		if (mode === next) return
 		mode = next
-		cancelViewEnter?.()
-		viewEnter = true
-		cancelViewEnter = afterTwoFrames(() => (viewEnter = false))
+		if (next !== 'days') listMode = next
+	}
+
+	const leaveList = async () => {
+		setMode('days')
+		await tick()
+		focusCalendar()
 	}
 
 	const formatValue = () => {
@@ -254,14 +255,14 @@
 
 	const chooseMonth = (month: number) => {
 		setMonth(new Date(monthDate.getFullYear(), month, 1))
-		setMode('days')
+		leaveList()
 	}
 
 	const chooseYear = (year: number) => {
 		// A year is offered as soon as any of its days is in range, so keeping the month the list was
 		// opened from can land on a month where nothing at all is selectable.
 		setMonth(new Date(year, clampMonthInYear(year, monthDate.getMonth(), minDate, maxDate), 1))
-		setMode('days')
+		leaveList()
 	}
 </script>
 
@@ -319,6 +320,7 @@
 		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))"
@@ -333,16 +335,14 @@
 			}
 			if (newState === 'closed') {
 				setMode('days')
+				listMode = undefined
 				focusedDay = undefined
 				displayMonth = monthBeforeOpen
 			}
 		}}
 	>
 		{#if open}
-			<div
-				class={['np-docked-date-picker-container', mode !== 'days' && 'menu']}
-				style:--np-calendar-rows={rowCount}
-			>
+			<div class="np-docked-date-picker-container" style:--np-calendar-rows={rowCount}>
 				<CalendarHeader
 					{mode}
 					monthLabel={shortMonthNames[monthDate.getMonth()]}
@@ -367,8 +367,8 @@
 					ontoggleyears={() => setMode(mode === 'years' ? 'days' : 'years')}
 				/>
 
-				{#if mode === 'days'}
-					<div class={['np-docked-date-picker-body', viewEnter && 'entering']}>
+				<div class="np-docked-date-picker-views">
+					<div class="np-docked-date-picker-body" inert={mode !== 'days'}>
 						<Calendar
 							month={monthDate}
 							selected={pendingDate}
@@ -395,33 +395,37 @@
 							}}
 						/>
 					</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>
-				{:else}
-					<div class={['np-docked-date-picker-menu-view', viewEnter && 'entering']}>
-						<Divider --np-divider-color="var(--np-color-outline-variant)" />
-						{#if mode === '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}
+
+					{#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>
+						</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>
 		{/if}
 	</Menu>
@@ -456,8 +460,12 @@
 		margin-inline: 0.75rem;
 	}
 
+	.np-docked-date-picker-views {
+		position: relative;
+		margin-top: 1.875rem;
+	}
+
 	.np-docked-date-picker-body {
-		padding-top: 1.875rem;
 		padding-inline: 0.75rem;
 	}
 
@@ -476,45 +484,61 @@
 		height: 2.25rem;
 	}
 
-	.np-docked-date-picker-container.menu {
-		padding-bottom: 1.25rem;
-	}
-
 	.np-docked-date-picker-menu-view {
-		display: flex;
-		flex-direction: column;
+		position: absolute;
+		inset: 0;
 		overflow: hidden;
-		margin-top: 1.875rem;
-		height: calc(2.5rem + var(--np-calendar-rows) * 3rem);
+		visibility: hidden;
 	}
 
-	.np-docked-date-picker-menu-view :global(.np-date-picker-selection-list) {
-		flex: 1;
-		min-height: 0;
+	.np-docked-date-picker-menu-view.open {
+		visibility: visible;
 	}
 
-	.np-docked-date-picker-menu-view.entering {
-		height: 0;
-		margin-top: 0;
+	.np-docked-date-picker-menu-shade {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		translate: 0 -100%;
 		opacity: 0.6;
-		transition: none;
+		background-color: var(
+			--np-docked-date-picker-container-color,
+			var(--np-color-surface-container-high)
+		);
 	}
 
-	.np-docked-date-picker-body.entering {
-		opacity: 0.6;
-		transition: none;
+	.np-docked-date-picker-menu-view.open .np-docked-date-picker-menu-shade {
+		translate: 0 0;
+		opacity: 1;
+	}
+
+	.np-docked-date-picker-menu-view :global(.np-date-picker-selection-list) {
+		flex: 1;
+		min-height: 0;
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-docked-date-picker-menu-view {
+			transition: visibility var(--np-motion-expressive-default-effects);
+		}
+
+		.np-docked-date-picker-menu-shade {
 			transition:
-				height var(--np-motion-expressive-default-effects),
-				margin-top var(--np-motion-expressive-default-effects),
+				translate var(--np-motion-expressive-default-effects),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+
+		.np-docked-date-picker-menu-view.open .np-docked-date-picker-menu-shade {
+			transition:
+				translate var(--np-motion-expressive-default-effects),
 				opacity var(--np-motion-expressive-default-effects);
 		}
 
-		.np-docked-date-picker-body {
-			transition: opacity var(--np-motion-expressive-default-effects);
+		@starting-style {
+			.np-docked-date-picker-menu-view.open .np-docked-date-picker-menu-shade {
+				translate: 0 -100%;
+				opacity: 0.6;
+			}
 		}
 	}