noph-ui 0.43.1 → 0.45.0

package/README.md

@@ -54,8 +54,12 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 
 **Actions**
 [Buttons](https://noph.dev/components/button) ·
+[Button group](https://noph.dev/components/button-group) ·
+[FAB](https://noph.dev/components/fab) ·
 [Icon buttons](https://noph.dev/components/icon-button) ·
 [Segmented buttons](https://noph.dev/components/segmented-button) ·
+[Split button](https://noph.dev/components/split-button) ·
+[Toolbar](https://noph.dev/components/toolbar) ·
 [Ripple](https://noph.dev/components/ripple)
 
 **Inputs & selection**
@@ -65,6 +69,7 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 [DatePicker](https://noph.dev/components/date-picker) ·
 [DateTimePicker](https://noph.dev/components/date-time-picker) ·
 [Radio](https://noph.dev/components/radio) ·
+[Search](https://noph.dev/components/search) ·
 [Select](https://noph.dev/components/select) ·
 [Slider](https://noph.dev/components/slider) ·
 [Switch](https://noph.dev/components/switch) ·
@@ -72,8 +77,10 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 
 **Navigation**
 [Menus](https://noph.dev/components/menu) ·
+[Navigation Bar](https://noph.dev/components/navigation-bar) ·
 [Navigation Drawer](https://noph.dev/components/navigation-drawer) ·
 [Navigation Rail](https://noph.dev/components/navigation-rail) ·
+[App bar](https://noph.dev/components/app-bar) ·
 [Tabs](https://noph.dev/components/tabs)
 
 **Communication**
@@ -82,9 +89,11 @@ Live demos and usage examples for every component are available on [noph.dev](ht
 [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)
+[Tooltips](https://noph.dev/components/tooltip) ·
+[Rich tooltip](https://noph.dev/components/tooltip#rich-tooltip)
 
 **Containment**
 [Cards](https://noph.dev/components/card) ·
 [Divider](https://noph.dev/components/divider) ·
+[Sheets](https://noph.dev/components/sheet) ·
 [Lists](https://noph.dev/components/list)

package/dist/animation.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Runs `fn` after two frames, so a class or attribute change written just before it has been through
+ * one style recalculation. Returns a canceller.
+ */
+export declare const afterTwoFrames: (fn: () => void) => () => void;
+/**
+ * Runs `fn` once `element` has finished the transitions it is playing, so content gated on `open`
+ * can stay mounted for as long as its container is still on screen. A container that animates its
+ * exit is still painted after `open` has flipped to `false`, and content dropped on that flip empties
+ * the container a frame before it starts to leave.
+ *
+ * The wait starts two frames in because a transition does not exist until the browser has
+ * recalculated styles, so `getAnimations()` reads empty straight after the change that starts it.
+ * An element with no exit animation therefore finishes on the second frame. Returns a canceller for
+ * the container reopening mid exit.
+ */
+export declare const afterExit: (element: Element | undefined, fn: () => void) => () => void;

package/dist/animation.js

@@ -0,0 +1,48 @@
+/**
+ * Runs `fn` after two frames, so a class or attribute change written just before it has been through
+ * one style recalculation. Returns a canceller.
+ */
+export const afterTwoFrames = (fn) => {
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+        inner = requestAnimationFrame(fn);
+    });
+    return () => {
+        cancelAnimationFrame(outer);
+        cancelAnimationFrame(inner);
+    };
+};
+/**
+ * Runs `fn` once `element` has finished the transitions it is playing, so content gated on `open`
+ * can stay mounted for as long as its container is still on screen. A container that animates its
+ * exit is still painted after `open` has flipped to `false`, and content dropped on that flip empties
+ * the container a frame before it starts to leave.
+ *
+ * The wait starts two frames in because a transition does not exist until the browser has
+ * recalculated styles, so `getAnimations()` reads empty straight after the change that starts it.
+ * An element with no exit animation therefore finishes on the second frame. Returns a canceller for
+ * the container reopening mid exit.
+ */
+export const afterExit = (element, fn) => {
+    if (!element) {
+        fn();
+        return () => { };
+    }
+    let cancelled = false;
+    const finish = () => {
+        if (!cancelled)
+            fn();
+    };
+    const cancelFrames = afterTwoFrames(() => {
+        const animations = element.getAnimations();
+        if (animations.length === 0) {
+            finish();
+            return;
+        }
+        Promise.allSettled(animations.map(({ finished }) => finished)).then(finish);
+    });
+    return () => {
+        cancelled = true;
+        cancelFrames();
+    };
+};

package/dist/app-bar/AppBar.svelte

@@ -0,0 +1,280 @@
+<script lang="ts">
+	import type { AppBarProps } from './types.js'
+
+	let {
+		variant = 'small',
+		headline,
+		subtitle,
+		leading,
+		search,
+		trailing,
+		collapsible = false,
+		scroller = 'root',
+		children,
+		element = $bindable(),
+		...attributes
+	}: AppBarProps = $props()
+
+	const twoLine = $derived(variant === 'medium' || variant === 'large')
+	const isSearch = $derived(variant === 'search')
+	// Only a two-line bar has a second row to collapse.
+	const collapses = $derived(collapsible && twoLine)
+</script>
+
+{#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 subtitle}
+			<div class="np-app-bar-subtitle">{subtitle}</div>
+		{/if}
+	</div>
+{/snippet}
+
+<header
+	{...attributes}
+	bind:this={element}
+	class={[
+		'np-app-bar',
+		`np-app-bar-${variant}`,
+		collapses && 'np-app-bar-collapsible',
+		collapses && scroller === 'nearest' && 'np-app-bar-scroller-nearest',
+		attributes.class,
+	]}
+>
+	<div class="np-app-bar-row">
+		{#if leading}
+			<div class="np-app-bar-leading">{@render leading()}</div>
+		{/if}
+		{#if isSearch}
+			<!-- A search app bar carries a field in place of a headline. -->
+			<div class="np-app-bar-search-field">{@render search?.()}</div>
+		{:else if twoLine}
+			<!--
+				The collapsed copy of the headline and subtitle. Hidden from assistive technology so they
+				are announced once; the real ones below stay in the accessibility tree even at height zero.
+			-->
+			<div class="np-app-bar-inline" aria-hidden="true">{@render titles(true)}</div>
+		{:else}
+			{@render titles(false)}
+		{/if}
+		{#if trailing}
+			<div class="np-app-bar-trailing">{@render trailing()}</div>
+		{/if}
+	</div>
+	{#if twoLine}
+		<div class="np-app-bar-second-row">
+			{@render titles(false)}
+		</div>
+	{/if}
+	{@render children?.()}
+</header>
+
+<style>
+	.np-app-bar {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 8;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		background-color: var(--np-app-bar-container-color, var(--np-color-surface));
+		color: var(--np-color-on-surface);
+		--np-icon-button-icon-color: var(--np-color-on-surface-variant);
+	}
+
+	/*
+	 * An expanded search floats past the bar's own bounds, into the space of whatever comes
+	 * after it in the document. Sibling bars share the same z-index, so without this the one
+	 * holding the expanded search would lose to a later sibling and the view would open behind
+	 * it rather than over it.
+	 */
+	.np-app-bar:has(:global(.np-search-expanded)) {
+		z-index: 9;
+	}
+
+	.np-app-bar-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: none;
+		/* `min-height` rather than `height`, so a subtitle on a one-row bar grows it. */
+		min-height: 4rem;
+		padding-inline: 0.25rem;
+	}
+
+	.np-app-bar-leading,
+	.np-app-bar-trailing {
+		display: flex;
+		align-items: center;
+		flex: none;
+		gap: 0.25rem;
+	}
+	.np-app-bar-trailing {
+		margin-inline-start: auto;
+	}
+
+	.np-app-bar-titles {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	.np-app-bar-subtitle {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		color: var(--np-app-bar-subtitle-color, var(--np-color-on-surface-variant));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	/* The collapsed copy sits on one row, so its subtitle stays at the small size. */
+	.np-app-bar-titles-inline .np-app-bar-headline {
+		font-size: 1.375rem;
+	}
+
+	.np-app-bar-headline {
+		font-size: var(--_headline-size);
+		line-height: 1.2;
+		font-weight: 400;
+		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	/* One-row bars: the headline sits in the action row. */
+	.np-app-bar-small,
+	.np-app-bar-search {
+		--_headline-size: 1.375rem;
+	}
+
+	/*
+	 * The field takes the row, so a search bar has no headline to size. Named `-search-field`
+	 * rather than `-search`, which is already the variant class on the header.
+	 */
+	.np-app-bar-search-field {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		align-items: center;
+		padding-inline: 0.25rem;
+	}
+	.np-app-bar-small .np-app-bar-titles {
+		padding-inline-start: 0.75rem;
+		flex: 1;
+	}
+
+	/* Two-row bars: the headline sits below, and the inline copy is revealed on collapse. */
+	.np-app-bar-medium {
+		--_headline-size: 1.5rem;
+		--_second-row-height: 3rem; /* medium: 64 + 48 = 112 */
+	}
+	.np-app-bar-large {
+		--_headline-size: 1.75rem;
+		--_second-row-height: 5.5rem; /* large: 64 + 88 = 152 */
+	}
+
+	/*
+	 * Sized by its content with a floor, not a fixed height, so a headline plus a subtitle is not
+	 * clipped. `interpolate-size` lets the collapse animate that intrinsic height down to zero,
+	 * the same way the extended FAB animates its width.
+	 */
+	.np-app-bar-second-row {
+		interpolate-size: allow-keywords;
+		display: flex;
+		align-items: flex-end;
+		box-sizing: border-box;
+		height: auto;
+		min-height: var(--_second-row-height);
+		padding-inline: 1rem;
+		padding-block-end: 1rem;
+		overflow: hidden;
+	}
+
+	.np-app-bar-inline {
+		font-size: 1.375rem;
+		line-height: 1.2;
+		font-weight: 400;
+		color: var(--np-app-bar-headline-color, var(--np-color-on-surface));
+		padding-inline-start: 0.75rem;
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		/* Hidden until the bar collapses. */
+		opacity: 0;
+	}
+
+	/*
+	 * The collapse. `animation-timeline: scroll()` drives these keyframes from the scroll position
+	 * itself, so there is no scroll listener, no measurement and no state. `animation-range` ends
+	 * the collapse once the page has scrolled past the second row's height.
+	 */
+	@supports (animation-timeline: scroll()) {
+		/*
+		 * Scroll anchoring has to be off on whichever element scrolls, or the collapse cannot
+		 * happen at all: the bar shrinking above the viewport is exactly the content shift that
+		 * anchoring exists to compensate for, so the browser pushes the scroll position back and
+		 * the two fight to a standstill. `:has()` reaches the scroller so a consumer does not have
+		 * to know this, and only ever matches when a collapsible bar is actually present.
+		 */
+		:global(html:has(.np-app-bar-collapsible)) {
+			overflow-anchor: none;
+		}
+		/*
+		 * `scroll(nearest block)` resolves to the nearest scrollable ancestor at any depth, and CSS
+		 * cannot single that one out, so every ancestor of the bar is covered. Turning anchoring off
+		 * on an ancestor that does not scroll costs nothing.
+		 */
+		:global(:has(.np-app-bar-scroller-nearest)) {
+			overflow-anchor: none;
+		}
+
+		/*
+		 * Deliberately not gated on `prefers-reduced-motion`. The collapse is a layout state tied
+		 * one to one to the scroll position, the way `position: sticky` is, not motion that plays on
+		 * its own. Turning it off would leave the bar permanently eating a third of a small screen
+		 * rather than removing an animation.
+		 */
+		.np-app-bar-collapsible .np-app-bar-second-row {
+			animation: np-app-bar-collapse linear both;
+			animation-timeline: scroll(root block);
+			animation-range: 0 var(--_second-row-height);
+		}
+		.np-app-bar-collapsible .np-app-bar-inline {
+			animation: np-app-bar-reveal linear both;
+			animation-timeline: scroll(root block);
+			animation-range: 0 var(--_second-row-height);
+		}
+		.np-app-bar-scroller-nearest .np-app-bar-second-row,
+		.np-app-bar-scroller-nearest .np-app-bar-inline {
+			animation-timeline: scroll(nearest block);
+		}
+	}
+
+	@keyframes np-app-bar-collapse {
+		to {
+			height: 0;
+			min-height: 0;
+			padding-block-end: 0;
+			opacity: 0;
+		}
+	}
+
+	@keyframes np-app-bar-reveal {
+		/* Held hidden for the first half, so the two headlines cross rather than overlap. */
+		0%,
+		50% {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

package/dist/app-bar/AppBar.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AppBarProps } from './types.ts';
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "element">;
+type AppBar = ReturnType<typeof AppBar>;
+export default AppBar;

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

@@ -0,0 +1 @@
+export { default as AppBar } from './AppBar.svelte';

package/dist/app-bar/index.js

@@ -0,0 +1 @@
+export { default as AppBar } from './AppBar.svelte';

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AppBarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * M3 Expressive's four: `'search'` carries a search field instead of a headline and is the
+     * emphasised, global entry point to search. `'small'` is one row. `'medium'` and `'large'` are
+     * the flexible variants, putting the headline on a second line below the action row.
+     */
+    variant?: 'search' | 'small' | 'medium' | 'large';
+    /** Named `headline` rather than `title`, which is the native tooltip attribute. */
+    headline?: string;
+    /** Secondary line under the headline. */
+    subtitle?: string;
+    /** Leading action, usually a navigation or back icon button. */
+    leading?: Snippet;
+    /**
+     * The search field for `variant="search"`. Put a `Search` here. Replaces the headline, which a
+     * search app bar does not show.
+     */
+    search?: Snippet;
+    /** Trailing actions. */
+    trailing?: Snippet;
+    /**
+     * Collapses a `medium` or `large` bar down to one row as the page scrolls. Driven by
+     * `animation-timeline: scroll()`, so there is no scroll listener. Where that is unsupported the
+     * bar simply stays expanded.
+     */
+    collapsible?: boolean;
+    /**
+     * The element the collapse is tied to. `'root'` (the default) follows the page scroller; pass a
+     * different scroll container's axis with `'nearest'` when the bar sits inside one.
+     */
+    scroller?: 'root' | 'nearest';
+    element?: HTMLElement;
+}

package/dist/app-bar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/autocomplete/AutoComplete.svelte

@@ -10,7 +10,7 @@
 		value = $bindable(),
 		variant = 'outlined',
 		element = $bindable(),
-		menuOpen = $bindable(false),
+		open = $bindable(false),
 		populated,
 		clampMenuWidth = false,
 		optionsFilter,
@@ -19,6 +19,7 @@
 			finalPopulated = populated
 			menuElement.hidePopover()
 		},
+		style,
 		onkeydown,
 		onclick,
 		oninput,
@@ -36,7 +37,6 @@
 	let displayOptions = $derived(query === '' && !optionsFilter ? options : options.filter(filterFn))
 	let useVirtualList = $derived(displayOptions.length > virtualThreshold)
 	let widthProp = $derived(clampMenuWidth || useVirtualList ? 'width' : 'min-width')
-	let clientWidth = $state(0)
 	let menuElement = $state<HTMLDivElement>()
 	let finalPopulated = $derived(populated)
 	let activeIndex = $state(NO_INDEX)
@@ -74,7 +74,7 @@
 			activeIndex = NO_INDEX
 			return
 		}
-		if (!menuOpen || activeIndex < 0) return
+		if (!open || activeIndex < 0) return
 		const id = `${uid}-opt-${activeIndex}`
 		const optEl = document.getElementById(id)
 		if (optEl) {
@@ -135,14 +135,13 @@
 	autocomplete="off"
 	{variant}
 	populated={finalPopulated}
-	bind:clientWidth
 	bind:value
-	style="anchor-name:--{uid};"
+	style="anchor-name:--{uid};{style ?? ''}"
 	role="combobox"
 	aria-controls="listbox-{uid}"
-	aria-expanded={menuOpen}
+	aria-expanded={open}
 	aria-autocomplete="list"
-	aria-activedescendant={menuOpen && activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
+	aria-activedescendant={open && activeIndex >= 0 ? `${uid}-opt-${activeIndex}` : undefined}
 	aria-haspopup="listbox"
 	onclick={(event) => {
 		finalPopulated = true
@@ -159,7 +158,7 @@
 			menuElement?.hidePopover()
 			return
 		}
-		if (event.key === 'Escape' && menuOpen) {
+		if (event.key === 'Escape' && open) {
 			menuElement?.hidePopover()
 			activeIndex = NO_INDEX
 			event.preventDefault()
@@ -189,7 +188,7 @@
 			event.preventDefault()
 			return
 		}
-		if (event.key === 'Enter' && menuOpen && activeIndex >= 0) {
+		if (event.key === 'Enter' && open && activeIndex >= 0) {
 			const opt = displayOptions[activeIndex]
 			if (opt) {
 				selectOption(opt)
@@ -203,7 +202,7 @@
 />
 <Menu
 	id="listbox-{uid}"
-	style="position-anchor:--{uid};{widthProp}:{clientWidth}px"
+	style="position-anchor:--{uid};{widthProp}:anchor-size(width)"
 	role="listbox"
 	class={[!displayOptions.length && 'np-auto-complete-empty']}
 	coverAnchor={false}
@@ -214,7 +213,7 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
-	bind:open={menuOpen}
+	bind:open
 	ontoggle={(e) => {
 		if (e.newState === 'closed') {
 			activeIndex = NO_INDEX

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

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

package/dist/autocomplete/types.d.ts

@@ -13,5 +13,5 @@ export interface AutoCompleteProps extends Omit<TextFieldProps, 'clientWidth' |
     onoptionselect?: (option: AutoCompleteOption, menuElement: HTMLDivElement) => void;
     clampMenuWidth?: boolean;
     virtualThreshold?: number;
-    menuOpen?: boolean;
+    open?: boolean;
 }

package/dist/badge/Badge.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
-	let { label, ariaLabel }: { label?: string | number; ariaLabel?: string } = $props()
+	import type { BadgeProps } from './types.js'
+
+	let {
+		label,
+		'aria-label': ariaLabel,
+		element = $bindable(),
+		...attributes
+	}: BadgeProps = $props()
 </script>
 
 <div
+	{...attributes}
 	aria-hidden={ariaLabel ? undefined : 'true'}
 	role={ariaLabel ? 'status' : undefined}
 	aria-label={ariaLabel}
+	bind:this={element}
 	class={[
 		'np-badge-container',
 		label === undefined ? 'np-badge-container-no-label' : 'np-badge-container-label',
+		attributes.class,
 	]}
 >
 	{#if label !== undefined}

package/dist/badge/Badge.svelte.d.ts

@@ -1,7 +1,4 @@
-type $$ComponentProps = {
-    label?: string | number;
-    ariaLabel?: string;
-};
-declare const Badge: import("svelte").Component<$$ComponentProps, {}, "">;
+import type { BadgeProps } from './types.ts';
+declare const Badge: import("svelte").Component<BadgeProps, {}, "element">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/badge/types.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string | number;
+    element?: HTMLDivElement;
+}

package/dist/badge/types.js

@@ -0,0 +1 @@
+export {};

package/dist/button/Button.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import { pressMorph } from '../press.svelte.js'
 	import CircularProgress from '../progress/CircularProgress.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import Tooltip from '../tooltip/Tooltip.svelte'
-	import { onMount } from 'svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { ButtonProps } from './types.js'
 
@@ -30,22 +30,12 @@
 
 	const tooltipId = $derived(title && !disabled && !loading ? uid : undefined)
 
-	let pressed = $state(false)
-	let pressedTimeout: ReturnType<typeof setTimeout>
+	const morph = pressMorph()
 
 	const handlePress = () => {
 		if (disabled || loading) return
-		pressed = true
-		pressedTimeout = setTimeout(() => {
-			pressed = false
-		}, 100)
+		morph.press()
 	}
-
-	onMount(() => {
-		return () => {
-			clearTimeout(pressedTimeout)
-		}
-	})
 </script>
 
 {#snippet content()}
@@ -95,7 +85,7 @@
 			selected && 'selected',
 			'enabled',
 			variant,
-			pressed && 'pressed',
+			morph.pressed && 'pressed',
 			attributes.class,
 		]}
 	>
@@ -128,7 +118,7 @@
 			selected && 'selected',
 			loading && 'np-loading',
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
-			pressed && 'pressed',
+			morph.pressed && 'pressed',
 			attributes.class,
 		]}
 	>