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

package/dist/combobox/root/combobox.svelte.d.ts

@@ -0,0 +1,58 @@
+import { type Snippet } from 'svelte';
+type ComboBoxProps<T> = {
+    /** Stable ID used to generate internal ARIA IDs (recommended for SSR). */
+    id?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    /** Selected value(s). Single value for single mode, array for multiple mode. Can be bound with bind:value */
+    value?: string | number | (string | number)[];
+    defaultValue?: string | number | (string | number)[];
+    /** Current input value. Can be bound with bind:inputValue */
+    inputValue?: string;
+    defaultInputValue?: string;
+    selectionBehavior?: 'toggle' | 'replace';
+    selectionMode?: 'single' | 'multiple';
+    /** Whether to close popover after selection. Default: true for single, false for multiple */
+    closeOnSelect?: boolean;
+    /** Whether the popover is open. Can be bound with bind:isOpen */
+    isOpen?: boolean;
+    /** How the popover opens: 'focus' | 'input' | 'press'. Default: 'press' */
+    trigger?: 'focus' | 'input' | 'press';
+    onInputChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    onChange?: (value: string | number | (string | number)[] | undefined) => void;
+    /** Optional: Array of items for dynamic rendering */
+    items?: T[];
+    /** Optional: Snippet to render each item (used with items prop) */
+    renderItem?: Snippet<[T]>;
+    children?: Snippet;
+    class?: string;
+    /** Accessible label for the combobox group */
+    'aria-label'?: string;
+    /** ID of element that labels this combobox group */
+    'aria-labelledby'?: string;
+};
+declare function $$render<T extends object = object>(): {
+    props: ComboBoxProps<T>;
+    exports: {};
+    bindings: "value" | "inputValue" | "isOpen";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object = object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value" | "inputValue" | "isOpen";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object = object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object = object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T extends object = object> = InstanceType<typeof Combobox<T>>;
+export default Combobox;

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

@@ -0,0 +1,90 @@
+import type { Snippet } from 'svelte';
+import type { ListBoxContext } from '../../listbox/root/context';
+/**
+ * Context shared between ComboBox and its children.
+ */
+export type ComboBoxContext<T extends object = object> = {
+    /** Unique instance ID for ARIA attributes */
+    instanceId: string;
+    /** Current input value (used for filtering, respects shouldFilter flag) */
+    inputValue: string;
+    /** Display value shown in the input element (always shows actual text) */
+    displayValue: string;
+    /** Whether the popover is open */
+    isOpen: boolean;
+    /** Reference to the input element for positioning */
+    inputRef: HTMLElement | null;
+    /** Reference to the wrapper for popover positioning */
+    triggerRef: HTMLElement | null;
+    /** Currently selected value(s) */
+    selectedValue: Set<string | number>;
+    /** Whether the combobox is disabled */
+    isDisabled: boolean;
+    /** Whether the combobox is read-only */
+    isReadOnly: boolean;
+    /** Selection mode */
+    selectionMode: 'single' | 'multiple';
+    /** How the popover opens: 'focus' | 'input' | 'press' */
+    trigger: 'focus' | 'input' | 'press';
+    /** Whether inputValue should be used for filtering (false = show all items) */
+    shouldFilter: boolean;
+    /** Currently focused item ID (virtual focus) */
+    focusedItemId: string | number | null;
+    /** Registered item IDs for navigation */
+    itemIds: (string | number)[];
+    /** Item labels map for selection display */
+    itemLabels: Map<string | number, string>;
+    /** Persistent labels for selected items (not cleared on item unregister) */
+    selectedLabels: Map<string | number, string>;
+    /** Pending focus direction when opening with keyboard */
+    pendingFocusDirection: 'first' | 'last' | null;
+    /** Reference to the ListBox context for navigation delegation */
+    listboxCtx: ListBoxContext | null;
+    /** Reference to the ListBox DOM element for scoped queries */
+    listboxRef: HTMLElement | null;
+    /** Optional: Array of items for dynamic rendering */
+    items?: T[];
+    /** Optional: Snippet to render each item */
+    renderItem?: Snippet<[T]>;
+    /** Set the input ref */
+    setInputRef: (el: HTMLElement | null) => void;
+    /** Set the trigger ref (wrapper) */
+    setTriggerRef: (el: HTMLElement | null) => void;
+    /** Set the ListBox context reference */
+    setListboxCtx: (ctx: ListBoxContext) => void;
+    /** Set the ListBox DOM element reference */
+    setListboxRef: (el: HTMLElement | null) => void;
+    /** Update input value */
+    setInputValue: (value: string) => void;
+    /** Open the popover */
+    open: () => void;
+    /** Close the popover. Pass refocusInput=true to keep focus on input. */
+    close: (refocusInput?: boolean) => void;
+    /** Toggle the popover */
+    toggle: () => void;
+    /** Select an item */
+    select: (id: string | number, label: string) => void;
+    /** Remove an item from selection (multiple mode) */
+    removeItem: (id: string | number) => void;
+    /** Clear all selections */
+    clearSelection: () => void;
+    /** Called when popover open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Set focused item ID (virtual focus) */
+    setFocusedItemId: (id: string | number | null) => void;
+    /** Register an item for navigation */
+    registerItem: (id: string | number, label: string) => void;
+    /** Unregister an item */
+    unregisterItem: (id: string | number) => void;
+    /** Handle keyboard events (arrow navigation, enter, escape) */
+    handleKeydown: (event: KeyboardEvent) => void;
+    /** Handle input blur - restore selection or deselect if empty */
+    handleInputBlur: () => void;
+    /** Currently focused tag ID (virtual focus for tag navigation) */
+    focusedTagId: string | number | null;
+    /** Set focused tag ID (virtual focus for tag navigation) */
+    setFocusedTagId: (id: string | number | null) => void;
+};
+export declare function setComboBoxContext<T extends object = object>(ctx: ComboBoxContext<T>): void;
+export declare function getComboBoxContext<T extends object = object>(): ComboBoxContext<T> | undefined;
+export declare function useComboBoxContext<T extends object = object>(): ComboBoxContext<T>;

package/dist/combobox/root/context.js

@@ -0,0 +1,15 @@
+import { setContext, getContext } from 'svelte';
+const COMBOBOX_KEY = Symbol('combobox');
+export function setComboBoxContext(ctx) {
+    setContext(COMBOBOX_KEY, ctx);
+}
+export function getComboBoxContext() {
+    return getContext(COMBOBOX_KEY);
+}
+export function useComboBoxContext() {
+    const ctx = getComboBoxContext();
+    if (!ctx) {
+        throw new Error('ComboBox components must be used within a ComboBox');
+    }
+    return ctx;
+}

package/dist/combobox/tag/combobox-tag.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+	export const TAG_CONTEXT_KEY = Symbol.for('combobox-tag');
+
+	export type TagContext = {
+		id: string | number;
+		label: string;
+		remove: () => void;
+		disabled: boolean;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getContext } from 'svelte';
+	import { cn } from '../../utils/cn';
+	import { useComboBoxContext } from '../root/context';
+
+	/**
+	 * ComboBox.Tag - Individual tag representing a selected value.
+	 * Must be used inside ComboBox.Tags which provides context.
+	 * Supports keyboard navigation: ArrowLeft/Right to navigate, Delete/Backspace to remove, ArrowDown to focus input.
+	 */
+	type ComboBoxTagProps = {
+		/** Content of the tag - use ComboBox.TagRemove for remove button */
+		children: Snippet;
+		class?: string;
+	} & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'children'>;
+
+	let { children, class: className, ...restProps }: ComboBoxTagProps = $props();
+
+	const tagCtx = getContext<TagContext>(TAG_CONTEXT_KEY);
+	const comboboxCtx = useComboBoxContext();
+
+	/** Whether this tag has virtual focus (navigated via arrow keys) */
+	const isFocused = $derived(comboboxCtx.focusedTagId === tagCtx.id);
+
+	function handleMouseDown(event: MouseEvent) {
+		// Prevent focus theft - tags use virtual focus only via arrow keys
+		event.preventDefault();
+	}
+</script>
+
+<span
+	role="listitem"
+	data-tag-id={tagCtx.id}
+	data-disabled={tagCtx.disabled || undefined}
+	data-focused={isFocused || undefined}
+	onmousedown={handleMouseDown}
+	class={cn(
+		'inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-0.5 text-sm data-[focused=true]:ring-2 data-[focused=true]:ring-blue-500 data-[focused=true]:outline-none dark:bg-gray-700',
+		tagCtx.disabled && 'opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children()}
+</span>

package/dist/combobox/tag/combobox-tag.svelte.d.ts

@@ -0,0 +1,22 @@
+export declare const TAG_CONTEXT_KEY: unique symbol;
+export type TagContext = {
+    id: string | number;
+    label: string;
+    remove: () => void;
+    disabled: boolean;
+};
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * ComboBox.Tag - Individual tag representing a selected value.
+ * Must be used inside ComboBox.Tags which provides context.
+ * Supports keyboard navigation: ArrowLeft/Right to navigate, Delete/Backspace to remove, ArrowDown to focus input.
+ */
+type ComboBoxTagProps = {
+    /** Content of the tag - use ComboBox.TagRemove for remove button */
+    children: Snippet;
+    class?: string;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'class' | 'children'>;
+declare const ComboboxTag: import("svelte").Component<ComboBoxTagProps, {}, "">;
+type ComboboxTag = ReturnType<typeof ComboboxTag>;
+export default ComboboxTag;

package/dist/combobox/tag/tag-context-provider.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+	import { TAG_CONTEXT_KEY, type TagContext } from './combobox-tag.svelte';
+
+	/**
+	 * Internal component that provides tag context for each iteration.
+	 */
+	type TagContextProviderProps = {
+		id: string | number;
+		label: string;
+		remove: () => void;
+		disabled: boolean;
+		children: Snippet;
+	};
+
+	let { id, label, remove, disabled, children }: TagContextProviderProps = $props();
+
+	// Set context for Tag and TagRemove children
+	setContext<TagContext>(TAG_CONTEXT_KEY, {
+		get id() {
+			return id;
+		},
+		get label() {
+			return label;
+		},
+		get remove() {
+			return remove;
+		},
+		get disabled() {
+			return disabled;
+		}
+	});
+</script>
+
+{@render children()}

package/dist/combobox/tag/tag-context-provider.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/**
+ * Internal component that provides tag context for each iteration.
+ */
+type TagContextProviderProps = {
+    id: string | number;
+    label: string;
+    remove: () => void;
+    disabled: boolean;
+    children: Snippet;
+};
+declare const TagContextProvider: import("svelte").Component<TagContextProviderProps, {}, "">;
+type TagContextProvider = ReturnType<typeof TagContextProvider>;
+export default TagContextProvider;

package/dist/combobox/tag-remove/combobox-tag-remove.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getContext } from 'svelte';
+	import { cn } from '../../utils/cn';
+	import { TAG_CONTEXT_KEY, type TagContext } from '../tag/combobox-tag.svelte';
+
+	/**
+	 * ComboBox.TagRemove - Remove button for a tag.
+	 * Must be used inside ComboBox.Tag.
+	 */
+	type ComboBoxTagRemoveProps = {
+		/** Content of the button (defaults to X icon) */
+		children?: Snippet;
+		class?: string;
+	} & Omit<HTMLButtonAttributes, 'class' | 'children' | 'type' | 'onclick' | 'aria-label'>;
+
+	let { children, class: className, ...restProps }: ComboBoxTagRemoveProps = $props();
+
+	const tagCtx = getContext<TagContext>(TAG_CONTEXT_KEY);
+
+	function handleClick(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		tagCtx.remove();
+	}
+</script>
+
+{#if !tagCtx.disabled}
+	<button
+		type="button"
+		onclick={handleClick}
+		aria-label={`Remove ${tagCtx.label}`}
+		tabindex={-1}
+		class={cn('ml-1 rounded hover:bg-gray-200 dark:hover:bg-gray-600', className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 16 16"
+				fill="currentColor"
+				class="h-3.5 w-3.5"
+			>
+				<path
+					d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+				/>
+			</svg>
+		{/if}
+	</button>
+{/if}

package/dist/combobox/tag-remove/combobox-tag-remove.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+/**
+ * ComboBox.TagRemove - Remove button for a tag.
+ * Must be used inside ComboBox.Tag.
+ */
+type ComboBoxTagRemoveProps = {
+    /** Content of the button (defaults to X icon) */
+    children?: Snippet;
+    class?: string;
+} & Omit<HTMLButtonAttributes, 'class' | 'children' | 'type' | 'onclick' | 'aria-label'>;
+declare const ComboboxTagRemove: import("svelte").Component<ComboBoxTagRemoveProps, {}, "">;
+type ComboboxTagRemove = ReturnType<typeof ComboboxTagRemove>;
+export default ComboboxTagRemove;

package/dist/combobox/tags/combobox-tags.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { useComboBoxContext } from '../root/context';
+	import TagContextProvider from '../tag/tag-context-provider.svelte';
+
+	export type TagItem = {
+		value: string | number;
+		label: string;
+	};
+
+	/**
+	 * ComboBox.Tags - Container for selected value tags in multiple mode.
+	 * Renders each selected value as a tag using the provided snippet.
+	 * Sets context for each tag so ComboBox.Tag can access id, label, and remove.
+	 */
+	type ComboBoxTagsProps = {
+		/** Snippet to render each tag. Receives { item: { value, label } } */
+		children: Snippet<[{ item: TagItem }]>;
+		class?: string;
+	};
+
+	let { children, class: className = '' }: ComboBoxTagsProps = $props();
+
+	const ctx = useComboBoxContext();
+
+	// Get selected items with their labels from persistent selectedLabels map
+	const selectedItems = $derived(
+		Array.from(ctx.selectedValue).map((id) => ({
+			id,
+			// Use selectedLabels (persistent) first, fallback to itemLabels (may be cleared on filter)
+			label: ctx.selectedLabels.get(id) ?? ctx.itemLabels.get(id) ?? String(id),
+			remove: () => ctx.removeItem(id)
+		}))
+	);
+</script>
+
+{#if ctx.selectionMode === 'multiple' && selectedItems.length > 0}
+	<div class={className} role="list" aria-label="Selected values">
+		{#each selectedItems as selected (selected.id)}
+			<TagContextProvider
+				id={selected.id}
+				label={selected.label}
+				remove={selected.remove}
+				disabled={ctx.isDisabled}
+			>
+				{@render children({ item: { value: selected.id, label: selected.label } })}
+			</TagContextProvider>
+		{/each}
+	</div>
+{/if}

package/dist/combobox/tags/combobox-tags.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+export type TagItem = {
+    value: string | number;
+    label: string;
+};
+/**
+ * ComboBox.Tags - Container for selected value tags in multiple mode.
+ * Renders each selected value as a tag using the provided snippet.
+ * Sets context for each tag so ComboBox.Tag can access id, label, and remove.
+ */
+type ComboBoxTagsProps = {
+    /** Snippet to render each tag. Receives { item: { value, label } } */
+    children: Snippet<[{
+        item: TagItem;
+    }]>;
+    class?: string;
+};
+declare const ComboboxTags: import("svelte").Component<ComboBoxTagsProps, {}, "">;
+type ComboboxTags = ReturnType<typeof ComboboxTags>;
+export default ComboboxTags;

package/dist/dialog/content/dialog-content.svelte

@@ -0,0 +1,121 @@
+<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 { 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 { getDialogContext } from '../root/context';
+	import { pushDialog, popDialog, isTopmostDialog, getContentZIndex } from '../root/dialog-stack';
+
+	/**
+	 * Dialog.Content - The centered modal dialog panel.
+	 * Must be used inside a Dialog.Portal.
+	 */
+	type DialogContentProps = {
+		/** Content of the dialog. */
+		children?: Snippet;
+		/** CSS class for the dialog container. */
+		class?: string;
+		/** Whether clicking outside the dialog should close it. */
+		shouldCloseOnInteractOutside?: boolean;
+		/** Whether pressing Escape should close the dialog. */
+		shouldCloseOnEscape?: boolean;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
+
+	let {
+		children,
+		class: className = '',
+		shouldCloseOnInteractOutside = true,
+		shouldCloseOnEscape = true,
+		...restProps
+	}: DialogContentProps = $props();
+
+	const ctx = getDialogContext();
+
+	if (!ctx) {
+		throw new Error('Dialog.Content must be used inside a Dialog.Root');
+	}
+
+	const dialogCtx = ctx;
+
+	let dialogRef: HTMLElement | undefined = $state();
+	let dialogId: symbol | null = null;
+	let dialogLevel = $state(0);
+
+	function close() {
+		dialogCtx.close();
+	}
+
+	/**
+	 * Wrapper for close that only executes if this is the topmost dialog.
+	 */
+	function closeIfTopmost() {
+		if (dialogId && isTopmostDialog(dialogId)) {
+			close();
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape' && shouldCloseOnEscape) {
+			// Only handle if this is the topmost dialog
+			if (dialogId && isTopmostDialog(dialogId)) {
+				event.preventDefault();
+				close();
+			}
+		}
+	}
+
+	onMount(() => {
+		if (!browser) return;
+		// Register this dialog in the stack
+		const { id, level } = pushDialog(close);
+		dialogId = id;
+		dialogLevel = level;
+		// Share level with overlay via context
+		dialogCtx.setStackLevel(level);
+		document.addEventListener('keydown', handleKeydown);
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		// Unregister this dialog from the stack
+		if (dialogId) {
+			popDialog(dialogId);
+		}
+		document.removeEventListener('keydown', handleKeydown);
+	});
+
+	// Calculate z-index based on dialog level
+	const zIndex = $derived(getContentZIndex(dialogLevel));
+</script>
+
+<div
+	bind:this={dialogRef}
+	class={className}
+	role="dialog"
+	aria-modal="true"
+	data-dialog-content
+	use:clickOutside={{
+		handler: closeIfTopmost,
+		enabled: shouldCloseOnInteractOutside,
+		ignore: [dialogCtx.triggerRef]
+	}}
+	use:focusTrap={true}
+	use:scrollLock={true}
+	use:ariaHideOutside={true}
+	style="
+		position: fixed;
+		z-index: {zIndex};
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	"
+	{...restProps}
+>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Dialog.Content - The centered modal dialog panel.
+ * Must be used inside a Dialog.Portal.
+ */
+type DialogContentProps = {
+    /** Content of the dialog. */
+    children?: Snippet;
+    /** CSS class for the dialog container. */
+    class?: string;
+    /** Whether clicking outside the dialog should close it. */
+    shouldCloseOnInteractOutside?: boolean;
+    /** Whether pressing Escape should close the dialog. */
+    shouldCloseOnEscape?: boolean;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'>;
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/dialog/index.d.ts

@@ -0,0 +1,10 @@
+import * as DialogParts from './index.parts.ts';
+export declare const Dialog: typeof DialogParts;
+export default DialogParts;
+export { default as DialogRoot } from './root/dialog-root.svelte';
+export { default as DialogTrigger } from './trigger/dialog-trigger.svelte';
+export { default as DialogPortal } from './portal/dialog-portal.svelte';
+export { default as DialogOverlay } from './overlay/dialog-overlay.svelte';
+export { default as DialogContent } from './content/dialog-content.svelte';
+export { getDialogContext, setDialogContext, type DialogContext } from './root/context';
+export type { DialogStateHelpers } from './root/types';

package/dist/dialog/index.js

@@ -0,0 +1,15 @@
+// Dialog component with namespace pattern
+// Usage: <Dialog.Root>, <Dialog.Trigger>, <Dialog.Portal>, <Dialog.Overlay>, <Dialog.Content>
+import * as DialogParts from './index.parts.ts';
+// Named export for namespace usage: import { Dialog } from '...'
+export const Dialog = DialogParts;
+// Default export for backwards compatibility
+export default DialogParts;
+// Re-export individual parts for direct imports
+export { default as DialogRoot } from './root/dialog-root.svelte';
+export { default as DialogTrigger } from './trigger/dialog-trigger.svelte';
+export { default as DialogPortal } from './portal/dialog-portal.svelte';
+export { default as DialogOverlay } from './overlay/dialog-overlay.svelte';
+export { default as DialogContent } from './content/dialog-content.svelte';
+// Re-export context utilities
+export { getDialogContext, setDialogContext } from './root/context';

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

@@ -0,0 +1,5 @@
+export { default as Root } from './root/dialog-root.svelte';
+export { default as Trigger } from './trigger/dialog-trigger.svelte';
+export { default as Portal } from './portal/dialog-portal.svelte';
+export { default as Overlay } from './overlay/dialog-overlay.svelte';
+export { default as Content } from './content/dialog-content.svelte';

package/dist/dialog/index.parts.js

@@ -0,0 +1,6 @@
+// Namespace parts for <Dialog.Root>, <Dialog.Content>, etc.
+export { default as Root } from './root/dialog-root.svelte';
+export { default as Trigger } from './trigger/dialog-trigger.svelte';
+export { default as Portal } from './portal/dialog-portal.svelte';
+export { default as Overlay } from './overlay/dialog-overlay.svelte';
+export { default as Content } from './content/dialog-content.svelte';

package/dist/dialog/overlay/dialog-overlay.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { getDialogContext } from '../root/context';
+	import { getOverlayZIndex } from '../root/dialog-stack';
+
+	/**
+	 * Dialog.Overlay - The backdrop overlay behind the dialog.
+	 * Must be used inside a Dialog.Portal.
+	 */
+	type DialogOverlayProps = {
+		/** CSS class for the overlay. */
+		class?: string;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'class'>;
+
+	let { class: className = '', ...restProps }: DialogOverlayProps = $props();
+
+	const ctx = getDialogContext();
+
+	if (!ctx) {
+		throw new Error('Dialog.Overlay must be used inside a Dialog.Root');
+	}
+
+	const dialogCtx = ctx;
+
+	// Calculate z-index based on dialog level from context
+	const zIndex = $derived(getOverlayZIndex(dialogCtx.stackLevel));
+</script>
+
+<div
+	class={className}
+	data-dialog-overlay
+	style="
+		position: fixed;
+		inset: 0;
+		z-index: {zIndex};
+		background-color: rgba(0, 0, 0, 0.5);
+	"
+	{...restProps}
+></div>