noph-ui 0.44.0 → 0.45.1

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,2 @@
+export declare const afterTwoFrames: (fn: () => void) => () => void;
+export declare const afterExit: (element: Element | undefined, fn: () => void) => () => void;

package/dist/animation.js

@@ -0,0 +1,33 @@
+export const afterTwoFrames = (fn) => {
+    let inner = 0;
+    const outer = requestAnimationFrame(() => {
+        inner = requestAnimationFrame(fn);
+    });
+    return () => {
+        cancelAnimationFrame(outer);
+        cancelAnimationFrame(inner);
+    };
+};
+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,230 @@
+<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')
+	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}
+			<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}
+			{@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);
+	}
+
+	.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: 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;
+	}
+	.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;
+	}
+
+	.np-app-bar-small,
+	.np-app-bar-search {
+		--_headline-size: 1.375rem;
+	}
+
+	.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;
+	}
+
+	.np-app-bar-medium {
+		--_headline-size: 1.5rem;
+		--_second-row-height: 3rem;
+	}
+	.np-app-bar-large {
+		--_headline-size: 1.75rem;
+		--_second-row-height: 5.5rem;
+	}
+
+	.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;
+		opacity: 0;
+	}
+
+	@supports (animation-timeline: scroll()) {
+		:global(html:has(.np-app-bar-collapsible)) {
+			overflow-anchor: none;
+		}
+		:global(:has(.np-app-bar-scroller-nearest)) {
+			overflow-anchor: none;
+		}
+
+		.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 {
+		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,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export interface AppBarProps extends HTMLAttributes<HTMLElement> {
+    variant?: 'search' | 'small' | 'medium' | 'large';
+    headline?: string;
+    subtitle?: string;
+    leading?: Snippet;
+    search?: Snippet;
+    trailing?: Snippet;
+    collapsible?: boolean;
+    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, {}, "element" | "value" | "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,7 +1,12 @@
 <script lang="ts">
 	import type { BadgeProps } from './types.js'
 
-	let { label, ariaLabel, element = $bindable(), ...attributes }: BadgeProps = $props()
+	let {
+		label,
+		'aria-label': ariaLabel,
+		element = $bindable(),
+		...attributes
+	}: BadgeProps = $props()
 </script>
 
 <div

package/dist/badge/types.d.ts

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

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,
 		]}
 	>

package/dist/button/IconButton.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 { IconButtonProps } from './types.js'
 
@@ -29,22 +29,12 @@
 	const isLink = $derived(attributes.href != null && !disabled && !loading)
 	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()}
@@ -86,7 +76,7 @@
 			'enabled',
 			toggle && 'toggle',
 			selected && 'selected',
-			pressed && 'pressed',
+			morph.pressed && 'pressed',
 			attributes.class,
 		].filter(Boolean)}
 	>
@@ -119,7 +109,7 @@
 			disabled || loading ? `${variant}-disabled disabled` : `${variant} enabled`,
 			toggle && 'toggle',
 			selected && 'selected',
-			pressed && 'pressed',
+			morph.pressed && 'pressed',
 			attributes.class,
 		]}
 	>

package/dist/button/SegmentedButton.svelte

@@ -10,13 +10,16 @@
 		multiSelect = false,
 		element = $bindable(),
 		group = $bindable(),
+		issues,
 		...attributes
 	}: SegmentedButtonProps = $props()
+
+	let hasError = $derived(!!issues?.length)
 </script>
 
 <div
 	{...attributes}
-	class={['np-segmented-buttons', attributes.class]}
+	class={['np-segmented-buttons', hasError && 'np-error', attributes.class]}
 	bind:this={element}
 	style="{attributes.style};grid-template-columns: repeat({options.length}, minmax(max-content, 1fr));"
 >
@@ -95,6 +98,17 @@
 		overflow-x: auto;
 	}
 
+	.np-segmented-buttons.np-error {
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+		border-color: var(--np-color-error);
+		color: var(--np-color-error);
+	}
+
+	.np-error .np-segmented-button {
+		border-inline-end-color: var(--np-color-error);
+	}
+
 	.np-segmented-button {
 		flex: 1;
 		padding: 0.5rem 1.75rem;

package/dist/button/SplitButton.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import ChevronDownIcon from '../icons/ChevronDownIcon.svelte'
+	import Menu from '../menu/Menu.svelte'
+	import Button from './Button.svelte'
+	import ButtonGroup from './ButtonGroup.svelte'
+	import type { SplitButtonProps } from './types.js'
+
+	let {
+		label = '',
+		icon,
+		menu,
+		variant = 'filled',
+		size = 's',
+		disabled = false,
+		open = $bindable(false),
+		menuLabel = 'More options',
+		onclick,
+		element = $bindable(),
+		...attributes
+	}: SplitButtonProps = $props()
+
+	const uid = $props.id()
+	const menuId = `np-split-button-menu-${uid}`
+
+	let trigger: HTMLElement | undefined = $state()
+</script>
+
+{#snippet caret()}
+	<ChevronDownIcon />
+{/snippet}
+
+<ButtonGroup
+	{...attributes}
+	bind:element
+	variant="connected"
+	class={['np-split-button', attributes.class]}
+>
+	<Button {variant} {size} {disabled} {onclick} start={icon}>{label}</Button>
+	<Button
+		{variant}
+		{size}
+		{disabled}
+		bind:element={trigger}
+		class="np-split-button-trigger"
+		command="toggle-popover"
+		commandfor={menuId}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-label={menuLabel}
+		start={caret}
+	/>
+	<Menu id={menuId} anchor={trigger} bind:open coverAnchor={false}>
+		{@render menu?.(menuId)}
+	</Menu>
+</ButtonGroup>
+
+<style>
+	:global(.np-split-button-trigger svg) {
+		transition: rotate var(--np-motion-expressive-fast-effects);
+	}
+	:global(.np-split-button-trigger[aria-expanded='true'] svg) {
+		rotate: 180deg;
+	}
+	:global(.np-split-button > .np-split-button-trigger) {
+		--np-button-padding: 0;
+		aspect-ratio: 1;
+		justify-content: center;
+	}
+	:global(.np-split-button > .np-split-button-trigger[aria-expanded='true']) {
+		--np-button-group-inner-corner: var(--_round-radius, var(--np-shape-corner-full));
+	}
+	:global(.np-split-button-trigger[aria-expanded='true'] .np-ripple-surface::before) {
+		opacity: var(--np-ripple-hover-opacity, 0.08);
+	}
+</style>

package/dist/button/SplitButton.svelte.d.ts

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