alus-ui 0.1.0

package/dist/components/navigation/menu/MenuContent.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
+	import { useEventListener } from 'runed';
+	import { getMenuContext, type MenuItemEntry } from './Menu.svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		placement?: 'top' | 'bottom' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
+		offset?: number;
+		sameWidth?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		placement = 'bottom-start',
+		offset: offsetPx = 4,
+		sameWidth = false
+	}: Props = $props();
+
+	const ctx = getMenuContext();
+
+	function enabled(): MenuItemEntry[] {
+		return ctx.items().filter((i) => !i.disabled);
+	}
+
+	function focusItem(entry: MenuItemEntry | undefined) {
+		if (!entry) return;
+		ctx.setHighlighted(entry.el);
+		entry.el.focus();
+	}
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		ctx.setContentEl(node);
+		const trigger = ctx.triggerEl.current;
+		let cleanupAutoUpdate: (() => void) | undefined;
+
+		if (trigger) {
+			cleanupAutoUpdate = autoUpdate(trigger, node, async () => {
+				const { x, y } = await computePosition(trigger, node, {
+					placement,
+					strategy: 'fixed',
+					middleware: [
+						offset(offsetPx),
+						flip(),
+						shift({ padding: 8 }),
+						size({
+							apply({ rects, elements }) {
+								if (sameWidth) {
+									Object.assign(elements.floating.style, {
+										minWidth: `${rects.reference.width}px`
+									});
+								}
+							}
+						})
+					]
+				});
+				Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+			});
+		}
+
+		queueMicrotask(() => {
+			const list = enabled();
+			const idx = ctx.lastActivatedIndex();
+			focusItem(idx >= 0 && idx < list.length ? list[idx] : list[0]);
+		});
+
+		return () => {
+			cleanupAutoUpdate?.();
+			ctx.setContentEl(null);
+			ctx.triggerEl.current?.focus();
+		};
+	};
+
+	useEventListener(
+		() => (ctx.open() ? document : null),
+		'pointerdown',
+		(e) => {
+			const node = ctx.contentEl.current;
+			if (!node) return;
+			const t = e.target as Node;
+			if (node.contains(t) || ctx.triggerEl.current?.contains(t)) return;
+			ctx.setOpen(false);
+		},
+		{ capture: true }
+	);
+
+	function move(dir: 1 | -1) {
+		const list = enabled();
+		if (!list.length) return;
+		const cur = list.findIndex((i) => i.el === ctx.highlighted());
+		let next: number;
+		if (cur === -1) next = dir === 1 ? 0 : list.length - 1;
+		else next = (cur + dir + list.length) % list.length;
+		focusItem(list[next]);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				move(-1);
+				break;
+			case 'Home': {
+				e.preventDefault();
+				focusItem(enabled()[0]);
+				break;
+			}
+			case 'End': {
+				e.preventDefault();
+				focusItem(enabled().at(-1));
+				break;
+			}
+			case 'Escape':
+				e.preventDefault();
+				ctx.setOpen(false);
+				break;
+			case 'Tab':
+				ctx.setOpen(false);
+				break;
+		}
+	}
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		<div
+			id={ctx.contentId}
+			role="menu"
+			tabindex="-1"
+			aria-labelledby={ctx.triggerId}
+			class={className}
+			style="position:fixed; top:0; left:0;"
+			onkeydown={onKeydown}
+			{@attach contentRef}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
+{/if}

package/dist/components/navigation/menu/MenuContent.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    placement?: 'top' | 'bottom' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';
+    offset?: number;
+    sameWidth?: boolean;
+}
+declare const MenuContent: import("svelte").Component<Props, {}, "">;
+type MenuContent = ReturnType<typeof MenuContent>;
+export default MenuContent;

package/dist/components/navigation/menu/MenuItem.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getMenuContext, type MenuItemEntry } from './Menu.svelte';
+	import { interactiveStateAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ highlighted: boolean }]>;
+		class?: string;
+		disabled?: boolean;
+		onSelect?: () => void;
+	}
+
+	let { children, class: className = '', disabled = false, onSelect }: Props = $props();
+
+	const ctx = getMenuContext();
+
+	let el: HTMLDivElement | null = $state(null);
+	let entry: MenuItemEntry | null = null;
+
+	const itemRef: Attachment<HTMLDivElement> = (node) => {
+		el = node;
+		entry = { el: node, disabled, onSelect };
+		const unregister = ctx.registerItem(entry);
+		return () => {
+			unregister();
+			el = null;
+			entry = null;
+		};
+	};
+
+	let highlighted = $derived(ctx.highlighted() === el);
+
+	function activate() {
+		if (!entry) return;
+		ctx.activate(entry);
+	}
+
+	function onPointerEnter() {
+		if (disabled || !el) return;
+		ctx.setHighlighted(el);
+		el.focus();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			activate();
+		}
+	}
+</script>
+
+<div
+	role="menuitem"
+	tabindex="-1"
+	data-highlighted={highlighted || undefined}
+	data-disabled={disabled || undefined}
+	class={className}
+	onclick={activate}
+	onpointerenter={onPointerEnter}
+	onkeydown={onKeydown}
+	{...interactiveStateAttrs({ disabled })}
+	{@attach itemRef}
+>
+	{#if children}{@render children({ highlighted })}{/if}
+</div>

package/dist/components/navigation/menu/MenuItem.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        highlighted: boolean;
+    }]>;
+    class?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/dist/components/navigation/menu/MenuTrigger.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getMenuContext } from './Menu.svelte';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ open: boolean }]>;
+		class?: string;
+		disabled?: boolean;
+	}
+
+	let { children, class: className = '', disabled = false }: Props = $props();
+
+	const ctx = getMenuContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	function toggle() {
+		if (disabled || ctx.disabled()) return;
+		ctx.setOpen(!ctx.open());
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled || ctx.disabled()) return;
+		if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			ctx.setOpen(true);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			ctx.setOpen(true);
+		}
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			interactiveStateAttrs({ expanded: ctx.open(), disabled: disabled || ctx.disabled() }),
+			widgetAttrs({ controls: ctx.contentId, haspopup: 'menu' })
+		)
+	);
+</script>
+
+<button
+	id={ctx.triggerId}
+	type="button"
+	data-state={ctx.open() ? 'open' : 'closed'}
+	disabled={disabled || ctx.disabled()}
+	class={className}
+	onclick={toggle}
+	onkeydown={onKeydown}
+	{...ariaAttrs}
+	{@attach triggerRef}
+>
+	{#if children}{@render children({ open: ctx.open() })}{/if}
+</button>

package/dist/components/navigation/menu/MenuTrigger.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        open: boolean;
+    }]>;
+    class?: string;
+    disabled?: boolean;
+}
+declare const MenuTrigger: import("svelte").Component<Props, {}, "">;
+type MenuTrigger = ReturnType<typeof MenuTrigger>;
+export default MenuTrigger;

package/dist/components/navigation/menu/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Menu, getMenuContext, setMenuContext } from './Menu.svelte';
+export { default as MenuTrigger } from './MenuTrigger.svelte';
+export { default as MenuContent } from './MenuContent.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export type { MenuContext, MenuItemEntry } from './Menu.svelte';

package/dist/components/navigation/menu/index.js

@@ -0,0 +1,4 @@
+export { default as Menu, getMenuContext, setMenuContext } from './Menu.svelte';
+export { default as MenuTrigger } from './MenuTrigger.svelte';
+export { default as MenuContent } from './MenuContent.svelte';
+export { default as MenuItem } from './MenuItem.svelte';

package/dist/components/navigation/navigation/Navigation.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		children,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-current': ariaCurrent,
+		class: className = '',
+		style
+	}: Props = $props();
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+</script>
+
+<nav class={className} {style} aria-current={ariaCurrent} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</nav>

package/dist/components/navigation/navigation/Navigation.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+    class?: string;
+    style?: string;
+}
+declare const Navigation: import("svelte").Component<Props, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

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

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

package/dist/components/navigation/navigation/index.js

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

package/dist/components/navigation/pagination/Pagination.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet<
+			[
+				{
+					page: number;
+					totalPages: number;
+					pages: (number | 'ellipsis')[];
+					goto: (p: number) => void;
+					prev: () => void;
+					next: () => void;
+					canPrev: boolean;
+					canNext: boolean;
+				}
+			]
+		>;
+		page?: number;
+		total: number;
+		perPage?: number;
+		siblingCount?: number;
+		class?: string;
+		'aria-label'?: string;
+		onPageChange?: (p: number) => void;
+	}
+
+	let {
+		children,
+		page = $bindable(1),
+		total,
+		perPage = 10,
+		siblingCount = 1,
+		class: className = '',
+		'aria-label': ariaLabel = 'Pagination',
+		onPageChange
+	}: Props = $props();
+
+	let totalPages = $derived(Math.max(1, Math.ceil(total / perPage)));
+
+	function clamp(p: number) {
+		return Math.max(1, Math.min(totalPages, p));
+	}
+
+	function goto(p: number) {
+		const next = clamp(p);
+		if (next === page) return;
+		page = next;
+		onPageChange?.(next);
+	}
+
+	function prev() {
+		goto(page - 1);
+	}
+	function next() {
+		goto(page + 1);
+	}
+
+	let canPrev = $derived(page > 1);
+	let canNext = $derived(page < totalPages);
+
+	let pages: (number | 'ellipsis')[] = $derived.by(() => {
+		const result: (number | 'ellipsis')[] = [];
+		const range = (start: number, end: number) => {
+			for (let i = start; i <= end; i++) result.push(i);
+		};
+		const minVisible = siblingCount * 2 + 5;
+		if (totalPages <= minVisible) {
+			range(1, totalPages);
+			return result;
+		}
+		const left = Math.max(2, page - siblingCount);
+		const right = Math.min(totalPages - 1, page + siblingCount);
+		result.push(1);
+		if (left > 2) result.push('ellipsis');
+		range(left, right);
+		if (right < totalPages - 1) result.push('ellipsis');
+		result.push(totalPages);
+		return result;
+	});
+</script>
+
+<nav class={className} aria-label={ariaLabel}>
+	{#if children}
+		{@render children({ page, totalPages, pages, goto, prev, next, canPrev, canNext })}
+	{/if}
+</nav>

package/dist/components/navigation/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,24 @@
+interface Props {
+    children?: import('svelte').Snippet<[
+        {
+            page: number;
+            totalPages: number;
+            pages: (number | 'ellipsis')[];
+            goto: (p: number) => void;
+            prev: () => void;
+            next: () => void;
+            canPrev: boolean;
+            canNext: boolean;
+        }
+    ]>;
+    page?: number;
+    total: number;
+    perPage?: number;
+    siblingCount?: number;
+    class?: string;
+    'aria-label'?: string;
+    onPageChange?: (p: number) => void;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/navigation/pagination/index.d.ts

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

package/dist/components/navigation/pagination/index.js

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

package/dist/components/navigation/stepper/Stepper.svelte

@@ -0,0 +1,73 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:stepper');
+
+	export interface StepperContext {
+		current: () => number;
+		setCurrent: (i: number) => void;
+		orientation: () => 'horizontal' | 'vertical';
+		linear: () => boolean;
+		total: () => number | undefined;
+	}
+
+	export function getStepperContext(): StepperContext {
+		const ctx = getContext<StepperContext | undefined>(KEY);
+		if (!ctx) throw new Error('StepperStep must be inside <Stepper>');
+		return ctx;
+	}
+
+	export function setStepperContext(ctx: StepperContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		current?: number;
+		total?: number;
+		orientation?: 'horizontal' | 'vertical';
+		linear?: boolean;
+		onCurrentChange?: (i: number) => void;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		current = $bindable(0),
+		total,
+		orientation = 'horizontal',
+		linear = true,
+		onCurrentChange,
+		'aria-label': ariaLabel = 'Progress',
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+
+	setStepperContext({
+		current: () => current,
+		setCurrent: (i) => {
+			current = i;
+			onCurrentChange?.(i);
+		},
+		orientation: () => orientation,
+		linear: () => linear,
+		total: () => total
+	});
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+			widgetAttrs({ orientation })
+		)
+	);
+</script>
+
+<ol class={className} data-orientation={orientation} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</ol>

package/dist/components/navigation/stepper/Stepper.svelte.d.ts

@@ -0,0 +1,23 @@
+export interface StepperContext {
+    current: () => number;
+    setCurrent: (i: number) => void;
+    orientation: () => 'horizontal' | 'vertical';
+    linear: () => boolean;
+    total: () => number | undefined;
+}
+export declare function getStepperContext(): StepperContext;
+export declare function setStepperContext(ctx: StepperContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    current?: number;
+    total?: number;
+    orientation?: 'horizontal' | 'vertical';
+    linear?: boolean;
+    onCurrentChange?: (i: number) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const Stepper: import("svelte").Component<Props, {}, "current">;
+type Stepper = ReturnType<typeof Stepper>;
+export default Stepper;

package/dist/components/navigation/stepper/StepperStep.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { getStepperContext } from './Stepper.svelte';
+	import { interactiveStateAttrs, labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		index: number;
+		children?: import('svelte').Snippet<[{ status: 'completed' | 'current' | 'upcoming' }]>;
+		class?: string;
+		disabled?: boolean;
+	}
+
+	let { index, children, class: className = '', disabled = false }: Props = $props();
+
+	const ctx = getStepperContext();
+	const status: 'completed' | 'current' | 'upcoming' = $derived(
+		index < ctx.current() ? 'completed' : index === ctx.current() ? 'current' : 'upcoming'
+	);
+	const clickable = $derived(!disabled && (!ctx.linear() || index <= ctx.current()));
+
+	function onClick() {
+		if (!clickable) return;
+		ctx.setCurrent(index);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (!clickable) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			ctx.setCurrent(index);
+		}
+	}
+</script>
+
+<li
+	class={className}
+	data-status={status}
+	data-disabled={disabled || undefined}
+	{...mergeAttrs(
+		interactiveStateAttrs({ current: status === 'current' ? 'step' : undefined }),
+		widgetAttrs({ posinset: index + 1, setsize: ctx.total() })
+	)}
+>
+	{#if clickable}
+		<button
+			type="button"
+			class="contents text-left"
+			onclick={onClick}
+			onkeydown={onKeydown}
+			{...labelAttrs({ label: `Step ${index + 1}` })}
+		>
+			{#if children}{@render children({ status })}{/if}
+		</button>
+	{:else}
+		<span class="contents" {...interactiveStateAttrs({ disabled })}>
+			{#if children}{@render children({ status })}{/if}
+		</span>
+	{/if}
+</li>

package/dist/components/navigation/stepper/StepperStep.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    index: number;
+    children?: import('svelte').Snippet<[{
+        status: 'completed' | 'current' | 'upcoming';
+    }]>;
+    class?: string;
+    disabled?: boolean;
+}
+declare const StepperStep: import("svelte").Component<Props, {}, "">;
+type StepperStep = ReturnType<typeof StepperStep>;
+export default StepperStep;

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Stepper, getStepperContext, setStepperContext } from './Stepper.svelte';
+export type { StepperContext } from './Stepper.svelte';
+export { default as StepperStep } from './StepperStep.svelte';

package/dist/components/navigation/stepper/index.js

@@ -0,0 +1,2 @@
+export { default as Stepper, getStepperContext, setStepperContext } from './Stepper.svelte';
+export { default as StepperStep } from './StepperStep.svelte';