noph-ui 0.51.2 → 0.52.0

package/dist/navigation-bar/NavigationBarItem.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../internal/focus-ring.css'
 	import Badge from '../badge/Badge.svelte'
+	import { badgeDescription } from '../badge/description.js'
 	import Ripple from '../ripple/Ripple.svelte'
 	import type { HTMLButtonAttributes } from 'svelte/elements'
 	import type { NavigationBarItemProps } from './types.js'
@@ -18,7 +19,11 @@
 		...attributes
 	}: NavigationBarItemProps = $props()
 
-	let touchEl: HTMLSpanElement | undefined = $state()
+	const uid = $props.id()
+	let badgeId = $derived(badge ? `${uid}-badge` : undefined)
+	let describedBy = $derived(
+		[attributes['aria-describedby'], badgeId].filter(Boolean).join(' ') || undefined,
+	)
 
 	let isLink = $derived(attributes.href != null)
 	let classes = $derived([
@@ -32,21 +37,24 @@
 
 {#snippet content()}
 	{#if orientation === 'horizontal'}
-		<Ripple forElement={touchEl} />
+		<Ripple forElement={element} />
 	{/if}
 	<span class="np-navigation-bar-item-icon">
 		{#if orientation === 'vertical'}
-			<Ripple forElement={touchEl} />
+			<Ripple forElement={element} />
 		{/if}
 		{@render icon()}
 		{#if badge}
 			<span class="np-navigation-bar-item-badge">
-				<Badge label={badgeLabel} aria-label={badgeAriaLabel} />
+				<Badge label={badgeLabel} />
 			</span>
 		{/if}
 	</span>
 	<span class="np-navigation-bar-item-label">{label}</span>
-	<span class="np-touch" bind:this={touchEl}></span>
+	{#if badgeId}
+		<span id={badgeId} hidden>{badgeDescription(badgeLabel, badgeAriaLabel)}</span>
+	{/if}
+	<span class="np-touch"></span>
 {/snippet}
 
 {#if isLink}
@@ -54,6 +62,7 @@
 		{...attributes}
 		bind:this={element}
 		href={attributes.href}
+		aria-describedby={describedBy}
 		class={classes}
 		aria-current={selected ? 'page' : undefined}
 		tabindex={selected ? 0 : -1}
@@ -64,6 +73,7 @@
 	<button
 		{...attributes as HTMLButtonAttributes}
 		bind:this={element}
+		aria-describedby={describedBy}
 		class={classes}
 		aria-current={selected ? 'page' : undefined}
 		tabindex={selected ? 0 : -1}
@@ -80,6 +90,8 @@
 		cursor: pointer;
 		font: inherit;
 		border-width: 0;
+		padding-block: 0;
+		padding-inline: 0.375rem;
 		background: none;
 		display: flex;
 		flex-direction: column;
@@ -150,6 +162,7 @@
 	}
 
 	.np-navigation-bar-item-horizontal {
+		flex: 0 0 auto;
 		flex-direction: row;
 		justify-content: center;
 		gap: 0.25rem;
@@ -182,14 +195,12 @@
 	.np-navigation-bar-item-horizontal .np-navigation-bar-item-icon::before {
 		content: none;
 	}
-	.np-navigation-bar-item-horizontal .np-navigation-bar-item-badge {
-		--np-badge-top: -0.25rem;
-		--np-badge-end: -0.25rem;
-	}
 	.np-navigation-bar-item-horizontal .np-touch {
-		inset: 0;
+		inset-inline: 0;
+		inset-block-start: 50%;
+		translate: 0 -50%;
 		width: 100%;
-		height: 100%;
+		height: max(3rem, 100%);
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-bar-item-horizontal::before {
@@ -200,10 +211,11 @@
 	}
 
 	.np-navigation-bar-item-badge {
-		--np-badge-top: 0;
-		--np-badge-end: 1rem;
 		position: absolute;
 		inset: 0;
+		width: 1.5rem;
+		height: 1.5rem;
+		margin: auto;
 		pointer-events: none;
 	}
 
@@ -221,6 +233,10 @@
 		outline-offset: 2px;
 		border-radius: 1rem;
 	}
+	/* The focused state layer, on top of the ring. */
+	.np-navigation-bar-item:focus-visible :global(.np-ripple-surface)::before {
+		opacity: var(--np-ripple-focus-opacity, 0.1);
+	}
 
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-bar-item-icon::before {

package/dist/navigation-drawer/NavigationDrawer.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import '../internal/exit.css'
+	import { exitAnimation } from '../animation.js'
+	import { arrowKeyNav, focusableItems, 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),
+		backdrop = true,
+		open = $bindable(),
+		headline,
 		element = $bindable(),
 		direction,
 		children,
@@ -15,8 +18,10 @@
 		...attributes
 	}: NavigationDrawerProps = $props()
 
-	const attach = rovingTabindex('.np-navigation-drawer-item')
-	const arrowHandler = arrowKeyNav('.np-navigation-drawer-item')
+	const uid = $props.id()
+	const ITEMS = '.np-navigation-drawer-item'
+	const attach = rovingTabindex(ITEMS)
+	const arrowHandler = arrowKeyNav(ITEMS)
 
 	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		userKeydown?.(event)
@@ -40,8 +45,23 @@
 		show,
 		close,
 	)
+
+	// The headline names the navigation unless the drawer is named otherwise.
+	let headlineId = $derived(headline ? `${uid}-headline` : undefined)
+	let labelledBy = $derived(
+		attributes['aria-labelledby'] ?? (attributes['aria-label'] ? undefined : headlineId),
+	)
 </script>
 
+{#snippet content()}
+	<div class="np-navigation-drawer">
+		{#if headline}
+			<div id={headlineId} class="np-navigation-drawer-headline">{headline}</div>
+		{/if}
+		{@render children?.()}
+	</div>
+{/snippet}
+
 {#if modal}
 	<dialog
 		{...attributes}
@@ -55,13 +75,15 @@
 		class={[
 			'np-navigation-drawer-container',
 			'np-navigation-drawer-container-modal',
-			backdrop && 'np-navigation-drawer-backdrop',
+			backdrop && 'np-navigation-drawer-backdrop np-exit-scrim',
 			attributes.class,
 		]}
+		{@attach exitAnimation}
 		onkeydown={handleKeydown}
 		ontoggle={(event) => {
 			open = event.newState === 'open'
-			if (event.newState === 'open') element?.focus()
+			// Focus lands on the first destination, the first interactive element.
+			if (open && element) focusableItems(element, ITEMS)[0]?.focus()
 			ontoggle?.(event)
 		}}
 		onclick={(event) => {
@@ -71,12 +93,10 @@
 	>
 		<nav
 			aria-label={attributes['aria-label']}
-			aria-labelledby={attributes['aria-labelledby']}
+			aria-labelledby={labelledBy}
 			class="np-navigation-wrapper np-navigation-drawer-shade"
 		>
-			<div class="np-navigation-drawer">
-				{@render children?.()}
-			</div>
+			{@render content()}
 		</nav>
 	</dialog>
 {:else}
@@ -84,13 +104,16 @@
 		{...attributes}
 		{@attach attach}
 		bind:this={element}
-		class={['np-navigation-drawer-container', attributes.class]}
+		aria-labelledby={labelledBy}
+		class={[
+			'np-navigation-drawer-container',
+			open === false && 'np-navigation-drawer-closed',
+			attributes.class,
+		]}
 		onkeydown={handleKeydown}
 	>
 		<div class="np-navigation-wrapper">
-			<div class="np-navigation-drawer">
-				{@render children?.()}
-			</div>
+			{@render content()}
 		</div>
 	</nav>
 {/if}
@@ -98,7 +121,7 @@
 <style>
 	.np-navigation-drawer-container {
 		color: var(--np-color-on-surface-variant);
-		width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
+		width: var(--np-navigation-drawer-width, 22.5rem);
 		border: 0;
 		outline: none;
 		margin: 0;
@@ -140,16 +163,28 @@
 		transform: translateX(0);
 	}
 
+	/* It moves like the modal navigation rail: it springs open and slides back without the spring. */
 	@media (prefers-reduced-motion: no-preference) {
 		.np-navigation-drawer-container-modal .np-navigation-wrapper {
-			transition: transform var(--np-motion-standard-slow-spatial);
+			--_motion: var(--np-motion-standard-fast-spatial);
+			transition: transform var(--_motion);
+			/* Its colour carries on past the window's edge, so the spring shows no gap there. */
+			box-shadow:
+				var(--_bleed) 0 0 0
+					var(--np-navigation-drawer-background, var(--np-color-surface-container-low)),
+				var(--np-elevation-1);
 		}
 		.np-navigation-drawer-container-modal {
+			--_bleed: -2rem;
 			transition:
-				overlay var(--np-motion-standard-slow-spatial) allow-discrete,
-				display var(--np-motion-standard-slow-spatial) allow-discrete;
+				overlay var(--np-motion-standard-fast-spatial) allow-discrete,
+				display var(--np-motion-standard-fast-spatial) allow-discrete;
+		}
+		.np-navigation-drawer-container-modal:dir(rtl) {
+			--_bleed: 2rem;
 		}
 		.np-navigation-drawer-container-modal[open] .np-navigation-wrapper {
+			--_motion: var(--np-motion-expressive-default-spatial);
 			@starting-style {
 				transform: var(--_hidden);
 			}
@@ -158,9 +193,50 @@
 
 	.np-navigation-drawer {
 		display: flex;
-		padding: var(--np-navigation-drawer-padding, 1.25rem 0.75rem);
+		padding: var(--np-navigation-drawer-padding, 0.75rem);
 		flex-direction: column;
 	}
+	/* The headline sits like a 56dp row, its text in line with the labels below. */
+	.np-navigation-drawer-headline {
+		display: flex;
+		align-items: center;
+		min-height: 3.5rem;
+		padding-inline: 1rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		letter-spacing: 0.006rem;
+		color: var(--np-color-on-surface-variant);
+	}
+
+	/* A dismissible standard drawer slides out to the start and gives its space back. */
+	.np-navigation-drawer-container:not(.np-navigation-drawer-container-modal) {
+		--_hidden: translateX(-100%);
+		overflow: hidden;
+	}
+	.np-navigation-drawer-container:not(.np-navigation-drawer-container-modal):dir(rtl) {
+		--_hidden: translateX(100%);
+	}
+	.np-navigation-drawer-closed {
+		width: 0;
+		visibility: hidden;
+	}
+	.np-navigation-drawer-closed .np-navigation-wrapper {
+		transform: var(--_hidden);
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		/* visibility stays visible for as long as either end is, so it hides only once the drawer
+		   has slid out. */
+		.np-navigation-drawer-container:not(.np-navigation-drawer-container-modal) {
+			transition:
+				width var(--np-motion-standard-slow-spatial),
+				visibility var(--np-motion-standard-slow-spatial);
+		}
+		.np-navigation-drawer-container:not(.np-navigation-drawer-container-modal)
+			.np-navigation-wrapper {
+			transition: transform var(--np-motion-standard-slow-spatial);
+		}
+	}
 	.np-navigation-drawer-shade {
 		box-shadow: var(--np-elevation-1);
 	}

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

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

package/dist/navigation-drawer/NavigationDrawerItem.svelte

@@ -95,9 +95,6 @@
 		height: 100%;
 		opacity: 0;
 		transform: scaleX(0.32);
-		transition-duration: 0.2s;
-		transition-property: transform, opacity;
-		transition-timing-function: linear;
 		background-color: var(--np-color-secondary-container);
 		border-radius: var(--np-navigation-drawer-item-container-shape, var(--np-shape-corner-full));
 		z-index: -1;
@@ -107,6 +104,14 @@
 		opacity: 1;
 		transform: scaleX(1);
 	}
+	/* Like the active indicator in the navigation bar and rail. */
+	@media (prefers-reduced-motion: no-preference) {
+		.np-navigation-drawer-item::before {
+			transition:
+				transform var(--np-motion-expressive-default-spatial),
+				opacity var(--np-motion-expressive-fast-effects);
+		}
+	}
 
 	.np-navigation-drawer-item:focus-visible {
 		outline-style: solid;

package/dist/navigation-drawer/NavigationDrawerSection.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import type { NavigationDrawerSectionProps } from './types.js'
+
+	let {
+		label,
+		children,
+		element = $bindable(),
+		...attributes
+	}: NavigationDrawerSectionProps = $props()
+
+	const uid = $props.id()
+</script>
+
+<!-- A group of related destinations, set off by a divider and named by its label. -->
+<div
+	{...attributes}
+	bind:this={element}
+	role="group"
+	aria-labelledby="{uid}-label"
+	class={['np-navigation-drawer-section', attributes.class]}
+>
+	<div class="np-navigation-drawer-section-divider"></div>
+	<div id="{uid}-label" class="np-navigation-drawer-section-label">{label}</div>
+	{@render children?.()}
+</div>
+
+<style>
+	.np-navigation-drawer-section {
+		display: flex;
+		flex-direction: column;
+	}
+	/* 16dp above, and 28dp in from both edges of the drawer, like the labels. */
+	.np-navigation-drawer-section-divider {
+		height: 1px;
+		margin: 1rem 1rem 0;
+		background-color: var(--np-divider-color, var(--np-color-outline-variant));
+	}
+	.np-navigation-drawer-section-label {
+		display: flex;
+		align-items: center;
+		min-height: 3.5rem;
+		padding-inline: 1rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		letter-spacing: 0.006rem;
+		color: var(--np-color-on-surface-variant);
+	}
+</style>

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

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

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

@@ -1,2 +1,3 @@
 export { default as NavigationDrawer } from './NavigationDrawer.svelte';
 export { default as NavigationDrawerItem } from './NavigationDrawerItem.svelte';
+export { default as NavigationDrawerSection } from './NavigationDrawerSection.svelte';

package/dist/navigation-drawer/index.js

@@ -1,2 +1,3 @@
 export { default as NavigationDrawer } from './NavigationDrawer.svelte';
 export { default as NavigationDrawerItem } from './NavigationDrawerItem.svelte';
+export { default as NavigationDrawerSection } from './NavigationDrawerSection.svelte';

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

@@ -2,8 +2,15 @@ import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 export interface NavigationDrawerProps extends HTMLAttributes<HTMLElement> {
     modal?: boolean;
+    /** The scrim behind a modal drawer. On by default, as Material 3 asks. */
     backdrop?: boolean;
+    /**
+     * Modal: whether the drawer is open. Standard: leave it out for a drawer that is always there,
+     * or set it to make the drawer dismissible, sliding in and out.
+     */
     open?: boolean;
+    /** A headline above the destinations. It names the navigation unless `aria-label` does. */
+    headline?: string;
     element?: HTMLElement;
     /**
      * The edge the modal drawer slides in from: `ltr` from the left, `rtl` from the right. Leave it
@@ -21,3 +28,8 @@ export interface NavigationDrawerItemProps extends HTMLAttributes<NavigationDraw
     type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
     element?: NavigationDrawerItemElement;
 }
+export interface NavigationDrawerSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** The section label, shown above the destinations and naming the group. */
+    label: string;
+    element?: HTMLDivElement;
+}