alus-ui 0.1.0

package/dist/components/navigation/sub-menu/SubMenu.svelte

@@ -0,0 +1,243 @@
+<script lang="ts" module>
+	export interface SubMenuItem {
+		label?: string;
+		onSelect?: () => void;
+		disabled?: boolean;
+		separator?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { computePosition, autoUpdate, flip, shift, offset } from '@floating-ui/dom';
+	import { useEventListener } from 'runed';
+	import { getMenuContext, type MenuItemEntry } from '../menu/Menu.svelte';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+	import Portal from '../../utility/portal/Portal.svelte';
+
+	interface Props {
+		label?: string;
+		items: SubMenuItem[];
+		disabled?: boolean;
+		class?: string;
+		menuClass?: string;
+		itemClass?: string;
+		separatorClass?: string;
+		children?: import('svelte').Snippet<[{ highlighted: boolean; open: boolean }]>;
+		item?: import('svelte').Snippet<[{ item: SubMenuItem; index: number }]>;
+	}
+
+	let {
+		label,
+		items,
+		disabled = false,
+		class: className = '',
+		menuClass = '',
+		itemClass = '',
+		separatorClass = '',
+		children,
+		item
+	}: Props = $props();
+
+	const ctx = getMenuContext();
+	const subId = generateCounterId('submenu');
+
+	let triggerEl = $state<HTMLDivElement | null>(null);
+	let panelEl = $state<HTMLDivElement | null>(null);
+	let open = $state(false);
+	let highlighted = $state<number>(-1);
+	let entry: MenuItemEntry | null = null;
+
+	const enabledIndices = $derived(
+		items.map((it, i) => (it.separator || it.disabled ? -1 : i)).filter((i) => i >= 0)
+	);
+
+	const triggerRef: Attachment<HTMLDivElement> = (node) => {
+		triggerEl = node;
+		entry = {
+			el: node,
+			disabled,
+			onSelect: () => {
+				if (!open) openPanel();
+			}
+		};
+		const unregister = ctx.registerItem(entry);
+		return () => {
+			unregister();
+			triggerEl = null;
+			entry = null;
+		};
+	};
+
+	const parentHighlighted = $derived(ctx.highlighted() === triggerEl);
+
+	$effect(() => {
+		const h = ctx.highlighted();
+		if (open && triggerEl && h && h !== triggerEl) closePanel();
+	});
+
+	function openPanel() {
+		open = true;
+		highlighted = enabledIndices[0] ?? -1;
+	}
+
+	function closePanel() {
+		open = false;
+		highlighted = -1;
+	}
+
+	function activate(i: number) {
+		const it = items[i];
+		if (!it || it.disabled || it.separator) return;
+		it.onSelect?.();
+		closePanel();
+		ctx.setOpen(false);
+	}
+
+	function move(dir: 1 | -1) {
+		const list = enabledIndices;
+		if (!list.length) return;
+		const cur = list.indexOf(highlighted);
+		const next =
+			cur === -1 ? (dir === 1 ? 0 : list.length - 1) : (cur + dir + list.length) % list.length;
+		highlighted = list[next];
+	}
+
+	function onTriggerKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowRight' || e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			openPanel();
+		}
+	}
+
+	function onTriggerPointerEnter() {
+		if (disabled || !triggerEl) return;
+		ctx.setHighlighted(triggerEl);
+		triggerEl.focus();
+		openPanel();
+	}
+
+	function onPanelKey(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'ArrowDown':
+				e.preventDefault();
+				move(1);
+				break;
+			case 'ArrowUp':
+				e.preventDefault();
+				move(-1);
+				break;
+			case 'ArrowLeft':
+			case 'Escape':
+				e.preventDefault();
+				closePanel();
+				triggerEl?.focus();
+				break;
+			case 'Enter':
+			case ' ':
+				e.preventDefault();
+				if (highlighted >= 0) activate(highlighted);
+				break;
+		}
+	}
+
+	const panelRef: Attachment<HTMLDivElement> = (node) => {
+		panelEl = node;
+		node.focus();
+		let cleanup: (() => void) | undefined;
+		if (triggerEl) {
+			cleanup = autoUpdate(triggerEl, node, async () => {
+				const { x, y } = await computePosition(triggerEl as HTMLElement, node, {
+					placement: 'right-start',
+					strategy: 'fixed',
+					middleware: [offset(2), flip(), shift({ padding: 8 })]
+				});
+				Object.assign(node.style, { left: `${x}px`, top: `${y}px` });
+			});
+		}
+		return () => {
+			cleanup?.();
+			panelEl = null;
+		};
+	};
+
+	useEventListener(
+		() => (open ? document : null),
+		'pointerdown',
+		(e) => {
+			if (!panelEl) return;
+			const t = e.target as Node;
+			if (panelEl.contains(t) || triggerEl?.contains(t)) return;
+			closePanel();
+		},
+		{ capture: true }
+	);
+</script>
+
+<div
+	role="menuitem"
+	tabindex="-1"
+	data-highlighted={parentHighlighted || undefined}
+	data-state={open ? 'open' : 'closed'}
+	class={className}
+	onpointerenter={onTriggerPointerEnter}
+	onkeydown={onTriggerKeydown}
+	{...mergeAttrs(
+		interactiveStateAttrs({ expanded: open, disabled }),
+		widgetAttrs({ controls: subId, haspopup: 'menu' })
+	)}
+	{@attach triggerRef}
+>
+	{#if children}
+		{@render children({ highlighted: parentHighlighted, open })}
+	{:else}
+		{label}
+	{/if}
+</div>
+
+{#if open}
+	<Portal>
+		<div
+			id={subId}
+			role="menu"
+			tabindex="-1"
+			class={menuClass}
+			style="position:fixed; top:0; left:0;"
+			onkeydown={onPanelKey}
+			{@attach panelRef}
+		>
+			{#each items as it, i}
+				{#if it.separator}
+					<div role="separator" class={separatorClass}></div>
+				{:else if item}
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="menuitem"
+						tabindex={highlighted === i ? 0 : -1}
+						aria-disabled={it.disabled || undefined}
+						data-highlighted={highlighted === i ? '' : undefined}
+						class={itemClass}
+						onmouseenter={() => (highlighted = i)}
+						onclick={() => activate(i)}
+					>
+						{@render item({ item: it, index: i })}
+					</div>
+				{:else}
+					<button
+						type="button"
+						role="menuitem"
+						tabindex={highlighted === i ? 0 : -1}
+						disabled={it.disabled}
+						data-highlighted={highlighted === i ? '' : undefined}
+						class={itemClass}
+						onmouseenter={() => (highlighted = i)}
+						onclick={() => activate(i)}
+					>
+						{it.label}
+					</button>
+				{/if}
+			{/each}
+		</div>
+	</Portal>
+{/if}

package/dist/components/navigation/sub-menu/SubMenu.svelte.d.ts

@@ -0,0 +1,26 @@
+export interface SubMenuItem {
+    label?: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    separator?: boolean;
+}
+interface Props {
+    label?: string;
+    items: SubMenuItem[];
+    disabled?: boolean;
+    class?: string;
+    menuClass?: string;
+    itemClass?: string;
+    separatorClass?: string;
+    children?: import('svelte').Snippet<[{
+        highlighted: boolean;
+        open: boolean;
+    }]>;
+    item?: import('svelte').Snippet<[{
+        item: SubMenuItem;
+        index: number;
+    }]>;
+}
+declare const SubMenu: import("svelte").Component<Props, {}, "">;
+type SubMenu = ReturnType<typeof SubMenu>;
+export default SubMenu;

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

@@ -0,0 +1,2 @@
+export { default as SubMenu } from './SubMenu.svelte';
+export type { SubMenuItem } from './SubMenu.svelte';

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

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

package/dist/components/navigation/tabs/Tab.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { getTabsContext, TAB_LIST_ATTR, TAB_ATTR } from './context.js';
+	import { interactiveStateAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	interface Props {
+		children?: import('svelte').Snippet<[{ selected: boolean }]>;
+		value: string;
+		disabled?: boolean;
+		class?: string;
+	}
+
+	let { children, value, disabled = false, class: className = '' }: Props = $props();
+
+	const ctx = getTabsContext();
+
+	let selected = $derived(ctx.value() === value);
+	let tabId = $derived(`${ctx.baseId}-tab-${value}`);
+	let panelId = $derived(`${ctx.baseId}-panel-${value}`);
+
+	function activate() {
+		if (disabled) return;
+		ctx.setValue(value);
+	}
+
+	function queryTriggers(target: HTMLElement): HTMLElement[] {
+		const list = target.closest(`[${TAB_LIST_ATTR}="${ctx.baseId}"]`);
+		if (!list) return [];
+		return Array.from(list.querySelectorAll<HTMLElement>(`[${TAB_ATTR}]:not([disabled])`));
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const horiz = ctx.orientation() === 'horizontal';
+		const nextKey = horiz ? 'ArrowRight' : 'ArrowDown';
+		const prevKey = horiz ? 'ArrowLeft' : 'ArrowUp';
+		const handled = [nextKey, prevKey, 'Home', 'End', 'Enter', ' '];
+		if (!handled.includes(e.key)) return;
+
+		const target = e.currentTarget as HTMLElement;
+
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			activate();
+			return;
+		}
+
+		const triggers = queryTriggers(target);
+		if (!triggers.length) return;
+		const idx = triggers.indexOf(target);
+		let nextEl: HTMLElement | undefined;
+
+		if (e.key === nextKey) nextEl = triggers[(idx + 1) % triggers.length];
+		else if (e.key === prevKey) nextEl = triggers[(idx - 1 + triggers.length) % triggers.length];
+		else if (e.key === 'Home') nextEl = triggers[0];
+		else if (e.key === 'End') nextEl = triggers[triggers.length - 1];
+
+		if (!nextEl) return;
+		e.preventDefault();
+		nextEl.focus();
+		if (ctx.activation() === 'automatic') {
+			const nextValue = nextEl.getAttribute(TAB_ATTR);
+			if (nextValue) ctx.setValue(nextValue);
+		}
+	}
+
+	let tabAttr: Record<string, string> = $derived({ [TAB_ATTR]: value });
+
+	const ariaAttrs = $derived(
+		mergeAttrs(interactiveStateAttrs({ selected, disabled }), widgetAttrs({ controls: panelId }))
+	);
+</script>
+
+<button
+	id={tabId}
+	type="button"
+	role="tab"
+	tabindex={selected ? 0 : -1}
+	data-state={selected ? 'active' : 'inactive'}
+	data-disabled={disabled || undefined}
+	{disabled}
+	class={className}
+	onclick={activate}
+	onkeydown={onKeydown}
+	{...ariaAttrs}
+	{...tabAttr}
+>
+	{#if children}{@render children({ selected })}{/if}
+</button>

package/dist/components/navigation/tabs/Tab.svelte.d.ts

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

package/dist/components/navigation/tabs/TabList.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getTabsContext, TAB_LIST_ATTR } from './context.js';
+	import { labelAttrs, widgetAttrs, mergeAttrs } from '../../../utils/a11y/index.js';
+
+	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();
+
+	const ctx = getTabsContext();
+	const listAttr: Record<string, string> = { [TAB_LIST_ATTR]: ctx.baseId };
+</script>
+
+<div
+	role="tablist"
+	class={className}
+	{...mergeAttrs(
+		labelAttrs({ label: ariaLabel, labelledby: ariaLabelledby }),
+		widgetAttrs({ orientation: ctx.orientation() })
+	)}
+	{...listAttr}
+>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/navigation/tabs/TabList.svelte.d.ts

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

package/dist/components/navigation/tabs/TabPanel.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getTabsContext } from './context.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		value: string;
+		class?: string;
+		forceMount?: boolean;
+	}
+
+	let { children, value, class: className = '', forceMount = false }: Props = $props();
+
+	const ctx = getTabsContext();
+	let active = $derived(ctx.value() === value);
+	let tabId = $derived(`${ctx.baseId}-tab-${value}`);
+	let panelId = $derived(`${ctx.baseId}-panel-${value}`);
+</script>
+
+{#if active || forceMount}
+	<div
+		id={panelId}
+		role="tabpanel"
+		aria-labelledby={tabId}
+		tabindex="0"
+		hidden={!active}
+		data-state={active ? 'active' : 'inactive'}
+		class={className}
+	>
+		{#if children}{@render children()}{/if}
+	</div>
+{/if}

package/dist/components/navigation/tabs/TabPanel.svelte.d.ts

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

package/dist/components/navigation/tabs/Tabs.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { setTabsContext } from './context.js';
+	import { generateCounterId } from '../../../utils/a11y/id.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		value?: string;
+		orientation?: 'horizontal' | 'vertical';
+		activation?: 'automatic' | 'manual';
+		class?: string;
+		id?: string;
+		onValueChange?: (v: string) => void;
+	}
+
+	let {
+		children,
+		value = $bindable(''),
+		orientation = 'horizontal',
+		activation = 'automatic',
+		class: className = '',
+		id,
+		onValueChange
+	}: Props = $props();
+
+	const baseId = untrack(() => id ?? generateCounterId('tabs'));
+
+	setTabsContext({
+		value: () => value,
+		setValue: (v: string) => {
+			value = v;
+			onValueChange?.(v);
+		},
+		orientation: () => orientation,
+		activation: () => activation,
+		baseId
+	});
+</script>
+
+<div class={className} data-orientation={orientation}>
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/navigation/tabs/Tabs.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    value?: string;
+    orientation?: 'horizontal' | 'vertical';
+    activation?: 'automatic' | 'manual';
+    class?: string;
+    id?: string;
+    onValueChange?: (v: string) => void;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

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

@@ -0,0 +1,11 @@
+export interface TabsContext {
+    value: () => string;
+    setValue: (v: string) => void;
+    orientation: () => 'horizontal' | 'vertical';
+    activation: () => 'automatic' | 'manual';
+    baseId: string;
+}
+export declare function setTabsContext(ctx: TabsContext): void;
+export declare function getTabsContext(): TabsContext;
+export declare const TAB_LIST_ATTR = "data-alus-ui-tab-list";
+export declare const TAB_ATTR = "data-alus-ui-tab";

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

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('alus-ui-tabs');
+export function setTabsContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getTabsContext() {
+    const ctx = getContext(KEY);
+    if (!ctx)
+        throw new Error('Tabs subcomponents must be used inside <Tabs>');
+    return ctx;
+}
+export const TAB_LIST_ATTR = 'data-alus-ui-tab-list';
+export const TAB_ATTR = 'data-alus-ui-tab';

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

@@ -0,0 +1,6 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { getTabsContext, setTabsContext, TAB_LIST_ATTR, TAB_ATTR } from './context.js';
+export type { TabsContext } from './context.js';

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

@@ -0,0 +1,5 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabList } from './TabList.svelte';
+export { default as Tab } from './Tab.svelte';
+export { default as TabPanel } from './TabPanel.svelte';
+export { getTabsContext, setTabsContext, TAB_LIST_ATTR, TAB_ATTR } from './context.js';