alus-ui 0.1.0

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { useDebounce } from 'runed';
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+
+	interface Props {
+		class?: string;
+		placeholder?: string;
+		debounceMs?: number;
+		'aria-label'?: string;
+	}
+
+	let {
+		class: className = '',
+		placeholder = 'Type a command or search...',
+		debounceMs = 0,
+		'aria-label': ariaLabel = 'Search commands'
+	}: Props = $props();
+
+	const ctx = getCommandMenuContext();
+	let localValue = $state(ctx.query());
+
+	const debouncedSetQuery = useDebounce(
+		(v: string) => ctx.setQuery(v),
+		() => debounceMs
+	);
+
+	function onInput(e: Event) {
+		const v = (e.target as HTMLInputElement).value;
+		localValue = v;
+		if (debounceMs <= 0) {
+			debouncedSetQuery.cancel();
+			ctx.setQuery(v);
+			return;
+		}
+		debouncedSetQuery(v);
+	}
+
+	function flushDebounce() {
+		if (debouncedSetQuery.pending) debouncedSetQuery.runScheduledNow();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Escape':
+				e.preventDefault();
+				e.stopPropagation();
+				ctx.setOpen(false);
+				break;
+			case 'ArrowDown':
+				e.preventDefault();
+				ctx.moveHighlight(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				ctx.moveHighlight(-1);
+				break;
+			case 'Home':
+				e.preventDefault();
+				ctx.highlightFirst();
+				break;
+			case 'Enter': {
+				e.preventDefault();
+				flushDebounce();
+				const id = ctx.highlightedId();
+				if (id) ctx.select(id);
+				break;
+			}
+		}
+	}
+</script>
+
+<input
+	type="text"
+	id={ctx.inputId}
+	role="combobox"
+	autocomplete="off"
+	autocorrect="off"
+	spellcheck="false"
+	aria-label={ariaLabel}
+	aria-expanded={ctx.open() ? 'true' : 'false'}
+	aria-controls={ctx.listId}
+	aria-activedescendant={ctx.highlightedId() ?? undefined}
+	class={className}
+	{placeholder}
+	value={localValue}
+	oninput={onInput}
+	onkeydown={onKeydown}
+/>

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

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

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

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { interactiveStateAttrs } from '../../../utils/a11y/index.js';
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+	import { getCommandMenuGroupContext } from './CommandMenuGroup.svelte';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ highlighted: boolean }]>;
+		class?: string;
+		value: string;
+		keywords?: string;
+		disabled?: boolean;
+		onSelect?: () => void;
+	}
+
+	let {
+		children,
+		class: className = '',
+		value,
+		keywords = '',
+		disabled = false,
+		onSelect
+	}: Props = $props();
+
+	const ctx = getCommandMenuContext();
+	const group = getCommandMenuGroupContext();
+	const id = generateCounterId('cmdk-item');
+
+	const highlighted = $derived(ctx.highlightedId() === id);
+	const visible = $derived(ctx.filteredItems().some((i) => i.id === id));
+
+	$effect(() => {
+		const unregister = ctx.registerItem({ id, value, keywords, disabled, onSelect });
+		const untrack = group?.track(() => visible);
+		return () => {
+			unregister();
+			untrack?.();
+		};
+	});
+
+	function onClick() {
+		if (disabled) return;
+		ctx.select(id);
+	}
+
+	function onPointerMove() {
+		if (disabled) return;
+		if (!highlighted) ctx.setHighlightedId(id);
+	}
+</script>
+
+{#if visible}
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		{id}
+		role="option"
+		tabindex="-1"
+		data-highlighted={highlighted || undefined}
+		data-disabled={disabled || undefined}
+		class={className}
+		onclick={onClick}
+		onpointermove={onPointerMove}
+		{...interactiveStateAttrs({ selected: highlighted, disabled })}
+	>
+		{#if children}{@render children({ highlighted })}{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,13 @@
+interface Props {
+    children?: import('svelte').Snippet<[{
+        highlighted: boolean;
+    }]>;
+    class?: string;
+    value: string;
+    keywords?: string;
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+declare const CommandMenuItem: import("svelte").Component<Props, {}, "">;
+type CommandMenuItem = ReturnType<typeof CommandMenuItem>;
+export default CommandMenuItem;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let { children, class: className = '', 'aria-label': ariaLabel = 'Commands' }: Props = $props();
+	const ctx = getCommandMenuContext();
+</script>
+
+<div
+	role="listbox"
+	id={ctx.listId}
+	class={className}
+	{...mergeAttrs(labelAttrs({ label: ariaLabel }), widgetAttrs({ orientation: 'vertical' }))}
+>
+	{#if children}{@render children()}{/if}
+</div>

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

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

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { getCommandMenuContext } from './CommandMenu.svelte';
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel = 'Open command menu'
+	}: Props = $props();
+
+	const ctx = getCommandMenuContext();
+
+	const triggerRef: Attachment<HTMLButtonElement> = (node) => {
+		ctx.setTriggerEl(node);
+		return () => ctx.setTriggerEl(null);
+	};
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel }),
+			interactiveStateAttrs({ expanded: ctx.open() }),
+			widgetAttrs({ haspopup: 'dialog' })
+		)
+	);
+</script>
+
+<button
+	type="button"
+	class={className}
+	onclick={() => ctx.setOpen(!ctx.open())}
+	{...ariaAttrs}
+	{@attach triggerRef}
+>
+	{#if children}{@render children()}{/if}
+</button>

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

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

package/dist/components/navigation/command-menu/index.d.ts

@@ -0,0 +1,9 @@
+export { default as CommandMenu, getCommandMenuContext, setCommandMenuContext } from './CommandMenu.svelte';
+export type { CommandMenuContext, CommandItemEntry } from './CommandMenu.svelte';
+export { default as CommandMenuTrigger } from './CommandMenuTrigger.svelte';
+export { default as CommandMenuContent } from './CommandMenuContent.svelte';
+export { default as CommandMenuInput } from './CommandMenuInput.svelte';
+export { default as CommandMenuList } from './CommandMenuList.svelte';
+export { default as CommandMenuItem } from './CommandMenuItem.svelte';
+export { default as CommandMenuGroup } from './CommandMenuGroup.svelte';
+export { default as CommandMenuEmpty } from './CommandMenuEmpty.svelte';

package/dist/components/navigation/command-menu/index.js

@@ -0,0 +1,8 @@
+export { default as CommandMenu, getCommandMenuContext, setCommandMenuContext } from './CommandMenu.svelte';
+export { default as CommandMenuTrigger } from './CommandMenuTrigger.svelte';
+export { default as CommandMenuContent } from './CommandMenuContent.svelte';
+export { default as CommandMenuInput } from './CommandMenuInput.svelte';
+export { default as CommandMenuList } from './CommandMenuList.svelte';
+export { default as CommandMenuItem } from './CommandMenuItem.svelte';
+export { default as CommandMenuGroup } from './CommandMenuGroup.svelte';
+export { default as CommandMenuEmpty } from './CommandMenuEmpty.svelte';

package/dist/components/navigation/external-link/ExternalLink.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+		href: string;
+		newTab?: boolean;
+		announceNewTab?: boolean;
+		class?: string;
+		'aria-label'?: string;
+		'aria-describedby'?: string;
+		onclick?: (e: MouseEvent) => void;
+	}
+
+	let {
+		children,
+		icon,
+		href,
+		newTab = true,
+		announceNewTab = true,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-describedby': ariaDescribedby,
+		onclick
+	}: Props = $props();
+
+	const srOnlyStyle =
+		'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;';
+</script>
+
+<a
+	{href}
+	target={newTab ? '_blank' : undefined}
+	rel={newTab ? 'noopener noreferrer' : undefined}
+	class={className}
+	aria-label={ariaLabel}
+	aria-describedby={ariaDescribedby}
+	data-external
+	{onclick}
+>
+	{#if children}{@render children()}{/if}
+	{#if icon}{@render icon()}{/if}
+	{#if newTab && announceNewTab}
+		<span style={srOnlyStyle}>(opens in new tab)</span>
+	{/if}
+</a>

package/dist/components/navigation/external-link/ExternalLink.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+    href: string;
+    newTab?: boolean;
+    announceNewTab?: boolean;
+    class?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    onclick?: (e: MouseEvent) => void;
+}
+declare const ExternalLink: import("svelte").Component<Props, {}, "">;
+type ExternalLink = ReturnType<typeof ExternalLink>;
+export default ExternalLink;

package/dist/components/navigation/external-link/index.d.ts

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

package/dist/components/navigation/external-link/index.js

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

package/dist/components/navigation/link/Link.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Target = '_self' | '_blank' | '_parent' | '_top';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		href: string;
+		external?: boolean;
+		target?: Target;
+		rel?: string;
+		current?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+		download?: string | boolean;
+		class?: string;
+		id?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		children,
+		href,
+		external,
+		target,
+		rel,
+		current,
+		download,
+		class: className = '',
+		id,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		onclick
+	}: Props = $props();
+
+	let isExternal = $derived(external ?? (typeof href === 'string' && /^https?:\/\//i.test(href)));
+
+	let computedTarget = $derived(target ?? (isExternal ? '_blank' : undefined));
+	let computedRel = $derived(rel ?? (isExternal ? 'noopener noreferrer' : undefined));
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+</script>
+
+<a
+	{href}
+	{id}
+	class={className}
+	target={computedTarget}
+	rel={computedRel}
+	aria-current={current}
+	data-external={isExternal || undefined}
+	download={download === true ? '' : (download as string | undefined)}
+	{onclick}
+	{...ariaAttrs}
+>
+	{#if children}{@render children()}{/if}
+</a>

package/dist/components/navigation/link/Link.svelte.d.ts

@@ -0,0 +1,19 @@
+type Target = '_self' | '_blank' | '_parent' | '_top';
+interface Props {
+    children?: import('svelte').Snippet;
+    href: string;
+    external?: boolean;
+    target?: Target;
+    rel?: string;
+    current?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false';
+    download?: string | boolean;
+    class?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const Link: import("svelte").Component<Props, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

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

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

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

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

package/dist/components/navigation/menu/Menu.svelte

@@ -0,0 +1,112 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	const KEY = Symbol('alus-ui:menu');
+
+	export interface MenuItemEntry {
+		el: HTMLElement;
+		disabled: boolean;
+		onSelect?: () => void;
+	}
+
+	export interface MenuContext {
+		open: () => boolean;
+		setOpen: (v: boolean) => void;
+		disabled: () => boolean;
+		highlighted: () => HTMLElement | null;
+		setHighlighted: (el: HTMLElement | null) => void;
+		lastActivatedEl: () => HTMLElement | null;
+		lastActivatedIndex: () => number;
+		triggerEl: { current: HTMLElement | null };
+		setTriggerEl: (el: HTMLElement | null) => void;
+		contentEl: { current: HTMLElement | null };
+		setContentEl: (el: HTMLElement | null) => void;
+		registerItem: (entry: MenuItemEntry) => () => void;
+		items: () => MenuItemEntry[];
+		activate: (entry: MenuItemEntry) => void;
+		contentId: string;
+		triggerId: string;
+	}
+
+	export function getMenuContext(): MenuContext {
+		const ctx = getContext<MenuContext | undefined>(KEY);
+		if (!ctx) throw new Error('Menu subcomponent must be inside <Menu>');
+		return ctx;
+	}
+
+	export function setMenuContext(ctx: MenuContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		open?: boolean;
+		disabled?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+
+	let { children, open = $bindable(false), disabled = false, onOpenChange }: Props = $props();
+
+	let highlighted = $state<HTMLElement | null>(null);
+	let lastActivated = $state<HTMLElement | null>(null);
+	let lastActivatedIndex = $state<number>(-1);
+	let triggerEl = $state<HTMLElement | null>(null);
+	let contentEl = $state<HTMLElement | null>(null);
+	let items = $state<MenuItemEntry[]>([]);
+
+	const triggerId = generateCounterId('menu-trigger');
+	const contentId = generateCounterId('menu-content');
+
+	function setOpen(v: boolean) {
+		open = v;
+		onOpenChange?.(v);
+	}
+
+	function activate(entry: MenuItemEntry) {
+		if (entry.disabled) return;
+		lastActivated = entry.el;
+		const enabled = items.filter((i) => !i.disabled);
+		lastActivatedIndex = enabled.findIndex((i) => i.el === entry.el);
+		entry.onSelect?.();
+		setOpen(false);
+	}
+
+	setMenuContext({
+		open: () => open,
+		setOpen,
+		disabled: () => disabled,
+		highlighted: () => highlighted,
+		setHighlighted: (el) => (highlighted = el),
+		lastActivatedEl: () => lastActivated,
+		lastActivatedIndex: () => lastActivatedIndex,
+		triggerEl: {
+			get current() {
+				return triggerEl;
+			}
+		},
+		setTriggerEl: (el) => (triggerEl = el),
+		contentEl: {
+			get current() {
+				return contentEl;
+			}
+		},
+		setContentEl: (el) => (contentEl = el),
+		registerItem: (entry) => {
+			items.push(entry);
+			return () => {
+				const i = items.findIndex((e) => e.el === entry.el);
+				if (i >= 0) items.splice(i, 1);
+			};
+		},
+		items: () => items,
+		activate,
+		contentId,
+		triggerId
+	});
+</script>
+
+{#if children}{@render children()}{/if}

package/dist/components/navigation/menu/Menu.svelte.d.ts

@@ -0,0 +1,38 @@
+export interface MenuItemEntry {
+    el: HTMLElement;
+    disabled: boolean;
+    onSelect?: () => void;
+}
+export interface MenuContext {
+    open: () => boolean;
+    setOpen: (v: boolean) => void;
+    disabled: () => boolean;
+    highlighted: () => HTMLElement | null;
+    setHighlighted: (el: HTMLElement | null) => void;
+    lastActivatedEl: () => HTMLElement | null;
+    lastActivatedIndex: () => number;
+    triggerEl: {
+        current: HTMLElement | null;
+    };
+    setTriggerEl: (el: HTMLElement | null) => void;
+    contentEl: {
+        current: HTMLElement | null;
+    };
+    setContentEl: (el: HTMLElement | null) => void;
+    registerItem: (entry: MenuItemEntry) => () => void;
+    items: () => MenuItemEntry[];
+    activate: (entry: MenuItemEntry) => void;
+    contentId: string;
+    triggerId: string;
+}
+export declare function getMenuContext(): MenuContext;
+export declare function setMenuContext(ctx: MenuContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    open?: boolean;
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare const Menu: import("svelte").Component<Props, {}, "open">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;