@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/drawer/drawer-content.svelte.d.ts

@@ -0,0 +1,38 @@
+export type SlideoverContentProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        drawer?: DrawerBond;
+    }]>;
+}>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { DrawerBond } from './bond.svelte';
+import type { Override } from '../../types';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "children"> & {
+        children?: Snippet<[{
+            drawer?: DrawerBond;
+        }]>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerContent: $$IsomorphicComponent;
+type DrawerContent<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DrawerContent<E, B>>;
+export default DrawerContent;

package/dist/components/drawer/drawer-description.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	export type SlideoverDescriptionProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ drawer?: DrawerBond }]>;
+		}
+	>;
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DrawerBond } from './bond.svelte';
+	import type { Override } from '../../types';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const preset = getPreset('drawer.description');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('p' as E),
+		base = preset?.base as B,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverDescriptionProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const descriptionProps = $derived({
+		...bond?.description(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...descriptionProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

package/dist/components/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,38 @@
+export type SlideoverDescriptionProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        drawer?: DrawerBond;
+    }]>;
+}>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { DrawerBond } from './bond.svelte';
+import type { Override } from '../../types';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "children"> & {
+        children?: Snippet<[{
+            drawer?: DrawerBond;
+        }]>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerDescription: $$IsomorphicComponent;
+type DrawerDescription<E extends keyof HTMLElementTagNameMap = 'p', B extends Base = Base> = InstanceType<typeof DrawerDescription<E, B>>;
+export default DrawerDescription;

package/dist/components/drawer/drawer-footer.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	export type SlideoverFooterProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ drawer?: DrawerBond }]>;
+		}
+	>;
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toClassValue } from '../../utils';
+	import type { Override } from '../../types';
+	import { DrawerBond } from './bond.svelte';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const preset = getPreset('drawer.footer');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverFooterProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const footerProps = $derived({
+		...bond?.footer(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...footerProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

package/dist/components/drawer/drawer-footer.svelte.d.ts

@@ -0,0 +1,38 @@
+export type SlideoverFooterProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        drawer?: DrawerBond;
+    }]>;
+}>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Override } from '../../types';
+import { DrawerBond } from './bond.svelte';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "children"> & {
+        children?: Snippet<[{
+            drawer?: DrawerBond;
+        }]>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerFooter: $$IsomorphicComponent;
+type DrawerFooter<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DrawerFooter<E, B>>;
+export default DrawerFooter;

package/dist/components/drawer/drawer-header.svelte

@@ -0,0 +1,61 @@
+<script module lang="ts">
+	export type SlideoverHeaderProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ drawer?: DrawerBond }]>;
+		}
+	>;
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='div', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DrawerBond } from './bond.svelte';
+	import { toClassValue } from '../../utils';
+	import type { Override } from '../../types';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const preset = getPreset('drawer.header');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('div' as E),
+		base = preset?.base as B,
+		children = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverHeaderProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const headerProps = $derived({
+		...bond?.header(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...headerProps}
+	{...restProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

package/dist/components/drawer/drawer-header.svelte.d.ts

@@ -0,0 +1,38 @@
+export type SlideoverHeaderProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        drawer?: DrawerBond;
+    }]>;
+}>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { DrawerBond } from './bond.svelte';
+import type { Override } from '../../types';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "children"> & {
+        children?: Snippet<[{
+            drawer?: DrawerBond;
+        }]>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerHeader: $$IsomorphicComponent;
+type DrawerHeader<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DrawerHeader<E, B>>;
+export default DrawerHeader;

package/dist/components/drawer/drawer-root.svelte

@@ -0,0 +1,116 @@
+<script module lang="ts">
+	import type { Factory } from '../../types';
+
+	export type SlideoverRootProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ slideover: DrawerBond }]>;
+			initial?: (node: HTMLElement, bond: DrawerBond) => void;
+			enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+			exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+		}
+	> & {
+		open?: boolean;
+		disabled?: boolean;
+		onclose?: (event: Event, bond: DrawerBond) => void;
+		factory?: Factory<DrawerBond>;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap='dialog', B extends Base = Base">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+	import type { Override } from '../../types';
+	import { toClassValue, defineProperty, defineState } from '../../utils';
+	import { type TransitionFunction } from '../../helpers/html-element.svelte';
+	import Teleport from '../portal/teleport.svelte';
+	import { getPreset } from '../../context';
+	import type { HtmlAtomProps, Base } from '../atom';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const preset = getPreset('drawer');
+
+	let {
+		open = $bindable(false),
+		children = undefined,
+		class: klass = '',
+		as = preset?.as ?? 'dialog',
+		base = preset?.base as B,
+		disabled = false,
+		onclose = undefined,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		factory = _factory,
+		...restProps
+	}: SlideoverRootProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bondProps = defineState<DrawerBondProps>(
+		[
+			defineProperty(
+				'open',
+				() => open,
+				(v) => {
+					open = v;
+				}
+			),
+			defineProperty('disabled', () => disabled)
+		],
+		() => ({})
+	);
+	const bond = _factory(bondProps).share();
+
+	const rootProps = $derived({
+		...bond?.root(),
+		...restProps
+	});
+
+	$effect(() => {
+		if (bond.elements.root instanceof HTMLDialogElement) {
+			if (open) {
+				bond.elements.root?.show?.();
+			}
+		}
+	});
+
+	function _factory(props: typeof bondProps) {
+		const bondState = new DrawerBondState(() => props);
+		const bond = new DrawerBond(bondState);
+
+		return bond;
+	}
+
+	export function getBond() {
+		return bond;
+	}
+</script>
+
+<Teleport
+	{as}
+	{base}
+	portal="root.l1"
+	class={[
+		'pointer-events-auto h-full w-full overflow-hidden bg-transparent',
+		!open && 'pointer-events-none',
+		toClassValue.apply(bond, [preset?.class]),
+		toClassValue.apply(bond, [klass])
+	]}
+	closeby="none"
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...rootProps}
+>
+	{@render children?.({ drawer: bond })}
+</Teleport>

package/dist/components/drawer/drawer-root.svelte.d.ts

@@ -0,0 +1,60 @@
+import type { Factory } from '../../types';
+export type SlideoverRootProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        slideover: DrawerBond;
+    }]>;
+    initial?: (node: HTMLElement, bond: DrawerBond) => void;
+    enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+    exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<'dialog'>;
+}> & {
+    open?: boolean;
+    disabled?: boolean;
+    onclose?: (event: Event, bond: DrawerBond) => void;
+    factory?: Factory<DrawerBond>;
+};
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { DrawerBond, DrawerBondState, type DrawerBondProps } from './bond.svelte';
+import type { Override } from '../../types';
+import { type TransitionFunction } from '../../helpers/html-element.svelte';
+import type { HtmlAtomProps, Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "initial" | "enter" | "exit" | "children"> & {
+        children?: Snippet<[{
+            slideover: DrawerBond;
+        }]>;
+        initial?: (node: HTMLElement, bond: DrawerBond) => void;
+        enter?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<"dialog">;
+        exit?: (node: HTMLElement, bond: DrawerBond) => TransitionFunction<"dialog">;
+    } & {
+        open?: boolean;
+        disabled?: boolean;
+        onclose?: (event: Event, bond: DrawerBond) => void;
+        factory?: Factory<DrawerBond>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {
+        getBond: () => DrawerBond<DrawerBondProps<Record<string, unknown>>, DrawerBondState<DrawerBondProps>>;
+    };
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "open";
+    exports(): {
+        getBond: () => DrawerBond<DrawerBondProps<Record<string, unknown>>, DrawerBondState<DrawerBondProps>>;
+    };
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerRoot: $$IsomorphicComponent;
+type DrawerRoot<E extends keyof HTMLElementTagNameMap = 'dialog', B extends Base = Base> = InstanceType<typeof DrawerRoot<E, B>>;
+export default DrawerRoot;

package/dist/components/drawer/drawer-title.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	export type SlideoverTitleProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			children?: Snippet<[{ drawer?: DrawerBond }]>;
+		}
+	>;
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base">
+	import type { Component, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { DrawerBond } from './bond.svelte';
+	import type { Override } from '../../types';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { getPreset } from '../../context';
+	import { toClassValue } from '../../utils';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const preset = getPreset('drawer.title');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? ('h3' as E),
+		base = preset?.base as B,
+		children,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverTitleProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const titleProps = $derived({
+		...bond?.title(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[toClassValue.apply(bond, [preset?.class]), toClassValue.apply(bond, [klass])]}
+	onmount={onmount?.bind(bond.state)}
+	ondestroy={ondestroy?.bind(bond.state)}
+	enter={enter?.bind(bond.state)}
+	exit={exit?.bind(bond.state)}
+	initial={initial?.bind(bond.state)}
+	animate={animate?.bind(bond.state)}
+	{...titleProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

package/dist/components/drawer/drawer-title.svelte.d.ts

@@ -0,0 +1,38 @@
+export type SlideoverTitleProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    children?: Snippet<[{
+        drawer?: DrawerBond;
+    }]>;
+}>;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { DrawerBond } from './bond.svelte';
+import type { Override } from '../../types';
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>(): {
+    props: Omit<HtmlAtomProps<E_1, B_1>, "children"> & {
+        children?: Snippet<[{
+            drawer?: DrawerBond;
+        }]>;
+    } & HTMLAttributes<HTMLElementTagNameMap[E]>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> {
+    props(): ReturnType<typeof $$render<E, B>>['props'];
+    events(): ReturnType<typeof $$render<E, B>>['events'];
+    slots(): ReturnType<typeof $$render<E, B>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<E, B>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<E, B>['props']>, ReturnType<__sveltets_Render<E, B>['events']>, ReturnType<__sveltets_Render<E, B>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<E, B>['bindings']>;
+    } & ReturnType<__sveltets_Render<E, B>['exports']>;
+    <E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base>(internal: unknown, props: ReturnType<__sveltets_Render<E, B>['props']> & {}): ReturnType<__sveltets_Render<E, B>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const DrawerTitle: $$IsomorphicComponent;
+type DrawerTitle<E extends keyof HTMLElementTagNameMap = 'h3', B extends Base = Base> = InstanceType<typeof DrawerTitle<E, B>>;
+export default DrawerTitle;