@joewinke/jatui 0.1.33 → 0.2.1

package/dist/components/shell/NavigationMenu.svelte

@@ -0,0 +1,422 @@
+<script lang="ts">
+	/**
+	 * NavigationMenu — horizontal top-nav with dropdown panels.
+	 *
+	 * WAI-ARIA menubar pattern: Arrow keys navigate items; Enter/Space opens
+	 * the dropdown; Escape closes it. Active-route highlighting via activeId.
+	 *
+	 * Flyouts use transform/opacity with var(--motion-glide) var(--motion-fast).
+	 */
+
+	import type { Snippet } from 'svelte';
+
+	export interface NavItem {
+		/** Unique item ID — used for active-route highlight */
+		id: string;
+		/** Display label */
+		label: string;
+		/** Top-level href (navigates directly when no children) */
+		href?: string;
+		/** Dropdown panel items */
+		children?: NavChild[];
+	}
+
+	export interface NavChild {
+		id: string;
+		label: string;
+		href: string;
+		description?: string;
+		/** Icon slot key — consumer provides icons via the `icons` prop */
+		icon?: string;
+	}
+
+	interface Props {
+		/** Navigation items */
+		items: NavItem[];
+		/** Currently active item/child id */
+		activeId?: string;
+		/** Logo/brand slot (rendered at the leading edge) */
+		logo?: Snippet;
+		/** Trailing slot (e.g. user avatar, CTA) */
+		trailing?: Snippet;
+		/** Called when a nav item or child is clicked */
+		onNavigate?: (item: NavItem | NavChild) => void;
+		class?: string;
+	}
+
+	let {
+		items = [],
+		activeId = '',
+		logo,
+		trailing,
+		onNavigate,
+		class: className = ''
+	}: Props = $props();
+
+	let openId = $state<string | null>(null);
+	let menubarEl = $state<HTMLElement | null>(null);
+
+	function isActive(item: NavItem | NavChild): boolean {
+		return item.id === activeId;
+	}
+
+	function hasActiveChild(item: NavItem): boolean {
+		return item.children?.some((c) => c.id === activeId) ?? false;
+	}
+
+	function openItem(id: string) {
+		openId = id;
+	}
+
+	function closeAll() {
+		openId = null;
+	}
+
+	function handleItemClick(item: NavItem) {
+		if (item.children?.length) {
+			openId = openId === item.id ? null : item.id;
+		} else {
+			closeAll();
+			onNavigate?.(item);
+		}
+	}
+
+	function handleChildClick(child: NavChild) {
+		closeAll();
+		onNavigate?.(child);
+	}
+
+	function handleMenubarKeydown(e: KeyboardEvent) {
+		const items_els = Array.from(
+			menubarEl?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []
+		).filter((el) => !el.closest('[role="menu"]'));
+
+		const focused = document.activeElement as HTMLElement;
+		const idx = items_els.indexOf(focused);
+
+		if (e.key === 'ArrowRight') {
+			e.preventDefault();
+			const next = items_els[(idx + 1) % items_els.length];
+			next?.focus();
+		} else if (e.key === 'ArrowLeft') {
+			e.preventDefault();
+			const prev = items_els[(idx - 1 + items_els.length) % items_els.length];
+			prev?.focus();
+		} else if (e.key === 'Escape') {
+			closeAll();
+			(focused as HTMLElement)?.blur();
+		}
+	}
+
+	function handleItemKeydown(e: KeyboardEvent, item: NavItem) {
+		if (e.key === 'ArrowDown' && item.children?.length) {
+			e.preventDefault();
+			openItem(item.id);
+			// Focus first child after open
+			setTimeout(() => {
+				menubarEl
+					?.querySelector<HTMLElement>(`[data-menu="${item.id}"] [role="menuitem"]`)
+					?.focus();
+			}, 10);
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			handleItemClick(item);
+		}
+	}
+
+	function handleDropdownKeydown(e: KeyboardEvent, itemId: string) {
+		const menu = menubarEl?.querySelector(`[data-menu="${itemId}"]`);
+		const items_els = Array.from(
+			menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []
+		);
+		const focused = document.activeElement as HTMLElement;
+		const idx = items_els.indexOf(focused);
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			items_els[(idx + 1) % items_els.length]?.focus();
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			items_els[(idx - 1 + items_els.length) % items_els.length]?.focus();
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			closeAll();
+			// Return focus to parent trigger
+			menubarEl?.querySelector<HTMLElement>(`[data-trigger="${itemId}"]`)?.focus();
+		} else if (e.key === 'Tab') {
+			closeAll();
+		}
+	}
+</script>
+
+<svelte:window
+	onclick={(e) => {
+		if (!menubarEl?.contains(e.target as Node)) closeAll();
+	}}
+/>
+
+<header class="jatui-navmenu {className}">
+	<!-- Brand/logo -->
+	{#if logo}
+		<div class="jatui-navmenu-logo">
+			{@render logo()}
+		</div>
+	{/if}
+
+	<!-- Menubar -->
+	<nav
+		bind:this={menubarEl}
+		role="menubar"
+		aria-label="Main navigation"
+		class="jatui-navmenu-bar"
+		onkeydown={handleMenubarKeydown}
+	>
+		{#each items as item (item.id)}
+			{@const active = isActive(item) || hasActiveChild(item)}
+			{@const isOpen = openId === item.id}
+			{@const hasChildren = !!item.children?.length}
+
+			<div class="jatui-navmenu-item-wrap" class:open={isOpen}>
+				<!-- Top-level trigger -->
+				{#if item.href && !hasChildren}
+					<a
+						href={item.href}
+						role="menuitem"
+						class="jatui-navmenu-trigger"
+						class:active
+						aria-current={active ? 'page' : undefined}
+						data-trigger={item.id}
+						onclick={() => handleItemClick(item)}
+						onkeydown={(e) => handleItemKeydown(e, item)}
+					>
+						{item.label}
+					</a>
+				{:else}
+					<button
+						type="button"
+						role="menuitem"
+						class="jatui-navmenu-trigger"
+						class:active
+						class:has-children={hasChildren}
+						aria-haspopup={hasChildren ? 'menu' : undefined}
+						aria-expanded={hasChildren ? isOpen : undefined}
+						data-trigger={item.id}
+						onclick={() => handleItemClick(item)}
+						onkeydown={(e) => handleItemKeydown(e, item)}
+					>
+						{item.label}
+						{#if hasChildren}
+							<svg
+								class="jatui-navmenu-chevron"
+								class:open={isOpen}
+								width="12"
+								height="12"
+								viewBox="0 0 12 12"
+								fill="none"
+								aria-hidden="true"
+							>
+								<path
+									d="M2 4L6 8L10 4"
+									stroke="currentColor"
+									stroke-width="1.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								/>
+							</svg>
+						{/if}
+					</button>
+				{/if}
+
+				<!-- Dropdown panel -->
+				{#if hasChildren}
+					<div
+						class="jatui-navmenu-dropdown"
+						class:open={isOpen}
+						role="menu"
+						aria-label="{item.label} submenu"
+						data-menu={item.id}
+						onkeydown={(e) => handleDropdownKeydown(e, item.id)}
+					>
+						{#each item.children! as child (child.id)}
+							<a
+								href={child.href}
+								role="menuitem"
+								class="jatui-navmenu-child"
+								class:active={isActive(child)}
+								aria-current={isActive(child) ? 'page' : undefined}
+								onclick={() => handleChildClick(child)}
+							>
+								<span class="jatui-navmenu-child-label">{child.label}</span>
+								{#if child.description}
+									<span class="jatui-navmenu-child-desc">{child.description}</span>
+								{/if}
+							</a>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</nav>
+
+	<!-- Trailing slot -->
+	{#if trailing}
+		<div class="jatui-navmenu-trailing">
+			{@render trailing()}
+		</div>
+	{/if}
+</header>
+
+<style>
+	.jatui-navmenu {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-xl);
+		height: 56px;
+		padding: 0 var(--jatui-space-2xl);
+		background: var(--color-base-100);
+		border-bottom: var(--jatui-border-w) solid var(--color-base-300);
+		position: relative;
+		z-index: 30;
+	}
+
+	.jatui-navmenu-logo {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+	}
+
+	.jatui-navmenu-bar {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-xs);
+		flex: 1;
+	}
+
+	.jatui-navmenu-trailing {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-base);
+	}
+
+	/* Top-level triggers */
+	.jatui-navmenu-item-wrap {
+		position: relative;
+	}
+
+	.jatui-navmenu-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm);
+		padding: var(--jatui-space-base) var(--jatui-space-lg);
+		border-radius: var(--jatui-radius-selector);
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		text-decoration: none;
+		white-space: nowrap;
+		transition:
+			color var(--motion-instant) var(--motion-glide),
+			background-color var(--motion-instant) var(--motion-glide);
+	}
+
+	.jatui-navmenu-trigger:hover {
+		color: var(--color-base-content);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.jatui-navmenu-trigger.active {
+		color: var(--color-primary);
+	}
+
+	/* Chevron */
+	.jatui-navmenu-chevron {
+		transition: transform var(--motion-fast) var(--motion-glide);
+		flex-shrink: 0;
+	}
+
+	.jatui-navmenu-chevron.open {
+		transform: rotate(180deg);
+	}
+
+	/* Dropdown panel */
+	.jatui-navmenu-dropdown {
+		position: absolute;
+		top: calc(100% + var(--jatui-space-base));
+		left: 0;
+		min-width: 220px;
+		background: var(--color-base-100);
+		border: var(--jatui-border-w) solid var(--color-base-300);
+		border-radius: var(--jatui-radius-box);
+		padding: var(--jatui-space-base);
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		z-index: 50;
+
+		/* Flyout: transform + opacity, no layout changes */
+		opacity: 0;
+		transform: translateY(-6px) scale(0.97);
+		pointer-events: none;
+		transform-origin: top left;
+		transition:
+			opacity var(--motion-fast) var(--motion-glide),
+			transform var(--motion-fast) var(--motion-glide);
+	}
+
+	.jatui-navmenu-dropdown.open {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+		pointer-events: auto;
+	}
+
+	/* Dropdown children */
+	.jatui-navmenu-child {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		padding: var(--jatui-space-base) var(--jatui-space-lg);
+		border-radius: var(--jatui-radius-selector);
+		text-decoration: none;
+		color: var(--color-base-content);
+		transition:
+			background-color var(--motion-instant) var(--motion-glide),
+			color var(--motion-instant) var(--motion-glide);
+	}
+
+	.jatui-navmenu-child:hover {
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.jatui-navmenu-child.active {
+		background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+		color: var(--color-primary);
+	}
+
+	.jatui-navmenu-child-label {
+		font-size: 0.875rem;
+		font-weight: 500;
+	}
+
+	.jatui-navmenu-child-desc {
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		line-height: 1.3;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-navmenu-trigger,
+		.jatui-navmenu-child {
+			transition: none;
+		}
+		.jatui-navmenu-chevron {
+			transition: none;
+		}
+		.jatui-navmenu-dropdown {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/shell/NavigationMenu.svelte.d.ts

@@ -0,0 +1,43 @@
+/**
+     * NavigationMenu — horizontal top-nav with dropdown panels.
+     *
+     * WAI-ARIA menubar pattern: Arrow keys navigate items; Enter/Space opens
+     * the dropdown; Escape closes it. Active-route highlighting via activeId.
+     *
+     * Flyouts use transform/opacity with var(--motion-glide) var(--motion-fast).
+     */
+import type { Snippet } from 'svelte';
+export interface NavChild {
+    id: string;
+    label: string;
+    href: string;
+    description?: string;
+    /** Icon slot key — consumer provides icons via the `icons` prop */
+    icon?: string;
+}
+export interface NavItem {
+    /** Unique item ID — used for active-route highlight */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Top-level href (navigates directly when no children) */
+    href?: string;
+    /** Dropdown panel items */
+    children?: NavChild[];
+}
+interface Props {
+    /** Navigation items */
+    items: NavItem[];
+    /** Currently active item/child id */
+    activeId?: string;
+    /** Logo/brand slot (rendered at the leading edge) */
+    logo?: Snippet;
+    /** Trailing slot (e.g. user avatar, CTA) */
+    trailing?: Snippet;
+    /** Called when a nav item or child is clicked */
+    onNavigate?: (item: NavItem | NavChild) => void;
+    class?: string;
+}
+declare const NavigationMenu: import("svelte").Component<Props, {}, "">;
+type NavigationMenu = ReturnType<typeof NavigationMenu>;
+export default NavigationMenu;