@c15t/svelte 3.0.0-alpha.0

package/dist/primitives/collapsible/collapsible-indicator.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { getCollapsibleState } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getCollapsibleRootContext } from './context';
+
+	const root = getCollapsibleRootContext();
+
+	const dataState = $derived(getCollapsibleState(root.open));
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<span
+	class={className}
+	data-slot="collapsible-indicator"
+	data-state={dataState}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/primitives/collapsible/collapsible-indicator.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const CollapsibleIndicator: import("svelte").Component<$$ComponentProps, {}, "">;
+type CollapsibleIndicator = ReturnType<typeof CollapsibleIndicator>;
+export default CollapsibleIndicator;

package/dist/primitives/collapsible/collapsible-root.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import {
+		getCollapsibleState,
+		getDataDisabled,
+		toggleCollapsibleValue,
+	} from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { setCollapsibleRootContext } from './context';
+
+	const componentId = $props.id();
+
+	let {
+		children,
+		class: className,
+		disabled = false,
+		open = $bindable(false),
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+		disabled?: boolean;
+		open?: boolean;
+	} = $props();
+
+	const dataState = $derived(getCollapsibleState(open));
+	const dataDisabled = $derived(getDataDisabled(disabled));
+	const triggerId = `c15t-collapsible-trigger-${componentId}`;
+	const contentId = `c15t-collapsible-content-${componentId}`;
+
+	const setOpen = function setOpen(nextOpen: boolean) {
+		if (disabled) {
+			return;
+		}
+
+		open = nextOpen;
+	};
+
+	const toggle = function toggle() {
+		setOpen(toggleCollapsibleValue(open));
+	};
+
+	setCollapsibleRootContext({
+		get contentId() {
+			return contentId;
+		},
+		get disabled() {
+			return disabled;
+		},
+		get open() {
+			return open;
+		},
+		setOpen,
+		toggle,
+		get triggerId() {
+			return triggerId;
+		},
+	});
+</script>
+
+<div
+	class={className}
+	data-slot="collapsible-root"
+	data-state={dataState}
+	data-disabled={dataDisabled}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/primitives/collapsible/collapsible-root.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    open?: boolean;
+};
+declare const CollapsibleRoot: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;
+export default CollapsibleRoot;

package/dist/primitives/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { getCollapsibleState, getDataDisabled } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getCollapsibleRootContext } from './context';
+
+	const root = getCollapsibleRootContext();
+
+	const open = $derived(root.open);
+	const disabled = $derived(root.disabled);
+	const triggerId = $derived(root.triggerId);
+	const contentId = $derived(root.contentId);
+	const dataState = $derived(getCollapsibleState(open));
+	const dataDisabled = $derived(getDataDisabled(disabled));
+
+	let {
+		children,
+		class: className,
+		onclick,
+		type = 'button',
+		...restProps
+	}: HTMLAttributes<HTMLButtonElement> & {
+		children?: Snippet;
+		class?: string;
+		type?: 'button' | 'submit' | 'reset';
+	} = $props();
+
+	const handleClick = function handleClick(
+		event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		root.toggle();
+		onclick?.(event);
+	};
+</script>
+
+<button
+	{type}
+	id={triggerId}
+	class={className}
+	aria-controls={contentId}
+	aria-disabled={disabled || undefined}
+	aria-expanded={open}
+	data-slot="collapsible-trigger"
+	data-state={dataState}
+	data-disabled={dataDisabled}
+	{disabled}
+	{...restProps}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>

package/dist/primitives/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: Snippet;
+    class?: string;
+    type?: 'button' | 'submit' | 'reset';
+};
+declare const CollapsibleTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;

package/dist/primitives/collapsible/context.d.ts

@@ -0,0 +1,10 @@
+export interface CollapsibleRootContextValue {
+    readonly contentId: string;
+    readonly disabled: boolean;
+    readonly open: boolean;
+    readonly triggerId: string;
+    setOpen: (open: boolean) => void;
+    toggle: () => void;
+}
+export declare const setCollapsibleRootContext: (value: CollapsibleRootContextValue) => void;
+export declare const getCollapsibleRootContext: () => CollapsibleRootContextValue;

package/dist/primitives/collapsible/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const COLLAPSIBLE_ROOT_CONTEXT_KEY = Symbol('c15t-svelte-collapsible-root');
+export const setCollapsibleRootContext = function setCollapsibleRootContext(value) {
+    setContext(COLLAPSIBLE_ROOT_CONTEXT_KEY, value);
+};
+export const getCollapsibleRootContext = function getCollapsibleRootContext() {
+    const context = getContext(COLLAPSIBLE_ROOT_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Collapsible primitives must be used within Collapsible.Root');
+    }
+    return context;
+};

package/dist/primitives/collapsible/index.d.ts

@@ -0,0 +1,26 @@
+import Content from './collapsible-content.svelte';
+import Indicator from './collapsible-indicator.svelte';
+import Root from './collapsible-root.svelte';
+import Trigger from './collapsible-trigger.svelte';
+export declare const Collapsible: {
+    Content: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+    }, {}, "">;
+    Indicator: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLSpanElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+    }, {}, "">;
+    Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        disabled?: boolean;
+        open?: boolean;
+    }, {}, "open">;
+    Trigger: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLButtonElement> & {
+        children?: import("svelte").Snippet;
+        class?: string;
+        type?: "button" | "submit" | "reset";
+    }, {}, "">;
+};
+export { Content, Indicator, Root, Trigger };

package/dist/primitives/collapsible/index.js

@@ -0,0 +1,11 @@
+import Content from './collapsible-content.svelte';
+import Indicator from './collapsible-indicator.svelte';
+import Root from './collapsible-root.svelte';
+import Trigger from './collapsible-trigger.svelte';
+export const Collapsible = {
+    Content,
+    Indicator,
+    Root,
+    Trigger,
+};
+export { Content, Indicator, Root, Trigger };

package/dist/primitives/dialog/context.d.ts

@@ -0,0 +1,14 @@
+export interface DialogRootContextValue {
+    readonly closeOnEscape: boolean;
+    readonly closeOnInteractOutside: boolean;
+    readonly contentId: string;
+    readonly descriptionId: string;
+    readonly open: boolean;
+    readonly preventScroll: boolean;
+    readonly shouldRender: boolean;
+    readonly titleId: string;
+    readonly trapFocus: boolean;
+    requestClose: (reason: 'backdrop' | 'close-trigger' | 'escape') => void;
+}
+export declare const setDialogRootContext: (value: DialogRootContextValue) => void;
+export declare const getDialogRootContext: () => DialogRootContextValue;

package/dist/primitives/dialog/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const DIALOG_ROOT_CONTEXT_KEY = Symbol('c15t-svelte-dialog-root');
+export const setDialogRootContext = function setDialogRootContext(value) {
+    setContext(DIALOG_ROOT_CONTEXT_KEY, value);
+};
+export const getDialogRootContext = function getDialogRootContext() {
+    const context = getContext(DIALOG_ROOT_CONTEXT_KEY);
+    if (!context) {
+        throw new Error('Dialog primitives must be used within Dialog.Root');
+    }
+    return context;
+};

package/dist/primitives/dialog/dialog-backdrop.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { getDialogState } from '@c15t/ui/primitives';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getDialogRootContext } from './context';
+
+	const dialog = getDialogRootContext();
+
+	const open = $derived(dialog.open);
+	const shouldRender = $derived(dialog.shouldRender);
+	const dataState = $derived(getDialogState(open));
+
+	let {
+		class: className,
+		onclick,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		class?: string;
+	} = $props();
+
+	const handleClick = function handleClick(
+		event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		dialog.requestClose('backdrop');
+		onclick?.(event);
+	};
+</script>
+
+{#if shouldRender}
+	<div
+		role="presentation"
+		aria-hidden="true"
+		class={className}
+		data-slot="dialog-backdrop"
+		data-state={dataState}
+		{...restProps}
+		onclick={handleClick}
+	></div>
+{/if}

package/dist/primitives/dialog/dialog-backdrop.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    class?: string;
+};
+declare const DialogBackdrop: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogBackdrop = ReturnType<typeof DialogBackdrop>;
+export default DialogBackdrop;

package/dist/primitives/dialog/dialog-close-trigger.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { getDialogState } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getDialogRootContext } from './context';
+
+	const dialog = getDialogRootContext();
+
+	const open = $derived(dialog.open);
+	const dataState = $derived(getDialogState(open));
+
+	let {
+		children,
+		class: className,
+		disabled = false,
+		onclick,
+		type = 'button',
+		...restProps
+	}: HTMLAttributes<HTMLButtonElement> & {
+		children?: Snippet;
+		class?: string;
+		disabled?: boolean;
+		type?: 'button' | 'submit' | 'reset';
+	} = $props();
+
+	const handleClick = function handleClick(
+		event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }
+	) {
+		if (!disabled) {
+			dialog.requestClose('close-trigger');
+		}
+		onclick?.(event);
+	};
+</script>
+
+<button
+	{type}
+	class={className}
+	data-slot="dialog-close"
+	data-state={dataState}
+	data-disabled={disabled ? '' : undefined}
+	{disabled}
+	{...restProps}
+	onclick={handleClick}
+>
+	{@render children?.()}
+</button>

package/dist/primitives/dialog/dialog-close-trigger.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: Snippet;
+    class?: string;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+};
+declare const DialogCloseTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogCloseTrigger = ReturnType<typeof DialogCloseTrigger>;
+export default DialogCloseTrigger;

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { getDialogState, isDialogDismissKey } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { focusTrap } from '../../actions/focus-trap';
+	import { scrollLock } from '../../actions/scroll-lock';
+	import { getDialogRootContext } from './context';
+
+	const dialog = getDialogRootContext();
+
+	let node = $state<HTMLElement | null>(null);
+
+	const open = $derived(dialog.open);
+	const shouldRender = $derived(dialog.shouldRender);
+	const contentId = $derived(dialog.contentId);
+	const titleId = $derived(dialog.titleId);
+	const descriptionId = $derived(dialog.descriptionId);
+	const dataState = $derived(getDialogState(open));
+
+	let {
+		children,
+		class: className,
+		onkeydown,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+
+	const handleKeyDown = function handleKeyDown(
+		event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }
+	) {
+		if (isDialogDismissKey(event.key)) {
+			event.preventDefault();
+			dialog.requestClose('escape');
+		}
+		onkeydown?.(event);
+	};
+
+	$effect(() => {
+		if (!open || !node) {
+			return;
+		}
+
+		queueMicrotask(() => {
+			if (!node || !open) {
+				return;
+			}
+
+			const { activeElement } = document;
+			if (!activeElement || !node.contains(activeElement)) {
+				const preferredFocusTarget = node.querySelector<HTMLElement>(
+					'[data-c15t-dialog-focus="true"]'
+				);
+				(preferredFocusTarget ?? node).focus();
+			}
+		});
+	});
+</script>
+
+{#if shouldRender}
+	<div
+		bind:this={node}
+		id={contentId}
+		role="dialog"
+		tabindex={-1}
+		aria-modal={dialog.trapFocus ? 'true' : undefined}
+		aria-labelledby={titleId}
+		aria-describedby={descriptionId}
+		class={className}
+		data-slot="dialog-content"
+		data-state={dataState}
+		use:focusTrap={open && dialog.trapFocus}
+		use:scrollLock={open && dialog.preventScroll}
+		{...restProps}
+		onkeydown={handleKeyDown}
+	>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/primitives/dialog/dialog-description.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getDialogRootContext } from './context';
+
+	const dialog = getDialogRootContext();
+
+	const descriptionId = $derived(dialog.descriptionId);
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLParagraphElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+<p
+	id={descriptionId}
+	class={className}
+	data-slot="dialog-description"
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/dist/primitives/dialog/dialog-description.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLParagraphElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const DialogDescription: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/primitives/dialog/dialog-positioner.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getDialogState } from '@c15t/ui/primitives';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	import { getDialogRootContext } from './context';
+
+	const dialog = getDialogRootContext();
+
+	const open = $derived(dialog.open);
+	const shouldRender = $derived(dialog.shouldRender);
+	const dataState = $derived(getDialogState(open));
+
+	let {
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		children?: Snippet;
+		class?: string;
+	} = $props();
+</script>
+
+{#if shouldRender}
+	<div
+		class={className}
+		data-slot="dialog-positioner"
+		data-state={dataState}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/primitives/dialog/dialog-positioner.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const DialogPositioner: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogPositioner = ReturnType<typeof DialogPositioner>;
+export default DialogPositioner;

package/dist/primitives/dialog/dialog-root.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	import { setDialogRootContext } from './context';
+
+	const componentId = $props.id();
+
+	let {
+		children,
+		closeOnEscape = true,
+		closeOnInteractOutside = true,
+		lazyMount = false,
+		open = $bindable(false),
+		preventScroll = false,
+		trapFocus = true,
+		unmountOnExit = false,
+	}: {
+		children?: Snippet;
+		closeOnEscape?: boolean;
+		closeOnInteractOutside?: boolean;
+		lazyMount?: boolean;
+		open?: boolean;
+		preventScroll?: boolean;
+		trapFocus?: boolean;
+		unmountOnExit?: boolean;
+	} = $props();
+
+	let hasOpened = $state(open);
+	let lastOpen = open;
+	let restoreFocusElement: HTMLElement | null = null;
+
+	const shouldRender = $derived(
+		open || (!unmountOnExit && (!lazyMount || hasOpened))
+	);
+	const contentId = `c15t-dialog-content-${componentId}`;
+	const titleId = `c15t-dialog-title-${componentId}`;
+	const descriptionId = `c15t-dialog-description-${componentId}`;
+
+	const setOpen = function setOpen(nextOpen: boolean) {
+		open = nextOpen;
+	};
+
+	const requestClose = function requestClose(
+		reason: 'backdrop' | 'close-trigger' | 'escape'
+	) {
+		if (reason === 'escape' && !closeOnEscape) {
+			return;
+		}
+
+		if (reason === 'backdrop' && !closeOnInteractOutside) {
+			return;
+		}
+
+		setOpen(false);
+	};
+
+	$effect(() => {
+		if (open) {
+			hasOpened = true;
+		}
+	});
+
+	$effect(() => {
+		if (typeof document === 'undefined') {
+			return;
+		}
+
+		if (open && !lastOpen) {
+			restoreFocusElement = document.activeElement as HTMLElement | null;
+		}
+
+		if (!open && lastOpen) {
+			if (
+				restoreFocusElement &&
+				restoreFocusElement !== document.body &&
+				restoreFocusElement !== document.documentElement
+			) {
+				restoreFocusElement.focus();
+			}
+		}
+
+		lastOpen = open;
+	});
+
+	setDialogRootContext({
+		get closeOnEscape() {
+			return closeOnEscape;
+		},
+		get closeOnInteractOutside() {
+			return closeOnInteractOutside;
+		},
+		get contentId() {
+			return contentId;
+		},
+		get descriptionId() {
+			return descriptionId;
+		},
+		get open() {
+			return open;
+		},
+		get preventScroll() {
+			return preventScroll;
+		},
+		requestClose,
+		get shouldRender() {
+			return shouldRender;
+		},
+		get titleId() {
+			return titleId;
+		},
+		get trapFocus() {
+			return trapFocus;
+		},
+	});
+</script>
+
+{@render children?.()}