noph-ui 0.51.1 → 0.52.0

package/dist/animation.d.ts

@@ -1,2 +1,27 @@
+import type { Attachment } from 'svelte/attachments';
 export declare const afterTwoFrames: (fn: () => void) => () => void;
-export declare const afterExit: (element: Element | undefined, fn: () => void) => () => void;
+/**
+ * Calls `fn` once the element's animations have finished, two frames from now so that transitions
+ * just started are counted. `subtree` includes those of its descendants. Endless animations, such
+ * as a spinner's, are not waited for.
+ */
+export declare const afterExit: (element: Element | undefined, fn: () => void, { subtree }?: {
+    subtree?: boolean;
+}) => () => void;
+export declare const parseMotion: (token: string) => {
+    duration: number;
+    easing: string;
+};
+/** Reads a motion token such as `--np-motion-standard-fast-spatial` off an element's styles. */
+export declare const motionOf: (element: Element, token: string) => {
+    duration: number;
+    easing: string;
+};
+/**
+ * Keeps a dialog or popover on screen while it animates out, in browsers that drop it from the top
+ * layer the moment it closes because they cannot transition `overlay`, such as Safari. From the
+ * start of closing until its exit animations end it carries `data-np-exiting`, and the rules in
+ * `internal/exit.css` keep it shown meanwhile, over the page but not blocking it. `beforetoggle`
+ * fires before every way of closing, from Escape and light dismiss to `close()`.
+ */
+export declare const exitAnimation: Attachment<HTMLElement>;

package/dist/animation.js

@@ -8,7 +8,12 @@ export const afterTwoFrames = (fn) => {
         cancelAnimationFrame(inner);
     };
 };
-export const afterExit = (element, fn) => {
+/**
+ * Calls `fn` once the element's animations have finished, two frames from now so that transitions
+ * just started are counted. `subtree` includes those of its descendants. Endless animations, such
+ * as a spinner's, are not waited for.
+ */
+export const afterExit = (element, fn, { subtree = false } = {}) => {
     if (!element) {
         fn();
         return () => { };
@@ -19,7 +24,9 @@ export const afterExit = (element, fn) => {
             fn();
     };
     const cancelFrames = afterTwoFrames(() => {
-        const animations = element.getAnimations();
+        const animations = element
+            .getAnimations({ subtree })
+            .filter((animation) => animation.effect?.getTiming().iterations !== Infinity);
         if (animations.length === 0) {
             finish();
             return;
@@ -31,3 +38,44 @@ export const afterExit = (element, fn) => {
         cancelFrames();
     };
 };
+export const parseMotion = (token) => {
+    const [time, ...rest] = token.trim().split(/\s+/);
+    const value = Number.parseFloat(time);
+    const easing = rest.join(' ');
+    return {
+        duration: Number.isNaN(value) ? 0 : time.endsWith('ms') ? value : value * 1000,
+        easing: easing || 'linear',
+    };
+};
+/** Reads a motion token such as `--np-motion-standard-fast-spatial` off an element's styles. */
+export const motionOf = (element, token) => parseMotion(getComputedStyle(element).getPropertyValue(token));
+/**
+ * Keeps a dialog or popover on screen while it animates out, in browsers that drop it from the top
+ * layer the moment it closes because they cannot transition `overlay`, such as Safari. From the
+ * start of closing until its exit animations end it carries `data-np-exiting`, and the rules in
+ * `internal/exit.css` keep it shown meanwhile, over the page but not blocking it. `beforetoggle`
+ * fires before every way of closing, from Escape and light dismiss to `close()`.
+ */
+export const exitAnimation = (element) => {
+    if (CSS.supports('overlay: auto'))
+        return;
+    let cancel = () => { };
+    const done = () => {
+        cancel();
+        delete element.dataset.npExiting;
+    };
+    const onBeforeToggle = (event) => {
+        done();
+        if (event.newState !== 'closed')
+            return;
+        if (matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        element.dataset.npExiting = '';
+        cancel = afterExit(element, done, { subtree: true });
+    };
+    element.addEventListener('beforetoggle', onBeforeToggle);
+    return () => {
+        element.removeEventListener('beforetoggle', onBeforeToggle);
+        done();
+    };
+};

package/dist/app-bar/AppBar.svelte

@@ -4,7 +4,10 @@
 	let {
 		variant = 'small',
 		headline,
+		headlineLevel,
 		subtitle,
+		alignment = 'start',
+		image,
 		leading,
 		search,
 		trailing,
@@ -22,7 +25,15 @@
 
 {#snippet titles(inline: boolean)}
 	<div class={['np-app-bar-titles', inline && 'np-app-bar-titles-inline']}>
-		<div class="np-app-bar-headline">{headline}</div>
+		{#if image && !inline}
+			<div class="np-app-bar-image">{@render image()}</div>
+		{/if}
+		<!-- The copy shown while collapsed is hidden from assistive technology, so only the other one
+		     is the heading. -->
+		<svelte:element
+			this={headlineLevel && !inline ? `h${headlineLevel}` : 'div'}
+			class="np-app-bar-headline">{headline}</svelte:element
+		>
 		{#if subtitle}
 			<div class="np-app-bar-subtitle">{subtitle}</div>
 		{/if}
@@ -36,6 +47,7 @@
 		'np-app-bar',
 		`np-app-bar-${variant}`,
 		collapses && 'np-app-bar-collapsible',
+		alignment === 'center' && 'np-app-bar-center',
 		scroller === 'nearest' && 'np-app-bar-scroller-nearest',
 		attributes.class,
 	]}
@@ -48,6 +60,9 @@
 			<div class="np-app-bar-search-field">{@render search?.()}</div>
 		{:else if twoLine}
 			<div class="np-app-bar-inline" aria-hidden="true">{@render titles(true)}</div>
+		{:else if image}
+			<!-- In a small app bar the image takes the headline's place. -->
+			<div class="np-app-bar-titles">{@render image()}</div>
 		{:else}
 			{@render titles(false)}
 		{/if}
@@ -82,8 +97,10 @@
 		--_timeline: scroll(nearest block);
 	}
 
+	/* The bar is the open search's stacking context, so it rises to the search's own level, above
+	   other bars and a page header. */
 	.np-app-bar:has(:global(.np-search-expanded)) {
-		z-index: 9;
+		z-index: var(--np-search-z-index, 24);
 	}
 
 	.np-app-bar-row {
@@ -105,6 +122,11 @@
 	.np-app-bar-trailing {
 		margin-inline-start: auto;
 	}
+	/* The leading button is on surface, the trailing ones on surface variant. In a search app bar
+	   they are all on surface variant. */
+	.np-app-bar:not(.np-app-bar-search) .np-app-bar-leading {
+		--np-icon-button-icon-color: var(--np-color-on-surface);
+	}
 
 	.np-app-bar-titles {
 		display: flex;
@@ -125,6 +147,7 @@
 	}
 
 	.np-app-bar-headline {
+		margin: 0;
 		font-size: var(--_headline-size);
 		line-height: var(--_headline-line-height);
 		font-weight: 400;
@@ -152,12 +175,20 @@
 		--_subtitle-line-height: 1rem;
 	}
 
+	/* The search fills the space between the leading and trailing elements up to 312dp, then
+	   grows only to half of it, centred. The bar sits 8dp from the elements beside it, so the
+	   margin a search keeps for its open view stays out of the row. */
 	.np-app-bar-search-field {
 		flex: 1;
 		min-width: 0;
 		display: flex;
 		align-items: center;
-		padding-inline: 0.25rem;
+		justify-content: center;
+		container-type: inline-size;
+		--np-search-pane-margin: 0;
+	}
+	.np-app-bar-search-field :global(.np-search:not(.np-search-full-screen.np-search-expanded)) {
+		width: min(100%, max(19.5rem, 50cqi));
 	}
 	.np-app-bar-search-field :global(.np-search:not(.np-search-expanded) .np-search-bar) {
 		background-color: var(--np-search-container-color, var(--np-color-surface-container));
@@ -179,7 +210,7 @@
 		--_headline-line-height: 2.75rem;
 		--_subtitle-size: 1rem;
 		--_subtitle-line-height: 1.5rem;
-		--_second-row-height: 5.5rem;
+		--_second-row-height: 3.5rem;
 	}
 
 	.np-app-bar-second-row {
@@ -190,11 +221,44 @@
 		height: auto;
 		min-height: var(--_second-row-height);
 		padding-inline: 1rem;
-		padding-block-end: 1rem;
+		padding-block-end: 0.75rem;
 		overflow: hidden;
 	}
-	.np-app-bar-medium .np-app-bar-second-row {
-		padding-block-end: 0.75rem;
+	.np-app-bar-image {
+		display: flex;
+		margin-block-end: 0.5rem;
+	}
+
+	/* Centred, a small app bar puts its headline in the middle of the bar whatever sits beside it. */
+	.np-app-bar-center .np-app-bar-row {
+		display: grid;
+		grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
+	}
+	.np-app-bar-center .np-app-bar-leading {
+		grid-column: 1;
+	}
+	.np-app-bar-center .np-app-bar-row > .np-app-bar-titles,
+	.np-app-bar-center .np-app-bar-inline,
+	.np-app-bar-center .np-app-bar-search-field {
+		grid-column: 2;
+		padding-inline: 0;
+	}
+	.np-app-bar-center.np-app-bar-search .np-app-bar-row {
+		grid-template-columns: auto 1fr auto;
+	}
+	.np-app-bar-center .np-app-bar-trailing {
+		grid-column: 3;
+		justify-self: end;
+	}
+	.np-app-bar-center .np-app-bar-titles {
+		align-items: center;
+		text-align: center;
+	}
+	.np-app-bar-center .np-app-bar-second-row {
+		justify-content: center;
+	}
+	.np-app-bar-center .np-app-bar-search-field :global(.np-search-input) {
+		text-align: center;
 	}
 
 	.np-app-bar-inline {

package/dist/app-bar/types.d.ts

@@ -3,7 +3,13 @@ import type { HTMLAttributes } from 'svelte/elements';
 export interface AppBarProps extends HTMLAttributes<HTMLElement> {
     variant?: 'search' | 'small' | 'medium' | 'large';
     headline?: string;
+    /** Renders the headline as a heading of this level. Without it the headline is plain text. */
+    headlineLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     subtitle?: string;
+    /** Headline and subtitle at the leading edge or centered. */
+    alignment?: 'start' | 'center';
+    /** An image or logo. It replaces the headline of a small app bar and sits above it otherwise. */
+    image?: Snippet;
     leading?: Snippet;
     search?: Snippet;
     trailing?: Snippet;

package/dist/autocomplete/AutoComplete.svelte

@@ -38,6 +38,7 @@
 	let useVirtualList = $derived(displayOptions.length > virtualThreshold)
 	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
 	let menuElement = $state<HTMLDivElement>()
+	let virtualList = $state<VirtualList<AutoCompleteOption>>()
 	let finalPopulated = $derived(populated)
 	let activeIndex = $state(NO_INDEX)
 
@@ -81,25 +82,7 @@
 			optEl.scrollIntoView({ block: 'nearest' })
 			return
 		}
-		if (useVirtualList && menuElement) {
-			const viewport = menuElement.querySelector(
-				'svelte-virtual-list-viewport',
-			) as HTMLElement | null
-			if (!viewport) return
-			let rowHeight = 48
-			const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
-			if (firstRow) {
-				rowHeight = firstRow.offsetHeight || rowHeight
-			}
-			const top = activeIndex * rowHeight
-			const bottom = top + rowHeight
-			const { scrollTop, clientHeight } = viewport
-			if (top < scrollTop) {
-				viewport.scrollTop = top
-			} else if (bottom > scrollTop + clientHeight) {
-				viewport.scrollTop = bottom - clientHeight
-			}
-		}
+		if (useVirtualList) virtualList?.scrollToIndex(activeIndex)
 	})
 </script>
 
@@ -169,13 +152,9 @@
 			event.preventDefault()
 			return
 		}
-		if (event.key === 'Home') {
-			setActive(0)
-			event.preventDefault()
-			return
-		}
-		if (event.key === 'End') {
-			setActive(displayOptions.length - 1)
+		// Home and End move the caret, unless the arrows have already moved into the options.
+		if ((event.key === 'Home' || event.key === 'End') && open && activeIndex >= 0) {
+			setActive(event.key === 'Home' ? 0 : displayOptions.length - 1)
 			event.preventDefault()
 			return
 		}
@@ -227,11 +206,7 @@
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
-		<VirtualList
-			height="250px"
-			itemHeight={displayOptions.some(({ supportingText }) => supportingText) ? 68 : 48}
-			items={displayOptions}
-		>
+		<VirtualList bind:this={virtualList} height="250px" items={displayOptions}>
 			{#snippet row(option, index)}
 				{@render item(option, index)}
 			{/snippet}

package/dist/autocomplete/AutoComplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AutoCompleteProps } from './types.js';
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "open">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "open" | "element" | "value">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/badge/Badge.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { badgeText } from './description.js'
 	import type { BadgeProps } from './types.js'
 
 	let {
@@ -23,7 +24,7 @@
 >
 	{#if label !== undefined}
 		<div class="np-badge-label">
-			{label}
+			{badgeText(label)}
 		</div>
 	{/if}
 </div>
@@ -35,15 +36,21 @@
 		background-color: var(--np-color-error);
 		border-radius: var(--np-shape-corner-full);
 		position: var(--np-badge-position, absolute);
-		top: var(--np-badge-top, 0);
-		inset-inline-start: var(--np-badge-start, auto);
-		inset-inline-end: var(--np-badge-end, auto);
+		top: var(--np-badge-top, var(--_top));
+		inset-inline-start: var(--np-badge-start, var(--_start));
 	}
+	/* Anchored inside the icon at its top trailing corner. A large badge keeps its leading edge and
+	   grows toward the trailing side. */
 	.np-badge-container-label {
+		--_top: -0.125rem;
+		--_start: calc(100% - 0.75rem);
+		box-sizing: border-box;
 		height: 1rem;
 		min-width: 1rem;
 	}
 	.np-badge-container-no-label {
+		--_top: 0;
+		--_start: calc(100% - 0.375rem);
 		width: 0.375rem;
 		height: 0.375rem;
 	}
@@ -52,6 +59,7 @@
 		padding-inline: 0.25rem;
 		font-weight: 500;
 		font-size: 0.6875rem;
+		white-space: nowrap;
 		display: flex;
 		align-items: center;
 	}

package/dist/badge/description.d.ts

@@ -0,0 +1,4 @@
+/** What a navigation destination reads after its name for its badge: the given label, else the count, else "New notification". */
+export declare const badgeDescription: (label: string | number | undefined, ariaLabel?: string) => string;
+/** Shows counts above 999 as "999+", so a large badge keeps to four characters. */
+export declare const badgeText: (label: string | number) => string;

package/dist/badge/description.js

@@ -0,0 +1,4 @@
+/** What a navigation destination reads after its name for its badge: the given label, else the count, else "New notification". */
+export const badgeDescription = (label, ariaLabel) => ariaLabel ?? (label !== undefined ? String(label) : 'New notification');
+/** Shows counts above 999 as "999+", so a large badge keeps to four characters. */
+export const badgeText = (label) => typeof label === 'number' && label > 999 ? '999+' : String(label);

package/dist/button/Button.svelte

@@ -5,6 +5,7 @@
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
+	import { getButtonGroupContext } from './groupContext.js'
 	import type { ButtonProps } from './types.js'
 
 	let {
@@ -17,8 +18,8 @@
 		disabled = false,
 		loading = false,
 		loadingAriaLabel,
-		size = 's',
-		shape = 'round',
+		size: sizeProp,
+		shape: shapeProp,
 		toggle = false,
 		selected = $bindable(false),
 		...attributes
@@ -29,6 +30,24 @@
 	let isLink = $derived(attributes.href != null && !disabled && !loading)
 
 	let tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
+	// A visible label names the button, the tooltip only describes it. Without one, the tooltip
+	// text is the name, and describing the button with it again would read it twice.
+	let tooltipNames = $derived(!!tooltipId && !children && !attributes['aria-label'])
+
+	// Inside a ButtonGroup, the group sets the size and shape its buttons leave open, and with
+	// `selection` it decides what is selected.
+	const group = getButtonGroupContext()
+	let size = $derived(sizeProp ?? group?.size ?? 's')
+	let shape = $derived(shapeProp ?? group?.shape ?? 'round')
+	let groupValue = $derived(
+		group?.selection && attributes.value != null ? String(attributes.value) : undefined,
+	)
+	let isToggle = $derived(toggle || groupValue !== undefined)
+	let isSelected = $derived(groupValue !== undefined ? group!.isSelected(groupValue) : selected)
+	// A selected toggle swaps its resting shape: round turns square, square turns round.
+	let shapeClass = $derived(
+		isSelected ? (shape === 'square' ? 'round' : 'square') : loading ? 'square' : shape,
+	)
 
 	const morph = pressMorph()
 
@@ -41,6 +60,7 @@
 {#snippet content()}
 	{#if !disabled && !loading}
 		<Ripple forElement={element} />
+		<span class="np-touch"></span>
 	{/if}
 	{#if loading}
 		<div class="circular-progress">
@@ -68,21 +88,21 @@
 	<a
 		{...attributes}
 		onclick={(event) => {
-			if (!toggle) {
+			if (!isToggle) {
 				handlePress()
 			}
 			attributes.onclick?.(event)
 		}}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={title || attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? (tooltipNames ? title : undefined)}
 		bind:this={element}
 		class={[
 			'np-button',
 			size,
-			selected ? 'square' : shape,
-			toggle && 'toggle',
-			selected && 'selected',
+			shapeClass,
+			isToggle && 'toggle',
+			isSelected && 'selected',
 			'enabled',
 			variant,
 			morph.pressed && 'pressed',
@@ -94,16 +114,18 @@
 {:else}
 	<button
 		{...attributes as HTMLButtonAttributes}
-		aria-describedby={tooltipId ?? attributes['aria-describedby']}
+		aria-describedby={(!tooltipNames && tooltipId) || attributes['aria-describedby']}
 		interestfor={tooltipId ?? attributes['interestfor']}
-		aria-label={title || attributes['aria-label']}
+		aria-label={attributes['aria-label'] ?? (tooltipNames ? title : undefined)}
 		disabled={disabled || loading}
-		aria-pressed={toggle ? selected : undefined}
+		aria-pressed={isToggle ? isSelected : undefined}
 		aria-busy={loading}
 		type={(attributes['type'] as 'button' | 'submit' | 'reset' | 'button') ?? undefined}
 		bind:this={element}
 		onclick={(event) => {
-			if (toggle) {
+			if (groupValue !== undefined) {
+				group!.toggle(groupValue)
+			} else if (toggle) {
 				selected = !selected
 			} else {
 				handlePress()
@@ -113,9 +135,9 @@
 		class={[
 			'np-button',
 			size,
-			selected || loading ? 'square' : shape,
-			toggle && 'toggle',
-			selected && 'selected',
+			shapeClass,
+			isToggle && 'toggle',
+			isSelected && 'selected',
 			loading && 'np-loading',
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
 			morph.pressed && 'pressed',
@@ -131,10 +153,10 @@
 {/if}
 
 <style>
+	/* The label is never truncated or wrapped, the button grows to fit it instead. */
 	.children-wrapper {
-		flex: 1;
-		overflow: var(--_button-label-overflow, hidden);
-		text-overflow: var(--_button-label-text-overflow, ellipsis);
+		min-width: 0;
+		overflow: var(--_button-label-overflow, visible);
 		text-wrap: nowrap;
 	}
 	.circular-progress {
@@ -162,8 +184,10 @@
 		display: inline-flex;
 		user-select: none;
 		align-items: center;
-		text-align: start;
-		overflow: hidden;
+		/* Icon and label stay grouped and centered, also in a stretched button. */
+		justify-content: center;
+		text-align: center;
+		min-width: var(--_button-min-width, max-content);
 		font-weight: 500;
 		text-decoration: none;
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
@@ -276,6 +300,17 @@
 		outline-width: 3px;
 		outline-offset: 2px;
 	}
+	.enabled:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
+	/* Extra small and small buttons keep a 48px tall target around them. */
+	.np-touch {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		translate: 0 -50%;
+		height: max(3rem, 100%);
+	}
 	@media (prefers-reduced-motion: no-preference) {
 		.enabled:focus-visible {
 			animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;