alus-ui 0.1.0

package/dist/components/interactive/droppable/Droppable.svelte

@@ -0,0 +1,153 @@
+<script lang="ts" module>
+	export interface DroppableEvent<T = unknown> {
+		data: T | null;
+		dataTransfer: DataTransfer;
+		event: DragEvent;
+	}
+</script>
+
+<script lang="ts" generics="T">
+	interface Props {
+		children?: import('svelte').Snippet<[{ over: boolean }]>;
+		type?: string;
+		disabled?: boolean;
+		effect?: 'copy' | 'move' | 'link' | 'none';
+		as?: 'div' | 'span' | 'li' | 'ul' | 'section';
+		class?: string;
+		style?: string;
+		'aria-label'?: string;
+		onDrop?: (e: DroppableEvent<T>) => void;
+		onDragEnter?: (e: DragEvent) => void;
+		onDragLeave?: (e: DragEvent) => void;
+	}
+
+	let {
+		children,
+		type = 'application/x-alus-ui',
+		disabled = false,
+		effect = 'move',
+		as = 'div',
+		class: className = '',
+		style,
+		'aria-label': ariaLabel,
+		onDrop,
+		onDragEnter,
+		onDragLeave
+	}: Props = $props();
+
+	let over = $state(false);
+	let counter = 0;
+
+	function enter(e: DragEvent) {
+		if (disabled) return;
+		counter++;
+		over = true;
+		onDragEnter?.(e);
+	}
+
+	function leave(e: DragEvent) {
+		counter = Math.max(0, counter - 1);
+		if (counter === 0) over = false;
+		onDragLeave?.(e);
+	}
+
+	function dragover(e: DragEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = effect;
+	}
+
+	function drop(e: DragEvent) {
+		if (disabled || !e.dataTransfer) return;
+		e.preventDefault();
+		over = false;
+		counter = 0;
+		const raw = e.dataTransfer.getData(type);
+		let data: T | null = null;
+		if (raw) {
+			try {
+				data = JSON.parse(raw) as T;
+			} catch {
+				data = raw as unknown as T;
+			}
+		}
+		onDrop?.({ data, dataTransfer: e.dataTransfer, event: e });
+	}
+</script>
+
+{#snippet inner()}
+	{#if children}{@render children({ over })}{/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if as === 'span'}
+	<span
+		class={className}
+		{style}
+		aria-label={ariaLabel}
+		aria-dropeffect={effect}
+		data-over={over ? '' : undefined}
+		ondragenter={enter}
+		ondragleave={leave}
+		ondragover={dragover}
+		ondrop={drop}
+	>
+		{@render inner()}
+	</span>
+{:else if as === 'li'}
+	<li
+		class={className}
+		{style}
+		aria-label={ariaLabel}
+		aria-dropeffect={effect}
+		data-over={over ? '' : undefined}
+		ondragenter={enter}
+		ondragleave={leave}
+		ondragover={dragover}
+		ondrop={drop}
+	>
+		{@render inner()}
+	</li>
+{:else if as === 'ul'}
+	<ul
+		class={className}
+		{style}
+		aria-label={ariaLabel}
+		aria-dropeffect={effect}
+		data-over={over ? '' : undefined}
+		ondragenter={enter}
+		ondragleave={leave}
+		ondragover={dragover}
+		ondrop={drop}
+	>
+		{@render inner()}
+	</ul>
+{:else if as === 'section'}
+	<section
+		class={className}
+		{style}
+		aria-label={ariaLabel}
+		aria-dropeffect={effect}
+		data-over={over ? '' : undefined}
+		ondragenter={enter}
+		ondragleave={leave}
+		ondragover={dragover}
+		ondrop={drop}
+	>
+		{@render inner()}
+	</section>
+{:else}
+	<div
+		class={className}
+		{style}
+		aria-label={ariaLabel}
+		aria-dropeffect={effect}
+		data-over={over ? '' : undefined}
+		ondragenter={enter}
+		ondragleave={leave}
+		ondragover={dragover}
+		ondrop={drop}
+	>
+		{@render inner()}
+	</div>
+{/if}

package/dist/components/interactive/droppable/Droppable.svelte.d.ts

@@ -0,0 +1,43 @@
+export interface DroppableEvent<T = unknown> {
+    data: T | null;
+    dataTransfer: DataTransfer;
+    event: DragEvent;
+}
+declare function $$render<T>(): {
+    props: {
+        children?: import("svelte").Snippet<[{
+            over: boolean;
+        }]>;
+        type?: string;
+        disabled?: boolean;
+        effect?: "copy" | "move" | "link" | "none";
+        as?: "div" | "span" | "li" | "ul" | "section";
+        class?: string;
+        style?: string;
+        'aria-label'?: string;
+        onDrop?: (e: DroppableEvent<T>) => void;
+        onDragEnter?: (e: DragEvent) => void;
+        onDragLeave?: (e: DragEvent) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Droppable: $$IsomorphicComponent;
+type Droppable<T> = InstanceType<typeof Droppable<T>>;
+export default Droppable;

package/dist/components/interactive/droppable/index.d.ts

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

package/dist/components/interactive/droppable/index.js

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

package/dist/components/interactive/infinite-scroll/InfiniteScroll.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import VisuallyHidden from '../../utility/visually-hidden/VisuallyHidden.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		sentinel?: import('svelte').Snippet<[{ loading: boolean; done: boolean }]>;
+		loading?: boolean;
+		hasMore?: boolean;
+		rootMargin?: string;
+		threshold?: number;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+		onLoad?: () => void | Promise<void>;
+	}
+
+	let {
+		children,
+		sentinel,
+		loading = $bindable(false),
+		hasMore = true,
+		rootMargin = '200px',
+		threshold = 0,
+		disabled = false,
+		class: className = '',
+		style,
+		onLoad
+	}: Props = $props();
+
+	const sentinelRef: Attachment<HTMLDivElement> = (node) => {
+		if (disabled || typeof IntersectionObserver === 'undefined') return;
+
+		const obs = new IntersectionObserver(
+			async (entries) => {
+				const entry = entries[0];
+				if (!entry?.isIntersecting) return;
+				if (loading || !hasMore) return;
+				loading = true;
+				try {
+					await onLoad?.();
+				} finally {
+					loading = false;
+				}
+			},
+			{ rootMargin, threshold }
+		);
+
+		obs.observe(node);
+		return () => obs.disconnect();
+	};
+</script>
+
+<div class={className} {style}>
+	{#if children}{@render children()}{/if}
+	<div data-infinite-sentinel aria-hidden="true" {@attach sentinelRef}>
+		{#if sentinel}{@render sentinel({ loading, done: !hasMore })}{/if}
+	</div>
+	<VisuallyHidden role="status" aria-live="polite">
+		{loading ? 'Loading more items.' : !hasMore ? 'All items loaded.' : ''}
+	</VisuallyHidden>
+</div>

package/dist/components/interactive/infinite-scroll/InfiniteScroll.svelte.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    sentinel?: import('svelte').Snippet<[{
+        loading: boolean;
+        done: boolean;
+    }]>;
+    loading?: boolean;
+    hasMore?: boolean;
+    rootMargin?: string;
+    threshold?: number;
+    disabled?: boolean;
+    class?: string;
+    style?: string;
+    onLoad?: () => void | Promise<void>;
+}
+declare const InfiniteScroll: import("svelte").Component<Props, {}, "loading">;
+type InfiniteScroll = ReturnType<typeof InfiniteScroll>;
+export default InfiniteScroll;

package/dist/components/interactive/infinite-scroll/index.d.ts

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

package/dist/components/interactive/infinite-scroll/index.js

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

package/dist/components/interactive/resizable/Resizable.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Side = 'right' | 'bottom' | 'left' | 'top';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		size?: number;
+		minSize?: number;
+		maxSize?: number;
+		side?: Side;
+		step?: number;
+		largeStep?: number;
+		disabled?: boolean;
+		class?: string;
+		handleClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		onResize?: (size: number) => void;
+	}
+
+	let {
+		children,
+		size = $bindable(200),
+		minSize = 50,
+		maxSize = Number.POSITIVE_INFINITY,
+		side = 'right',
+		step = 8,
+		largeStep = 32,
+		disabled = false,
+		class: className = '',
+		handleClass = '',
+		'aria-label': ariaLabel = 'Resize',
+		'aria-labelledby': ariaLabelledby,
+		onResize
+	}: Props = $props();
+
+	const axis = $derived<'x' | 'y'>(side === 'left' || side === 'right' ? 'x' : 'y');
+	const orientation = $derived<'vertical' | 'horizontal'>(axis === 'x' ? 'vertical' : 'horizontal');
+
+	let dragging = $state(false);
+	let lastCoord = 0;
+
+	function clamp(v: number): number {
+		const max = Number.isFinite(maxSize) ? maxSize : v;
+		return Math.min(max, Math.max(minSize, v));
+	}
+
+	function commit(v: number) {
+		const next = clamp(v);
+		if (next !== size) {
+			size = next;
+			onResize?.(next);
+		}
+	}
+
+	function onPointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		dragging = true;
+		lastCoord = axis === 'x' ? e.clientX : e.clientY;
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging) return;
+		const cur = axis === 'x' ? e.clientX : e.clientY;
+		let delta = cur - lastCoord;
+		if (side === 'left' || side === 'top') delta = -delta;
+		lastCoord = cur;
+		if (delta === 0) return;
+		commit(size + delta);
+	}
+
+	function onPointerUp(e: PointerEvent) {
+		if (!dragging) return;
+		dragging = false;
+		try {
+			(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+		} catch {
+			/* noop */
+		}
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		const incKey = axis === 'x' ? 'ArrowRight' : 'ArrowDown';
+		const decKey = axis === 'x' ? 'ArrowLeft' : 'ArrowUp';
+		let delta = 0;
+
+		if (e.key === incKey) delta = step;
+		else if (e.key === decKey) delta = -step;
+		else if (e.key === 'PageDown') delta = largeStep;
+		else if (e.key === 'PageUp') delta = -largeStep;
+		else if (e.key === 'Home') {
+			e.preventDefault();
+			commit(minSize);
+			return;
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			if (Number.isFinite(maxSize)) commit(maxSize);
+			return;
+		} else {
+			return;
+		}
+
+		e.preventDefault();
+		commit(size + delta);
+	}
+
+	const containerStyle = $derived(axis === 'x' ? `width:${size}px` : `height:${size}px`);
+</script>
+
+<div
+	class={className}
+	style={containerStyle}
+	data-side={side}
+	data-dragging={dragging || undefined}
+>
+	{#if children}{@render children()}{/if}
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		role="separator"
+		tabindex={disabled ? -1 : 0}
+		data-dragging={dragging || undefined}
+		data-side={side}
+		class={handleClass}
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		onkeydown={onKeydown}
+		{...mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+			interactiveStateAttrs({ disabled }),
+			widgetAttrs({
+				orientation,
+				valuenow: size,
+				valuemin: minSize,
+				valuemax: Number.isFinite(maxSize) ? maxSize : undefined
+			})
+		)}
+	></div>
+</div>

package/dist/components/interactive/resizable/Resizable.svelte.d.ts

@@ -0,0 +1,19 @@
+type Side = 'right' | 'bottom' | 'left' | 'top';
+interface Props {
+    children?: import('svelte').Snippet;
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    side?: Side;
+    step?: number;
+    largeStep?: number;
+    disabled?: boolean;
+    class?: string;
+    handleClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onResize?: (size: number) => void;
+}
+declare const Resizable: import("svelte").Component<Props, {}, "size">;
+type Resizable = ReturnType<typeof Resizable>;
+export default Resizable;

package/dist/components/interactive/resizable/index.d.ts

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

package/dist/components/interactive/resizable/index.js

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

package/dist/components/interactive/sortable/Sortable.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" generics="T">
+	import { tick } from 'svelte';
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import VisuallyHidden from '../../utility/visually-hidden/VisuallyHidden.svelte';
+
+	interface Props<U> {
+		items: U[];
+		getKey?: (item: U, index: number) => string;
+		item: import('svelte').Snippet<
+			[
+				{
+					value: U;
+					index: number;
+					isDragging: boolean;
+					grabbed: boolean;
+					over: boolean;
+					itemAttrs: Record<string, unknown>;
+				}
+			]
+		>;
+		onReorder?: (items: U[]) => void;
+		orientation?: 'vertical' | 'horizontal';
+		disabled?: boolean;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		items = $bindable<T[]>(),
+		getKey,
+		item,
+		onReorder,
+		orientation = 'vertical',
+		disabled = false,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props<T> = $props();
+
+	let draggingIndex = $state<number | null>(null);
+	let grabbedIndex = $state<number | null>(null);
+	let overIndex = $state<number | null>(null);
+	let listEl: HTMLElement | null = $state(null);
+	let announce = $state('');
+
+	function key(it: T, i: number): string {
+		return getKey ? getKey(it, i) : String(i);
+	}
+
+	function reorder(from: number, to: number): number {
+		if (from === to || from < 0 || to < 0 || from >= items.length || to >= items.length)
+			return from;
+		const next = items.slice();
+		const [moved] = next.splice(from, 1);
+		next.splice(to, 0, moved);
+		items = next;
+		announce = `Moved item from position ${from + 1} to ${to + 1} of ${next.length}.`;
+		onReorder?.(next);
+		return to;
+	}
+
+	function focusItem(i: number) {
+		if (!listEl) return;
+		const el = listEl.querySelector<HTMLElement>(`[data-sortable-index="${i}"]`);
+		el?.focus();
+	}
+
+	function onDragStart(e: DragEvent, i: number) {
+		if (disabled) {
+			e.preventDefault();
+			return;
+		}
+		draggingIndex = i;
+		if (e.dataTransfer) {
+			e.dataTransfer.effectAllowed = 'move';
+			try {
+				e.dataTransfer.setData('text/plain', String(i));
+			} catch {
+				/* noop */
+			}
+		}
+	}
+
+	function onDragOver(e: DragEvent, i: number) {
+		if (draggingIndex == null) return;
+		e.preventDefault();
+		if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+		if (overIndex !== i) overIndex = i;
+	}
+
+	function onDrop(e: DragEvent, i: number) {
+		e.preventDefault();
+		if (draggingIndex == null) return;
+		const from = draggingIndex;
+		draggingIndex = null;
+		overIndex = null;
+		reorder(from, i);
+		tick().then(() => focusItem(i));
+	}
+
+	function onDragEnd() {
+		draggingIndex = null;
+		overIndex = null;
+	}
+
+	function onItemKeydown(e: KeyboardEvent, i: number) {
+		if (disabled) return;
+		const horiz = orientation === 'horizontal';
+		const prevKey = horiz ? 'ArrowLeft' : 'ArrowUp';
+		const nextKey = horiz ? 'ArrowRight' : 'ArrowDown';
+
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			if (e.repeat) return;
+			grabbedIndex = grabbedIndex == null ? i : null;
+			return;
+		}
+		if (e.key === 'Escape') {
+			if (grabbedIndex != null) {
+				e.preventDefault();
+				grabbedIndex = null;
+			}
+			return;
+		}
+		if (e.key === prevKey) {
+			e.preventDefault();
+			if (grabbedIndex != null) {
+				const to = Math.max(0, grabbedIndex - 1);
+				grabbedIndex = reorder(grabbedIndex, to);
+				tick().then(() => focusItem(grabbedIndex ?? to));
+			} else if (i > 0) {
+				focusItem(i - 1);
+			}
+		} else if (e.key === nextKey) {
+			e.preventDefault();
+			if (grabbedIndex != null) {
+				const to = Math.min(items.length - 1, grabbedIndex + 1);
+				grabbedIndex = reorder(grabbedIndex, to);
+				tick().then(() => focusItem(grabbedIndex ?? to));
+			} else if (i < items.length - 1) {
+				focusItem(i + 1);
+			}
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			if (grabbedIndex != null) {
+				grabbedIndex = reorder(grabbedIndex, 0);
+				tick().then(() => focusItem(0));
+			} else {
+				focusItem(0);
+			}
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			const last = items.length - 1;
+			if (grabbedIndex != null) {
+				grabbedIndex = reorder(grabbedIndex, last);
+				tick().then(() => focusItem(last));
+			} else {
+				focusItem(last);
+			}
+		}
+	}
+</script>
+
+<ul
+	bind:this={listEl}
+	role="list"
+	data-orientation={orientation}
+	class={className}
+	data-disabled={disabled || undefined}
+	{...mergeAttrs(
+		labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+		widgetAttrs({ orientation })
+	)}
+>
+	{#each items as it, i (key(it, i))}
+		{@render item({
+			value: it,
+			index: i,
+			isDragging: draggingIndex === i,
+			grabbed: grabbedIndex === i,
+			over: overIndex === i,
+			itemAttrs: {
+				'data-sortable-index': i,
+				'data-dragging': draggingIndex === i || undefined,
+				'data-grabbed': grabbedIndex === i || undefined,
+				'data-over': overIndex === i || undefined,
+				draggable: !disabled,
+				tabindex: disabled ? -1 : 0,
+				role: 'listitem',
+				'aria-roledescription': 'sortable item',
+				'aria-posinset': i + 1,
+				'aria-setsize': items.length,
+				ondragstart: (e: DragEvent) => onDragStart(e, i),
+				ondragover: (e: DragEvent) => onDragOver(e, i),
+				ondrop: (e: DragEvent) => onDrop(e, i),
+				ondragend: onDragEnd,
+				onkeydown: (e: KeyboardEvent) => onItemKeydown(e, i)
+			}
+		})}
+	{/each}
+</ul>
+
+<VisuallyHidden aria-live="polite">{announce}</VisuallyHidden>