@svelte-atoms/core 1.0.0-alpha.14

package/dist/components/drawer/README.MD

@@ -0,0 +1,98 @@
+# Slideover Module
+
+The `slideover` module provides a flexible and composable implementation of a sliding panel component for Svelte applications. It is designed to manage state, accessibility, and DOM structure for sliding panels, enabling developers to create highly customizable and interactive UI components.
+
+---
+
+## Features
+
+- **Composable API:** Modular components for building sliding panels with headers, footers, content, and more.
+- **State Management:** Built-in state management for open, close, and toggle actions.
+- **Accessibility:** ARIA attributes for improved accessibility.
+- **Context Sharing:** Uses Svelte's context API for seamless communication between components.
+- **Type Safety:** Fully typed with TypeScript for robust development.
+- **Customizable:** Easily extendable with custom properties and behaviors.
+
+---
+
+## Components
+
+The `slideover` module includes the following components:
+
+1. **Root**: The main container for the slideover.
+2. **Content**: The content area of the slideover.
+3. **Header**: The header section of the slideover.
+4. **Body**: The body section of the slideover.
+5. **Footer**: The footer section of the slideover.
+6. **Title**: The title element for the slideover.
+7. **Description**: The description element for the slideover.
+
+---
+
+## API
+
+### `SlideoverAtom`
+
+The `SlideoverAtom` class manages the state and DOM elements of the slideover.
+
+#### Methods
+
+- **`root(props: Record<string, unknown>)`**: Returns properties for the root element.
+- **`content(props: Record<string, unknown>)`**: Returns properties for the content element.
+- **`header(props: Record<string, unknown>)`**: Returns properties for the header element.
+- **`body(props: Record<string, unknown>)`**: Returns properties for the body element.
+- **`footer(props: Record<string, unknown>)`**: Returns properties for the footer element.
+- **`title(props: Record<string, unknown>)`**: Returns properties for the title element.
+- **`description(props: Record<string, unknown>)`**: Returns properties for the description element.
+- **`share()`**: Shares the atom instance via Svelte's context API.
+
+---
+
+### `SlideoverState`
+
+The `SlideoverState` class manages the state of the slideover.
+
+#### Methods
+
+- **`open()`**: Opens the slideover.
+- **`close()`**: Closes the slideover.
+- **`toggle()`**: Toggles the open state of the slideover.
+
+---
+
+### Attachments
+
+The module provides utility functions for attaching behaviors to DOM elements:
+
+- **`slideoverAtom(callback)`**: Attaches a callback to the slideover atom.
+- **`toggleSlideover(onclick)`**: Toggles the slideover on click.
+- **`openSlideover(onclick)`**: Opens the slideover on click.
+- **`closeSlideover(onclick)`**: Closes the slideover on click.
+- **`clickoutSlideover(onclickout)`**: Closes the slideover when clicking outside.
+
+---
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script lang="ts">
+	import { Slideover } from '$lib/atoms/slideover';
+
+	let isOpen = false;
+</script>
+
+<Slideover.Root bind:open={isOpen} class="slideover">
+	<Slideover.Header>
+		<Slideover.Title>Slideover Title</Slideover.Title>
+		<Slideover.Description>Slideover Description</Slideover.Description>
+	</Slideover.Header>
+	<Slideover.Content>
+		<p>This is the content of the slideover.</p>
+	</Slideover.Content>
+	<Slideover.Footer>
+		<button on:click={() => (isOpen = false)}>Close</button>
+	</Slideover.Footer>
+</Slideover.Root>
+```

package/dist/components/drawer/atoms.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './drawer-root.svelte';
+export { default as Content } from './drawer-content.svelte';
+export { default as Body } from './drawer-body.svelte';
+export { default as Header } from './drawer-header.svelte';
+export { default as Footer } from './drawer-footer.svelte';
+export { default as Title } from './drawer-title.svelte';
+export { default as Description } from './drawer-description.svelte';
+export { default as Backdrop } from './drawer-backdrop.svelte';

package/dist/components/drawer/atoms.js

@@ -0,0 +1,8 @@
+export { default as Root } from './drawer-root.svelte';
+export { default as Content } from './drawer-content.svelte';
+export { default as Body } from './drawer-body.svelte';
+export { default as Header } from './drawer-header.svelte';
+export { default as Footer } from './drawer-footer.svelte';
+export { default as Title } from './drawer-title.svelte';
+export { default as Description } from './drawer-description.svelte';
+export { default as Backdrop } from './drawer-backdrop.svelte';

package/dist/components/drawer/attachments.svelte.d.ts

@@ -0,0 +1,6 @@
+import { DrawerBond } from './bond.svelte';
+export declare function drawer(callback: (node: HTMLElement, bond?: DrawerBond) => any): (node: HTMLElement) => any;
+export declare function toggleDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => () => void;
+export declare function openDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => () => void;
+export declare function closeDrawer(onclick?: (ev: MouseEvent) => void): (node: HTMLElement) => (() => void) | undefined;
+export declare function clickoutDrawer(onclickout?: (ev: PointerEvent) => void): (node: Element) => () => void;

package/dist/components/drawer/attachments.svelte.js

@@ -0,0 +1,82 @@
+import { on } from '../../attachments/event.svelte';
+import { clickout } from '../../attachments/clickout.svelte';
+import { DrawerBond } from './bond.svelte';
+export function drawer(callback) {
+    const bond = DrawerBond.get();
+    return (node) => callback(node, bond);
+}
+export function toggleDrawer(onclick) {
+    const bond = DrawerBond.get();
+    return (node) => {
+        const clickHandler = (ev) => {
+            onclick?.(ev, bond);
+            if (ev.defaultPrevented) {
+                return;
+            }
+            bond?.state.toggle();
+        };
+        node.addEventListener('click', clickHandler);
+        return () => {
+            node.removeEventListener('click', clickHandler);
+        };
+    };
+}
+export function openDrawer(onclick) {
+    const bond = DrawerBond.get();
+    return (node) => {
+        const clickHandler = (ev) => {
+            onclick?.(ev);
+            if (ev.defaultPrevented) {
+                return;
+            }
+            bond?.state.open();
+        };
+        node.addEventListener('click', clickHandler);
+        return () => {
+            node.removeEventListener('click', clickHandler);
+        };
+    };
+}
+export function closeDrawer(onclick) {
+    const bond = DrawerBond.get();
+    return (node) => {
+        if (!bond) {
+            return;
+        }
+        const clickHandler = (ev) => {
+            onclick?.(ev);
+            if (ev.defaultPrevented) {
+                return;
+            }
+            bond?.state.open();
+        };
+        node.addEventListener('click', clickHandler);
+        return () => {
+            node.removeEventListener('click', clickHandler);
+        };
+    };
+}
+export function clickoutDrawer(onclickout) {
+    const bond = DrawerBond.get();
+    return clickout((ev) => {
+        if (!bond)
+            return;
+        if (!bond.state.props.open) {
+            return;
+        }
+        const target = ev.target;
+        if (!bond.elements.root.contains(target)) {
+            return;
+        }
+        if (bond.elements.content?.contains(target)) {
+            return;
+        }
+        onclickout?.(ev);
+        return on('click', (ev, bond) => {
+            if (bond?.elements?.content?.contains(ev.target)) {
+                return;
+            }
+            bond?.state?.close?.();
+        }, DrawerBond.get);
+    });
+}

package/dist/components/drawer/bond.svelte.d.ts

@@ -0,0 +1,67 @@
+import { Bond, BondState, type BondStateProps } from '../../shared/bond.svelte.js';
+export type DrawerBondProps<T extends Record<string, unknown> = Record<string, unknown>> = BondStateProps & {
+    open: boolean;
+    disabled: boolean;
+    extend: T;
+};
+export type DrawerBondElements = {
+    root: HTMLElement;
+    drawer: HTMLElement;
+    content: HTMLElement;
+    header: HTMLElement;
+    body: HTMLElement;
+    footer: HTMLElement;
+    title: HTMLElement;
+    description: HTMLElement;
+    backdrop: HTMLElement;
+};
+export declare class DrawerBond<Props extends DrawerBondProps = DrawerBondProps, State extends DrawerBondState<Props> = DrawerBondState<Props>> extends Bond<Props, State, DrawerBondElements> {
+    static CONTEXT_KEY: string;
+    constructor(state: State);
+    root(props?: Record<string, unknown>): {
+        id: string;
+        'aria-expanded': boolean;
+        'aria-disabled': boolean;
+        'aria-labelledby': string | undefined;
+        'data-active': boolean;
+        'data-kind': string;
+    };
+    content(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    body(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        'data-kind': string;
+    };
+    header(props?: Record<string, unknown>): {
+        id: string;
+        role: string;
+        'data-kind': string;
+    };
+    title(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    description(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    footer(props?: Record<string, unknown>): {
+        id: string;
+        'data-kind': string;
+    };
+    backdrop(): {
+        [x: symbol]: (node: HTMLElement) => void;
+    };
+    share(): this;
+    static get(): DrawerBond | undefined;
+    static set(bond: DrawerBond): DrawerBond;
+}
+export declare class DrawerBondState<Props extends DrawerBondProps = DrawerBondProps> extends BondState<Props> {
+    constructor(props: () => Props);
+    open(): void;
+    close(): void;
+    toggle(): void;
+}

package/dist/components/drawer/bond.svelte.js

@@ -0,0 +1,144 @@
+import { createAttachmentKey } from 'svelte/attachments';
+import { getContext, setContext } from 'svelte';
+import { getElementId } from '../../utils/dom.svelte.js';
+import { Bond, BondState } from '../../shared/bond.svelte.js';
+const DRAWER_ELEMENTS_KIND = {
+    root: 'drawer-root',
+    content: 'drawer-content',
+    header: 'drawer-header',
+    body: 'drawer-body',
+    footer: 'drawer-footer',
+    title: 'drawer-title',
+    description: 'drawer-description',
+    backdrop: 'drawer-backdrop'
+};
+export class DrawerBond extends Bond {
+    static CONTEXT_KEY = '@atoms/context/drawer';
+    constructor(state) {
+        super(state);
+    }
+    root(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.root);
+        const drawerHeaderId = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
+        const drawerTitleId = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
+        const haveHeaderElement = !!this.elements.header;
+        const haveTitleElement = !!this.elements.title;
+        const isOpen = this.state?.props?.open ?? false;
+        const isDisabled = this.state?.props?.disabled ?? false;
+        const isActive = isOpen && !isDisabled;
+        return {
+            id: id,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled,
+            'aria-labelledby': haveTitleElement
+                ? drawerTitleId
+                : haveHeaderElement
+                    ? drawerHeaderId
+                    : undefined,
+            'data-active': isActive,
+            'data-kind': DRAWER_ELEMENTS_KIND.root,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.root = node;
+            }
+        };
+    }
+    content(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.content);
+        return {
+            id: id,
+            'data-kind': DRAWER_ELEMENTS_KIND.content,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.content = node;
+            }
+        };
+    }
+    body(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.body);
+        return {
+            id: id,
+            role: 'region',
+            'data-kind': DRAWER_ELEMENTS_KIND.body,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.body = node;
+            }
+        };
+    }
+    header(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.header);
+        return {
+            id: id,
+            role: 'heading',
+            'data-kind': DRAWER_ELEMENTS_KIND.header,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.header = node;
+            }
+        };
+    }
+    title(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.title);
+        return {
+            id: id,
+            'data-kind': DRAWER_ELEMENTS_KIND.title,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.title = node;
+            }
+        };
+    }
+    description(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.description);
+        return {
+            id: id,
+            'data-kind': DRAWER_ELEMENTS_KIND.description,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.description = node;
+            }
+        };
+    }
+    footer(props = {}) {
+        const id = getElementId(this.id, DRAWER_ELEMENTS_KIND.footer);
+        return {
+            id: id,
+            'data-kind': DRAWER_ELEMENTS_KIND.footer,
+            ...props,
+            [createAttachmentKey()]: (node) => {
+                this.elements.footer = node;
+            }
+        };
+    }
+    backdrop() {
+        return {
+            [createAttachmentKey()]: (node) => {
+                this.elements.backdrop = node;
+            }
+        };
+    }
+    share() {
+        return DrawerBond.set(this);
+    }
+    static get() {
+        return getContext(DrawerBond.CONTEXT_KEY);
+    }
+    static set(bond) {
+        return setContext(DrawerBond.CONTEXT_KEY, bond);
+    }
+}
+export class DrawerBondState extends BondState {
+    constructor(props) {
+        super(props);
+    }
+    open() {
+        this.props.open = true;
+    }
+    close() {
+        this.props.open = false;
+    }
+    toggle() {
+        this.props.open = !this.props.open;
+    }
+}

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

@@ -0,0 +1,56 @@
+<script module lang="ts">
+	export type SlideoverBackdropProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = HtmlAtomProps<E, B> & {
+		as?: E;
+		class?: string;
+	};
+</script>
+
+<script lang="ts" generics="E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toClassValue } from '../../utils';
+	import { getPreset } from '../../context';
+	import { HtmlAtom, type HtmlAtomProps, type Base } from '../atom';
+	import { DrawerBond } from './bond.svelte';
+
+	type Element = HTMLElementTagNameMap[E];
+
+	const bond = DrawerBond.get();
+	const preset = getPreset('drawer.backdrop');
+
+	let {
+		class: klass = '',
+		as = preset?.as ?? 'div',
+		base = preset?.base as B,
+		onmount = undefined,
+		ondestroy = undefined,
+		animate = undefined,
+		enter = undefined,
+		exit = undefined,
+		initial = undefined,
+		...restProps
+	}: SlideoverBackdropProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const backdropProps = $derived({
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'absolute inset-0 z-0 bg-black/30',
+		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)}
+	{...backdropProps}
+/>

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

@@ -0,0 +1,29 @@
+export type SlideoverBackdropProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = HtmlAtomProps<E, B> & {
+    as?: E;
+    class?: string;
+};
+import { type HtmlAtomProps, type Base } from '../atom';
+declare function $$render<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base>(): {
+    props: any;
+    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 DrawerBackdrop: $$IsomorphicComponent;
+type DrawerBackdrop<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DrawerBackdrop<E, B>>;
+export default DrawerBackdrop;

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

@@ -0,0 +1,62 @@
+<script module lang="ts">
+	export type DrawerBodyProps<
+		E extends keyof HTMLElementTagNameMap,
+		B extends Base = Base
+	> = Override<
+		HtmlAtomProps<E, B>,
+		{
+			as?: E;
+			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 preset = getPreset('drawer.body');
+
+	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
+	}: DrawerBodyProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const bond = DrawerBond.get();
+
+	const bodyProps = $derived({
+		...bond?.body(),
+		...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)}
+	{...bodyProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>

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

@@ -0,0 +1,40 @@
+export type DrawerBodyProps<E extends keyof HTMLElementTagNameMap, B extends Base = Base> = Override<HtmlAtomProps<E, B>, {
+    as?: E;
+    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>, "as" | "children"> & {
+        as?: E | undefined;
+        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 DrawerBody: $$IsomorphicComponent;
+type DrawerBody<E extends keyof HTMLElementTagNameMap = 'div', B extends Base = Base> = InstanceType<typeof DrawerBody<E, B>>;
+export default DrawerBody;

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

@@ -0,0 +1,64 @@
+<script module lang="ts">
+	export type SlideoverContentProps<
+		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.content');
+
+	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
+	}: SlideoverContentProps<E, B> & HTMLAttributes<Element> = $props();
+
+	const contentProps = $derived({
+		...bond?.content(),
+		...restProps
+	});
+</script>
+
+<HtmlAtom
+	{as}
+	{base}
+	class={[
+		'bg-card text-foreground border-border absolute',
+		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)}
+	{...contentProps}
+>
+	{@render children?.({ drawer: bond })}
+</HtmlAtom>