@svelte-thing/primitives 0.0.0

package/src/field/root/createRoot.svelte.ts

@@ -0,0 +1,113 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import { uid } from 'uid';
+
+import { setRoot } from './context';
+
+export interface CreateRootProps {
+	id: string | null | undefined;
+	isDirty: boolean | null | undefined;
+	isDisabled: boolean | null | undefined;
+	isFilled: boolean | null | undefined;
+	isFocused: boolean | null | undefined;
+	isInvalid: boolean | null | undefined;
+	isTouched: boolean | null | undefined;
+	isValid: boolean | null | undefined;
+}
+
+export interface RootState {
+	id: string;
+	labelId: string;
+	controlId: string;
+	errorId: string;
+	isDirty: boolean;
+	isDisabled: boolean;
+	isFilled: boolean;
+	isFocused: boolean;
+	isInvalid: boolean;
+	isTouched: boolean;
+	isValid: boolean;
+	props: {
+		id: string;
+	};
+}
+
+export function createRoot<T extends CreateRootProps>(props: Exact<CreateRootProps, T>): RootState {
+	const id = $derived(props.id ?? uid());
+	const labelId = $derived(`${id}-label`);
+	const controlId = $derived(`${id}-control`);
+	const errorId = $derived(`${id}-error`);
+
+	let isDirty = $derived(props.isDirty ?? false);
+	let isDisabled = $derived(props.isDisabled ?? false);
+	let isFilled = $derived(props.isFilled ?? false);
+	let isFocused = $derived(props.isFocused ?? false);
+	let isInvalid = $derived(props.isInvalid ?? false);
+	let isTouched = $derived(props.isTouched ?? false);
+	let isValid = $derived(props.isValid ?? false);
+
+	const root: RootState = {
+		get id() {
+			return id;
+		},
+		get labelId() {
+			return labelId;
+		},
+		get controlId() {
+			return controlId;
+		},
+		get errorId() {
+			return errorId;
+		},
+		get isDirty() {
+			return isDirty;
+		},
+		set isDirty(value) {
+			isDirty = value;
+		},
+		get isDisabled() {
+			return isDisabled;
+		},
+		set isDisabled(value) {
+			isDisabled = value;
+		},
+		get isFilled() {
+			return isFilled;
+		},
+		set isFilled(value) {
+			isFilled = value;
+		},
+		get isFocused() {
+			return isFocused;
+		},
+		set isFocused(value) {
+			isFocused = value;
+		},
+		get isInvalid() {
+			return isInvalid;
+		},
+		set isInvalid(value) {
+			isInvalid = value;
+		},
+		get isTouched() {
+			return isTouched;
+		},
+		set isTouched(value) {
+			isTouched = value;
+		},
+		get isValid() {
+			return isValid;
+		},
+		set isValid(value) {
+			isValid = value;
+		},
+		props: {
+			get id() {
+				return id;
+			},
+		},
+	};
+
+	setRoot(root);
+
+	return root;
+}

package/src/field/root/index.ts

@@ -0,0 +1,2 @@
+export * from './createRoot.svelte.js';
+export * from './context.js';

package/src/index.ts

@@ -0,0 +1,2 @@
+export * as Field from './field/index.js';
+export * as Tab from './tab/index.js';

package/src/menu/index.ts

@@ -0,0 +1,4 @@
+export * from './item/index.js';
+export * from './popup/index.js';
+export * from './root/index.js';
+export * from './trigger/index.js';

package/src/menu/item/createItem.svelte.ts

@@ -0,0 +1,123 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import { flushSync } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import type { HTMLAttributes } from 'svelte/elements';
+import { uid } from 'uid';
+
+import { getRoot } from '../root/context.js';
+
+export interface CreateItemProps {
+	disabled: boolean | null | undefined;
+	id: string | null | undefined;
+}
+
+export interface ItemState {
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createItem<T extends CreateItemProps>(props: Exact<CreateItemProps, T>): ItemState {
+	const root = getRoot();
+	const itemId = $derived(props.id ?? `menuitem-${uid()}`);
+
+	return {
+		props: {
+			'data-menu-item': '',
+			get 'aria-disabled'() {
+				return props.disabled ? 'true' : undefined;
+			},
+			get 'data-disabled'() {
+				return props.disabled ? '' : undefined;
+			},
+			get 'data-id'() {
+				return itemId;
+			},
+			get 'data-root-id'() {
+				return root.id;
+			},
+			get id() {
+				return itemId;
+			},
+			get tabindex() {
+				return root.highlightedItemId === itemId ? 0 : -1;
+			},
+			onkeydown(event) {
+				if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+					return;
+				}
+
+				let preventDefault = false;
+				let pendingHighlighted: string | null = null;
+
+				const item = event.currentTarget as HTMLElement;
+				const items = [
+					...document.querySelectorAll<HTMLElement>(
+						`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`,
+					),
+				];
+				const currentIndex = items.indexOf(item);
+
+				const nextKeyName = root.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+				const previousKeyName = root.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+				switch (event.key) {
+					case previousKeyName: {
+						const nextIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1;
+						pendingHighlighted = items[nextIndex]?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+					case nextKeyName: {
+						const nextIndex = (currentIndex + 1) % items.length;
+						pendingHighlighted = items[nextIndex]?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+					case 'Home': {
+						pendingHighlighted = items[0]?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+					case 'End': {
+						pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+					default: {
+						break;
+					}
+				}
+
+				if (pendingHighlighted !== null) {
+					root.highlightedItemId = pendingHighlighted;
+					flushSync(); // set tabindex to 0
+					items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+				}
+
+				if (preventDefault) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			},
+			onmouseover: (event) => {
+				if (root.shouldHighlightOnHover) {
+					root.highlightedItemId = itemId;
+					flushSync(); // set tabindex to 0
+					event.currentTarget.focus();
+				}
+			},
+			onmouseleave: () => {
+				if (root.shouldHighlightOnHover && root.highlightedItemId === itemId) {
+					root.highlightedItemId = null;
+				}
+			},
+			role: 'menuitem',
+			[createAttachmentKey()]: () => {
+				return () => {
+					if (root.highlightedItemId === itemId) {
+						root.highlightedItemId = null;
+					}
+				};
+			},
+		},
+	};
+}

package/src/menu/item/index.ts

@@ -0,0 +1 @@
+export * from './createItem.svelte.js';

package/src/menu/popup/createPopup.svelte.ts

@@ -0,0 +1,186 @@
+import { assertNever } from '@svelte-thing/type-utils';
+import { flushSync, untrack } from 'svelte';
+import { createAttachmentKey } from 'svelte/attachments';
+import type { HTMLAttributes } from 'svelte/elements';
+import { on } from 'svelte/events';
+
+import { getRoot } from '../root/context.js';
+
+type Side = 'left' | 'right' | 'bottom' | 'top' | 'inline-end' | 'inline-start';
+type Align = 'start' | 'end' | 'center';
+
+export interface CreatePopupProps {
+	popover: HTMLAttributes<HTMLElement>['popover'] | null | undefined;
+	align: Align | undefined;
+	side: Side | undefined;
+	alignOffset: number | undefined;
+	positionAnchor: string | null | undefined;
+	sideOffset: number | undefined;
+}
+
+export interface PopupState {
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createPopup(props: CreatePopupProps): PopupState {
+	const root = getRoot();
+	return {
+		props: {
+			'data-menu-popup': '',
+			get 'data-root-id'() {
+				return root.id;
+			},
+			get 'data-open'() {
+				return root.isOpen ? '' : undefined;
+			},
+			get 'data-closed'() {
+				return root.isOpen ? undefined : '';
+			},
+			get 'data-side'() {
+				return props.side ?? 'bottom';
+			},
+			get 'data-align'() {
+				return props.align ?? 'center';
+			},
+			get popover() {
+				return props.popover ?? '';
+			},
+			get id() {
+				return root.popupId;
+			},
+			get style() {
+				const positionAnchor =
+					props.positionAnchor === undefined ? root.anchorName : props.positionAnchor;
+				const styles = [
+					positionAnchor === null ? undefined : `position-anchor: ${positionAnchor}`,
+					`justify-self: anchor-${props.align ?? 'center'}`,
+				];
+
+				const side = props.side ?? 'bottom';
+				const sideOffset = props.sideOffset ?? 0;
+				if (side === 'bottom') {
+					styles.push(`top: calc(anchor(bottom) + ${sideOffset}px);`);
+				} else if (side === 'top') {
+					styles.push(`bottom: calc(anchor(top) + ${sideOffset}px);`);
+				} else if (side === 'left') {
+					styles.push(`right: calc(anchor(left) + ${sideOffset}px);`);
+				} else if (side === 'right') {
+					styles.push(`left: calc(anchor(right) + ${sideOffset}px);`);
+				} else if (side === 'inline-end') {
+					styles.push(`inset-inline-end: calc(anchor(end) + ${sideOffset}px);`);
+				} else if (side === 'inline-start') {
+					styles.push(`inset-inline-start: calc(anchor(start) + ${sideOffset}px);`);
+				} else {
+					assertNever(side);
+				}
+
+				return styles.filter(Boolean).join('; ');
+			},
+			get tabindex() {
+				return root.isOpen ? -1 : undefined;
+			},
+			[createAttachmentKey()](element) {
+				const update = (event?: ToggleEvent) => {
+					if (event && event.newState !== 'open') {
+						return;
+					}
+
+					// set `data-open` and `tabindex` attributes before the popover becomes visible
+					root.isOpen = event ? true : element.matches(':popover-open');
+					flushSync();
+					if (root.isOpen) {
+						element.focus();
+					}
+				};
+				const open = () => {
+					element.showPopover();
+				};
+				const close = () => {
+					element.hidePopover();
+				};
+
+				root.open = open;
+				root.close = close;
+
+				$effect(() => {
+					if (root._propIsOpen === true && !element.matches(':popover-open')) {
+						element.showPopover();
+					} else if (root._propIsOpen === false && element.matches(':popover-open')) {
+						element.hidePopover();
+					}
+					untrack(() => {
+						update();
+					});
+				});
+
+				update();
+
+				const offBefore = on(element, 'beforetoggle', update);
+				const offAfter = on(element, 'toggle', update);
+
+				return () => {
+					offBefore();
+					offAfter();
+					root.open = () => {
+						throw new Error('Attempted to open before popup initialization');
+					};
+					root.close = () => {
+						throw new Error('Attempted to close before popup initialization');
+					};
+				};
+			},
+			onkeydown(event) {
+				if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) {
+					return;
+				}
+
+				const popup = event.currentTarget as HTMLElement;
+				if (document.activeElement !== popup) {
+					return;
+				}
+
+				let preventDefault = false;
+				let pendingHighlighted: string | null = null;
+				const items = [
+					...document.querySelectorAll<HTMLElement>(
+						`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`,
+					),
+				];
+
+				const nextKeyName = root.orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+				const previousKeyName = root.orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+				switch (event.key) {
+					case previousKeyName:
+					case 'End': {
+						pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+					case nextKeyName:
+					case 'Home': {
+						pendingHighlighted = items[0]?.dataset.id ?? null;
+						preventDefault = true;
+						break;
+					}
+
+					default: {
+						break;
+					}
+				}
+
+				if (pendingHighlighted !== null) {
+					root.highlightedItemId = pendingHighlighted;
+					flushSync(); // set tabindex to 0
+					items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+				}
+
+				if (preventDefault) {
+					event.stopPropagation();
+					event.preventDefault();
+				}
+			},
+			role: 'menu',
+		},
+	};
+}

package/src/menu/popup/index.ts

@@ -0,0 +1 @@
+export * from './createPopup.svelte.js';

package/src/menu/root/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'svelte';
+
+import type { RootState } from './createRoot.svelte.js';
+
+export const [getRoot, setRoot] = createContext<RootState>();

package/src/menu/root/createRoot.svelte.ts

@@ -0,0 +1,96 @@
+import { uid } from 'uid';
+
+import { setRoot } from './context.js';
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export interface CreateRootProps {
+	anchorName: string | undefined;
+	id: string | null | undefined;
+	isOpen: boolean | undefined;
+	orientation: Orientation | undefined;
+	shouldHighlightOnHover: boolean | undefined;
+}
+
+export interface RootState {
+	anchorName: string;
+	close: () => void;
+	highlightedItemId: string | null;
+	id: string;
+	isOpen: boolean;
+	open: () => void;
+	orientation: Orientation;
+	popupId: string;
+	shouldHighlightOnHover: boolean;
+	triggerId: string;
+	_propIsOpen: boolean | undefined;
+}
+
+export function createRoot(props: CreateRootProps): RootState {
+	const id = $derived(props.id ?? uid());
+	const anchorName = $derived(props.anchorName ?? `--${id}-anchor`);
+	const popupId = $derived(`${id}-popup`);
+	const triggerId = $derived(`${id}-trigger`);
+	const orientation = $derived(props.orientation ?? 'vertical');
+
+	let isOpen = $state(false);
+	let highlightedItemId = $state<string | null>(null);
+	let open = () => {
+		throw new Error('Attempted to open before popup initialization');
+	};
+	let close = () => {
+		throw new Error('Attempted to close before popup initialization');
+	};
+
+	const root: RootState = {
+		get anchorName() {
+			return anchorName;
+		},
+		get highlightedItemId() {
+			return highlightedItemId;
+		},
+		set highlightedItemId(value) {
+			highlightedItemId = value;
+		},
+		get id() {
+			return id;
+		},
+		get isOpen() {
+			return isOpen;
+		},
+		set isOpen(value) {
+			isOpen = value;
+		},
+		get orientation() {
+			return orientation;
+		},
+		get popupId() {
+			return popupId;
+		},
+		get shouldHighlightOnHover() {
+			return props.shouldHighlightOnHover ?? true;
+		},
+		get _propIsOpen() {
+			return props.isOpen;
+		},
+		get triggerId() {
+			return triggerId;
+		},
+		get close() {
+			return close;
+		},
+		set close(value) {
+			close = value;
+		},
+		get open() {
+			return open;
+		},
+		set open(value) {
+			open = value;
+		},
+	};
+
+	setRoot(root);
+
+	return root;
+}

package/src/menu/root/index.ts

@@ -0,0 +1,2 @@
+export * from './context.js';
+export * from './createRoot.svelte.js';

package/src/menu/trigger/createTrigger.svelte.ts

@@ -0,0 +1,44 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+
+import { getRoot } from '../root/context.js';
+
+export interface CreateTriggerProps {
+	anchorName: string | null | undefined;
+}
+
+export interface TriggerState {
+	props: HTMLButtonAttributes;
+}
+
+export function createTrigger<T extends CreateTriggerProps>(
+	props: Exact<CreateTriggerProps, T>,
+): TriggerState {
+	const root = getRoot();
+
+	return {
+		props: {
+			'data-menu-trigger': '',
+			get 'data-root-id'() {
+				return root.id;
+			},
+			get commandfor() {
+				return root.popupId;
+			},
+			get command() {
+				return 'toggle-popover';
+			},
+			get id() {
+				return root.triggerId;
+			},
+			get style() {
+				const anchorName = props.anchorName === undefined ? root.anchorName : props.anchorName;
+				if (anchorName === null) {
+					return;
+				}
+
+				return `anchor-name: ${anchorName};`;
+			},
+		},
+	};
+}

package/src/menu/trigger/index.ts

@@ -0,0 +1 @@
+export * from './createTrigger.svelte.js';

package/src/pagination/content/createContent.svelte.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface ContentState {
+	props: HTMLAttributes<HTMLUListElement>;
+}
+
+export function createContent(): ContentState {
+	return {
+		props: {},
+	};
+}

package/src/pagination/content/index.ts

@@ -0,0 +1 @@
+export * from './createContent.svelte.js';

package/src/pagination/ellipsis/createEllipsis.svelte.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface EllipsisState {
+	props: HTMLAttributes<HTMLSpanElement>;
+}
+
+export function createEllipsis(): EllipsisState {
+	return {
+		props: {
+			'aria-hidden': true,
+		},
+	};
+}

package/src/pagination/ellipsis/index.ts

@@ -0,0 +1 @@
+export * from './createEllipsis.svelte.js';

package/src/pagination/index.ts

@@ -0,0 +1,5 @@
+export * from './content/index.js';
+export * from './ellipsis/index.js';
+export * from './item/index.js';
+export * from './link/index.js';
+export * from './root/index.js';

package/src/pagination/item/createItem.svelte.ts

@@ -0,0 +1,11 @@
+import type { HTMLLiAttributes } from 'svelte/elements';
+
+export interface ItemState {
+	props: HTMLLiAttributes;
+}
+
+export function createItem(): ItemState {
+	return {
+		props: {},
+	};
+}

package/src/pagination/item/index.ts

@@ -0,0 +1 @@
+export * from './createItem.svelte.js';

package/src/pagination/link/createLink.svelte.ts

@@ -0,0 +1,23 @@
+import type { Exact } from '@svelte-thing/type-utils';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+export interface CreateLinkProps {
+	isActive?: boolean | null | undefined;
+}
+
+export interface LinkState {
+	props: HTMLAnchorAttributes;
+}
+
+export function createLink<T extends CreateLinkProps>(props: Exact<CreateLinkProps, T>): LinkState {
+	return {
+		props: {
+			get 'aria-current'() {
+				return props.isActive ? 'page' : undefined;
+			},
+			get 'data-active'() {
+				return props.isActive;
+			},
+		},
+	};
+}

package/src/pagination/link/index.ts

@@ -0,0 +1 @@
+export * from './createLink.svelte.js';

package/src/pagination/root/createRoot.svelte.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export interface RootState {
+	props: HTMLAttributes<HTMLElement>;
+}
+
+export function createRoot(): RootState {
+	return {
+		props: {
+			'aria-label': 'pagination',
+			role: 'navigation',
+		},
+	};
+}

package/src/pagination/root/index.ts

@@ -0,0 +1 @@
+export * from './createRoot.svelte.js';