alus-ui 0.1.0

package/dist/components/overlay/context-menu/ContextMenu.svelte

@@ -0,0 +1,239 @@
+<script lang="ts" module>
+	export interface ContextMenuItemEntry {
+		label?: string;
+		onSelect?: () => void;
+		disabled?: boolean;
+		separator?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { tick } from 'svelte';
+	import { useEventListener } from 'runed';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		items: ContextMenuItemEntry[];
+		open?: boolean;
+		disabled?: boolean;
+		class?: string;
+		menuClass?: string;
+		itemClass?: string;
+		separatorClass?: string;
+		style?: string;
+		'aria-label'?: string;
+		item?: import('svelte').Snippet<[{ item: ContextMenuItemEntry; index: number }]>;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		items,
+		open = $bindable(false),
+		disabled = false,
+		class: className = '',
+		menuClass = '',
+		itemClass = '',
+		separatorClass = '',
+		style,
+		'aria-label': ariaLabel = 'Context menu',
+		item,
+		onOpenChange
+	}: Props = $props();
+
+	const menuId = generateCounterId('contextmenu');
+	let x = $state(0);
+	let y = $state(0);
+	let menuEl = $state<HTMLDivElement | null>(null);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let highlighted = $state<number>(-1);
+
+	const enabledIndices = $derived(
+		items.map((it, i) => (it.separator || it.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+		if (!v) highlighted = -1;
+	}
+
+	async function openAt(px: number, py: number) {
+		x = px;
+		y = py;
+		setOpen(true);
+		await tick();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		if (menuEl) {
+			const r = menuEl.getBoundingClientRect();
+			if (r.right > vw) x = Math.max(0, vw - r.width - 4);
+			if (r.bottom > vh) y = Math.max(0, vh - r.height - 4);
+		}
+		const first = enabledIndices[0];
+		if (first !== undefined) highlighted = first;
+	}
+
+	function onContext(e: MouseEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		openAt(e.clientX, e.clientY);
+	}
+
+	function onKeydownTrigger(e: KeyboardEvent) {
+		if (disabled) return;
+		if ((e.shiftKey && e.key === 'F10') || e.key === 'ContextMenu') {
+			e.preventDefault();
+			const t = e.currentTarget as HTMLElement;
+			const r = t.getBoundingClientRect();
+			openAt(r.left, r.bottom);
+		}
+	}
+
+	function activate(i: number) {
+		const it = items[i];
+		if (!it || it.disabled || it.separator) return;
+		it.onSelect?.();
+		setOpen(false);
+		triggerEl?.focus();
+	}
+
+	function move(dir: 1 | -1) {
+		const list = enabledIndices;
+		if (!list.length) return;
+		const cur = list.indexOf(highlighted);
+		const next =
+			cur === -1 ? (dir === 1 ? 0 : list.length - 1) : (cur + dir + list.length) % list.length;
+		highlighted = list[next];
+	}
+
+	function onMenuKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				move(-1);
+				break;
+			case 'Home':
+				e.preventDefault();
+				highlighted = enabledIndices[0] ?? -1;
+				break;
+			case 'End':
+				e.preventDefault();
+				highlighted = enabledIndices.at(-1) ?? -1;
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				if (highlighted >= 0) activate(highlighted);
+				break;
+			case 'Escape':
+			case 'Tab':
+				e.preventDefault();
+				setOpen(false);
+				triggerEl?.focus();
+				break;
+		}
+	}
+
+	const menuRef: Attachment<HTMLDivElement> = (node) => {
+		menuEl = node;
+		node.focus();
+		return () => {
+			menuEl = null;
+		};
+	};
+
+	useEventListener(
+		() => (open ? document : null),
+		'pointerdown',
+		(e) => {
+			if (menuEl && !menuEl.contains(e.target as Node)) setOpen(false);
+		},
+		{ capture: true }
+	);
+
+	useEventListener(
+		() => (open ? window : null),
+		'resize',
+		() => setOpen(false)
+	);
+
+	useEventListener(
+		() => (open ? window : null),
+		'scroll',
+		() => setOpen(false),
+		{ capture: true }
+	);
+
+	const triggerRef: Attachment<HTMLElement> = (node) => {
+		triggerEl = node;
+		return () => {
+			triggerEl = null;
+		};
+	};
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={className}
+	{style}
+	oncontextmenu={onContext}
+	onkeydown={onKeydownTrigger}
+	{@attach triggerRef}
+>
+	{#if children}{@render children()}{/if}
+</div>
+
+{#if open}
+	<Portal>
+		<div
+			id={menuId}
+			role="menu"
+			aria-label={ariaLabel}
+			tabindex="-1"
+			class={menuClass}
+			style="position:fixed; left:{x}px; top:{y}px;"
+			onkeydown={onMenuKey}
+			{@attach menuRef}
+		>
+			{#each items as it, i}
+				{#if it.separator}
+					<div role="separator" class={separatorClass}></div>
+				{:else if item}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="menuitem"
+						tabindex={highlighted === i ? 0 : -1}
+						aria-disabled={it.disabled ? 'true' : undefined}
+						data-highlighted={highlighted === i ? '' : undefined}
+						class={itemClass}
+						onmouseenter={() => (highlighted = i)}
+						onclick={() => activate(i)}
+					>
+						{@render item({ item: it, index: i })}
+					</div>
+				{:else}
+					<button
+						type="button"
+						role="menuitem"
+						tabindex={highlighted === i ? 0 : -1}
+						disabled={it.disabled}
+						data-highlighted={highlighted === i ? '' : undefined}
+						class={itemClass}
+						onmouseenter={() => (highlighted = i)}
+						onclick={() => activate(i)}
+					>
+						{it.label}
+					</button>
+				{/if}
+			{/each}
+		</div>
+	</Portal>
+{/if}

package/dist/components/overlay/context-menu/ContextMenu.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface ContextMenuItemEntry {
+    label?: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface Props {
+    children?: import('svelte').Snippet;
+    items: ContextMenuItemEntry[];
+    open?: boolean;
+    disabled?: boolean;
+    class?: string;
+    menuClass?: string;
+    itemClass?: string;
+    separatorClass?: string;
+    style?: string;
+    'aria-label'?: string;
+    item?: import('svelte').Snippet<[{
+        item: ContextMenuItemEntry;
+        index: number;
+    }]>;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/dist/components/overlay/context-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.svelte';
+export type { ContextMenuItemEntry } from './ContextMenu.svelte';

package/dist/components/overlay/context-menu/index.js

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

package/dist/components/overlay/dialog/Dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Modal from '../modal/Modal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		modal?: boolean;
+		role?: 'dialog' | 'alertdialog';
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		open = $bindable(false),
+		modal = false,
+		role = 'dialog',
+		onOpenChange
+	}: Props = $props();
+</script>
+
+<Modal bind:open {modal} {role} {onOpenChange}>
+	{#if children}{@render children()}{/if}
+</Modal>

package/dist/components/overlay/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    modal?: boolean;
+    role?: 'dialog' | 'alertdialog';
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/overlay/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dialog } from './Dialog.svelte';
+export { ModalTrigger as DialogTrigger, ModalContent as DialogContent, ModalTitle as DialogTitle, ModalDescription as DialogDescription, ModalClose as DialogClose } from '../modal/index.js';

package/dist/components/overlay/dialog/index.js

@@ -0,0 +1,2 @@
+export { default as Dialog } from './Dialog.svelte';
+export { ModalTrigger as DialogTrigger, ModalContent as DialogContent, ModalTitle as DialogTitle, ModalDescription as DialogDescription, ModalClose as DialogClose } from '../modal/index.js';

package/dist/components/overlay/drawer/Drawer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Modal from '../modal/Modal.svelte';
+	import { setDrawerSide, type DrawerSide } from './context.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		side?: DrawerSide;
+		modal?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		open = $bindable(false),
+		side = 'right',
+		modal = true,
+		onOpenChange
+	}: Props = $props();
+
+	setDrawerSide(() => side);
+</script>
+
+<Modal bind:open {modal} role="dialog" {onOpenChange}>
+	{#if children}{@render children()}{/if}
+</Modal>

package/dist/components/overlay/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type DrawerSide } from './context.js';
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    side?: DrawerSide;
+    modal?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/overlay/drawer/DrawerContent.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+	import { getModalContext } from '../modal/Modal.svelte';
+	import { getDrawerSide } from './context.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ side: 'left' | 'right' | 'top' | 'bottom' }]>;
+		class?: string;
+		backdropClass?: string;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		trapFocus?: boolean;
+		restoreFocus?: boolean;
+		autoFocus?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		backdropClass = '',
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		trapFocus = true,
+		restoreFocus = true,
+		autoFocus = true
+	}: Props = $props();
+
+	const ctx = getModalContext();
+	const sideGetter = getDrawerSide();
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+		let releaseTrap: (() => void) | undefined;
+
+		if (trapFocus) releaseTrap = trap(node);
+		if (autoFocus) focusFirst(node);
+
+		function onKeydown(e: KeyboardEvent) {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				ctx.setOpen(false);
+			}
+		}
+
+		document.addEventListener('keydown', onKeydown);
+
+		return () => {
+			releaseTrap?.();
+			document.removeEventListener('keydown', onKeydown);
+			if (restoreFocus) {
+				const trigger = ctx.triggerEl.current ?? previouslyFocused;
+				trigger?.focus?.();
+			}
+		};
+	};
+
+	function onBackdropClick(e: MouseEvent) {
+		if (!closeOnOutsideClick) return;
+		if (e.target === e.currentTarget) ctx.setOpen(false);
+	}
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		{#if ctx.modal()}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div data-drawer-backdrop class={backdropClass} onclick={onBackdropClick}>
+				<div
+					id={ctx.contentId}
+					role={ctx.role()}
+					aria-modal="true"
+					aria-labelledby={ctx.hasTitle() ? ctx.titleId : undefined}
+					aria-describedby={ctx.hasDescription() ? ctx.descriptionId : undefined}
+					data-drawer-side={sideGetter()}
+					tabindex="-1"
+					class={className}
+					{@attach contentRef}
+				>
+					{#if children}{@render children({ side: sideGetter() })}{/if}
+				</div>
+			</div>
+		{:else}
+			<div
+				id={ctx.contentId}
+				role={ctx.role()}
+				aria-labelledby={ctx.hasTitle() ? ctx.titleId : undefined}
+				aria-describedby={ctx.hasDescription() ? ctx.descriptionId : undefined}
+				data-drawer-side={sideGetter()}
+				tabindex="-1"
+				class={className}
+				{@attach contentRef}
+			>
+				{#if children}{@render children({ side: sideGetter() })}{/if}
+			</div>
+		{/if}
+	</Portal>
+{/if}

package/dist/components/overlay/drawer/DrawerContent.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        side: 'left' | 'right' | 'top' | 'bottom';
+    }]>;
+    class?: string;
+    backdropClass?: string;
+    closeOnEscape?: boolean;
+    closeOnOutsideClick?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+    autoFocus?: boolean;
+}
+declare const DrawerContent: import("svelte").Component<Props, {}, "">;
+type DrawerContent = ReturnType<typeof DrawerContent>;
+export default DrawerContent;

package/dist/components/overlay/drawer/context.d.ts

@@ -0,0 +1,3 @@
+export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+export declare function setDrawerSide(getter: () => DrawerSide): void;
+export declare function getDrawerSide(): () => DrawerSide;

package/dist/components/overlay/drawer/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('alus-ui:drawer-side');
+export function setDrawerSide(getter) {
+    setContext(KEY, getter);
+}
+export function getDrawerSide() {
+    return getContext(KEY) ?? (() => 'right');
+}

package/dist/components/overlay/drawer/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Drawer } from './Drawer.svelte';
+export { default as DrawerContent } from './DrawerContent.svelte';
+export { ModalTrigger as DrawerTrigger, ModalTitle as DrawerTitle, ModalDescription as DrawerDescription, ModalClose as DrawerClose } from '../modal/index.js';
+export type { DrawerSide } from './context.js';

package/dist/components/overlay/drawer/index.js

@@ -0,0 +1,3 @@
+export { default as Drawer } from './Drawer.svelte';
+export { default as DrawerContent } from './DrawerContent.svelte';
+export { ModalTrigger as DrawerTrigger, ModalTitle as DrawerTitle, ModalDescription as DrawerDescription, ModalClose as DrawerClose } from '../modal/index.js';

package/dist/components/overlay/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu as Dropdown, MenuTrigger as DropdownTrigger, MenuContent as DropdownContent, MenuItem as DropdownItem, getMenuContext as getDropdownContext, setMenuContext as setDropdownContext } from '../../navigation/menu/index.js';
+export type { MenuContext as DropdownContext, MenuItemEntry as DropdownItemEntry } from '../../navigation/menu/index.js';

package/dist/components/overlay/dropdown/index.js

@@ -0,0 +1 @@
+export { Menu as Dropdown, MenuTrigger as DropdownTrigger, MenuContent as DropdownContent, MenuItem as DropdownItem, getMenuContext as getDropdownContext, setMenuContext as setDropdownContext } from '../../navigation/menu/index.js';

package/dist/components/overlay/lightbox/Lightbox.svelte

@@ -0,0 +1,164 @@
+<script lang="ts" module>
+	export interface LightboxImage {
+		src: string;
+		alt: string;
+		caption?: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { useEventListener } from 'runed';
+	import { trap, focusFirst } from '../../../utils/a11y/index.js';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		images: LightboxImage[];
+		index?: number;
+		open?: boolean;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		loop?: boolean;
+		class?: string;
+		backdropClass?: string;
+		imageClass?: string;
+		style?: string;
+		controls?: import('svelte').Snippet<
+			[
+				{
+					prev: () => void;
+					next: () => void;
+					close: () => void;
+					index: number;
+					total: number;
+					hasPrev: boolean;
+					hasNext: boolean;
+				}
+			]
+		>;
+		caption?: import('svelte').Snippet<[{ image: LightboxImage; index: number; total: number }]>;
+		onOpenChange?: (open: boolean) => void;
+		onIndexChange?: (index: number) => void;
+	}
+
+	let {
+		images,
+		index = $bindable(0),
+		open = $bindable(false),
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		loop = true,
+		class: className = '',
+		backdropClass = '',
+		imageClass = '',
+		style,
+		controls,
+		caption,
+		onOpenChange,
+		onIndexChange
+	}: Props = $props();
+
+	const titleId = generateCounterId('lightbox-title');
+	const total = $derived(images.length);
+	const current = $derived(images[index] as LightboxImage | undefined);
+	const hasPrev = $derived(loop || index > 0);
+	const hasNext = $derived(loop || index < total - 1);
+
+	let returnFocus: HTMLElement | null = null;
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	$effect(() => {
+		if (open) {
+			const a = document.activeElement;
+			if (a instanceof HTMLElement && !returnFocus) returnFocus = a;
+		} else if (returnFocus) {
+			const el = returnFocus;
+			returnFocus = null;
+			queueMicrotask(() => el.focus());
+		}
+	});
+
+	function go(to: number) {
+		if (total === 0) return;
+		const next = loop ? (to + total) % total : Math.max(0, Math.min(total - 1, to));
+		index = next;
+		onIndexChange?.(next);
+	}
+
+	function prev() {
+		go(index - 1);
+	}
+	function next() {
+		go(index + 1);
+	}
+	function close() {
+		setOpen(false);
+	}
+
+	const ref: Attachment<HTMLDivElement> = (node) => {
+		const release = trap(node);
+		focusFirst(node);
+		return release;
+	};
+
+	useEventListener(
+		() => (open ? document : null),
+		'keydown',
+		(e) => {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				close();
+			} else if (e.key === 'ArrowLeft') {
+				e.preventDefault();
+				prev();
+			} else if (e.key === 'ArrowRight') {
+				e.preventDefault();
+				next();
+			}
+		}
+	);
+
+	function onBackdrop(e: MouseEvent) {
+		if (!closeOnOutsideClick) return;
+		if (e.target === e.currentTarget) close();
+	}
+</script>
+
+{#if open && current}
+	<Portal>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class={backdropClass} data-lightbox-backdrop onclick={onBackdrop}>
+			<div
+				role="dialog"
+				aria-modal="true"
+				aria-labelledby={titleId}
+				tabindex="-1"
+				class={className}
+				{style}
+				{@attach ref}
+			>
+				<figure>
+					<img src={current.src} alt={current.alt} class={imageClass} />
+					{#if caption}
+						<figcaption id={titleId}>
+							{@render caption({ image: current, index, total })}
+						</figcaption>
+					{:else if current.caption}
+						<figcaption id={titleId}>{current.caption}</figcaption>
+					{:else}
+						<figcaption id={titleId} hidden>{current.alt}</figcaption>
+					{/if}
+				</figure>
+				{#if controls}
+					{@render controls({ prev, next, close, index, total, hasPrev, hasNext })}
+				{/if}
+			</div>
+		</div>
+	</Portal>
+{/if}