alus-ui 0.1.0

package/dist/components/display/compare/Compare.svelte

@@ -0,0 +1,222 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		before: import('svelte').Snippet;
+		after: import('svelte').Snippet;
+		handle?: import('svelte').Snippet<[{ position: number; dragging: boolean }]>;
+		position?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		largeStep?: number;
+		orientation?: 'horizontal' | 'vertical';
+		disabled?: boolean;
+		class?: string;
+		beforeClass?: string;
+		afterClass?: string;
+		handleClass?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-valuetext'?: string;
+		onChange?: (position: number) => void;
+	}
+
+	let {
+		before,
+		after,
+		handle,
+		position = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 2,
+		largeStep = 10,
+		orientation = 'horizontal',
+		disabled = false,
+		class: className = '',
+		beforeClass = '',
+		afterClass = '',
+		handleClass = '',
+		'aria-label': ariaLabel = 'Before and after comparison',
+		'aria-labelledby': ariaLabelledby,
+		'aria-valuetext': ariaValuetext,
+		onChange
+	}: Props = $props();
+
+	let dragging = $state(false);
+	let containerEl: HTMLElement | null = $state(null);
+	let lastCoord = 0;
+	let containerSize = 0;
+
+	const horiz = $derived(orientation === 'horizontal');
+
+	function clamp(v: number): number {
+		return Math.min(max, Math.max(min, v));
+	}
+
+	function setPosition(v: number) {
+		const next = clamp(v);
+		if (next !== position) {
+			position = next;
+			onChange?.(next);
+		}
+	}
+
+	const attach: Attachment<HTMLDivElement> = (node) => {
+		containerEl = node;
+		return () => {
+			containerEl = null;
+		};
+	};
+
+	function refreshSize() {
+		if (!containerEl) {
+			containerSize = 0;
+			return;
+		}
+		const rect = containerEl.getBoundingClientRect();
+		containerSize = horiz ? rect.width : rect.height;
+	}
+
+	function pointFromEvent(e: PointerEvent): number {
+		return horiz ? e.clientX : e.clientY;
+	}
+
+	function pctFromAbsolute(e: PointerEvent): number {
+		if (!containerEl) return position;
+		const rect = containerEl.getBoundingClientRect();
+		const offset = horiz ? e.clientX - rect.left : e.clientY - rect.top;
+		const size = horiz ? rect.width : rect.height;
+		if (size <= 0) return position;
+		return (offset / size) * 100;
+	}
+
+	function onTrackPointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		dragging = true;
+		refreshSize();
+		lastCoord = pointFromEvent(e);
+		setPosition(pctFromAbsolute(e));
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onHandlePointerDown(e: PointerEvent) {
+		if (disabled) return;
+		e.preventDefault();
+		e.stopPropagation();
+		dragging = true;
+		refreshSize();
+		lastCoord = pointFromEvent(e);
+		(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+	}
+
+	function onPointerMove(e: PointerEvent) {
+		if (!dragging || containerSize <= 0) return;
+		const cur = pointFromEvent(e);
+		const deltaPx = cur - lastCoord;
+		lastCoord = cur;
+		if (deltaPx === 0) return;
+		const deltaPct = (deltaPx / containerSize) * 100;
+		setPosition(position + deltaPct);
+	}
+
+	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 = horiz ? 'ArrowRight' : 'ArrowDown';
+		const decKey = horiz ? '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();
+			setPosition(min);
+			return;
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			setPosition(max);
+			return;
+		} else {
+			return;
+		}
+		e.preventDefault();
+		setPosition(position + delta);
+	}
+
+	const afterClipStyle = $derived(
+		horiz
+			? `clip-path:inset(0 ${100 - position}% 0 0);`
+			: `clip-path:inset(0 0 ${100 - position}% 0);`
+	);
+
+	const handleStyle = $derived(
+		horiz
+			? `left:${position}%;top:0;bottom:0;transform:translateX(-50%);`
+			: `top:${position}%;left:0;right:0;transform:translateY(-50%);`
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	{@attach attach}
+	class={className}
+	data-orientation={orientation}
+	data-dragging={dragging || undefined}
+	data-disabled={disabled || undefined}
+	style="position:relative;overflow:hidden;touch-action:none;"
+	onpointerdown={onTrackPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+	onpointercancel={onPointerUp}
+>
+	<div class={beforeClass} data-layer="before" style="position:absolute;inset:0;">
+		{@render before()}
+	</div>
+	<div class={afterClass} data-layer="after" style={`position:absolute;inset:0;${afterClipStyle}`}>
+		{@render after()}
+	</div>
+
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		role="slider"
+		tabindex={disabled ? -1 : 0}
+		data-dragging={dragging || undefined}
+		data-orientation={orientation}
+		class={handleClass}
+		style={`position:absolute;${handleStyle}`}
+		onpointerdown={onHandlePointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+		onpointercancel={onPointerUp}
+		onkeydown={onKeydown}
+		{...mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+			interactiveStateAttrs({ disabled }),
+			widgetAttrs({
+				orientation,
+				valuenow: Math.round(position),
+				valuemin: min,
+				valuemax: max,
+				valuetext: ariaValuetext
+			})
+		)}
+	>
+		{#if handle}
+			{@render handle({ position, dragging })}
+		{/if}
+	</div>
+</div>

package/dist/components/display/compare/Compare.svelte.d.ts

@@ -0,0 +1,26 @@
+interface Props {
+    before: import('svelte').Snippet;
+    after: import('svelte').Snippet;
+    handle?: import('svelte').Snippet<[{
+        position: number;
+        dragging: boolean;
+    }]>;
+    position?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    largeStep?: number;
+    orientation?: 'horizontal' | 'vertical';
+    disabled?: boolean;
+    class?: string;
+    beforeClass?: string;
+    afterClass?: string;
+    handleClass?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    onChange?: (position: number) => void;
+}
+declare const Compare: import("svelte").Component<Props, {}, "position">;
+type Compare = ReturnType<typeof Compare>;
+export default Compare;

package/dist/components/display/compare/index.d.ts

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

package/dist/components/display/compare/index.js

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

package/dist/components/display/data-list/DataList.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+</script>
+
+<dl class={className} aria-label={ariaLabel} aria-labelledby={ariaLabelledby}>
+	{#if children}{@render children()}{/if}
+</dl>

package/dist/components/display/data-list/DataList.svelte.d.ts

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

package/dist/components/display/data-list/DataListDescription.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<dd class={className}>
+	{#if children}{@render children()}{/if}
+</dd>

package/dist/components/display/data-list/DataListDescription.svelte.d.ts

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

package/dist/components/display/data-list/DataListTerm.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<dt class={className}>
+	{#if children}{@render children()}{/if}
+</dt>

package/dist/components/display/data-list/DataListTerm.svelte.d.ts

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

package/dist/components/display/data-list/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DataList } from './DataList.svelte';
+export { default as DataListTerm } from './DataListTerm.svelte';
+export { default as DataListDescription } from './DataListDescription.svelte';

package/dist/components/display/data-list/index.js

@@ -0,0 +1,3 @@
+export { default as DataList } from './DataList.svelte';
+export { default as DataListTerm } from './DataListTerm.svelte';
+export { default as DataListDescription } from './DataListDescription.svelte';

package/dist/components/display/divider/Divider.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		class?: string;
+		// Accessibility attributes
+		'aria-label'?: string;
+		// Orientation
+		orientation?: 'horizontal' | 'vertical';
+	}
+
+	let {
+		class: className = '',
+		'aria-label': ariaLabel,
+		orientation = 'horizontal'
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(labelAttrs({ label: ariaLabel }), widgetAttrs({ orientation: 'vertical' }))
+	);
+</script>
+
+{#if orientation === 'horizontal'}
+	<hr class={className} aria-hidden="true" />
+{:else}
+	<span class={className} role="separator" {...ariaAttrs}></span>
+{/if}

package/dist/components/display/divider/Divider.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    class?: string;
+    'aria-label'?: string;
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const Divider: import("svelte").Component<Props, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/display/divider/index.d.ts

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

package/dist/components/display/divider/index.js

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

package/dist/components/display/frame/Frame.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	type Fit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		width?: string | number;
+		height?: string | number;
+		minWidth?: string | number;
+		minHeight?: string | number;
+		maxWidth?: string | number;
+		maxHeight?: string | number;
+		fit?: Fit;
+		overflow?: 'visible' | 'hidden' | 'auto' | 'scroll';
+		class?: string;
+		style?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		width,
+		height,
+		minWidth,
+		minHeight,
+		maxWidth,
+		maxHeight,
+		fit,
+		overflow = 'hidden',
+		class: className = '',
+		style: extraStyle = '',
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	function v(x: string | number | undefined): string {
+		if (x === undefined) return '';
+		return typeof x === 'number' ? `${x}px` : x;
+	}
+
+	const baseStyle = $derived.by(() => {
+		const parts: string[] = [];
+		if (width !== undefined) parts.push(`width:${v(width)};`);
+		if (height !== undefined) parts.push(`height:${v(height)};`);
+		if (minWidth !== undefined) parts.push(`min-width:${v(minWidth)};`);
+		if (minHeight !== undefined) parts.push(`min-height:${v(minHeight)};`);
+		if (maxWidth !== undefined) parts.push(`max-width:${v(maxWidth)};`);
+		if (maxHeight !== undefined) parts.push(`max-height:${v(maxHeight)};`);
+		parts.push(`overflow:${overflow};`);
+		if (fit) parts.push('display:block;');
+		return parts.join('');
+	});
+
+	const style = $derived(`${baseStyle}${extraStyle}`);
+</script>
+
+<div class={className} {style} aria-label={ariaLabel} data-frame>
+	{#if fit && children}
+		<div style={`width:100%;height:100%;object-fit:${fit};`}>
+			{@render children()}
+		</div>
+	{:else if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/components/display/frame/Frame.svelte.d.ts

@@ -0,0 +1,18 @@
+type Fit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+interface Props {
+    children?: import('svelte').Snippet;
+    width?: string | number;
+    height?: string | number;
+    minWidth?: string | number;
+    minHeight?: string | number;
+    maxWidth?: string | number;
+    maxHeight?: string | number;
+    fit?: Fit;
+    overflow?: 'visible' | 'hidden' | 'auto' | 'scroll';
+    class?: string;
+    style?: string;
+    'aria-label'?: string;
+}
+declare const Frame: import("svelte").Component<Props, {}, "">;
+type Frame = ReturnType<typeof Frame>;
+export default Frame;

package/dist/components/display/frame/index.d.ts

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

package/dist/components/display/frame/index.js

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

package/dist/components/display/image/Image.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		alt: string;
+		class?: string;
+		loading?: 'lazy' | 'eager';
+		decoding?: 'auto' | 'async' | 'sync';
+		width?: number | string;
+		height?: number | string;
+		decorative?: boolean;
+		fallback?: import('svelte').Snippet;
+		placeholder?: import('svelte').Snippet;
+		onLoad?: () => void;
+		onError?: () => void;
+	}
+
+	let {
+		src,
+		alt,
+		class: className = '',
+		loading = 'lazy',
+		decoding = 'async',
+		width,
+		height,
+		decorative = false,
+		fallback,
+		placeholder,
+		onLoad,
+		onError
+	}: Props = $props();
+
+	let status = $state<'loading' | 'loaded' | 'error'>('loading');
+
+	function handleLoad() {
+		status = 'loaded';
+		onLoad?.();
+	}
+
+	function handleError() {
+		status = 'error';
+		onError?.();
+	}
+</script>
+
+{#if status === 'error' && fallback}
+	{@render fallback()}
+{:else}
+	{#if status === 'loading' && placeholder}
+		{@render placeholder()}
+	{/if}
+	<img
+		{src}
+		alt={decorative ? '' : alt}
+		aria-hidden={decorative || undefined}
+		{loading}
+		{decoding}
+		{width}
+		{height}
+		class={className}
+		data-status={status}
+		hidden={status === 'loading' && !!placeholder}
+		onload={handleLoad}
+		onerror={handleError}
+	/>
+{/if}

package/dist/components/display/image/Image.svelte.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    src: string;
+    alt: string;
+    class?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'auto' | 'async' | 'sync';
+    width?: number | string;
+    height?: number | string;
+    decorative?: boolean;
+    fallback?: import('svelte').Snippet;
+    placeholder?: import('svelte').Snippet;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/dist/components/display/image/index.d.ts

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

package/dist/components/display/image/index.js

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

package/dist/components/display/kbd/Kbd.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		keys?: string[];
+		separator?: string;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		keys,
+		separator = '+',
+		class: className = '',
+		'aria-label': ariaLabel
+	}: Props = $props();
+</script>
+
+{#if keys && keys.length > 0}
+	<kbd class={className} aria-label={ariaLabel ?? keys.join(' then ')}>
+		{#each keys as key, i}
+			<kbd>{key}</kbd>{#if i < keys.length - 1}<span aria-hidden="true">{separator}</span>{/if}
+		{/each}
+	</kbd>
+{:else}
+	<kbd class={className} aria-label={ariaLabel}>
+		{#if children}{@render children()}{/if}
+	</kbd>
+{/if}

package/dist/components/display/kbd/Kbd.svelte.d.ts

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

package/dist/components/display/kbd/index.d.ts

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

package/dist/components/display/kbd/index.js

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

package/dist/components/display/list/List.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		as?: 'ul' | 'ol';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		as = 'ul',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={as}
+	role="list"
+	class={className}
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+>
+	{#if children}{@render children()}{/if}
+</svelte:element>

package/dist/components/display/list/List.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    as?: 'ul' | 'ol';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const List: import("svelte").Component<Props, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/display/list/ListItem.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+</script>
+
+<li role="listitem" class={className}>
+	{#if children}{@render children()}{/if}
+</li>

package/dist/components/display/list/ListItem.svelte.d.ts

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

package/dist/components/display/list/index.d.ts

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