@salmexio/ui 1.0.0 → 1.2.0

package/dist/navigation/NavMenu/NavMenu.svelte

@@ -0,0 +1,800 @@
+<!--
+  @component NavMenu
+
+  INFRARED — Persistent navigation menu with collapsible groups, sub-items,
+  icons, badges, and keyboard navigation. Built for sidebars, settings panels,
+  and any vertical nav structure.
+
+  @example
+  <NavMenu
+    items={[
+      {
+        type: 'group',
+        label: 'Getting Started',
+        items: [
+          { type: 'item', id: 'intro', label: 'Introduction', href: '/' },
+          { type: 'item', id: 'install', label: 'Installation', href: '/install', badge: 'New' },
+        ]
+      },
+      { type: 'separator' },
+      {
+        type: 'item',
+        id: 'settings',
+        label: 'Settings',
+        href: '/settings',
+        icon: settingsIcon,
+      }
+    ]}
+    activeId="intro"
+  />
+-->
+<script lang="ts" module>
+import type { Snippet } from 'svelte';
+
+export interface NavMenuItem {
+	type: 'item';
+	/** Unique identifier for active state matching */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Link target (renders <a>); omit for button behavior */
+	href?: string;
+	/** Icon snippet */
+	icon?: Snippet;
+	/** Badge text (e.g. "New", count) */
+	badge?: string | number;
+	/** Disabled state */
+	disabled?: boolean;
+	/** Nested sub-items */
+	children?: NavMenuItem[];
+}
+
+export interface NavMenuGroup {
+	type: 'group';
+	/** Group heading label */
+	label: string;
+	/** Whether the group starts collapsed */
+	defaultCollapsed?: boolean;
+	/** Items in this group */
+	items: NavMenuEntry[];
+}
+
+export interface NavMenuSeparator {
+	type: 'separator';
+}
+
+export type NavMenuEntry = NavMenuItem | NavMenuGroup | NavMenuSeparator;
+</script>
+
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys } from '../../utils/keyboard.js';
+
+interface Props {
+	/** Menu entries: items, groups, and separators */
+	items: NavMenuEntry[];
+	/** ID of the currently active item */
+	activeId?: string;
+	/** Fired when an item is activated (click or Enter) */
+	onselect?: (id: string, href?: string) => void;
+	/** Whether groups can be collapsed (default true) */
+	collapsible?: boolean;
+	/** Additional CSS class */
+	class?: string;
+	/** Accessible label for the nav element */
+	label?: string;
+	/** Test ID */
+	testId?: string;
+}
+
+let {
+	items,
+	activeId = '',
+	onselect,
+	collapsible = true,
+	class: className = '',
+	label = 'Navigation',
+	testId
+}: Props = $props();
+
+// Track collapsed state per group label
+let collapsedGroups = $state<Record<string, boolean>>({});
+
+// Initialize collapsed state from defaultCollapsed
+$effect(() => {
+	for (const entry of items) {
+		if (entry.type === 'group' && entry.defaultCollapsed && !(entry.label in collapsedGroups)) {
+			collapsedGroups[entry.label] = true;
+		}
+	}
+});
+
+function toggleGroup(label: string) {
+	collapsedGroups[label] = !collapsedGroups[label];
+}
+
+function isGroupCollapsed(label: string): boolean {
+	return !!collapsedGroups[label];
+}
+
+function handleItemClick(item: NavMenuItem) {
+	if (item.disabled) return;
+	onselect?.(item.id, item.href);
+}
+
+function handleItemKeydown(e: KeyboardEvent, item: NavMenuItem) {
+	if (e.key === Keys.Enter || e.key === Keys.Space) {
+		e.preventDefault();
+		handleItemClick(item);
+	}
+}
+
+function handleGroupKeydown(e: KeyboardEvent, label: string) {
+	if (e.key === Keys.Enter || e.key === Keys.Space) {
+		e.preventDefault();
+		toggleGroup(label);
+	}
+}
+
+// Track expanded sub-items per item id
+let expandedSubs = $state<Record<string, boolean>>({});
+
+function toggleSub(id: string) {
+	expandedSubs[id] = !expandedSubs[id];
+}
+
+function isSubExpanded(id: string): boolean {
+	// Auto-expand if a child is active
+	return !!expandedSubs[id];
+}
+
+function hasActiveChild(item: NavMenuItem, currentActiveId: string): boolean {
+	if (!item.children) return false;
+	return item.children.some(
+		(child) => child.id === currentActiveId || hasActiveChild(child, currentActiveId)
+	);
+}
+
+// Auto-expand parents of active item
+$effect(() => {
+	if (!activeId) return;
+	for (const entry of items) {
+		if (entry.type === 'group') {
+			for (const gEntry of entry.items) {
+				if (gEntry.type === 'item' && gEntry.children && hasActiveChild(gEntry, activeId)) {
+					expandedSubs[gEntry.id] = true;
+				}
+			}
+		}
+		if (entry.type === 'item' && entry.children && hasActiveChild(entry, activeId)) {
+			expandedSubs[entry.id] = true;
+		}
+	}
+});
+</script>
+
+<nav
+	class={cn('sx-navmenu', className)}
+	aria-label={label}
+	data-testid={testId}
+>
+	{#each items as entry}
+		{#if entry.type === 'separator'}
+			<div class="sx-navmenu-separator" role="separator"></div>
+
+		{:else if entry.type === 'group'}
+			<div class="sx-navmenu-group" role="group" aria-label={entry.label}>
+				{#if collapsible}
+					<button
+						type="button"
+						class={cn(
+							'sx-navmenu-group-trigger',
+							isGroupCollapsed(entry.label) && 'sx-navmenu-group-collapsed'
+						)}
+						aria-expanded={!isGroupCollapsed(entry.label)}
+						onclick={() => toggleGroup(entry.label)}
+						onkeydown={(e) => handleGroupKeydown(e, entry.label)}
+					>
+						<span class="sx-navmenu-chevron" aria-hidden="true">
+							<svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+								<path d="M4 2.5L7.5 6L4 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+							</svg>
+						</span>
+						<span class="sx-navmenu-group-label">{entry.label}</span>
+					</button>
+				{:else}
+					<span class="sx-navmenu-group-trigger sx-navmenu-group-static" aria-hidden="true">
+						<span class="sx-navmenu-group-label">{entry.label}</span>
+					</span>
+				{/if}
+
+				{#if !collapsible || !isGroupCollapsed(entry.label)}
+					<ul class="sx-navmenu-list" role="list">
+						{#each entry.items as gEntry}
+							{#if gEntry.type === 'separator'}
+								<li role="separator" class="sx-navmenu-separator"></li>
+							{:else if gEntry.type === 'item'}
+								{@const isActive = gEntry.id === activeId}
+								{@const hasSubs = !!gEntry.children?.length}
+								{@const isExpanded = hasSubs && (isSubExpanded(gEntry.id) || hasActiveChild(gEntry, activeId))}
+								<li>
+									{#if gEntry.href && !gEntry.disabled}
+										<a
+											href={gEntry.href}
+											class={cn(
+												'sx-navmenu-item',
+												isActive && 'sx-navmenu-item-active',
+												gEntry.disabled && 'sx-navmenu-item-disabled'
+											)}
+											aria-current={isActive ? 'page' : undefined}
+											onclick={() => handleItemClick(gEntry)}
+										>
+											{#if gEntry.icon}
+												<span class="sx-navmenu-icon" aria-hidden="true">{@render gEntry.icon()}</span>
+											{/if}
+											<span class="sx-navmenu-label">{gEntry.label}</span>
+											{#if gEntry.badge !== undefined && gEntry.badge !== null && gEntry.badge !== ''}
+												<span class="sx-navmenu-badge">{gEntry.badge}</span>
+											{/if}
+											{#if hasSubs}
+												<button
+													type="button"
+													class={cn('sx-navmenu-sub-toggle', isExpanded && 'sx-navmenu-sub-toggle-open')}
+													aria-label="Toggle {gEntry.label} sub-items"
+													aria-expanded={isExpanded}
+													onclick={(e) => { e.stopPropagation(); toggleSub(gEntry.id); }}
+												>
+													<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+														<path d="M4 2.5L7.5 6L4 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+													</svg>
+												</button>
+											{/if}
+										</a>
+									{:else}
+										<button
+											type="button"
+											class={cn(
+												'sx-navmenu-item',
+												isActive && 'sx-navmenu-item-active',
+												gEntry.disabled && 'sx-navmenu-item-disabled'
+											)}
+											aria-current={isActive ? 'page' : undefined}
+											disabled={gEntry.disabled}
+											onclick={() => {
+												if (hasSubs) toggleSub(gEntry.id);
+												handleItemClick(gEntry);
+											}}
+											onkeydown={(e) => handleItemKeydown(e, gEntry)}
+										>
+											{#if gEntry.icon}
+												<span class="sx-navmenu-icon" aria-hidden="true">{@render gEntry.icon()}</span>
+											{/if}
+											<span class="sx-navmenu-label">{gEntry.label}</span>
+											{#if gEntry.badge !== undefined && gEntry.badge !== null && gEntry.badge !== ''}
+												<span class="sx-navmenu-badge">{gEntry.badge}</span>
+											{/if}
+											{#if hasSubs}
+												<span
+													class={cn('sx-navmenu-sub-toggle', isExpanded && 'sx-navmenu-sub-toggle-open')}
+													aria-hidden="true"
+												>
+													<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+														<path d="M4 2.5L7.5 6L4 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+													</svg>
+												</span>
+											{/if}
+										</button>
+									{/if}
+
+									<!-- Sub-items -->
+									{#if hasSubs && isExpanded}
+										<ul class="sx-navmenu-sublist" role="list">
+											{#each gEntry.children as subItem}
+												{@const isSubActive = subItem.id === activeId}
+												<li>
+													{#if subItem.href && !subItem.disabled}
+														<a
+															href={subItem.href}
+															class={cn(
+																'sx-navmenu-subitem',
+																isSubActive && 'sx-navmenu-subitem-active',
+																subItem.disabled && 'sx-navmenu-item-disabled'
+															)}
+															aria-current={isSubActive ? 'page' : undefined}
+															onclick={() => handleItemClick(subItem)}
+														>
+															{#if subItem.icon}
+																<span class="sx-navmenu-icon" aria-hidden="true">{@render subItem.icon()}</span>
+															{/if}
+															<span class="sx-navmenu-label">{subItem.label}</span>
+															{#if subItem.badge !== undefined && subItem.badge !== null && subItem.badge !== ''}
+																<span class="sx-navmenu-badge">{subItem.badge}</span>
+															{/if}
+														</a>
+													{:else}
+														<button
+															type="button"
+															class={cn(
+																'sx-navmenu-subitem',
+																isSubActive && 'sx-navmenu-subitem-active',
+																subItem.disabled && 'sx-navmenu-item-disabled'
+															)}
+															disabled={subItem.disabled}
+															aria-current={isSubActive ? 'page' : undefined}
+															onclick={() => handleItemClick(subItem)}
+															onkeydown={(e) => handleItemKeydown(e, subItem)}
+														>
+															{#if subItem.icon}
+																<span class="sx-navmenu-icon" aria-hidden="true">{@render subItem.icon()}</span>
+															{/if}
+															<span class="sx-navmenu-label">{subItem.label}</span>
+															{#if subItem.badge !== undefined && subItem.badge !== null && subItem.badge !== ''}
+																<span class="sx-navmenu-badge">{subItem.badge}</span>
+															{/if}
+														</button>
+													{/if}
+												</li>
+											{/each}
+										</ul>
+									{/if}
+								</li>
+							{/if}
+						{/each}
+					</ul>
+				{/if}
+			</div>
+
+		{:else if entry.type === 'item'}
+			{@const isActive = entry.id === activeId}
+			{@const hasSubs = !!entry.children?.length}
+			{@const isExpanded = hasSubs && (isSubExpanded(entry.id) || hasActiveChild(entry, activeId))}
+			<div class="sx-navmenu-solo">
+				{#if entry.href && !entry.disabled}
+					<a
+						href={entry.href}
+						class={cn(
+							'sx-navmenu-item',
+							isActive && 'sx-navmenu-item-active',
+							entry.disabled && 'sx-navmenu-item-disabled'
+						)}
+						aria-current={isActive ? 'page' : undefined}
+						onclick={() => handleItemClick(entry)}
+					>
+						{#if entry.icon}
+							<span class="sx-navmenu-icon" aria-hidden="true">{@render entry.icon()}</span>
+						{/if}
+						<span class="sx-navmenu-label">{entry.label}</span>
+						{#if entry.badge !== undefined && entry.badge !== null && entry.badge !== ''}
+							<span class="sx-navmenu-badge">{entry.badge}</span>
+						{/if}
+					</a>
+				{:else}
+					<button
+						type="button"
+						class={cn(
+							'sx-navmenu-item',
+							isActive && 'sx-navmenu-item-active',
+							entry.disabled && 'sx-navmenu-item-disabled'
+						)}
+						disabled={entry.disabled}
+						aria-current={isActive ? 'page' : undefined}
+						onclick={() => {
+							if (hasSubs) toggleSub(entry.id);
+							handleItemClick(entry);
+						}}
+						onkeydown={(e) => handleItemKeydown(e, entry)}
+					>
+						{#if entry.icon}
+							<span class="sx-navmenu-icon" aria-hidden="true">{@render entry.icon()}</span>
+						{/if}
+						<span class="sx-navmenu-label">{entry.label}</span>
+						{#if entry.badge !== undefined && entry.badge !== null && entry.badge !== ''}
+							<span class="sx-navmenu-badge">{entry.badge}</span>
+						{/if}
+						{#if hasSubs}
+							<span
+								class={cn('sx-navmenu-sub-toggle', isExpanded && 'sx-navmenu-sub-toggle-open')}
+								aria-hidden="true"
+							>
+								<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+									<path d="M4 2.5L7.5 6L4 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+								</svg>
+							</span>
+						{/if}
+					</button>
+				{/if}
+
+				{#if hasSubs && isExpanded}
+					<ul class="sx-navmenu-sublist" role="list">
+						{#each entry.children as subItem}
+							{@const isSubActive = subItem.id === activeId}
+							<li>
+								{#if subItem.href && !subItem.disabled}
+									<a
+										href={subItem.href}
+										class={cn(
+											'sx-navmenu-subitem',
+											isSubActive && 'sx-navmenu-subitem-active',
+											subItem.disabled && 'sx-navmenu-item-disabled'
+										)}
+										aria-current={isSubActive ? 'page' : undefined}
+										onclick={() => handleItemClick(subItem)}
+									>
+										{#if subItem.icon}
+											<span class="sx-navmenu-icon" aria-hidden="true">{@render subItem.icon()}</span>
+										{/if}
+										<span class="sx-navmenu-label">{subItem.label}</span>
+										{#if subItem.badge !== undefined && subItem.badge !== null && subItem.badge !== ''}
+											<span class="sx-navmenu-badge">{subItem.badge}</span>
+										{/if}
+									</a>
+								{:else}
+									<button
+										type="button"
+										class={cn(
+											'sx-navmenu-subitem',
+											isSubActive && 'sx-navmenu-subitem-active',
+											subItem.disabled && 'sx-navmenu-item-disabled'
+										)}
+										disabled={subItem.disabled}
+										aria-current={isSubActive ? 'page' : undefined}
+										onclick={() => handleItemClick(subItem)}
+										onkeydown={(e) => handleItemKeydown(e, subItem)}
+									>
+										{#if subItem.icon}
+											<span class="sx-navmenu-icon" aria-hidden="true">{@render subItem.icon()}</span>
+										{/if}
+										<span class="sx-navmenu-label">{subItem.label}</span>
+										{#if subItem.badge !== undefined && subItem.badge !== null && subItem.badge !== ''}
+											<span class="sx-navmenu-badge">{subItem.badge}</span>
+										{/if}
+									</button>
+								{/if}
+							</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		{/if}
+	{/each}
+</nav>
+
+<style>
+	/* ========================================
+	   ROOT
+	   ======================================== */
+	.sx-navmenu {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		padding: var(--sx-space-2) 0;
+		font-family: var(--sx-font-body);
+	}
+
+	/* ========================================
+	   SEPARATOR
+	   ======================================== */
+	.sx-navmenu-separator {
+		height: 0;
+		margin: var(--sx-space-2) var(--sx-space-3);
+		border-top: 1px solid var(--sx-color-border);
+		box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.02);
+	}
+
+	/* ========================================
+	   GROUP — Collapsible section
+	   ======================================== */
+	.sx-navmenu-group {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.sx-navmenu-group-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-1-5);
+		padding: var(--sx-space-2) var(--sx-space-3);
+		margin: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		user-select: none;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--sx-color-text-disabled);
+		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+		transition:
+			color var(--sx-transition-fast);
+		border-radius: var(--sx-radius-sm);
+	}
+
+	.sx-navmenu-group-trigger:hover {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-navmenu-group-trigger:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
+	}
+
+	.sx-navmenu-group-label {
+		flex: 1;
+		text-align: left;
+	}
+
+	/* Static (non-collapsible) group header — no cursor, no hover */
+	.sx-navmenu-group-static {
+		cursor: default;
+		pointer-events: none;
+	}
+
+	/* ========================================
+	   CHEVRON — Rotates on expand/collapse
+	   ======================================== */
+	.sx-navmenu-chevron {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+		transition: transform var(--sx-transition-fast);
+		transform: rotate(90deg);
+		color: var(--sx-color-text-disabled);
+	}
+
+	.sx-navmenu-group-collapsed .sx-navmenu-chevron {
+		transform: rotate(0deg);
+	}
+
+	/* ========================================
+	   LIST — Items within a group
+	   ======================================== */
+	.sx-navmenu-list {
+		list-style: none;
+		margin: 0;
+		padding: 0 0 0 calc(var(--sx-space-3) + 2px);
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		border-left: none;
+		margin-left: var(--sx-space-3);
+		box-shadow:
+			inset 2px 0 0 0 rgba(0, 0, 0, 0.25),
+			inset 3px 0 0 0 rgba(255, 255, 255, 0.03);
+	}
+
+	/* ========================================
+	   ITEM — Nav link or button
+	   ======================================== */
+	.sx-navmenu-item {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-1-5) var(--sx-space-3);
+		border-radius: var(--sx-radius-sm);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		font-family: var(--sx-font-body);
+		color: var(--sx-color-text-secondary);
+		text-decoration: none;
+		cursor: pointer;
+		user-select: none;
+		border: none;
+		background: transparent;
+		width: 100%;
+		text-align: left;
+		position: relative;
+		transition:
+			background var(--sx-transition-fast),
+			color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast),
+			transform var(--sx-transition-fast);
+	}
+
+	.sx-navmenu-item:hover:not(.sx-navmenu-item-disabled) {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.15);
+		transform: translateX(1px);
+	}
+
+	/* Active — forge-gradient left accent, raised tab */
+	.sx-navmenu-item-active {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 -1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(0, 0, 0, 0.12),
+			0 2px 4px -1px rgba(0, 0, 0, 0.15);
+		border-left: 3px solid transparent;
+		border-image: linear-gradient(180deg, var(--sx-color-primary), var(--sx-color-secondary)) 1;
+		padding-left: calc(var(--sx-space-3) - 3px);
+	}
+
+	.sx-navmenu-item-active:hover {
+		transform: none;
+	}
+
+	/* Disabled */
+	.sx-navmenu-item-disabled {
+		color: var(--sx-color-text-disabled);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.sx-navmenu-item-disabled:hover {
+		background: transparent;
+		box-shadow: none;
+		transform: none;
+	}
+
+	/* Focus */
+	.sx-navmenu-item:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
+	}
+
+	/* ========================================
+	   ICON
+	   ======================================== */
+	.sx-navmenu-icon {
+		display: flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		color: var(--sx-color-text-disabled);
+		transition: color var(--sx-transition-fast);
+	}
+
+	.sx-navmenu-item:hover:not(.sx-navmenu-item-disabled) .sx-navmenu-icon {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-navmenu-item-active .sx-navmenu-icon {
+		color: var(--sx-color-primary);
+	}
+
+	/* ========================================
+	   LABEL
+	   ======================================== */
+	.sx-navmenu-label {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* ========================================
+	   BADGE — Stamped tag (matches Badge component)
+	   ======================================== */
+	.sx-navmenu-badge {
+		display: inline-flex;
+		align-items: center;
+		padding: 1px 6px;
+		font-size: 0.65rem;
+		font-weight: 600;
+		border-radius: var(--sx-radius-full);
+		background: var(--sx-color-primary-hover);
+		color: var(--sx-color-primary);
+		white-space: nowrap;
+		box-shadow:
+			0 1px 0 0 rgba(160, 50, 10, 0.2),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2),
+			0 0 6px -2px rgba(255, 107, 53, 0.12);
+	}
+
+	/* ========================================
+	   SUB-TOGGLE — Expand/collapse sub-items
+	   ======================================== */
+	.sx-navmenu-sub-toggle {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		flex-shrink: 0;
+		border: none;
+		background: transparent;
+		cursor: pointer;
+		border-radius: var(--sx-radius-sm);
+		color: var(--sx-color-text-disabled);
+		transition: transform var(--sx-transition-fast), color var(--sx-transition-fast);
+		transform: rotate(0deg);
+		padding: 0;
+	}
+
+	.sx-navmenu-sub-toggle:hover {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-navmenu-sub-toggle-open {
+		transform: rotate(90deg);
+	}
+
+	/* ========================================
+	   SUB-LIST — Nested items
+	   ======================================== */
+	.sx-navmenu-sublist {
+		list-style: none;
+		margin: var(--sx-space-1) 0 0 0;
+		padding: 0 0 0 calc(var(--sx-space-3) + 2px);
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		margin-left: var(--sx-space-4);
+		box-shadow:
+			inset 2px 0 0 0 rgba(0, 0, 0, 0.2),
+			inset 3px 0 0 0 rgba(255, 255, 255, 0.02);
+	}
+
+	/* ========================================
+	   SUB-ITEM
+	   ======================================== */
+	.sx-navmenu-subitem {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		padding: var(--sx-space-1) var(--sx-space-3);
+		border-radius: var(--sx-radius-sm);
+		font-size: var(--sx-text-xs);
+		font-weight: 500;
+		font-family: var(--sx-font-body);
+		color: var(--sx-color-text-disabled);
+		text-decoration: none;
+		cursor: pointer;
+		user-select: none;
+		border: none;
+		background: transparent;
+		width: 100%;
+		text-align: left;
+		transition:
+			background var(--sx-transition-fast),
+			color var(--sx-transition-fast);
+	}
+
+	.sx-navmenu-subitem:hover:not(.sx-navmenu-item-disabled) {
+		background: var(--sx-color-surface-2);
+		color: var(--sx-color-text);
+	}
+
+	.sx-navmenu-subitem-active {
+		color: var(--sx-color-primary);
+	}
+
+	.sx-navmenu-subitem-active:hover {
+		color: var(--sx-color-primary);
+	}
+
+	.sx-navmenu-subitem:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 2px;
+	}
+
+	/* ========================================
+	   SOLO ITEM — Top-level items outside groups
+	   ======================================== */
+	.sx-navmenu-solo {
+		padding: 0 var(--sx-space-2);
+	}
+
+	/* ========================================
+	   REDUCED MOTION
+	   ======================================== */
+	@media (prefers-reduced-motion: reduce) {
+		.sx-navmenu-item,
+		.sx-navmenu-subitem,
+		.sx-navmenu-chevron,
+		.sx-navmenu-sub-toggle,
+		.sx-navmenu-group-trigger {
+			transition: none;
+		}
+	}
+</style>