@aspect-ops/exon-ui 0.0.1

package/dist/components/Badge/Badge.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { BadgeVariant } from '../../types/index.js';
+
+	interface Props {
+		variant?: BadgeVariant;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { variant = 'default', class: className = '', children }: Props = $props();
+</script>
+
+<span class="badge badge--{variant} {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</span>
+
+<style>
+	.badge {
+		display: inline-flex;
+		align-items: center;
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		border-radius: var(--radius-full, 9999px);
+		font-family: inherit;
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+	}
+
+	.badge--default {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+	}
+
+	.badge--primary {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.badge--secondary {
+		background: var(--color-secondary, #6b7280);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.badge--success {
+		background: var(--color-success, #10b981);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.badge--warning {
+		background: var(--color-warning, #f59e0b);
+		color: var(--color-text, #1f2937);
+	}
+
+	.badge--error {
+		background: var(--color-error, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { BadgeVariant } from '../../types/index.js';
+interface Props {
+    variant?: BadgeVariant;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

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

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

package/dist/components/Badge/index.js

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

package/dist/components/BottomNav/BottomNav.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import type { BottomNavProps, BottomNavItemData } from '../../types/index.js';
+
+	interface Props extends BottomNavProps {
+		onchange?: (index: number, item: BottomNavItemData) => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let { items = [], activeIndex = 0, class: className = '', onchange, children }: Props = $props();
+
+	function handleItemClick(index: number) {
+		if (onchange && items[index]) {
+			onchange(index, items[index]);
+		}
+	}
+</script>
+
+<nav class="bottom-nav {className}" aria-label="Bottom navigation">
+	{#if children}
+		{@render children()}
+	{:else}
+		{#each items as item, index}
+			<button
+				type="button"
+				class="bottom-nav__item"
+				class:bottom-nav__item--active={index === activeIndex}
+				onclick={() => handleItemClick(index)}
+				aria-current={index === activeIndex ? 'page' : undefined}
+			>
+				<span class="bottom-nav__icon">{item.icon}</span>
+				<span class="bottom-nav__label">{item.label}</span>
+				{#if item.badge !== undefined && item.badge > 0}
+					<span class="bottom-nav__badge" aria-label="{item.badge} notifications">
+						{item.badge > 99 ? '99+' : item.badge}
+					</span>
+				{/if}
+			</button>
+		{/each}
+	{/if}
+</nav>
+
+<style>
+	.bottom-nav {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 40;
+		display: flex;
+		justify-content: space-around;
+		align-items: stretch;
+		background: var(--color-bg, #ffffff);
+		border-top: 1px solid var(--color-border, #e5e7eb);
+		font-family: inherit;
+		/* Safe area padding for iOS notch and Android gesture bar (F21) */
+		padding-bottom: env(safe-area-inset-bottom, 0);
+	}
+
+	.bottom-nav__item {
+		position: relative;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-2xs, 0.125rem);
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-xs, 0.25rem);
+		background: transparent;
+		border: none;
+		color: var(--color-text-muted, #6b7280);
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.bottom-nav__item:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.bottom-nav__item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+		z-index: 1;
+	}
+
+	.bottom-nav__item--active {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.bottom-nav__item--active:hover {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.bottom-nav__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.5rem;
+		line-height: 1;
+	}
+
+	.bottom-nav__label {
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	.bottom-nav__badge {
+		position: absolute;
+		top: var(--space-xs, 0.25rem);
+		left: 50%;
+		transform: translateX(0.5rem);
+		min-width: 1rem;
+		height: 1rem;
+		padding: 0 var(--space-2xs, 0.125rem);
+		background: var(--color-destructive, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+		font-size: var(--text-2xs, 0.625rem);
+		font-weight: 600;
+		line-height: 1rem;
+		text-align: center;
+		border-radius: var(--radius-full, 9999px);
+	}
+</style>

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

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

package/dist/components/BottomNav/BottomNavItem.svelte

@@ -0,0 +1,133 @@
+<script lang="ts">
+	import type { BottomNavItemProps } from '../../types/index.js';
+
+	interface Props extends BottomNavItemProps {
+		onclick?: () => void;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		label,
+		icon,
+		href,
+		active = false,
+		badge,
+		class: className = '',
+		onclick,
+		children
+	}: Props = $props();
+</script>
+
+{#if href}
+	<a
+		{href}
+		class="bottom-nav-item {className}"
+		class:bottom-nav-item--active={active}
+		aria-current={active ? 'page' : undefined}
+	>
+		<span class="bottom-nav-item__icon">{icon}</span>
+		{#if children}
+			<span class="bottom-nav-item__label">{@render children()}</span>
+		{:else}
+			<span class="bottom-nav-item__label">{label}</span>
+		{/if}
+		{#if badge !== undefined && badge > 0}
+			<span class="bottom-nav-item__badge" aria-label="{badge} notifications">
+				{badge > 99 ? '99+' : badge}
+			</span>
+		{/if}
+	</a>
+{:else}
+	<button
+		type="button"
+		class="bottom-nav-item {className}"
+		class:bottom-nav-item--active={active}
+		aria-current={active ? 'page' : undefined}
+		{onclick}
+	>
+		<span class="bottom-nav-item__icon">{icon}</span>
+		{#if children}
+			<span class="bottom-nav-item__label">{@render children()}</span>
+		{:else}
+			<span class="bottom-nav-item__label">{label}</span>
+		{/if}
+		{#if badge !== undefined && badge > 0}
+			<span class="bottom-nav-item__badge" aria-label="{badge} notifications">
+				{badge > 99 ? '99+' : badge}
+			</span>
+		{/if}
+	</button>
+{/if}
+
+<style>
+	.bottom-nav-item {
+		position: relative;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-2xs, 0.125rem);
+		/* Touch target minimum (F20) */
+		min-height: var(--touch-target-min, 44px);
+		padding: var(--space-sm, 0.5rem) var(--space-xs, 0.25rem);
+		background: transparent;
+		border: none;
+		color: var(--color-text-muted, #6b7280);
+		text-decoration: none;
+		cursor: pointer;
+		transition: all var(--transition-fast, 150ms ease);
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.bottom-nav-item:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.bottom-nav-item:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+		z-index: 1;
+	}
+
+	.bottom-nav-item--active {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.bottom-nav-item--active:hover {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	.bottom-nav-item__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 1.5rem;
+		line-height: 1;
+	}
+
+	.bottom-nav-item__label {
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 500;
+		line-height: 1;
+		white-space: nowrap;
+	}
+
+	.bottom-nav-item__badge {
+		position: absolute;
+		top: var(--space-xs, 0.25rem);
+		left: 50%;
+		transform: translateX(0.5rem);
+		min-width: 1rem;
+		height: 1rem;
+		padding: 0 var(--space-2xs, 0.125rem);
+		background: var(--color-destructive, #ef4444);
+		color: var(--color-text-inverse, #ffffff);
+		font-size: var(--text-2xs, 0.625rem);
+		font-weight: 600;
+		line-height: 1rem;
+		text-align: center;
+		border-radius: var(--radius-full, 9999px);
+	}
+</style>

package/dist/components/BottomNav/BottomNavItem.svelte.d.ts

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

package/dist/components/Breadcrumbs/BreadcrumbItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { BreadcrumbItemProps } from '../../types/index.js';
+
+	interface Props extends BreadcrumbItemProps {
+		children?: import('svelte').Snippet;
+	}
+
+	let { href, isLast = false, class: className = '', children }: Props = $props();
+</script>
+
+<li class="breadcrumb-item {className}">
+	{#if href && !isLast}
+		<a {href} class="breadcrumb-item__link">
+			{#if children}
+				{@render children()}
+			{/if}
+		</a>
+	{:else}
+		<span class="breadcrumb-item__current" aria-current={isLast ? 'page' : undefined}>
+			{#if children}
+				{@render children()}
+			{/if}
+		</span>
+	{/if}
+</li>
+
+<style>
+	.breadcrumb-item {
+		display: inline-flex;
+		align-items: center;
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.breadcrumb-item__link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		color: var(--color-text-muted, #6b7280);
+		text-decoration: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		transition: all var(--transition-fast, 150ms ease);
+	}
+
+	.breadcrumb-item__link:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.breadcrumb-item__link:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.breadcrumb-item__current {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		color: var(--color-text, #1f2937);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+	}
+</style>

package/dist/components/Breadcrumbs/BreadcrumbItem.svelte.d.ts

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

package/dist/components/Breadcrumbs/BreadcrumbSeparator.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { class: className = '', children }: Props = $props();
+</script>
+
+<li class="breadcrumb-separator {className}" aria-hidden="true">
+	{#if children}
+		{@render children()}
+	{:else}
+		/
+	{/if}
+</li>
+
+<style>
+	.breadcrumb-separator {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--color-text-muted, #6b7280);
+		user-select: none;
+		padding: 0 var(--space-xs, 0.25rem);
+	}
+</style>

package/dist/components/Breadcrumbs/BreadcrumbSeparator.svelte.d.ts

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

package/dist/components/Breadcrumbs/Breadcrumbs.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import type { BreadcrumbsProps } from '../../types/index.js';
+
+	interface Props extends BreadcrumbsProps {
+		separator?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+	}
+
+	let { items = [], class: className = '', separator, children }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" class="breadcrumbs {className}">
+	<ol class="breadcrumbs__list">
+		{#if children}
+			{@render children()}
+		{:else}
+			{#each items as item, index}
+				<li class="breadcrumbs__item">
+					{#if index > 0}
+						<span class="breadcrumbs__separator" aria-hidden="true">
+							{#if separator}
+								{@render separator()}
+							{:else}
+								/
+							{/if}
+						</span>
+					{/if}
+					{#if item.href && index < items.length - 1}
+						<a href={item.href} class="breadcrumbs__link">
+							{#if item.icon}
+								<span class="breadcrumbs__icon">{item.icon}</span>
+							{/if}
+							{item.label}
+						</a>
+					{:else}
+						<span class="breadcrumbs__current" aria-current="page">
+							{#if item.icon}
+								<span class="breadcrumbs__icon">{item.icon}</span>
+							{/if}
+							{item.label}
+						</span>
+					{/if}
+				</li>
+			{/each}
+		{/if}
+	</ol>
+</nav>
+
+<style>
+	.breadcrumbs {
+		font-family: inherit;
+	}
+
+	.breadcrumbs__list {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.breadcrumbs__item {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		min-height: var(--touch-target-min, 44px);
+	}
+
+	.breadcrumbs__separator {
+		color: var(--color-text-muted, #6b7280);
+		user-select: none;
+	}
+
+	.breadcrumbs__link {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		color: var(--color-text-muted, #6b7280);
+		text-decoration: none;
+		border-radius: var(--radius-sm, 0.25rem);
+		font-size: var(--text-sm, 0.875rem);
+		transition: all var(--transition-fast, 150ms ease);
+	}
+
+	.breadcrumbs__link:hover {
+		color: var(--color-text, #1f2937);
+		background: var(--color-bg-muted, #f3f4f6);
+	}
+
+	.breadcrumbs__link:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: 2px;
+	}
+
+	.breadcrumbs__current {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+		padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
+		color: var(--color-text, #1f2937);
+		font-size: var(--text-sm, 0.875rem);
+		font-weight: 500;
+	}
+
+	.breadcrumbs__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+</style>

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

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