@aspect-ops/exon-ui 0.0.1

package/dist/components/Link/Link.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	interface Props {
+		href: string;
+		external?: boolean;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { href, external, class: className = '', children }: Props = $props();
+
+	const isExternal = $derived(external ?? href.startsWith('http'));
+</script>
+
+{#if isExternal}
+	<a {href} class="link {className}" target="_blank" rel="noopener noreferrer">
+		{#if children}
+			{@render children()}
+		{/if}
+		<span class="link__icon" aria-hidden="true">�</span>
+	</a>
+{:else}
+	<a {href} class="link {className}">
+		{#if children}
+			{@render children()}
+		{/if}
+	</a>
+{/if}
+
+<style>
+	.link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		color: var(--color-primary, #3b82f6);
+		text-decoration: none;
+		font-family: inherit;
+		font-weight: 500;
+		transition: color var(--transition-fast, 150ms ease);
+	}
+
+	.link:hover {
+		color: var(--color-primary-hover, #2563eb);
+		text-decoration: underline;
+	}
+
+	.link:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.link__icon {
+		font-size: 0.75em;
+		opacity: 0.7;
+	}
+</style>

package/dist/components/Link/Link.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    href: string;
+    external?: boolean;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Link } from './Link.svelte';
+export type { LinkProps } from '../../types/index.js';

package/dist/components/Link/index.js

@@ -0,0 +1 @@
+export { default as Link } from './Link.svelte';

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { MenuProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+	{@render children?.()}
+</DropdownMenu.Root>

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

@@ -0,0 +1,7 @@
+import type { MenuProps } from '../../types/index.js';
+interface Props extends MenuProps {
+    children?: import('svelte').Snippet;
+}
+declare const Menu: import("svelte").Component<Props, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/components/Menu/MenuContent.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { MenuContentProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuContentProps {
+		side?: 'top' | 'right' | 'bottom' | 'left';
+		align?: 'start' | 'center' | 'end';
+		sideOffset?: number;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		class: className = '',
+		side = 'bottom',
+		align = 'start',
+		sideOffset = 4,
+		children
+	}: Props = $props();
+</script>
+
+<DropdownMenu.Portal>
+	<DropdownMenu.Content class="menu-content {className}" {side} {align} {sideOffset}>
+		{@render children?.()}
+	</DropdownMenu.Content>
+</DropdownMenu.Portal>
+
+<style>
+	:global(.menu-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		background: var(--color-bg, #ffffff);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		padding: var(--space-xs, 0.25rem);
+		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+		z-index: 50;
+		min-width: 8rem;
+		max-width: 20rem;
+	}
+
+	/* Animation states */
+	:global(.menu-content[data-state='open']) {
+		animation: menu-fade-in 150ms ease-out;
+	}
+
+	:global(.menu-content[data-state='closed']) {
+		animation: menu-fade-out 100ms ease-in;
+	}
+
+	@keyframes -global-menu-fade-in {
+		from {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+		to {
+			opacity: 1;
+			transform: scale(1);
+		}
+	}
+
+	@keyframes -global-menu-fade-out {
+		from {
+			opacity: 1;
+			transform: scale(1);
+		}
+		to {
+			opacity: 0;
+			transform: scale(0.95);
+		}
+	}
+</style>

package/dist/components/Menu/MenuContent.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { MenuContentProps } from '../../types/index.js';
+interface Props extends MenuContentProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    children?: import('svelte').Snippet;
+}
+declare const MenuContent: import("svelte").Component<Props, {}, "">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/Menu/MenuItem.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { MenuItemProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuItemProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', disabled = false, icon = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.Item class="menu-item {className}" {disabled}>
+	{#if icon}
+		<span class="menu-item-icon">{icon}</span>
+	{/if}
+	<span class="menu-item-label">
+		{@render children?.()}
+	</span>
+</DropdownMenu.Item>
+
+<style>
+	:global(.menu-item) {
+		font-family: inherit;
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		border-radius: var(--radius-sm, 0.25rem);
+		cursor: pointer;
+		user-select: none;
+		color: var(--color-text, #1f2937);
+		transition: background-color 100ms ease-out;
+		border: none;
+		background: transparent;
+		width: 100%;
+		text-align: left;
+		font-size: 1rem;
+	}
+
+	:global(.menu-item[data-highlighted]) {
+		background: var(--color-bg-muted, #f3f4f6);
+		outline: none;
+	}
+
+	:global(.menu-item:focus-visible) {
+		background: var(--color-bg-muted, #f3f4f6);
+		outline: 2px solid var(--color-focus, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	:global(.menu-item[data-disabled]) {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	:global(.menu-item-icon) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		font-size: 1.25rem;
+	}
+
+	:global(.menu-item-label) {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

package/dist/components/Menu/MenuItem.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuItemProps } from '../../types/index.js';
+interface Props extends MenuItemProps {
+    children?: import('svelte').Snippet;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/Menu/MenuSeparator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { MenuSeparatorProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuSeparatorProps {}
+
+	let { class: className = '' }: Props = $props();
+</script>
+
+<DropdownMenu.Separator class="menu-separator {className}" />
+
+<style>
+	:global(.menu-separator) {
+		height: 1px;
+		background: var(--color-border, #e5e7eb);
+		margin: var(--space-xs, 0.25rem) 0;
+		border: none;
+	}
+</style>

package/dist/components/Menu/MenuSeparator.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { MenuSeparatorProps } from '../../types/index.js';
+interface Props extends MenuSeparatorProps {
+}
+declare const MenuSeparator: import("svelte").Component<Props, {}, "">;
+type MenuSeparator = ReturnType<typeof MenuSeparator>;
+export default MenuSeparator;

package/dist/components/Menu/MenuSub.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { MenuSubProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuSubProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.Sub>
+	{@render children?.()}
+</DropdownMenu.Sub>

package/dist/components/Menu/MenuSub.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuSubProps } from '../../types/index.js';
+interface Props extends MenuSubProps {
+    children?: import('svelte').Snippet;
+}
+declare const MenuSub: import("svelte").Component<Props, {}, "">;
+type MenuSub = ReturnType<typeof MenuSub>;
+export default MenuSub;

package/dist/components/Menu/MenuSubContent.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { MenuSubContentProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuSubContentProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.SubContent class="menu-sub-content {className}">
+	{@render children?.()}
+</DropdownMenu.SubContent>
+
+<style>
+	:global(.menu-sub-content) {
+		/* MUST set font-family explicitly - portal doesn't inherit (F33) */
+		font-family: var(--font-family, system-ui, -apple-system, sans-serif);
+		background: var(--color-bg, #ffffff);
+		border: 1px solid var(--color-border, #e5e7eb);
+		border-radius: var(--radius-md, 0.375rem);
+		padding: var(--space-xs, 0.25rem);
+		box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+		z-index: 51;
+		min-width: 8rem;
+		max-width: 20rem;
+	}
+
+	/* Animation states */
+	:global(.menu-sub-content[data-state='open']) {
+		animation: menu-sub-fade-in 150ms ease-out;
+	}
+
+	:global(.menu-sub-content[data-state='closed']) {
+		animation: menu-sub-fade-out 100ms ease-in;
+	}
+
+	@keyframes -global-menu-sub-fade-in {
+		from {
+			opacity: 0;
+			transform: translateX(-4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateX(0);
+		}
+	}
+
+	@keyframes -global-menu-sub-fade-out {
+		from {
+			opacity: 1;
+			transform: translateX(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateX(-4px);
+		}
+	}
+</style>

package/dist/components/Menu/MenuSubContent.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuSubContentProps } from '../../types/index.js';
+interface Props extends MenuSubContentProps {
+    children?: import('svelte').Snippet;
+}
+declare const MenuSubContent: import("svelte").Component<Props, {}, "">;
+type MenuSubContent = ReturnType<typeof MenuSubContent>;
+export default MenuSubContent;

package/dist/components/Menu/MenuSubTrigger.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { MenuSubTriggerProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuSubTriggerProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', disabled = false, icon = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.SubTrigger class="menu-sub-trigger {className}" {disabled}>
+	{#if icon}
+		<span class="menu-sub-trigger-icon">{icon}</span>
+	{/if}
+	<span class="menu-sub-trigger-label">
+		{@render children?.()}
+	</span>
+	<span class="menu-sub-trigger-chevron" aria-hidden="true">›</span>
+</DropdownMenu.SubTrigger>
+
+<style>
+	:global(.menu-sub-trigger) {
+		font-family: inherit;
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		display: flex;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		border-radius: var(--radius-sm, 0.25rem);
+		cursor: pointer;
+		user-select: none;
+		color: var(--color-text, #1f2937);
+		transition: background-color 100ms ease-out;
+		border: none;
+		background: transparent;
+		width: 100%;
+		text-align: left;
+		font-size: 1rem;
+	}
+
+	:global(.menu-sub-trigger[data-highlighted]) {
+		background: var(--color-bg-muted, #f3f4f6);
+		outline: none;
+	}
+
+	:global(.menu-sub-trigger:focus-visible) {
+		background: var(--color-bg-muted, #f3f4f6);
+		outline: 2px solid var(--color-focus, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	:global(.menu-sub-trigger[data-disabled]) {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	:global(.menu-sub-trigger[data-state='open']) {
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	:global(.menu-sub-trigger-icon) {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		font-size: 1.25rem;
+	}
+
+	:global(.menu-sub-trigger-label) {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	:global(.menu-sub-trigger-chevron) {
+		margin-left: auto;
+		font-size: 1rem;
+		color: var(--color-text-muted, #6b7280);
+	}
+</style>

package/dist/components/Menu/MenuSubTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuSubTriggerProps } from '../../types/index.js';
+interface Props extends MenuSubTriggerProps {
+    children?: import('svelte').Snippet;
+}
+declare const MenuSubTrigger: import("svelte").Component<Props, {}, "">;
+type MenuSubTrigger = ReturnType<typeof MenuSubTrigger>;
+export default MenuSubTrigger;

package/dist/components/Menu/MenuTrigger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { MenuTriggerProps } from '../../types/index.js';
+	import { DropdownMenu } from 'bits-ui';
+
+	interface Props extends MenuTriggerProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<DropdownMenu.Trigger class="menu-trigger {className}">
+	{@render children?.()}
+</DropdownMenu.Trigger>
+
+<style>
+	:global(.menu-trigger) {
+		font-family: inherit;
+		background: transparent;
+		border: none;
+		padding: 0;
+		cursor: pointer;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	:global(.menu-trigger:focus-visible) {
+		outline: 2px solid var(--color-focus, #3b82f6);
+		outline-offset: 2px;
+	}
+</style>

package/dist/components/Menu/MenuTrigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MenuTriggerProps } from '../../types/index.js';
+interface Props extends MenuTriggerProps {
+    children?: import('svelte').Snippet;
+}
+declare const MenuTrigger: import("svelte").Component<Props, {}, "">;
+type MenuTrigger = ReturnType<typeof MenuTrigger>;
+export default MenuTrigger;

package/dist/components/Navbar/NavItem.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import type { NavItemProps } from '../../types/index.js';
+
+	interface Props extends NavItemProps {
+		onclick?: () => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		label,
+		href,
+		active = false,
+		icon,
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="nav-item {className}"
+		class:nav-item--active={active}
+		aria-current={active ? 'page' : undefined}
+	>
+		{#if icon}
+			<span class="nav-item__icon">{icon}</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			{label}
+		{/if}
+	</a>
+{:else}
+	<button
+		type="button"
+		class="nav-item {className}"
+		class:nav-item--active={active}
+		aria-current={active ? 'page' : undefined}
+		{onclick}
+	>
+		{#if icon}
+			<span class="nav-item__icon">{icon}</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			{label}
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.nav-item {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		background: transparent;
+		border: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		color: var(--color-text-muted, #6b7280);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+		text-decoration: none;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.nav-item:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.nav-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.nav-item--active {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.nav-item--active:hover {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.nav-item__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+</style>

package/dist/components/Navbar/NavItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NavItemProps } from '../../types/index.js';
+interface Props extends NavItemProps {
+    onclick?: () => void;
+    children?: import('svelte').Snippet;
+}
+declare const NavItem: import("svelte").Component<Props, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;