alus-ui 0.1.0

package/dist/components/navigation/accordion/AccordionTrigger.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { getAccordionRoot, getAccordionItem } from './context.js';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ open: boolean }]>;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+
+	const root = getAccordionRoot();
+	const item = getAccordionItem();
+
+	let open = $derived(item.open());
+	let disabled = $derived(item.disabled());
+
+	function activate() {
+		if (disabled) return;
+		root.toggle(item.value);
+	}
+
+	function focusSibling(offset: number) {
+		const triggers = Array.from(
+			document.querySelectorAll<HTMLButtonElement>(
+				`[data-accordion-root="${root.baseId}"] [data-accordion-trigger="true"]:not([disabled])`
+			)
+		);
+		const idx = triggers.findIndex((b) => b.id === item.triggerId);
+		if (idx < 0 || !triggers.length) return;
+		const next = (idx + offset + triggers.length) % triggers.length;
+		triggers[next]?.focus();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			focusSibling(1);
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			focusSibling(-1);
+		} else if (e.key === 'Home') {
+			e.preventDefault();
+			const first = document.querySelector<HTMLButtonElement>(
+				`[data-accordion-root="${root.baseId}"] [data-accordion-trigger="true"]:not([disabled])`
+			);
+			first?.focus();
+		} else if (e.key === 'End') {
+			e.preventDefault();
+			const triggers = document.querySelectorAll<HTMLButtonElement>(
+				`[data-accordion-root="${root.baseId}"] [data-accordion-trigger="true"]:not([disabled])`
+			);
+			triggers[triggers.length - 1]?.focus();
+		}
+	}
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			interactiveStateAttrs({ expanded: open, disabled }),
+			widgetAttrs({ controls: item.contentId })
+		)
+	);
+</script>
+
+<button
+	id={item.triggerId}
+	type="button"
+	data-state={open ? 'open' : 'closed'}
+	data-disabled={disabled || undefined}
+	data-accordion-trigger="true"
+	{disabled}
+	class={className}
+	onclick={activate}
+	onkeydown={onKeydown}
+	{...ariaAttrs}
+>
+	{#if children}{@render children({ open })}{/if}
+</button>

package/dist/components/navigation/accordion/AccordionTrigger.svelte.d.ts

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

package/dist/components/navigation/accordion/context.d.ts

@@ -0,0 +1,21 @@
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionRootContext {
+    type: () => AccordionType;
+    value: () => string[];
+    toggle: (v: string) => void;
+    isOpen: (v: string) => boolean;
+    collapsible: () => boolean;
+    baseId: string;
+    disabled: () => boolean;
+}
+export interface AccordionItemContext {
+    readonly value: string;
+    disabled: () => boolean;
+    open: () => boolean;
+    readonly triggerId: string;
+    readonly contentId: string;
+}
+export declare function setAccordionRoot(ctx: AccordionRootContext): void;
+export declare function getAccordionRoot(): AccordionRootContext;
+export declare function setAccordionItem(ctx: AccordionItemContext): void;
+export declare function getAccordionItem(): AccordionItemContext;

package/dist/components/navigation/accordion/context.js

@@ -0,0 +1,21 @@
+import { getContext, setContext } from 'svelte';
+const ROOT = Symbol('alus-ui-accordion-root');
+const ITEM = Symbol('alus-ui-accordion-item');
+export function setAccordionRoot(ctx) {
+    setContext(ROOT, ctx);
+}
+export function getAccordionRoot() {
+    const ctx = getContext(ROOT);
+    if (!ctx)
+        throw new Error('Accordion subcomponents must be inside <Accordion>');
+    return ctx;
+}
+export function setAccordionItem(ctx) {
+    setContext(ITEM, ctx);
+}
+export function getAccordionItem() {
+    const ctx = getContext(ITEM);
+    if (!ctx)
+        throw new Error('AccordionTrigger/Content must be inside <AccordionItem>');
+    return ctx;
+}

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

@@ -0,0 +1,6 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as AccordionTrigger } from './AccordionTrigger.svelte';
+export { default as AccordionContent } from './AccordionContent.svelte';
+export { getAccordionRoot, setAccordionRoot, getAccordionItem, setAccordionItem } from './context.js';
+export type { AccordionRootContext, AccordionItemContext, AccordionType } from './context.js';

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

@@ -0,0 +1,5 @@
+export { default as Accordion } from './Accordion.svelte';
+export { default as AccordionItem } from './AccordionItem.svelte';
+export { default as AccordionTrigger } from './AccordionTrigger.svelte';
+export { default as AccordionContent } from './AccordionContent.svelte';
+export { getAccordionRoot, setAccordionRoot, getAccordionItem, setAccordionItem } from './context.js';

package/dist/components/navigation/breadcrumb/Breadcrumb.svelte

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

package/dist/components/navigation/breadcrumb/Breadcrumb.svelte.d.ts

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

package/dist/components/navigation/breadcrumb/BreadcrumbItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		href?: string;
+		current?: boolean;
+		class?: string;
+		linkClass?: string;
+	}
+
+	let { children, href, current = false, class: className = '', linkClass = '' }: Props = $props();
+</script>
+
+<li class={className}>
+	{#if current || !href}
+		<span aria-current={current ? 'page' : undefined}>
+			{#if children}{@render children()}{/if}
+		</span>
+	{:else}
+		<a {href} class={linkClass}>
+			{#if children}{@render children()}{/if}
+		</a>
+	{/if}
+</li>

package/dist/components/navigation/breadcrumb/BreadcrumbItem.svelte.d.ts

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

package/dist/components/navigation/breadcrumb/BreadcrumbSeparator.svelte

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

package/dist/components/navigation/breadcrumb/BreadcrumbSeparator.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';

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

@@ -0,0 +1,3 @@
+export { default as Breadcrumb } from './Breadcrumb.svelte';
+export { default as BreadcrumbItem } from './BreadcrumbItem.svelte';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.svelte';

package/dist/components/navigation/command-menu/CommandMenu.svelte

@@ -0,0 +1,146 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:command-menu');
+
+	export interface CommandItemEntry {
+		id: string;
+		value: string;
+		keywords: string;
+		onSelect?: () => void;
+		disabled: boolean;
+	}
+
+	export interface CommandMenuContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		query: () => string;
+		setQuery: (q: string) => void;
+		highlightedId: () => string | null;
+		setHighlightedId: (id: string | null) => void;
+		registerItem: (entry: CommandItemEntry) => () => void;
+		filteredItems: () => CommandItemEntry[];
+		select: (id: string) => void;
+		moveHighlight: (delta: number) => void;
+		highlightFirst: () => void;
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		listId: string;
+		inputId: string;
+	}
+
+	export function getCommandMenuContext(): CommandMenuContext {
+		const ctx = getContext<CommandMenuContext | undefined>(KEY);
+		if (!ctx) throw new Error('CommandMenu subcomponent must be inside <CommandMenu>');
+		return ctx;
+	}
+
+	export function setCommandMenuContext(ctx: CommandMenuContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		onOpenChange?: (v: boolean) => void;
+		filter?: (value: string, keywords: string, query: string) => boolean;
+	}
+
+	let { children, open = $bindable(false), onOpenChange, filter }: Props = $props();
+
+	let query = $state('');
+	let highlightedId = $state<string | null>(null);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let items = $state<CommandItemEntry[]>([]);
+	const listId = generateCounterId('cmdk-list');
+	const inputId = generateCounterId('cmdk-input');
+
+	function defaultFilter(value: string, keywords: string, q: string): boolean {
+		if (!q) return true;
+		const hay = `${value} ${keywords}`.toLowerCase();
+		return q
+			.toLowerCase()
+			.split(/\s+/)
+			.filter(Boolean)
+			.every((t) => hay.includes(t));
+	}
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+		if (!v) {
+			query = '';
+			highlightedId = null;
+		}
+	}
+
+	const filtered = $derived(
+		items.filter((it) => (filter ?? defaultFilter)(it.value, it.keywords, query))
+	);
+
+	$effect(() => {
+		if (!open) return;
+		const list = filtered;
+		if (list.length === 0) {
+			highlightedId = null;
+			return;
+		}
+		if (!highlightedId || !list.find((i) => i.id === highlightedId)) {
+			highlightedId = list[0].id;
+		}
+	});
+
+	function select(id: string) {
+		const it = items.find((i) => i.id === id);
+		if (!it || it.disabled) return;
+		it.onSelect?.();
+		setOpen(false);
+	}
+
+	function moveHighlight(delta: number) {
+		const list = filtered.filter((i) => !i.disabled);
+		if (list.length === 0) return;
+		const idx = list.findIndex((i) => i.id === highlightedId);
+		const next = idx < 0 ? 0 : (idx + delta + list.length) % list.length;
+		highlightedId = list[next].id;
+	}
+
+	function highlightFirst() {
+		const list = filtered.filter((i) => !i.disabled);
+		highlightedId = list[0]?.id ?? null;
+	}
+
+	setCommandMenuContext({
+		open: () => open,
+		setOpen,
+		query: () => query,
+		setQuery: (q) => (query = q),
+		highlightedId: () => highlightedId,
+		setHighlightedId: (id) => (highlightedId = id),
+		registerItem: (entry) => {
+			items.push(entry);
+			return () => {
+				const i = items.findIndex((e) => e.id === entry.id);
+				if (i >= 0) items.splice(i, 1);
+			};
+		},
+		filteredItems: () => filtered,
+		select,
+		moveHighlight,
+		highlightFirst,
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		listId,
+		inputId
+	});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/components/navigation/command-menu/CommandMenu.svelte.d.ts

@@ -0,0 +1,37 @@
+export interface CommandItemEntry {
+    id: string;
+    value: string;
+    keywords: string;
+    onSelect?: () => void;
+    disabled: boolean;
+}
+export interface CommandMenuContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    query: () => string;
+    setQuery: (q: string) => void;
+    highlightedId: () => string | null;
+    setHighlightedId: (id: string | null) => void;
+    registerItem: (entry: CommandItemEntry) => () => void;
+    filteredItems: () => CommandItemEntry[];
+    select: (id: string) => void;
+    moveHighlight: (delta: number) => void;
+    highlightFirst: () => void;
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    listId: string;
+    inputId: string;
+}
+export declare function getCommandMenuContext(): CommandMenuContext;
+export declare function setCommandMenuContext(ctx: CommandMenuContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    onOpenChange?: (v: boolean) => void;
+    filter?: (value: string, keywords: string, query: string) => boolean;
+}
+declare const CommandMenu: import("svelte").Component<Props, {}, "open">;
+type CommandMenu = ReturnType<typeof CommandMenu>;
+export default CommandMenu;

package/dist/components/navigation/command-menu/CommandMenuContent.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { trap } from '../../../utils/a11y/index.js';
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		backdropClass?: string;
+		closeOnEscape?: boolean;
+		closeOnOutsideClick?: boolean;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		backdropClass = '',
+		closeOnEscape = true,
+		closeOnOutsideClick = true,
+		'aria-label': ariaLabel = 'Command menu'
+	}: Props = $props();
+
+	const ctx = getCommandMenuContext();
+
+	const contentRef: Attachment<HTMLDivElement> = (node) => {
+		const previouslyFocused = document.activeElement as HTMLElement | null;
+		const releaseTrap = trap(node);
+
+		const raf = requestAnimationFrame(() => {
+			const input = node.querySelector<HTMLInputElement>(`#${CSS.escape(ctx.inputId)}`);
+			input?.focus();
+			input?.select?.();
+		});
+
+		function onKeydown(e: KeyboardEvent) {
+			if (closeOnEscape && e.key === 'Escape') {
+				e.preventDefault();
+				ctx.setOpen(false);
+			}
+		}
+
+		function onDocPointerDown(e: PointerEvent) {
+			if (!closeOnOutsideClick) return;
+			if (!(e.target instanceof Node)) return;
+			if (!node.contains(e.target)) ctx.setOpen(false);
+		}
+
+		document.addEventListener('keydown', onKeydown);
+		document.addEventListener('pointerdown', onDocPointerDown, true);
+
+		return () => {
+			cancelAnimationFrame(raf);
+			releaseTrap?.();
+			document.removeEventListener('keydown', onKeydown);
+			document.removeEventListener('pointerdown', onDocPointerDown, true);
+			const trigger = ctx.triggerEl.current ?? previouslyFocused;
+			trigger?.focus?.();
+		};
+	};
+</script>
+
+{#if ctx.open()}
+	<Portal>
+		<div data-cmdk-backdrop class={backdropClass}>
+			<div
+				role="dialog"
+				aria-modal="true"
+				aria-label={ariaLabel}
+				class={className}
+				{@attach contentRef}
+			>
+				{#if children}{@render children()}{/if}
+			</div>
+		</div>
+	</Portal>
+{/if}

package/dist/components/navigation/command-menu/CommandMenuContent.svelte.d.ts

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

package/dist/components/navigation/command-menu/CommandMenuEmpty.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+	}
+
+	let { children, class: className = '' }: Props = $props();
+	const ctx = getCommandMenuContext();
+	const empty = $derived(ctx.query().trim() !== '' && ctx.filteredItems().length === 0);
+</script>
+
+{#if empty}
+	<div role="status" aria-live="polite" class={className}>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/dist/components/navigation/command-menu/CommandMenuEmpty.svelte.d.ts

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

package/dist/components/navigation/command-menu/CommandMenuGroup.svelte

@@ -0,0 +1,55 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const GROUP_KEY = Symbol('alus-ui:command-menu-group');
+
+	export interface CommandMenuGroupContext {
+		track: (getVisible: () => boolean) => () => void;
+	}
+
+	export function getCommandMenuGroupContext(): CommandMenuGroupContext | undefined {
+		return getContext<CommandMenuGroupContext | undefined>(GROUP_KEY);
+	}
+
+	export function setCommandMenuGroupContext(ctx: CommandMenuGroupContext) {
+		setContext(GROUP_KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		heading?: string;
+	}
+
+	let { children, class: className = '', heading }: Props = $props();
+	const headingId = generateCounterId('cmdk-group-heading');
+
+	let trackers = $state<Array<() => boolean>>([]);
+	const anyVisible = $derived(trackers.some((fn) => fn()));
+
+	setCommandMenuGroupContext({
+		track: (fn) => {
+			trackers.push(fn);
+			return () => {
+				const i = trackers.indexOf(fn);
+				if (i >= 0) trackers.splice(i, 1);
+			};
+		}
+	});
+</script>
+
+<div
+	role="group"
+	aria-labelledby={heading ? headingId : undefined}
+	class={className}
+	hidden={!anyVisible || undefined}
+>
+	{#if heading}
+		<div id={headingId} data-cmdk-group-heading>{heading}</div>
+	{/if}
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/navigation/command-menu/CommandMenuGroup.svelte.d.ts

@@ -0,0 +1,13 @@
+export interface CommandMenuGroupContext {
+    track: (getVisible: () => boolean) => () => void;
+}
+export declare function getCommandMenuGroupContext(): CommandMenuGroupContext | undefined;
+export declare function setCommandMenuGroupContext(ctx: CommandMenuGroupContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    heading?: string;
+}
+declare const CommandMenuGroup: import("svelte").Component<Props, {}, "">;
+type CommandMenuGroup = ReturnType<typeof CommandMenuGroup>;
+export default CommandMenuGroup;