alus-ui 0.1.0

package/dist/components/display/tree-view/TreeView.svelte

@@ -0,0 +1,182 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+
+	const KEY = Symbol('alus-ui:tree-view');
+
+	export interface TreeViewContext {
+		expanded: SvelteSet<string>;
+		selected: () => string | null;
+		focused: () => string | null;
+		setFocused: (id: string | null) => void;
+		toggle: (id: string) => void;
+		expand: (id: string) => void;
+		collapse: (id: string) => void;
+		select: (id: string) => void;
+		isExpanded: (id: string) => boolean;
+		isSelected: (id: string) => boolean;
+		rootEl: { current: HTMLElement | null };
+	}
+
+	export function getTreeViewContext(): TreeViewContext {
+		const ctx = getContext<TreeViewContext | undefined>(KEY);
+		if (!ctx) throw new Error('TreeItem must be inside <TreeView>');
+		return ctx;
+	}
+
+	export function setTreeViewContext(ctx: TreeViewContext) {
+		setContext(KEY, ctx);
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		defaultExpanded?: string[];
+		selected?: string | null;
+		onSelectChange?: (id: string | null) => void;
+		onExpandChange?: (id: string, expanded: boolean) => void;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+	}
+
+	let {
+		children,
+		class: className = '',
+		defaultExpanded = [],
+		selected = $bindable(null),
+		onSelectChange,
+		onExpandChange,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby
+	}: Props = $props();
+
+	const expanded = new SvelteSet<string>(untrack(() => defaultExpanded));
+	let focused = $state<string | null>(null);
+	let rootEl = $state<HTMLElement | null>(null);
+
+	function toggle(id: string) {
+		if (expanded.has(id)) collapse(id);
+		else expand(id);
+	}
+
+	function expand(id: string) {
+		if (!expanded.has(id)) {
+			expanded.add(id);
+			onExpandChange?.(id, true);
+		}
+	}
+
+	function collapse(id: string) {
+		if (expanded.has(id)) {
+			expanded.delete(id);
+			onExpandChange?.(id, false);
+		}
+	}
+
+	function select(id: string) {
+		selected = id;
+		onSelectChange?.(id);
+	}
+
+	setTreeViewContext({
+		expanded,
+		selected: () => selected,
+		focused: () => focused,
+		setFocused: (id) => (focused = id),
+		toggle,
+		expand,
+		collapse,
+		select,
+		isExpanded: (id) => expanded.has(id),
+		isSelected: (id) => selected === id,
+		rootEl: {
+			get current() {
+				return rootEl;
+			}
+		}
+	});
+
+	function visibleItems(): HTMLElement[] {
+		if (!rootEl) return [];
+		return Array.from(rootEl.querySelectorAll<HTMLElement>('[role="treeitem"]')).filter((el) => {
+			let p = el.parentElement;
+			while (p && p !== rootEl) {
+				if (p.getAttribute('role') === 'group' && p.hidden) return false;
+				p = p.parentElement;
+			}
+			return true;
+		});
+	}
+
+	function focusItem(el: HTMLElement | undefined) {
+		if (!el) return;
+		const id = el.dataset.treeItemId;
+		if (id) focused = id;
+		el.focus();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const target = e.target as HTMLElement;
+		if (!target || target.getAttribute('role') !== 'treeitem') return;
+		const list = visibleItems();
+		const idx = list.indexOf(target);
+		if (idx < 0) return;
+		const id = target.dataset.treeItemId!;
+		const isExp = target.getAttribute('aria-expanded');
+
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				focusItem(list[Math.min(list.length - 1, idx + 1)]);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				focusItem(list[Math.max(0, idx - 1)]);
+				break;
+			case 'ArrowRight':
+				e.preventDefault();
+				if (isExp === 'false') expand(id);
+				else if (isExp === 'true') focusItem(list[idx + 1]);
+				break;
+			case 'ArrowLeft':
+				e.preventDefault();
+				if (isExp === 'true') collapse(id);
+				else {
+					const level = Number(target.getAttribute('aria-level') || 1);
+					for (let i = idx - 1; i >= 0; i--) {
+						if (Number(list[i].getAttribute('aria-level') || 1) < level) {
+							focusItem(list[i]);
+							break;
+						}
+					}
+				}
+				break;
+			case 'Home':
+				e.preventDefault();
+				focusItem(list[0]);
+				break;
+			case 'End':
+				e.preventDefault();
+				focusItem(list[list.length - 1]);
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				select(id);
+				break;
+		}
+	}
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }))
+	);
+</script>
+
+<ul bind:this={rootEl} role="tree" class={className} onkeydown={onKeydown} {...ariaAttrs}>
+	{#if children}{@render children()}{/if}
+</ul>

package/dist/components/display/tree-view/TreeView.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteSet } from 'svelte/reactivity';
+export interface TreeViewContext {
+    expanded: SvelteSet<string>;
+    selected: () => string | null;
+    focused: () => string | null;
+    setFocused: (id: string | null) => void;
+    toggle: (id: string) => void;
+    expand: (id: string) => void;
+    collapse: (id: string) => void;
+    select: (id: string) => void;
+    isExpanded: (id: string) => boolean;
+    isSelected: (id: string) => boolean;
+    rootEl: {
+        current: HTMLElement | null;
+    };
+}
+export declare function getTreeViewContext(): TreeViewContext;
+export declare function setTreeViewContext(ctx: TreeViewContext): void;
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    defaultExpanded?: string[];
+    selected?: string | null;
+    onSelectChange?: (id: string | null) => void;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+declare const TreeView: import("svelte").Component<Props, {}, "selected">;
+type TreeView = ReturnType<typeof TreeView>;
+export default TreeView;

package/dist/components/display/tree-view/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TreeView, getTreeViewContext, setTreeViewContext } from './TreeView.svelte';
+export type { TreeViewContext } from './TreeView.svelte';
+export { default as TreeItem } from './TreeItem.svelte';

package/dist/components/display/tree-view/index.js

@@ -0,0 +1,2 @@
+export { default as TreeView, getTreeViewContext, setTreeViewContext } from './TreeView.svelte';
+export { default as TreeItem } from './TreeItem.svelte';

package/dist/components/feedback/alert/Alert.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Variant = 'info' | 'success' | 'warning' | 'error';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		title?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+		variant?: Variant;
+		class?: string;
+		titleClass?: string;
+		dismissible?: boolean;
+		open?: boolean;
+		role?: 'alert' | 'status';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		ondismiss?: () => void;
+	}
+
+	let {
+		children,
+		title,
+		actions,
+		icon,
+		variant = 'info',
+		class: className = '',
+		titleClass = '',
+		dismissible = false,
+		open = $bindable(true),
+		role = 'alert',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		ondismiss
+	}: Props = $props();
+
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+
+	function dismiss() {
+		open = false;
+		ondismiss?.();
+	}
+</script>
+
+{#if open}
+	<div
+		{role}
+		aria-live={role === 'alert' ? 'assertive' : 'polite'}
+		data-variant={variant}
+		class={className}
+		{...ariaAttrs}
+	>
+		{#if icon}{@render icon()}{/if}
+		<div>
+			{#if title}
+				<div class={titleClass}>{@render title()}</div>
+			{/if}
+			{#if children}{@render children()}{/if}
+		</div>
+		{#if actions}{@render actions()}{/if}
+		{#if dismissible}
+			<button type="button" aria-label="Dismiss" onclick={dismiss}>×</button>
+		{/if}
+	</div>
+{/if}

package/dist/components/feedback/alert/Alert.svelte.d.ts

@@ -0,0 +1,20 @@
+type Variant = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    children?: import('svelte').Snippet;
+    title?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+    variant?: Variant;
+    class?: string;
+    titleClass?: string;
+    dismissible?: boolean;
+    open?: boolean;
+    role?: 'alert' | 'status';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    ondismiss?: () => void;
+}
+declare const Alert: import("svelte").Component<Props, {}, "open">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/feedback/alert/index.d.ts

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

package/dist/components/feedback/alert/index.js

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

package/dist/components/feedback/badge/Badge.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { labelAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import type { AriaLive } from '../../../types/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		class?: string;
+		// Accessibility attributes
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		'aria-live'?: AriaLive;
+		'aria-hidden'?: boolean;
+		// Appearance
+		variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+		// State
+		disabled?: boolean;
+	}
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		'aria-live': ariaLive,
+		'aria-hidden': ariaHidden,
+		variant = 'default',
+		disabled = false
+	}: Props = $props();
+
+	// Build ARIA attributes using reusable utilities
+	let ariaAttrs: Record<string, string> = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby }),
+			interactiveStateAttrs({ disabled }),
+			widgetAttrs({ live: ariaLive })
+		)
+	);
+</script>
+
+<span
+	class={className}
+	data-variant={variant}
+	data-disabled={disabled ? '' : undefined}
+	aria-hidden={ariaHidden}
+	{...ariaAttrs}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</span>

package/dist/components/feedback/badge/Badge.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { AriaLive } from '../../../types/index.js';
+interface Props {
+    children?: import('svelte').Snippet;
+    class?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-live'?: AriaLive;
+    'aria-hidden'?: boolean;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    disabled?: boolean;
+}
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;

package/dist/components/feedback/badge/index.d.ts

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

package/dist/components/feedback/badge/index.js

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

package/dist/components/feedback/banner/Banner.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Variant = 'info' | 'success' | 'warning' | 'error' | 'announcement';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		title?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		variant?: Variant;
+		open?: boolean;
+		dismissible?: boolean;
+		role?: 'status' | 'alert' | 'region';
+		live?: 'polite' | 'assertive' | 'off';
+		class?: string;
+		titleClass?: string;
+		style?: string;
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+		ondismiss?: () => void;
+	}
+
+	let {
+		children,
+		title,
+		icon,
+		actions,
+		variant = 'info',
+		open = $bindable(true),
+		dismissible = false,
+		role = 'region',
+		live,
+		class: className = '',
+		titleClass = '',
+		style,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		ondismiss
+	}: Props = $props();
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+
+	function dismiss() {
+		open = false;
+		ondismiss?.();
+	}
+</script>
+
+{#if open}
+	<div
+		{role}
+		aria-live={live ?? (role === 'alert' ? 'assertive' : role === 'status' ? 'polite' : undefined)}
+		data-variant={variant}
+		class={className}
+		{style}
+		{...ariaAttrs}
+	>
+		{#if icon}{@render icon()}{/if}
+		<div>
+			{#if title}<div class={titleClass}>{@render title()}</div>{/if}
+			{#if children}{@render children()}{/if}
+		</div>
+		{#if actions}{@render actions()}{/if}
+		{#if dismissible}
+			<button type="button" aria-label="Dismiss banner" onclick={dismiss}>×</button>
+		{/if}
+	</div>
+{/if}

package/dist/components/feedback/banner/Banner.svelte.d.ts

@@ -0,0 +1,22 @@
+type Variant = 'info' | 'success' | 'warning' | 'error' | 'announcement';
+interface Props {
+    children?: import('svelte').Snippet;
+    title?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    variant?: Variant;
+    open?: boolean;
+    dismissible?: boolean;
+    role?: 'status' | 'alert' | 'region';
+    live?: 'polite' | 'assertive' | 'off';
+    class?: string;
+    titleClass?: string;
+    style?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    ondismiss?: () => void;
+}
+declare const Banner: import("svelte").Component<Props, {}, "open">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/feedback/banner/index.d.ts

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

package/dist/components/feedback/banner/index.js

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

package/dist/components/feedback/callout/Callout.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { labelAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	type Variant = 'note' | 'info' | 'success' | 'warning' | 'error' | 'tip';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		title?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+		variant?: Variant;
+		class?: string;
+		style?: string;
+		titleClass?: string;
+		role?: 'note' | 'region' | 'group';
+		'aria-label'?: string;
+		'aria-labelledby'?: string;
+		'aria-describedby'?: string;
+	}
+
+	let {
+		children,
+		title,
+		icon,
+		actions,
+		variant = 'note',
+		class: className = '',
+		style,
+		titleClass = '',
+		role = 'note',
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby
+	}: Props = $props();
+
+	const ariaAttrs = $derived(
+		mergeAttrs(
+			labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby, describedby: ariaDescribedby })
+		)
+	);
+</script>
+
+<div {role} data-variant={variant} class={className} {style} {...ariaAttrs}>
+	{#if icon}{@render icon()}{/if}
+	<div>
+		{#if title}
+			<div class={titleClass}>{@render title()}</div>
+		{/if}
+		{#if children}{@render children()}{/if}
+		{#if actions}{@render actions()}{/if}
+	</div>
+</div>

package/dist/components/feedback/callout/Callout.svelte.d.ts

@@ -0,0 +1,18 @@
+type Variant = 'note' | 'info' | 'success' | 'warning' | 'error' | 'tip';
+interface Props {
+    children?: import('svelte').Snippet;
+    title?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet;
+    variant?: Variant;
+    class?: string;
+    style?: string;
+    titleClass?: string;
+    role?: 'note' | 'region' | 'group';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+}
+declare const Callout: import("svelte").Component<Props, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

package/dist/components/feedback/callout/index.d.ts

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

package/dist/components/feedback/callout/index.js

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

package/dist/components/feedback/inline-message/InlineMessage.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	type Variant = 'info' | 'success' | 'warning' | 'error';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		icon?: import('svelte').Snippet;
+		variant?: Variant;
+		id?: string;
+		class?: string;
+		live?: 'polite' | 'assertive' | 'off';
+		role?: 'status' | 'alert' | undefined;
+		'aria-label'?: string;
+	}
+
+	let {
+		children,
+		icon,
+		variant = 'info',
+		id,
+		class: className = '',
+		live,
+		role,
+		'aria-label': ariaLabel
+	}: Props = $props();
+
+	const effectiveRole = $derived(
+		role ?? (variant === 'error' || variant === 'warning' ? 'alert' : 'status')
+	);
+	const effectiveLive = $derived(live ?? (effectiveRole === 'alert' ? 'assertive' : 'polite'));
+</script>
+
+<span
+	{id}
+	role={effectiveRole}
+	aria-live={effectiveLive}
+	aria-label={ariaLabel}
+	data-variant={variant}
+	class={className}
+>
+	{#if icon}{@render icon()}{/if}
+	{#if children}{@render children()}{/if}
+</span>

package/dist/components/feedback/inline-message/InlineMessage.svelte.d.ts

@@ -0,0 +1,14 @@
+type Variant = 'info' | 'success' | 'warning' | 'error';
+interface Props {
+    children?: import('svelte').Snippet;
+    icon?: import('svelte').Snippet;
+    variant?: Variant;
+    id?: string;
+    class?: string;
+    live?: 'polite' | 'assertive' | 'off';
+    role?: 'status' | 'alert' | undefined;
+    'aria-label'?: string;
+}
+declare const InlineMessage: import("svelte").Component<Props, {}, "">;
+type InlineMessage = ReturnType<typeof InlineMessage>;
+export default InlineMessage;

package/dist/components/feedback/inline-message/index.d.ts

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

package/dist/components/feedback/inline-message/index.js

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