noph-ui 0.44.0 → 0.45.0

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { syncOpenEffect } from '../popover.svelte.js'
 	import type { NavigationDrawerProps } from './types.js'
+
 	let {
 		modal = false,
 		backdrop = false,
+		open = $bindable(false),
 		element = $bindable(),
 		direction = 'ltr',
-		popover,
 		children,
 		onkeydown: userKeydown,
 		ontoggle,
@@ -21,83 +23,123 @@
 		if (!event.defaultPrevented) arrowHandler(event)
 	}
 
-	let previouslyFocused: HTMLElement | undefined
-	let inerted: HTMLElement[] = []
+	/* Only a modal drawer is a dialog; a standard one is a nav that is always in the layout. */
+	const asDialog = () => (element instanceof HTMLDialogElement ? element : undefined)
 
-	const trapFocus = () => {
-		if (!element) return
-		previouslyFocused = document.activeElement as HTMLElement | undefined
-		for (let node: HTMLElement | null = element; node && node !== document.body;) {
-			const parent: HTMLElement | null = node.parentElement
-			if (!parent) break
-			for (const sibling of parent.children) {
-				if (sibling === node || !(sibling instanceof HTMLElement) || sibling.inert) continue
-				sibling.inert = true
-				inerted.push(sibling)
-			}
-			node = parent
-		}
-		element.querySelector<HTMLElement>('.np-navigation-drawer-item')?.focus()
+	export const show = () => {
+		const dialog = asDialog()
+		if (dialog && !dialog.open) dialog.showModal()
 	}
 
-	const releaseFocus = () => {
-		for (const node of inerted) node.inert = false
-		inerted = []
-		previouslyFocused?.focus?.()
-		previouslyFocused = undefined
+	export const close = () => {
+		asDialog()?.close()
 	}
+
+	syncOpenEffect(
+		() => (modal ? element : undefined),
+		() => open,
+		show,
+		close,
+	)
+
+	const start = $derived(direction === 'ltr' ? 'translateX(-100%)' : 'translateX(100%)')
 </script>
 
-<nav
-	{...attributes}
-	{@attach attach}
-	bind:this={element}
-	popover={modal ? popover || 'auto' : undefined}
-	style="--np-navigation-drawer-start: {direction === 'ltr'
-		? 'translateX(-100%)'
-		: 'translateX(100%)'}"
-	class={[
-		'np-navigation-drawer-container',
-		modal && 'np-navigation-drawer-container-modal',
-		backdrop && 'np-navigation-drawer-backdrop',
-		attributes.class,
-	]}
-	onkeydown={handleKeydown}
-	ontoggle={(event) => {
-		if (modal) {
-			if (event.newState === 'open') trapFocus()
-			else releaseFocus()
-		}
-		ontoggle?.(event)
-	}}
->
-	{#if backdrop}
-		<div
-			role="none"
-			class="np-backdrop"
-			onclick={() => {
-				element?.hidePopover()
-			}}
-		></div>
-	{/if}
-	<div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
-		<div class="np-navigation-drawer">
-			{#if children}
-				{@render children()}
-			{/if}
+<!--
+	A modal drawer is a `dialog` holding a nav landmark, so the browser keeps the page behind it
+	inert for as long as it is open and hands focus back on close. `::backdrop` is the scrim and
+	`closedby="any"` the tap-outside-to-close. Where `closedby` is unsupported the click handler
+	below covers it: a click on the backdrop is reported against the dialog itself.
+-->
+{#if modal}
+	<dialog
+		{...attributes}
+		{@attach attach}
+		bind:this={element}
+		tabindex="-1"
+		aria-label={null}
+		aria-labelledby={null}
+		closedby="any"
+		style="--np-navigation-drawer-start: {start}; {attributes.style ?? ''}"
+		class={[
+			'np-navigation-drawer-container',
+			'np-navigation-drawer-container-modal',
+			backdrop && 'np-navigation-drawer-backdrop',
+			attributes.class,
+		]}
+		onkeydown={handleKeydown}
+		ontoggle={(event) => {
+			open = event.newState === 'open'
+			/*
+			 * Without this the browser autofocuses the first focusable descendant, the first nav
+			 * item. Focus the drawer itself instead, so nothing is focused that the user didn't
+			 * choose to interact with.
+			 */
+			if (event.newState === 'open') element?.focus()
+			ontoggle?.(event)
+		}}
+		onclick={(event) => {
+			attributes.onclick?.(event)
+			if (event.target === element) close()
+		}}
+	>
+		<!--
+			The label belongs to the navigation landmark, not to the dialog wrapping it, so it is
+			pulled back off the dialog above and put here. Everything else stays on the dialog: it
+			is the container the layout and the custom properties are written against, and the
+			element `commandfor` has to reach.
+		-->
+		<nav
+			aria-label={attributes['aria-label']}
+			aria-labelledby={attributes['aria-labelledby']}
+			class="np-navigation-wrapper np-navigation-drawer-shade"
+		>
+			<div class="np-navigation-drawer">
+				{@render children?.()}
+			</div>
+		</nav>
+	</dialog>
+{:else}
+	<nav
+		{...attributes}
+		{@attach attach}
+		bind:this={element}
+		class={['np-navigation-drawer-container', attributes.class]}
+		onkeydown={handleKeydown}
+	>
+		<div class="np-navigation-wrapper">
+			<div class="np-navigation-drawer">
+				{@render children?.()}
+			</div>
 		</div>
-	</div>
-</nav>
+	</nav>
+{/if}
 
 <style>
 	.np-navigation-drawer-container {
 		color: var(--np-color-on-surface-variant);
 		width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
 		border: 0;
+		/* Focus lands here on open only to stay off the first nav item, not as something to show. */
+		outline: none;
 		margin: 0;
 		padding: 0;
 		background-color: transparent;
+		max-width: none;
+		max-height: none;
 	}
+
+	/* The modal drawer is docked to the inline edge rather than centred as a dialog would be. */
+	.np-navigation-drawer-container-modal {
+		position: fixed;
+		inset-block: 0;
+		height: 100dvh;
+		overflow: visible;
+	}
+	.np-navigation-drawer-container-modal:not([open]) {
+		display: none;
+	}
+
 	.np-navigation-wrapper {
 		background-color: var(--np-navigation-drawer-background, var(--np-color-surface-container-low));
 		border-start-end-radius: var(--np-shape-corner-large);
@@ -106,33 +148,32 @@
 		height: var(--np-navigation-drawer-height, 100dvh);
 		overflow-y: auto;
 		scrollbar-width: thin;
+		display: block;
 	}
 
-	.np-navigation-drawer-container[popover] .np-navigation-wrapper {
+	.np-navigation-drawer-container-modal .np-navigation-wrapper {
 		transform: var(--np-navigation-drawer-start, translateX(-100%));
 	}
-
-	.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
+	.np-navigation-drawer-container-modal[open] .np-navigation-wrapper {
 		transform: translateX(0);
 	}
 
 	@media (prefers-reduced-motion: no-preference) {
-		.np-navigation-drawer-container[popover] .np-navigation-wrapper {
+		.np-navigation-drawer-container-modal .np-navigation-wrapper {
 			transition: transform var(--np-motion-standard-slow-spatial);
 		}
-
-		.np-navigation-drawer-container[popover] {
+		.np-navigation-drawer-container-modal {
 			transition:
 				overlay var(--np-motion-standard-slow-spatial) allow-discrete,
 				display var(--np-motion-standard-slow-spatial) allow-discrete;
 		}
-
-		.np-navigation-drawer-container:popover-open .np-navigation-wrapper {
+		.np-navigation-drawer-container-modal[open] .np-navigation-wrapper {
 			@starting-style {
 				transform: var(--np-navigation-drawer-start, translateX(-100%));
 			}
 		}
 	}
+
 	.np-navigation-drawer {
 		display: flex;
 		padding: var(--np-navigation-drawer-padding, 1.25rem 0.75rem);
@@ -142,17 +183,28 @@
 		box-shadow: var(--np-elevation-1);
 	}
 
-	.np-navigation-drawer-backdrop[popover] .np-backdrop {
-		inset: 0;
-		position: fixed;
+	/* `backdrop` decides whether the scrim is painted; a modal dialog always has the layer. */
+	.np-navigation-drawer-container-modal::backdrop {
+		background-color: transparent;
+	}
+	.np-navigation-drawer-backdrop::backdrop {
 		background-color: var(--np-color-scrim);
 		opacity: 0;
-		transition: opacity var(--np-motion-expressive-slow-effects);
 	}
-	.np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
+	.np-navigation-drawer-backdrop[open]::backdrop {
 		opacity: 0.32;
-		@starting-style {
-			opacity: 0;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-backdrop::backdrop {
+			transition:
+				opacity var(--np-motion-expressive-slow-effects),
+				overlay var(--np-motion-expressive-slow-effects) allow-discrete,
+				display var(--np-motion-expressive-slow-effects) allow-discrete;
+		}
+		.np-navigation-drawer-backdrop[open]::backdrop {
+			@starting-style {
+				opacity: 0;
+			}
 		}
 	}
 </style>

package/dist/navigation-drawer/NavigationDrawer.svelte.d.ts

@@ -1,4 +1,7 @@
 import type { NavigationDrawerProps } from './types.ts';
-declare const NavigationDrawer: import("svelte").Component<NavigationDrawerProps, {}, "element">;
+declare const NavigationDrawer: import("svelte").Component<NavigationDrawerProps, {
+    show: () => void;
+    close: () => void;
+}, "element" | "open">;
 type NavigationDrawer = ReturnType<typeof NavigationDrawer>;
 export default NavigationDrawer;

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -7,7 +7,8 @@
 	let {
 		selected = false,
 		label,
-		badgeLabelText,
+		badgeLabel,
+		badgeAriaLabel,
 		icon,
 		element = $bindable(),
 		...attributes
@@ -24,8 +25,14 @@
 		{/if}
 	</div>
 	<div class="np-navigation-drawer-item-label">{label}</div>
-	{#if badgeLabelText}
-		<div class="np-navigation-drawer-item-badge">{badgeLabelText}</div>
+	{#if badgeLabel}
+		<div
+			class="np-navigation-drawer-item-badge"
+			role={badgeAriaLabel ? 'status' : undefined}
+			aria-label={badgeAriaLabel}
+		>
+			{badgeLabel}
+		</div>
 	{/if}
 {/snippet}
 

package/dist/navigation-drawer/types.d.ts

@@ -1,8 +1,12 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
+    /** A modal drawer is a `dialog` over the page; a standard one is part of the layout. */
     modal?: boolean;
+    /** Paints the scrim behind a modal drawer. */
     backdrop?: boolean;
+    /** Bindable. Whether a modal drawer is showing. Ignored by a standard drawer. */
+    open?: boolean;
     element?: HTMLElement;
     direction?: 'rtl' | 'ltr';
 }
@@ -11,7 +15,8 @@ export interface NavigationDrawerItemProps extends HTMLAttributes<NavigationDraw
     icon?: Snippet;
     label: string;
     selected?: boolean;
-    badgeLabelText?: string;
+    badgeLabel?: string;
+    badgeAriaLabel?: string;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationDrawerItemElement;
 }

package/dist/navigation-rail/NavigationRailItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
+	import Badge from '../badge/Badge.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationRailItemProps } from './types.js'
@@ -8,6 +9,9 @@
 		selected,
 		icon,
 		label,
+		badge = false,
+		badgeLabel,
+		badgeAriaLabel,
 		element = $bindable(),
 		...attributes
 	}: NavigationRailItemProps = $props()
@@ -20,6 +24,11 @@
 	<div class="np-navigation-action-icon">
 		<Ripple forElement={touchEl} />
 		{@render icon()}
+		{#if badge}
+			<div class="np-navigation-action-badge">
+				<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
+			</div>
+		{/if}
 	</div>
 	<div class="np-navigation-action-label">{label}</div>
 	<span class="np-touch" bind:this={touchEl}></span>
@@ -92,6 +101,13 @@
 		transition: color var(--np-motion-expressive-default-effects);
 		color: var(--np-color-on-surface-variant);
 	}
+	.np-navigation-action-badge {
+		--np-badge-top: 0;
+		--np-badge-end: 0.75rem;
+		position: absolute;
+		inset: 0;
+		pointer-events: none;
+	}
 	.np-navigation-action-selected .np-navigation-action-icon {
 		color: var(--np-color-on-secondary-container);
 		--np-icon-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;

package/dist/navigation-rail/types.d.ts

@@ -8,6 +8,9 @@ export interface NavigationRailItemProps extends HTMLAttributes<NavigationRailIt
     icon: Snippet;
     label: string;
     selected?: boolean;
+    badge?: boolean;
+    badgeLabel?: string | number;
+    badgeAriaLabel?: string;
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationRailItemElement;
 }

package/dist/popover.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * `show()`/`close()` for a popover-backed overlay, guarded both ways. `showPopover()` throws if
+ * the popover is already showing and `hidePopover()` throws if it is already hidden, so both
+ * directions need the `:popover-open` check, not just the one that happens to get exercised first.
+ */
+export declare const popoverController: (getElement: () => HTMLElement | undefined) => {
+    show: () => void;
+    close: () => void;
+};
+/**
+ * Keeps a bindable `open` prop in sync with an overlay's own `show`/`close`, so a caller can drive
+ * the overlay either by calling the exported methods or by writing to the bound prop.
+ */
+export declare const syncOpenEffect: (getElement: () => HTMLElement | undefined, getOpen: () => boolean | undefined, show: () => void, close: () => void) => void;

package/dist/popover.svelte.js

@@ -0,0 +1,31 @@
+/**
+ * `show()`/`close()` for a popover-backed overlay, guarded both ways. `showPopover()` throws if
+ * the popover is already showing and `hidePopover()` throws if it is already hidden, so both
+ * directions need the `:popover-open` check, not just the one that happens to get exercised first.
+ */
+export const popoverController = (getElement) => ({
+    show: () => {
+        const element = getElement();
+        if (element && !element.matches(':popover-open'))
+            element.showPopover();
+    },
+    close: () => {
+        const element = getElement();
+        if (element?.matches(':popover-open'))
+            element.hidePopover();
+    },
+});
+/**
+ * Keeps a bindable `open` prop in sync with an overlay's own `show`/`close`, so a caller can drive
+ * the overlay either by calling the exported methods or by writing to the bound prop.
+ */
+export const syncOpenEffect = (getElement, getOpen, show, close) => {
+    $effect(() => {
+        if (!getElement())
+            return;
+        if (getOpen() === true)
+            show();
+        else if (getOpen() === false)
+            close();
+    });
+};

package/dist/press.svelte.d.ts

@@ -0,0 +1,19 @@
+export declare const PRESS_DURATION = 100;
+/**
+ * The corner morph a Button, an IconButton or a FAB plays when it is activated. `:active` covers
+ * the press itself, but it drops the moment the pointer lifts, so a quick click would show only a
+ * frame or two of the morph. The `pressed` this returns is held for as long as the round trip
+ * takes to be seen, and is set from `click`, which arrives for the keyboard as well as the pointer.
+ */
+export declare const pressMorph: () => {
+    readonly pressed: boolean;
+    press: () => void;
+    /**
+     * A change of `shape` supersedes the morph. Both describe the same corner, and the pressed
+     * radius is the shape the element is not, so holding the press across a shape change cancels
+     * the change out and stalls it until the timer runs down. FabMenu's trigger does exactly
+     * that, flipping to `square` on the click that opens the menu; dropping the press there
+     * leaves that click one continuous morph.
+     */
+    supersededBy: (shape: () => unknown) => void;
+};

package/dist/press.svelte.js

@@ -0,0 +1,45 @@
+import { onMount } from 'svelte';
+export const PRESS_DURATION = 100;
+/**
+ * The corner morph a Button, an IconButton or a FAB plays when it is activated. `:active` covers
+ * the press itself, but it drops the moment the pointer lifts, so a quick click would show only a
+ * frame or two of the morph. The `pressed` this returns is held for as long as the round trip
+ * takes to be seen, and is set from `click`, which arrives for the keyboard as well as the pointer.
+ */
+export const pressMorph = () => {
+    let pressed = $state(false);
+    let timeout;
+    const cancel = () => {
+        clearTimeout(timeout);
+        pressed = false;
+    };
+    onMount(() => cancel);
+    return {
+        get pressed() {
+            return pressed;
+        },
+        press: () => {
+            clearTimeout(timeout);
+            pressed = true;
+            timeout = setTimeout(() => (pressed = false), PRESS_DURATION);
+        },
+        /**
+         * A change of `shape` supersedes the morph. Both describe the same corner, and the pressed
+         * radius is the shape the element is not, so holding the press across a shape change cancels
+         * the change out and stalls it until the timer runs down. FabMenu's trigger does exactly
+         * that, flipping to `square` on the click that opens the menu; dropping the press there
+         * leaves that click one continuous morph.
+         */
+        supersededBy: (shape) => {
+            let previous;
+            $effect(() => {
+                const next = shape();
+                const was = previous;
+                previous = next;
+                if (was === undefined || was === next)
+                    return;
+                cancel();
+            });
+        },
+    };
+};

package/dist/radio/Radio.svelte

@@ -9,14 +9,20 @@
 		element = $bindable(),
 		group = $bindable(),
 		style,
+		issues,
 		...attributes
 	}: RadioProps = $props()
 
 	let inputEl = $state<HTMLInputElement>()
 	const uid = $props.id()
+	let hasError = $derived(!!issues?.length)
 </script>
 
-<div {style} class={['np-container', attributes.class]} bind:this={element}>
+<div
+	{style}
+	class={['np-radio-container', hasError && !attributes.disabled && 'np-error', attributes.class]}
+	bind:this={element}
+>
 	{#if !attributes.disabled}
 		<Ripple forElement={inputEl} class="np-radio-ripple" />
 	{/if}
@@ -70,7 +76,7 @@
 		-webkit-tap-highlight-color: transparent;
 	}
 
-	.np-container {
+	.np-radio-container {
 		margin: max(0px, (40px - var(--np-radio-icon-size, 20px))/2);
 		display: inline-flex;
 		vertical-align: top;
@@ -84,7 +90,7 @@
 		cursor: pointer;
 	}
 
-	.np-container:has(input:disabled) {
+	.np-radio-container:has(input:disabled) {
 		cursor: default;
 	}
 
@@ -94,11 +100,11 @@
 		position: absolute;
 	}
 
-	.np-container:has(input:checked) .np-radio-icon {
+	.np-radio-container:has(input:checked) .np-radio-icon {
 		fill: var(--np-radio-selected-icon-color, var(--np-color-primary));
 	}
 
-	.np-container:has(input:disabled) .np-radio-icon {
+	.np-radio-container:has(input:disabled) .np-radio-icon {
 		fill: var(--np-color-on-surface);
 		opacity: 0.38;
 	}
@@ -109,7 +115,7 @@
 		transition: opacity 50ms linear;
 	}
 
-	.np-container:has(input:checked) .inner.circle {
+	.np-radio-container:has(input:checked) .inner.circle {
 		animation: 300ms cubic-bezier(0.05, 0.7, 0.1, 1) 0s 1 normal none running inner-circle-grow;
 		opacity: 1;
 	}
@@ -123,7 +129,20 @@
 		}
 	}
 
-	.np-container:has(input:focus-visible) {
+	.np-error .np-radio-icon {
+		fill: var(--np-color-error);
+	}
+
+	.np-error:has(input:checked) .np-radio-icon {
+		fill: var(--np-color-error);
+	}
+
+	.np-error {
+		--np-ripple-hover-color: var(--np-color-error);
+		--np-ripple-pressed-color: var(--np-color-error);
+	}
+
+	.np-radio-container:has(input:focus-visible) {
 		outline-style: solid;
 		outline-color: var(--np-color-secondary);
 		outline-width: 3px;

package/dist/radio/types.d.ts

@@ -2,4 +2,7 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 export interface RadioProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
     group?: string | number | null;
+    issues?: {
+        message: string;
+    }[];
 }