@human-kit/svelte-components 1.0.0-alpha.1

package/dist/popover/content/popover-content.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+	import { floating, type ExtendedPlacement } from '../../primitives/floating';
+	import { focusTrap } from '../../primitives/focus-trap';
+	import { scrollLock } from '../../primitives/scroll-lock';
+	import { clickOutside } from '../../primitives/click-outside';
+	import { ariaHideOutside } from '../../primitives/aria-hide-outside';
+	import { Portal } from '../../portal';
+	import { getPopoverContext } from '../root/context';
+
+	/**
+	 * Popover.Content - The floating content panel.
+	 * Can be used inside Popover.Root (reads context) or standalone (props required).
+	 */
+	type PopoverContentProps = {
+		/** Offset along the main axis from the anchor element. */
+		offset?: number;
+		/** Placement relative to the anchor element. */
+		placement?: ExtendedPlacement;
+		/** Whether to flip when there's insufficient space. */
+		shouldFlip?: boolean;
+		/** Boundary element for positioning constraints. */
+		boundaryElement?: Element | null;
+		/** Content of the popover. */
+		children?: Snippet;
+		/** CSS class for the popover container. */
+		class?: string;
+		/** Whether the popover is non-modal (allows outside interaction, no focus trap, no scroll lock). */
+		isNonModal?: boolean;
+		/** Whether clicking outside the popover should close it. */
+		shouldCloseOnInteractOutside?: boolean;
+		/** Whether pressing Escape should close the popover. */
+		shouldCloseOnEscape?: boolean;
+		/** Whether losing focus (blur) should close the popover. Defaults to true for non-modal popovers. */
+		shouldCloseOnBlur?: boolean;
+		// Standalone mode props (used when not inside Popover.Root)
+		/** Controlled open state (standalone mode). */
+		open?: boolean;
+		/** Reference to the trigger element (standalone mode). */
+		triggerRef?: HTMLElement | null;
+		/** Callback when open state changes (standalone mode). */
+		onOpenChange?: (open: boolean) => void;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
+
+	let {
+		offset = 8,
+		placement = 'bottom',
+		shouldFlip = true,
+		boundaryElement = null,
+		children,
+		class: className = '',
+		isNonModal = false,
+		shouldCloseOnInteractOutside = true,
+		shouldCloseOnEscape = true,
+		shouldCloseOnBlur,
+		// Standalone mode props
+		open: openProp,
+		triggerRef: triggerRefProp = null,
+		onOpenChange: onOpenChangeProp,
+		...restProps
+	}: PopoverContentProps = $props();
+
+	const ctx = getPopoverContext();
+
+	// Support both context mode (inside Root) and standalone mode (props)
+	const isStandalone = $derived(ctx === undefined);
+	const triggerRef = $derived(isStandalone ? triggerRefProp : ctx!.triggerRef);
+	const isOpen = $derived(isStandalone ? (openProp ?? false) : ctx!.isOpen);
+	const isModal = $derived(!isNonModal);
+	const shouldCloseOnBlurResolved = $derived(shouldCloseOnBlur ?? isNonModal);
+
+	let popoverRef: HTMLElement | undefined = $state();
+
+	function close() {
+		if (isStandalone) {
+			onOpenChangeProp?.(false);
+			triggerRefProp?.focus();
+		} else {
+			ctx!.close();
+		}
+	}
+
+	function handleOpenChange(value: boolean) {
+		if (isStandalone) {
+			onOpenChangeProp?.(value);
+		} else {
+			ctx!.onOpenChange(value);
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && isOpen && shouldCloseOnEscape) {
+			event.preventDefault();
+			close();
+		}
+	}
+
+	function handleDocumentFocusIn(event: FocusEvent) {
+		if (!shouldCloseOnBlurResolved || !isOpen) return;
+
+		const target = event.target as Node;
+
+		const focusInPopover = popoverRef?.contains(target) || target === popoverRef;
+		const focusInTrigger = triggerRef?.contains(target) || target === triggerRef;
+
+		if (!focusInPopover && !focusInTrigger) {
+			handleOpenChange(false);
+		}
+	}
+
+	function handleScroll(event: Event) {
+		if (!isNonModal || !isOpen || !shouldCloseOnInteractOutside) return;
+
+		// Check if scroll is inside the popover or trigger
+		const target = event.target as Node;
+		const isInsidePopover = popoverRef?.contains(target) || target === popoverRef;
+		const isInsideTrigger = triggerRef?.contains(target) || target === triggerRef;
+
+		// Only close on external scroll
+		if (!isInsidePopover && !isInsideTrigger) {
+			close();
+		}
+	}
+
+	onMount(() => {
+		if (!browser) return;
+		document.addEventListener('keydown', handleKeydown);
+		document.addEventListener('focusin', handleDocumentFocusIn);
+		document.addEventListener('scroll', handleScroll, true);
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		document.removeEventListener('keydown', handleKeydown);
+		document.removeEventListener('focusin', handleDocumentFocusIn);
+		document.removeEventListener('scroll', handleScroll, true);
+	});
+</script>
+
+{#if isOpen}
+	<Portal>
+		<div
+			bind:this={popoverRef}
+			class={className}
+			role="dialog"
+			aria-modal={isModal}
+			use:floating={{ anchor: triggerRef, offset, placement, shouldFlip, boundaryElement }}
+			use:clickOutside={{
+				handler: close,
+				enabled: shouldCloseOnInteractOutside,
+				ignore: [triggerRef]
+			}}
+			use:focusTrap={isModal}
+			use:scrollLock={isModal}
+			use:ariaHideOutside={isModal}
+			style="position: fixed; z-index: 9999;"
+			{...restProps}
+		>
+			{#if children}
+				{@render children()}
+			{/if}
+		</div>
+	</Portal>
+{/if}

package/dist/popover/content/popover-content.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ExtendedPlacement } from '../../primitives/floating';
+/**
+ * Popover.Content - The floating content panel.
+ * Can be used inside Popover.Root (reads context) or standalone (props required).
+ */
+type PopoverContentProps = {
+    /** Offset along the main axis from the anchor element. */
+    offset?: number;
+    /** Placement relative to the anchor element. */
+    placement?: ExtendedPlacement;
+    /** Whether to flip when there's insufficient space. */
+    shouldFlip?: boolean;
+    /** Boundary element for positioning constraints. */
+    boundaryElement?: Element | null;
+    /** Content of the popover. */
+    children?: Snippet;
+    /** CSS class for the popover container. */
+    class?: string;
+    /** Whether the popover is non-modal (allows outside interaction, no focus trap, no scroll lock). */
+    isNonModal?: boolean;
+    /** Whether clicking outside the popover should close it. */
+    shouldCloseOnInteractOutside?: boolean;
+    /** Whether pressing Escape should close the popover. */
+    shouldCloseOnEscape?: boolean;
+    /** Whether losing focus (blur) should close the popover. Defaults to true for non-modal popovers. */
+    shouldCloseOnBlur?: boolean;
+    /** Controlled open state (standalone mode). */
+    open?: boolean;
+    /** Reference to the trigger element (standalone mode). */
+    triggerRef?: HTMLElement | null;
+    /** Callback when open state changes (standalone mode). */
+    onOpenChange?: (open: boolean) => void;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
+declare const PopoverContent: import("svelte").Component<PopoverContentProps, {}, "">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/popover/index.d.ts

@@ -0,0 +1,8 @@
+export * as Popover from './index.parts.ts';
+export { default as PopoverRoot } from './root/popover-root.svelte';
+export { default as PopoverContent } from './content/popover-content.svelte';
+export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
+export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
+export { getPopoverContext, setPopoverContext, type PopoverContext, getPopoverTriggerContext, setPopoverTriggerContext, type PopoverTriggerContext } from './root/context.ts';
+import * as PopoverParts from './index.parts.ts';
+export default PopoverParts;

package/dist/popover/index.js

@@ -0,0 +1,14 @@
+// Namespace export for component composition: <Popover.Root>, <Popover.Trigger>, etc.
+export * as Popover from './index.parts.ts';
+// Direct named exports for individual imports
+export { default as PopoverRoot } from './root/popover-root.svelte';
+export { default as PopoverContent } from './content/popover-content.svelte';
+export { default as PopoverTrigger } from './trigger/popover-trigger.svelte';
+export { default as PopoverTriggerButton } from './trigger/popover-trigger-button.svelte';
+// Context and types
+export { getPopoverContext, setPopoverContext, 
+// Legacy aliases
+getPopoverTriggerContext, setPopoverTriggerContext } from './root/context.ts';
+// Default export as namespace object
+import * as PopoverParts from './index.parts.ts';
+export default PopoverParts;

package/dist/popover/index.parts.d.ts

@@ -0,0 +1,4 @@
+export { default as Root } from './root/popover-root.svelte';
+export { default as Content } from './content/popover-content.svelte';
+export { default as Trigger } from './trigger/popover-trigger.svelte';
+export { default as TriggerButton } from './trigger/popover-trigger-button.svelte';

package/dist/popover/index.parts.js

@@ -0,0 +1,5 @@
+// Namespace parts for <Popover.Root>, <Popover.Content>, etc.
+export { default as Root } from './root/popover-root.svelte';
+export { default as Content } from './content/popover-content.svelte';
+export { default as Trigger } from './trigger/popover-trigger.svelte';
+export { default as TriggerButton } from './trigger/popover-trigger-button.svelte';

package/dist/popover/root/context.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Context shared between Popover components (Root, Trigger, Content).
+ */
+export type PopoverContext = {
+    /** Whether the popover is open */
+    isOpen: boolean;
+    /** Reference to the trigger element */
+    triggerRef: HTMLElement | null;
+    /** Set the trigger ref (used by Trigger component) */
+    setTriggerRef: (el: HTMLElement | null) => void;
+    /** Toggle popover open state */
+    toggle: () => void;
+    /** Open the popover */
+    open: () => void;
+    /** Close the popover and return focus to trigger */
+    close: () => void;
+    /** Called when popover open state changes */
+    onOpenChange: (open: boolean) => void;
+};
+export declare function setPopoverContext(ctx: PopoverContext): void;
+export declare function getPopoverContext(): PopoverContext | undefined;
+export type PopoverTriggerContext = PopoverContext;
+export declare const setPopoverTriggerContext: typeof setPopoverContext;
+export declare const getPopoverTriggerContext: typeof getPopoverContext;

package/dist/popover/root/context.js

@@ -0,0 +1,10 @@
+import { setContext, getContext } from 'svelte';
+const POPOVER_CONTEXT_KEY = Symbol('popover');
+export function setPopoverContext(ctx) {
+    setContext(POPOVER_CONTEXT_KEY, ctx);
+}
+export function getPopoverContext() {
+    return getContext(POPOVER_CONTEXT_KEY);
+}
+export const setPopoverTriggerContext = setPopoverContext;
+export const getPopoverTriggerContext = getPopoverContext;

package/dist/popover/root/popover-root.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setPopoverContext, type PopoverContext } from './context';
+
+	/**
+	 * Popover.Root - State management wrapper for Popover components.
+	 * Provides context for Trigger and Content children.
+	 */
+	type PopoverRootProps = {
+		/** Controlled open state. */
+		open?: boolean;
+		/** Initial open state for uncontrolled mode. */
+		defaultOpen?: boolean;
+		/** Callback when open state changes. */
+		onOpenChange?: (open: boolean) => void;
+		/** Reference to the trigger element. Can be set manually or via Popover.Trigger. */
+		triggerRef?: HTMLElement | null;
+		/** Children (Trigger and Content) */
+		children?: Snippet;
+	};
+
+	let {
+		open = $bindable(),
+		defaultOpen = false,
+		onOpenChange,
+		triggerRef = $bindable<HTMLElement | null>(null),
+		children
+	}: PopoverRootProps = $props();
+
+	// Use function to capture initial value only (not reactive)
+	let isOpenInternal = $state((() => defaultOpen)());
+
+	const isControlled = $derived(open !== undefined);
+	const isOpen = $derived(isControlled ? open! : isOpenInternal);
+
+	function setOpen(value: boolean) {
+		if (isControlled) {
+			onOpenChange?.(value);
+		} else {
+			isOpenInternal = value;
+			onOpenChange?.(value);
+		}
+		// Sync bindable prop
+		open = value;
+	}
+
+	function toggle() {
+		setOpen(!isOpen);
+	}
+
+	function openPopover() {
+		setOpen(true);
+	}
+
+	function closePopover() {
+		setOpen(false);
+		triggerRef?.focus();
+	}
+
+	function setTriggerRef(el: HTMLElement | null) {
+		triggerRef = el;
+	}
+
+	function handleOpenChange(newOpen: boolean) {
+		setOpen(newOpen);
+	}
+
+	const ctx: PopoverContext = {
+		get isOpen() {
+			return isOpen;
+		},
+		get triggerRef() {
+			return triggerRef ?? null;
+		},
+		setTriggerRef,
+		toggle,
+		open: openPopover,
+		close: closePopover,
+		onOpenChange: handleOpenChange
+	};
+
+	setPopoverContext(ctx);
+</script>
+
+{#if children}
+	{@render children()}
+{/if}

package/dist/popover/root/popover-root.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+/**
+ * Popover.Root - State management wrapper for Popover components.
+ * Provides context for Trigger and Content children.
+ */
+type PopoverRootProps = {
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled mode. */
+    defaultOpen?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Reference to the trigger element. Can be set manually or via Popover.Trigger. */
+    triggerRef?: HTMLElement | null;
+    /** Children (Trigger and Content) */
+    children?: Snippet;
+};
+declare const PopoverRoot: import("svelte").Component<PopoverRootProps, {}, "open" | "triggerRef">;
+type PopoverRoot = ReturnType<typeof PopoverRoot>;
+export default PopoverRoot;

package/dist/popover/root/popover-test.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Popover } from '../index';
+
+	type Props = {
+		open?: boolean;
+		defaultOpen?: boolean;
+		isNonModal?: boolean;
+		shouldCloseOnInteractOutside?: boolean;
+		shouldCloseOnEscape?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	};
+
+	let {
+		open,
+		defaultOpen = false,
+		isNonModal = false,
+		shouldCloseOnInteractOutside = true,
+		shouldCloseOnEscape = true,
+		onOpenChange
+	}: Props = $props();
+</script>
+
+<Popover.Root {open} {defaultOpen} {onOpenChange}>
+	<Popover.Trigger>
+		<button type="button">Open Popover</button>
+	</Popover.Trigger>
+
+	<Popover.Content
+		class="popover-content"
+		{isNonModal}
+		{shouldCloseOnInteractOutside}
+		{shouldCloseOnEscape}
+	>
+		<div class="popover-body">
+			<h3>Popover Title</h3>
+			<p>Popover content goes here.</p>
+			<button type="button" class="close-btn">Close</button>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/popover/root/popover-test.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    isNonModal?: boolean;
+    shouldCloseOnInteractOutside?: boolean;
+    shouldCloseOnEscape?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const PopoverTest: import("svelte").Component<Props, {}, "">;
+type PopoverTest = ReturnType<typeof PopoverTest>;
+export default PopoverTest;

package/dist/popover/trigger/popover-trigger-button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getPopoverTriggerContext } from '../root/context';
+
+	type PopoverTriggerButtonProps = {
+		/** Button content */
+		children?: Snippet;
+		/** Additional class */
+		class?: string;
+		/** Any other props */
+		[key: string]: unknown;
+	};
+
+	let { children, class: className = '', ...restProps }: PopoverTriggerButtonProps = $props();
+
+	let buttonRef: HTMLButtonElement | null = $state(null);
+	const ctx = getPopoverTriggerContext();
+
+	$effect(() => {
+		if (buttonRef && ctx) {
+			ctx.setTriggerRef(buttonRef);
+		}
+	});
+
+	function handleClick() {
+		ctx?.toggle();
+	}
+</script>
+
+<button
+	bind:this={buttonRef}
+	class={className}
+	type="button"
+	aria-expanded={ctx?.isOpen ?? false}
+	aria-haspopup="dialog"
+	onclick={handleClick}
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</button>

package/dist/popover/trigger/popover-trigger-button.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type PopoverTriggerButtonProps = {
+    /** Button content */
+    children?: Snippet;
+    /** Additional class */
+    class?: string;
+    /** Any other props */
+    [key: string]: unknown;
+};
+declare const PopoverTriggerButton: import("svelte").Component<PopoverTriggerButtonProps, {}, "">;
+type PopoverTriggerButton = ReturnType<typeof PopoverTriggerButton>;
+export default PopoverTriggerButton;

package/dist/popover/trigger/popover-trigger-in-dialog-test.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Dialog } from '../../dialog';
+	import { Popover } from '../../popover';
+</script>
+
+<Dialog.Root>
+	{#snippet children({ close })}
+		<Dialog.Trigger>
+			<button type="button">Open Dialog</button>
+		</Dialog.Trigger>
+
+		<Dialog.Portal>
+			<Dialog.Overlay />
+			<Dialog.Content>
+				<Popover.Root>
+					<Popover.Trigger>
+						<button type="button">Open Nested Popover</button>
+					</Popover.Trigger>
+
+					<Popover.Content isNonModal={true} class="nested-popover-content">
+						<p>Nested popover content</p>
+					</Popover.Content>
+				</Popover.Root>
+
+				<button type="button" onclick={close}>Close Dialog</button>
+			</Dialog.Content>
+		</Dialog.Portal>
+	{/snippet}
+</Dialog.Root>

package/dist/popover/trigger/popover-trigger-in-dialog-test.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PopoverTriggerInDialogTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PopoverTriggerInDialogTest = InstanceType<typeof PopoverTriggerInDialogTest>;
+export default PopoverTriggerInDialogTest;

package/dist/popover/trigger/popover-trigger.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { getPopoverContext } from '../root/context';
+
+	/**
+	 * Popover.Trigger - Wrapper that auto-wires a trigger element.
+	 * Must be used inside a Popover.Root.
+	 */
+	type PopoverTriggerProps = {
+		/** Children (trigger button) */
+		children?: Snippet;
+	};
+
+	let { children }: PopoverTriggerProps = $props();
+
+	const ctx = getPopoverContext();
+
+	if (!ctx) {
+		throw new Error('Popover.Trigger must be used inside a Popover.Root');
+	}
+
+	// After the throw, TypeScript knows ctx is defined
+	const popoverCtx = ctx;
+
+	let wrapperRef: HTMLElement | null = $state(null);
+
+	function handleClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+		const button = target.closest('button, [role="button"]') as HTMLElement | null;
+
+		if (button && wrapperRef?.contains(button)) {
+			// Set trigger ref if not already set
+			if (!popoverCtx.triggerRef) {
+				popoverCtx.setTriggerRef(button);
+			}
+			popoverCtx.toggle();
+		}
+	}
+
+	onMount(() => {
+		if (wrapperRef) {
+			// Find and set up the trigger button
+			const firstButton = wrapperRef.querySelector('button, [role="button"]') as HTMLElement | null;
+			if (firstButton) {
+				popoverCtx.setTriggerRef(firstButton);
+				firstButton.setAttribute('aria-haspopup', 'dialog');
+			}
+		}
+
+		// Add click listener imperatively to avoid a11y linter warnings
+		// Buttons inside handle keyboard events natively (Enter/Space trigger click)
+		wrapperRef?.addEventListener('click', handleClick);
+	});
+
+	onDestroy(() => {
+		wrapperRef?.removeEventListener('click', handleClick);
+	});
+
+	$effect(() => {
+		if (popoverCtx.triggerRef) {
+			popoverCtx.triggerRef.setAttribute('aria-expanded', String(popoverCtx.isOpen));
+		}
+	});
+</script>
+
+<div bind:this={wrapperRef} style="display: contents;">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/popover/trigger/popover-trigger.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+/**
+ * Popover.Trigger - Wrapper that auto-wires a trigger element.
+ * Must be used inside a Popover.Root.
+ */
+type PopoverTriggerProps = {
+    /** Children (trigger button) */
+    children?: Snippet;
+};
+declare const PopoverTrigger: import("svelte").Component<PopoverTriggerProps, {}, "">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

package/dist/portal/index.d.ts

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

package/dist/portal/index.js

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