noph-ui 0.44.0 → 0.45.1

package/dist/fab/FabMenu.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import CloseIcon from '../icons/CloseIcon.svelte'
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
+	import { PRESS_DURATION } from '../press.svelte.js'
+	import { onMount } from 'svelte'
+	import { MediaQuery } from 'svelte/reactivity'
+	import Fab from './Fab.svelte'
+	import type { FabMenuProps } from './types.js'
+
+	let {
+		label = 'Actions',
+		icon,
+		closeIcon,
+		children,
+		variant = 'primary-container',
+		size = 's',
+		placement = 'block-start',
+		closeOnSelect = true,
+		open = $bindable(false),
+		element = $bindable(),
+		...attributes
+	}: FabMenuProps = $props()
+
+	const uid = $props.id()
+	const menuId = `np-fab-menu-${uid}`
+	const anchorName = `--np-fab-menu-${uid}`
+
+	let menuElement: HTMLDivElement | undefined = $state()
+	const reducedMotion = new MediaQuery('(prefers-reduced-motion: reduce)', false)
+
+	const ITEMS = 'button, a[href], [role="menuitem"]'
+	const attach = rovingTabindex(ITEMS)
+	const arrowHandler = $derived(
+		arrowKeyNav(ITEMS, placement.startsWith('inline') ? 'horizontal' : 'vertical'),
+	)
+
+	const controller = popoverController(() => menuElement)
+
+	export const show = () => controller.show()
+
+	export const close = () => {
+		clearTimeout(closeTimeout)
+		controller.close()
+	}
+
+	let closeTimeout: ReturnType<typeof setTimeout>
+
+	const closeAfterPress = () => {
+		if (reducedMotion.current) {
+			close()
+			return
+		}
+		clearTimeout(closeTimeout)
+		closeTimeout = setTimeout(close, PRESS_DURATION)
+	}
+
+	onMount(() => {
+		return () => {
+			clearTimeout(closeTimeout)
+		}
+	})
+
+	syncOpenEffect(
+		() => menuElement,
+		() => open,
+		show,
+		close,
+	)
+</script>
+
+{#snippet triggerIcon()}
+	<span class="np-fab-menu-icons" aria-hidden="true">
+		<span class="np-fab-menu-icon" class:np-fab-menu-icon-away={open}>
+			{#if icon}{@render icon()}{/if}
+		</span>
+		<span class="np-fab-menu-icon" class:np-fab-menu-icon-away={!open}>
+			{#if closeIcon}{@render closeIcon()}{:else}<CloseIcon />{/if}
+		</span>
+	</span>
+{/snippet}
+
+<div
+	{...attributes}
+	bind:this={element}
+	style="anchor-name: {anchorName}; {attributes.style ?? ''}"
+	class={['np-fab-menu', `np-fab-menu-${placement}`, attributes.class]}
+>
+	<Fab
+		{variant}
+		{size}
+		{label}
+		shape={open ? 'square' : 'round'}
+		command="toggle-popover"
+		commandfor={menuId}
+		aria-haspopup="menu"
+		aria-expanded={open}
+		class="np-fab-menu-trigger"
+		icon={triggerIcon}
+	/>
+
+	<div
+		bind:this={menuElement}
+		id={menuId}
+		style="position-anchor: {anchorName}"
+		popover="auto"
+		role="menu"
+		tabindex="-1"
+		aria-label={label}
+		class="np-fab-menu-list"
+		{@attach attach}
+		onkeydown={arrowHandler}
+		onclick={(event) => {
+			if (!closeOnSelect) return
+			const target = event.target as HTMLElement
+			if (target.closest(ITEMS)) closeAfterPress()
+		}}
+		ontoggle={(event) => {
+			open = event.newState === 'open'
+		}}
+	>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.np-fab-menu {
+		position: relative;
+		display: inline-flex;
+	}
+
+	.np-fab-menu-icons {
+		display: grid;
+	}
+	.np-fab-menu-icon {
+		grid-area: 1 / 1;
+		display: flex;
+	}
+	.np-fab-menu-icon-away {
+		opacity: 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab-menu-icon {
+			transition:
+				opacity var(--np-motion-expressive-fast-effects),
+				rotate var(--np-motion-expressive-default-spatial);
+		}
+		.np-fab-menu-icon-away {
+			rotate: -45deg;
+		}
+	}
+
+	.np-fab-menu-list {
+		position: absolute;
+		margin: 0;
+		padding: 0;
+		border: none;
+		background: none;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 0.5rem;
+		overflow: visible;
+	}
+
+	.np-fab-menu-list:popover-open {
+		display: flex;
+	}
+
+	.np-fab-menu-block-start .np-fab-menu-list {
+		position-area: block-start;
+		margin-block-end: 0.75rem;
+		flex-direction: column-reverse;
+	}
+	.np-fab-menu-block-end .np-fab-menu-list {
+		position-area: block-end;
+		margin-block-start: 0.75rem;
+	}
+	.np-fab-menu-inline-start .np-fab-menu-list {
+		position-area: inline-start;
+		margin-inline-end: 0.75rem;
+		flex-direction: row-reverse;
+		align-items: center;
+	}
+	.np-fab-menu-inline-end .np-fab-menu-list {
+		position-area: inline-end;
+		margin-inline-start: 0.75rem;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.np-fab-menu-list:popover-open > :global(*) {
+			--_stagger-window: 210ms;
+			--_delay: calc((sibling-index() - 1) / sibling-count() * var(--_stagger-window));
+			animation: np-fab-menu-item-in var(--np-motion-expressive-default-spatial) both;
+			animation-delay: var(--_delay);
+		}
+	}
+
+	@keyframes np-fab-menu-item-in {
+		from {
+			opacity: 0;
+			translate: 0 0.5rem;
+		}
+	}
+</style>

package/dist/fab/FabMenu.svelte.d.ts

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

package/dist/fab/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ExtendedFab } from './ExtendedFab.svelte';
+export { default as Fab } from './Fab.svelte';
+export { default as FabMenu } from './FabMenu.svelte';

package/dist/fab/index.js

@@ -0,0 +1,3 @@
+export { default as ExtendedFab } from './ExtendedFab.svelte';
+export { default as Fab } from './Fab.svelte';
+export { default as FabMenu } from './FabMenu.svelte';

package/dist/fab/types.d.ts

@@ -0,0 +1,34 @@
+import type { ButtonElement } from '../button/types.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type FabElement = ButtonElement;
+interface BaseFabProps extends HTMLAttributes<FabElement>, Omit<HTMLButtonAttributes, keyof HTMLAttributes<HTMLButtonElement> | 'type'>, Omit<HTMLAnchorAttributes, keyof HTMLAttributes<HTMLAnchorElement> | 'type'> {
+    element?: FabElement;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container';
+    size?: 's' | 'm' | 'l';
+    shape?: 'round' | 'square';
+    lowered?: boolean;
+    disabled?: boolean | null;
+    type?: 'submit' | 'reset' | 'button' | (string & {}) | null;
+}
+export interface FabProps extends BaseFabProps {
+    icon?: Snippet;
+    label?: string;
+}
+export interface ExtendedFabProps extends BaseFabProps {
+    icon?: Snippet;
+    label?: string;
+    collapsed?: boolean;
+}
+export interface FabMenuProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    icon?: Snippet;
+    closeIcon?: Snippet;
+    variant?: FabProps['variant'];
+    size?: FabProps['size'];
+    placement?: 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+    open?: boolean;
+    closeOnSelect?: boolean;
+    element?: HTMLDivElement;
+}
+export {};

package/dist/fab/types.js

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

package/dist/icons/ArrowBackIcon.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z" /></svg
+>

package/dist/icons/ArrowBackIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const ArrowBackIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowBackIcon = ReturnType<typeof ArrowBackIcon>;
+export default ArrowBackIcon;

package/dist/icons/ChevronDownIcon.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"
+	><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg
+>

package/dist/icons/ChevronDownIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ChevronDownIcon;
+type ChevronDownIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ChevronDownIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons/SearchIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	let {
+		height = 24,
+		width = 24,
+	}: {
+		height?: number
+		width?: number
+	} = $props()
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {height} viewBox="0 -960 960 960" {width}
+	><path
+		d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"
+	/></svg
+>

package/dist/icons/SearchIcon.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    height?: number;
+    width?: number;
+};
+declare const SearchIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchIcon = ReturnType<typeof SearchIcon>;
+export default SearchIcon;

package/dist/icons/index.d.ts

@@ -1,8 +1,11 @@
+export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
 export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronDownIcon } from './ChevronDownIcon.svelte';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
 export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/icons/index.js

@@ -1,8 +1,11 @@
+export { default as ArrowBackIcon } from './ArrowBackIcon.svelte';
 export { default as ArrowDropDownIcon } from './ArrowDropDownIcon.svelte';
 export { default as CalendarToday } from './CalendarToday.svelte';
 export { default as CheckIcon } from './CheckIcon.svelte';
+export { default as ChevronDownIcon } from './ChevronDownIcon.svelte';
 export { default as ChevronLeftIcon } from './ChevronLeftIcon.svelte';
 export { default as ChevronRightIcon } from './ChevronRightIcon.svelte';
 export { default as CloseIcon } from './CloseIcon.svelte';
 export { default as EditCalendarIcon } from './EditCalendarIcon.svelte';
 export { default as Icon } from './Icon.svelte';
+export { default as SearchIcon } from './SearchIcon.svelte';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './app-bar/index.js';
 export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
@@ -7,18 +8,23 @@ export * from './chip/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
+export * from './fab/index.js';
 export * from './list/index.js';
 export * from './loading-indicator/index.js';
 export * from './menu/index.js';
+export * from './navigation-bar/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
+export * from './search/index.js';
 export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './app-bar/index.js';
 export * from './autocomplete/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
@@ -7,18 +8,23 @@ export * from './chip/index.js';
 export * from './date-picker/index.js';
 export * from './dialog/index.js';
 export * from './divider/index.js';
+export * from './fab/index.js';
 export * from './list/index.js';
 export * from './loading-indicator/index.js';
 export * from './menu/index.js';
+export * from './navigation-bar/index.js';
 export * from './navigation-drawer/index.js';
 export * from './navigation-rail/index.js';
 export * from './progress/index.js';
 export * from './radio/index.js';
 export * from './ripple/index.js';
+export * from './search/index.js';
 export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './slider/index.js';
 export * from './snackbar/index.js';
 export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './text-field/index.js';
+export * from './toolbar/index.js';
 export * from './tooltip/index.js';

package/dist/internal/focus-ring.css

@@ -24,3 +24,15 @@
 		outline-width: 3px;
 	}
 }
+
+.np-focus-ring:focus-visible {
+	outline-style: solid;
+	outline-color: var(--np-color-secondary);
+	outline-width: 3px;
+	outline-offset: 2px;
+}
+@media (prefers-reduced-motion: no-preference) {
+	.np-focus-ring:focus-visible {
+		animation: focusAnimation var(--np-motion-expressive-slow-effects) forwards;
+	}
+}

package/dist/loading-indicator/shapes.js

@@ -7,19 +7,12 @@ const decode = (encoded) => {
     return radii;
 };
 export const SHAPES = [
-    // MaterialShapes.SoftBurst
     '2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q2zl30r3533bb3ik3pq3se3s33oh3gs39u33v30a2zn31b3693co3k53qk3sk3ro3n53fb38k32t2zz2zr32037h3e23ls3r83sm3r43lj3dv37c31y2zr30032w38p3fi3ne3rq3sj3qf3jw3ch3653192zm30b33y39z3h03oo3s53sd3pk3ib3b534z30q',
-    // MaterialShapes.Cookie9Sided
     '3ne3kp3hr3g53fr3gl3iq3m33ot3qq3rw3sa3rz3qx3p33mg3jc3hi3gz3hn3jn3my3pp3rn3st3t73sv3rs3pw3n73jz3i23hg3i23jz3n73pw3rs3sv3t73st3rn3pp3my3jn3hn3gz3hi3jc3mg3p33qx3rz3sa3rw3qq3ot3m33iq3gl3fr3g53hr3kp3ne3pb3qg3qw3qm3pm3nv3lc3i13fk3eg3ei3fr3ie3lc3nh3ov3pk3pk3ou3ne3l83i93fb3dr3df3e83gb3jh3lz3nr3os3p53os3nr3lz3jh3gb3e83df3dr3fb3i93l83ne3ou3pk3pk3ov3nh3lc3ie3fr3ei3eg3fk3i13lc3nv3pm3qm3qw3qg3pb',
-    // MaterialShapes.Pentagon
     '3ng3lh3jw3im3ho3h23gq3gq3h03hl3ih3jp3l93n63ph3s73vc3y23zz41241e40z3zr3xr3uz3se3q73od3mx3lt3l13kk3kf3kk3l13lt3mx3od3q73se3uz3xr3zr40z41e4123zz3y23vc3s73ph3n63l93jp3ih3hl3h03gq3gq3h23ho3im3jw3lh3ng3pp3rf3se3sp3sb3r93pg3mx3jm3gc3dh3b138z37935u34r33x33e33533533f33y34s35w37b3913b43df3f93gk3hb3hl3hb3gk3f93df3b439137b35w34s33y33f33533533e33x34r35u37938z3b13dh3gc3jm3mx3pg3r93sb3sp3se3rf3pp',
-    // MaterialShapes.Pill
     '3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua3t53rz3qr3pj3o93mz3lo3kd3j13hp3gd3f13dq3cp3by3bj3be3bj3by3cp3dq3f13gd3hp3j13kd3lo3mz3o93pj3qr3rz3t53ua3vd3wc3wu3xm3yg3z83zx40k41341j41x42842f42k42l42k42f42841x41j41340k3zx3z83yg3xm3wu3wc3vd3ua',
-    // MaterialShapes.Sunny
     '3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa3t63sa3pe3l73hi3ea3bj3973893973bj3ea3hi3l73pe3sa',
-    // MaterialShapes.Cookie4Sided
     '2yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z42yr2z530a32b35g39l3ea3iv3mz3qk3tm3w53y73zr40v41j41r41i40u3zr3y63w43tk3qi3mw3it3e739j35f32a3092z4',
-    // MaterialShapes.Oval
     '3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx3ec3bw39m37i35k33s32630q2zg2yb2xc2wj2vv2vd2uz2ur2up2ur2uz2vd2vv2wj2xc2yb2zg30q32633s35k37i39m3bw3ec3gx3jn3mi3ph3sj3vn3yr41t44r47j4a14c84e14fd4g64gg4g64fd4e14c84a147j44r41t3yr3vn3sj3ph3mi3jn3gx',
 ].map(decode);
 export const CIRCLE = decode('3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so3so');

package/dist/menu/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import { popoverController, syncOpenEffect } from '../popover.svelte.js'
 	import type { MenuProps } from './types.js'
 
 	const MENU_ITEM_SELECTOR = '[role="menuitem"]'
@@ -21,13 +22,17 @@
 	let contentHeight = $state(0)
 	let innerHeight = $state(0)
 
-	export const showPopover = () => {
-		element?.showPopover()
-	}
+	const controller = popoverController(() => element)
 
-	export const hidePopover = () => {
-		element?.hidePopover()
-	}
+	export const show = () => controller.show()
+	export const close = () => controller.close()
+
+	syncOpenEffect(
+		() => element,
+		() => open,
+		show,
+		close,
+	)
 
 	const calculateTransformOrigin = (anchorRect: DOMRect, menuRect: DOMRect) => {
 		const pivot = (anchorStart: number, anchorEnd: number, menuStart: number, menuEnd: number) => {
@@ -82,7 +87,7 @@
 	}}
 >
 	<div {@attach attach} bind:clientHeight={contentHeight} class="np-menu" role="none">
-		{@render children()}
+		{@render children?.()}
 	</div>
 </div>
 

package/dist/menu/Menu.svelte.d.ts

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

package/dist/menu/types.d.ts

@@ -1,8 +1,6 @@
 import type { ItemProps } from '../list/types.js';
-import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
-    children: Snippet;
     anchor?: HTMLElement | undefined;
     element?: HTMLDivElement;
     open?: boolean;

package/dist/navigation-bar/NavigationBar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { arrowKeyNav, rovingTabindex } from '../keyboard-nav.js'
+	import type { NavigationBarProps } from './types.js'
+
+	let {
+		children,
+		arrangement = 'equal-weight',
+		element = $bindable(),
+		onkeydown: userKeydown,
+		...attributes
+	}: NavigationBarProps = $props()
+
+	const attach = rovingTabindex('.np-navigation-bar-item')
+	const arrowHandler = arrowKeyNav('.np-navigation-bar-item', 'horizontal')
+
+	const handleKeydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLElement }) => {
+		userKeydown?.(event)
+		if (!event.defaultPrevented) arrowHandler(event)
+	}
+</script>
+
+<nav
+	{...attributes}
+	{@attach attach}
+	bind:this={element}
+	class={[
+		'np-navigation-bar',
+		arrangement === 'centered' && 'np-navigation-bar-centered',
+		attributes.class,
+	]}
+	onkeydown={handleKeydown}
+>
+	{@render children?.()}
+</nav>
+
+<style>
+	.np-navigation-bar {
+		display: flex;
+		justify-content: space-around;
+		align-items: stretch;
+		box-sizing: border-box;
+		width: 100%;
+		min-height: 5rem;
+		padding-block: 0.75rem;
+		padding-inline: 0.5rem;
+		background-color: var(--np-navigation-bar-container-color, var(--np-color-surface-container));
+		padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+		z-index: 8;
+	}
+
+	.np-navigation-bar-centered {
+		justify-content: center;
+		gap: 0.5rem;
+	}
+	:global(.np-navigation-bar-centered .np-navigation-bar-item.np-navigation-bar-item) {
+		flex: 0 0 auto;
+		min-width: 0;
+	}
+</style>

package/dist/navigation-bar/NavigationBar.svelte.d.ts

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