alus-ui 0.1.0

package/dist/components/form/rating/Rating.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		value?: number;
+		max?: number;
+		readonly?: boolean;
+		disabled?: boolean;
+		name?: string;
+		class?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		onValueChange?: (v: number) => void;
+		onHoverChange?: (displayed: number) => void;
+		item?: import('svelte').Snippet<
+			[{ index: number; filled: boolean; displayed: number; value: number; max: number }]
+		>;
+	}
+
+	let {
+		value = $bindable(0),
+		max = 5,
+		readonly = false,
+		disabled = false,
+		name,
+		class: className = '',
+		'aria-label': ariaLabel = 'Rating',
+		'aria-labelledby': ariaLabelledby,
+		onValueChange,
+		onHoverChange,
+		item
+	}: Props = $props();
+
+	const groupId = generateCounterId('rating');
+	let hovered = $state<number | null>(null);
+
+	function set(v: number) {
+		if (readonly || disabled) return;
+		value = v;
+		onValueChange?.(v);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (readonly || disabled) return;
+		let next = value;
+		switch (e.key) {
+			case 'ArrowRight':
+			case 'ArrowUp':
+				next = Math.min(max, value + 1);
+				break;
+			case 'ArrowLeft':
+			case 'ArrowDown':
+				next = Math.max(0, value - 1);
+				break;
+			case 'Home':
+				next = 0;
+				break;
+			case 'End':
+				next = max;
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+		set(next);
+	}
+
+	let displayed = $derived(hovered ?? value);
+
+	function setHover(v: number | null) {
+		if (readonly || disabled) return;
+		hovered = v;
+		onHoverChange?.(v ?? value);
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+			interactiveStateAttrs({ disabled }),
+			widgetAttrs({
+				valuemin: 0,
+				valuemax: max,
+				valuenow: value,
+				valuetext: `${value} of ${max}`
+			})
+		)
+	);
+</script>
+
+<div
+	role="slider"
+	tabindex={disabled ? -1 : 0}
+	aria-readonly={readonly || undefined}
+	data-disabled={disabled || undefined}
+	data-readonly={readonly || undefined}
+	class={className}
+	onkeydown={onKeydown}
+	{...ariaAttrs}
+>
+	{#each Array(max) as _, i (i)}
+		{@const idx = i + 1}
+		{@const filled = idx <= displayed}
+		<button
+			type="button"
+			tabindex="-1"
+			aria-hidden="true"
+			data-filled={filled || undefined}
+			disabled={disabled || readonly}
+			onclick={() => set(idx)}
+			onpointerenter={() => setHover(idx)}
+			onpointerleave={() => setHover(null)}
+		>
+			{#if item}
+				{@render item({ index: idx, filled, displayed, value, max })}
+			{:else}
+				<span aria-hidden="true">{filled ? '★' : '☆'}</span>
+			{/if}
+		</button>
+	{/each}
+	{#if name}
+		<input type="hidden" {name} {value} id={groupId} />
+	{/if}
+</div>

package/dist/components/form/rating/Rating.svelte.d.ts

@@ -0,0 +1,24 @@
+interface Props {
+    value?: number;
+    max?: number;
+    readonly?: boolean;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    onValueChange?: (v: number) => void;
+    onHoverChange?: (displayed: number) => void;
+    item?: import('svelte').Snippet<[
+        {
+            index: number;
+            filled: boolean;
+            displayed: number;
+            value: number;
+            max: number;
+        }
+    ]>;
+}
+declare const Rating: import("svelte").Component<Props, {}, "value">;
+type Rating = ReturnType<typeof Rating>;
+export default Rating;

package/dist/components/form/rating/index.d.ts

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

package/dist/components/form/rating/index.js

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

package/dist/components/form/search-input/SearchInput.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import {
+		labelAttrs,
+		validationAttrs,
+		interactiveStateAttrs,
+		mergeAttrs
+	} from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ value: string; clear: () => void }]>;
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		required?: boolean;
+		name?: string;
+		id?: string;
+		class?: string;
+		inputClass?: string;
+		clearLabel?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		oninput?: (event: Event) => void;
+		onchange?: (event: Event) => void;
+		onclear?: () => void;
+	}
+
+	let {
+		children,
+		value = $bindable(''),
+		placeholder = '',
+		disabled = false,
+		required = false,
+		name,
+		id,
+		class: className = '',
+		inputClass = '',
+		clearLabel = 'Clear search',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		oninput,
+		onchange,
+		onclear
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled }),
+			validationAttrs({ required })
+		)
+	);
+
+	function clear() {
+		value = '';
+		onclear?.();
+	}
+</script>
+
+{#if children}
+	{@render children({ value, clear })}
+{:else}
+	<div class={className} role="search">
+		<input
+			type="search"
+			{id}
+			{name}
+			{placeholder}
+			{disabled}
+			{required}
+			bind:value
+			class={inputClass}
+			{oninput}
+			{onchange}
+			{...ariaAttrs}
+		/>
+		{#if value}
+			<button type="button" {...labelAttrs({ label: clearLabel })} onclick={clear} {disabled}
+				>×</button
+			>
+		{/if}
+	</div>
+{/if}

package/dist/components/form/search-input/SearchInput.svelte.d.ts

@@ -0,0 +1,24 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        value: string;
+        clear: () => void;
+    }]>;
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    id?: string;
+    class?: string;
+    inputClass?: string;
+    clearLabel?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onclear?: () => void;
+}
+declare const SearchInput: import("svelte").Component<Props, {}, "value">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/form/search-input/index.d.ts

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

package/dist/components/form/search-input/index.js

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

package/dist/components/form/select/Select.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:select');
+
+	export interface SelectOptionEntry {
+		value: unknown;
+		el: HTMLElement;
+		disabled: boolean;
+	}
+
+	export interface SelectContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		value: () => unknown;
+		setValue: (v: unknown) => void;
+		multiple: () => boolean;
+		disabled: () => boolean;
+		highlighted: () => unknown;
+		setHighlighted: (v: unknown) => void;
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		contentEl: { current: HTMLElement | null };
+		setContentEl: (el: HTMLElement | null) => void;
+		registerOption: (entry: SelectOptionEntry) => () => void;
+		options: () => SelectOptionEntry[];
+		toggleValue: (v: unknown) => void;
+		isSelected: (v: unknown) => boolean;
+		contentId: string;
+		triggerId: string;
+		labelId: () => string | undefined;
+	}
+
+	export function getSelectContext(): SelectContext {
+		const ctx = getContext<SelectContext | undefined>(KEY);
+		if (!ctx) throw new Error('Select subcomponent must be used inside <Select>');
+		return ctx;
+	}
+
+	export function setSelectContext(ctx: SelectContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		value?: unknown;
+		open?: boolean;
+		multiple?: boolean;
+		disabled?: boolean;
+		name?: string;
+		'aria-labelledby'?: string;
+		onValueChange?: (value: unknown) => void;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let {
+		children,
+		value = $bindable(),
+		open = $bindable(false),
+		multiple = false,
+		disabled = false,
+		name,
+		'aria-labelledby': ariaLabelledby,
+		onValueChange,
+		onOpenChange
+	}: Props = $props();
+
+	let highlighted = $state<unknown>(undefined);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
+	let opts = $state<SelectOptionEntry[]>([]);
+
+	const triggerId = generateCounterId('select-trigger');
+	const contentId = generateCounterId('select-content');
+
+	function setValue(v: unknown) {
+		value = v;
+		onValueChange?.(v);
+	}
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	function isSelected(v: unknown): boolean {
+		if (multiple) return Array.isArray(value) && value.includes(v);
+		return value === v;
+	}
+
+	function toggleValue(v: unknown) {
+		if (multiple) {
+			const arr = Array.isArray(value) ? [...value] : [];
+			const i = arr.indexOf(v);
+			if (i >= 0) arr.splice(i, 1);
+			else arr.push(v);
+			setValue(arr);
+		} else {
+			setValue(v);
+			setOpen(false);
+		}
+	}
+
+	setSelectContext({
+		open: () => open,
+		setOpen,
+		value: () => value,
+		setValue,
+		multiple: () => multiple,
+		disabled: () => disabled,
+		highlighted: () => highlighted,
+		setHighlighted: (v) => (highlighted = v),
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		contentEl: {
+			get current() {
+				return contentEl;
+			}
+		},
+		setContentEl: (el) => (contentEl = el),
+		registerOption: (entry) => {
+			opts.push(entry);
+			return () => {
+				const i = opts.findIndex((o) => o.el === entry.el);
+				if (i >= 0) opts.splice(i, 1);
+			};
+		},
+		options: () => opts,
+		toggleValue,
+		isSelected,
+		contentId,
+		triggerId,
+		labelId: () => ariaLabelledby
+	});
+
+	let hiddenValues = $derived.by(() => {
+		if (!name) return [];
+		if (multiple && Array.isArray(value)) return value.map(String);
+		if (value !== undefined && value !== null) return [String(value)];
+		return [];
+	});
+</script>
+
+{#each hiddenValues as v, i (i)}
+	<input type="hidden" {name} value={v} />
+{/each}
+
+{#if children}{@render children()}{/if}

package/dist/components/form/select/Select.svelte.d.ts

@@ -0,0 +1,46 @@
+export interface SelectOptionEntry {
+    value: unknown;
+    el: HTMLElement;
+    disabled: boolean;
+}
+export interface SelectContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    value: () => unknown;
+    setValue: (v: unknown) => void;
+    multiple: () => boolean;
+    disabled: () => boolean;
+    highlighted: () => unknown;
+    setHighlighted: (v: unknown) => void;
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    contentEl: {
+        current: HTMLElement | null;
+    };
+    setContentEl: (el: HTMLElement | null) => void;
+    registerOption: (entry: SelectOptionEntry) => () => void;
+    options: () => SelectOptionEntry[];
+    toggleValue: (v: unknown) => void;
+    isSelected: (v: unknown) => boolean;
+    contentId: string;
+    triggerId: string;
+    labelId: () => string | undefined;
+}
+export declare function getSelectContext(): SelectContext;
+export declare function setSelectContext(ctx: SelectContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    value?: unknown;
+    open?: boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+    name?: string;
+    'aria-labelledby'?: string;
+    onValueChange?: (value: unknown) => void;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Select: import("svelte").Component<Props, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/form/select/SelectContent.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset, size } from '@floating-ui/dom';
+	import { getSelectContext } from './Select.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 = true
+	}: Props = $props();
+
+	const ctx = getSelectContext();
+
+	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`
+				});
+			});
+		}
+
+		function onPointerDown(e: PointerEvent) {
+			const t = e.target as Node;
+			if (node.contains(t) || ctx.triggerEl.current?.contains(t)) return;
+			ctx.setOpen(false);
+		}
+
+		document.addEventListener('pointerdown', onPointerDown, true);
+
+		queueMicrotask(() => node.focus());
+
+		return () => {
+			cleanupAutoUpdate?.();
+			document.removeEventListener('pointerdown', onPointerDown, true);
+			ctx.setContentEl(null);
+			ctx.triggerEl.current?.focus();
+		};
+	};
+
+	function move(dir: 1 | -1) {
+		const opts = ctx.options().filter((o) => !o.disabled);
+		if (opts.length === 0) return;
+		const cur = opts.findIndex((o) => o.value === ctx.highlighted());
+		let next: number;
+		if (cur === -1) next = dir === 1 ? 0 : opts.length - 1;
+		else next = (cur + dir + opts.length) % opts.length;
+		ctx.setHighlighted(opts[next].value);
+		opts[next].el.scrollIntoView({ block: 'nearest' });
+	}
+
+	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();
+				const opts = ctx.options().filter((o) => !o.disabled);
+				if (opts[0]) {
+					ctx.setHighlighted(opts[0].value);
+					opts[0].el.scrollIntoView({ block: 'nearest' });
+				}
+				break;
+			}
+			case 'End': {
+				e.preventDefault();
+				const opts = ctx.options().filter((o) => !o.disabled);
+				const last = opts.at(-1);
+				if (last) {
+					ctx.setHighlighted(last.value);
+					last.el.scrollIntoView({ block: 'nearest' });
+				}
+				break;
+			}
+			case 'Enter':
+			case ' ': {
+				e.preventDefault();
+				const h = ctx.highlighted();
+				if (h !== undefined) ctx.toggleValue(h);
+				break;
+			}
+			case 'Escape':
+				e.preventDefault();
+				ctx.setOpen(false);
+				break;
+			case 'Tab':
+				ctx.setOpen(false);
+				break;
+		}
+	}
+
+	let activeId = $derived.by(() => {
+		const opts = ctx.options();
+		const found = opts.find((o) => o.value === ctx.highlighted());
+		return found?.el.id;
+	});
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		<div
+			id={ctx.contentId}
+			role="listbox"
+			tabindex="-1"
+			aria-labelledby={ctx.labelId() ?? ctx.triggerId}
+			aria-multiselectable={ctx.multiple() ? true : undefined}
+			aria-activedescendant={activeId}
+			class={className}
+			style="position:fixed; top:0; left:0;"
+			onkeydown={onKeydown}
+			{@attach contentRef}
+		>
+			{#if children}{@render children()}{/if}
+		</div>
+	</Portal>
+{/if}

package/dist/components/form/select/SelectContent.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 SelectContent: import("svelte").Component<Props, {}, "">;
+type SelectContent = ReturnType<typeof SelectContent>;
+export default SelectContent;

package/dist/components/form/select/SelectOption.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { getSelectContext } from './Select.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ selected: boolean; highlighted: boolean }]>;
+		value: unknown;
+		class?: string;
+		disabled?: boolean;
+	}
+
+	let { children, value, class: className = '', disabled = false }: Props = $props();
+
+	const ctx = getSelectContext();
+	const id = generateCounterId('select-option');
+
+	const optionRef: Attachment<HTMLDivElement> = (node) => {
+		const cleanup = ctx.registerOption({ value, el: node, disabled });
+		return () => cleanup();
+	};
+
+	function onClick() {
+		if (disabled) return;
+		ctx.toggleValue(value);
+	}
+
+	function onPointerEnter() {
+		if (disabled) return;
+		ctx.setHighlighted(value);
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (disabled) return;
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			ctx.toggleValue(value);
+		}
+	}
+
+	let selected = $derived(ctx.isSelected(value));
+	let highlighted = $derived(ctx.highlighted() === value);
+</script>
+
+<div
+	{id}
+	role="option"
+	tabindex="-1"
+	aria-selected={selected}
+	aria-disabled={disabled || undefined}
+	data-highlighted={highlighted ? '' : undefined}
+	data-selected={selected ? '' : undefined}
+	data-disabled={disabled ? '' : undefined}
+	class={className}
+	onclick={onClick}
+	onkeydown={onKeydown}
+	onpointerenter={onPointerEnter}
+	{@attach optionRef}
+>
+	{#if children}{@render children({ selected, highlighted })}{/if}
+</div>