sheer-ui 0.0.0

package/src/lib/components/dialog/dialog.svelte.ts

@@ -0,0 +1,371 @@
+import { attachRef, type ReadableBoxedValues } from '../../internal/tools/index.js';
+import { createContext, onDestroy, untrack } from 'svelte';
+import { createBitsAttrs, boolToStr, getDataOpenClosed, boolToEmptyStrOrUndef } from '../../internal/attrs.js';
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from '../../internal/types.js';
+import { kbd } from '../../internal/kbd.js';
+import { useOpenChangeComplete } from '../../internal/animations-settled.svelte.js';
+
+type DialogVariant = 'alert-dialog' | 'dialog';
+
+const dialogAttrs = createBitsAttrs({
+	component: 'dialog',
+	parts: ['content', 'trigger', 'overlay', 'title', 'description', 'close', 'cancel', 'action'],
+});
+
+const [getDialogRoot, setDialogRoot, hasDialogRoot] = createContext<DialogRootState>();
+
+// The dialog's public state cell is the shared overlay OpenCell (internal/open-cell.svelte.ts),
+// exported under its established dialog-facing name.
+import { OpenCell as DialogState } from '../../internal/open-cell.svelte.js';
+export { DialogState };
+
+interface DialogRootStateOpts
+	extends ReadableBoxedValues<{
+		variant: DialogVariant;
+		onOpenChangeComplete: OnChangeFn<boolean>;
+	}> {
+	cell: DialogState;
+}
+
+export class DialogRootState {
+	static create(opts: DialogRootStateOpts) {
+		const parent = hasDialogRoot() ? getDialogRoot() : null;
+		return setDialogRoot(new DialogRootState(opts, parent));
+	}
+
+	readonly opts: DialogRootStateOpts;
+	readonly cell: DialogState;
+	triggerNode = $state<HTMLElement | null>(null);
+	contentNode = $state<HTMLElement | null>(null);
+	descriptionNode = $state<HTMLElement | null>(null);
+	contentId = $state<string | undefined>(undefined);
+	triggerId = $state<string | undefined>(undefined);
+	titleState = $state<DialogTitleState | null>(null);
+	descriptionState = $state<DialogDescriptionState | null>(null);
+	readonly titleId = $derived.by(() => this.titleState?.opts.id.current);
+	readonly descriptionId = $derived.by(() => this.descriptionState?.opts.id.current);
+	cancelNode = $state<HTMLElement | null>(null);
+	nestedOpenCount = $state(0);
+	readonly depth: number;
+	readonly parent: DialogRootState | null;
+	readonly #completion: { readonly pending: boolean };
+	/** Rendered: open, or closing with the exit still settling — the window the headless content's scroll lock covers. */
+	readonly present = $derived.by(() => this.cell.open || this.#completion.pending);
+
+	constructor(opts: DialogRootStateOpts, parent: DialogRootState | null) {
+		this.opts = opts;
+		this.cell = opts.cell;
+		this.parent = parent;
+		this.depth = parent ? parent.depth + 1 : 0;
+		this.handleOpen = this.handleOpen.bind(this);
+		this.handleClose = this.handleClose.bind(this);
+
+		this.#completion = useOpenChangeComplete(
+			() => this.cell.open,
+			() => this.contentNode,
+			(isOpen) => this.opts.onOpenChangeComplete.current(isOpen),
+		);
+
+		let started = false;
+		$effect(() => {
+			const isOpen = this.cell.open;
+			if (!started) {
+				started = true;
+				return;
+			}
+			untrack(() => {
+				if (!this.parent) return;
+				if (isOpen) {
+					this.parent.incrementNested();
+				} else {
+					this.parent.decrementNested();
+				}
+			});
+		});
+
+		onDestroy(() => {
+			if (this.cell.open) {
+				this.parent?.decrementNested();
+			}
+		});
+	}
+
+	handleOpen() {
+		this.cell.open = true;
+	}
+
+	handleClose() {
+		this.cell.open = false;
+	}
+
+	getBitsAttr: typeof dialogAttrs.getAttr = (part) => {
+		return dialogAttrs.getAttr(part, this.opts.variant.current);
+	};
+
+	incrementNested() {
+		this.nestedOpenCount++;
+		this.parent?.incrementNested();
+	}
+
+	decrementNested() {
+		if (this.nestedOpenCount === 0) return;
+		this.nestedOpenCount--;
+		this.parent?.decrementNested();
+	}
+
+	readonly sharedProps = $derived.by(
+		() =>
+			({
+				'data-state': getDataOpenClosed(this.cell.open),
+			}) as const,
+	);
+}
+
+interface DialogTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{ disabled: boolean }> {}
+
+export class DialogTriggerState {
+	static create(opts: DialogTriggerStateOpts) {
+		return new DialogTriggerState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogTriggerStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: DialogTriggerStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => {
+			this.root.triggerNode = v;
+			this.root.triggerId = v?.id;
+		});
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onclick(e: BitsMouseEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.button > 0) return;
+		this.root.handleOpen();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+			e.preventDefault();
+			this.root.handleOpen();
+		}
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				'aria-haspopup': 'dialog',
+				'aria-expanded': boolToStr(this.root.cell.open),
+				'aria-controls': this.root.contentId,
+				[this.root.getBitsAttr('trigger')]: '',
+				onkeydown: this.onkeydown,
+				onclick: this.onclick,
+				disabled: this.opts.disabled.current ? true : undefined,
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface DialogCloseStateOpts extends WithRefOpts, ReadableBoxedValues<{ variant: 'action' | 'cancel' | 'close'; disabled: boolean }> {}
+
+export class DialogCloseState {
+	static create(opts: DialogCloseStateOpts) {
+		return new DialogCloseState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogCloseStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: DialogCloseStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+		this.onclick = this.onclick.bind(this);
+		this.onkeydown = this.onkeydown.bind(this);
+	}
+
+	onclick(e: BitsMouseEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.button > 0) return;
+		this.root.handleClose();
+	}
+
+	onkeydown(e: BitsKeyboardEvent) {
+		if (this.opts.disabled.current) return;
+		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+			e.preventDefault();
+			this.root.handleClose();
+		}
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[this.root.getBitsAttr(this.opts.variant.current)]: '',
+				onclick: this.onclick,
+				onkeydown: this.onkeydown,
+				disabled: this.opts.disabled.current ? true : undefined,
+				tabindex: 0,
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface DialogTitleStateOpts extends WithRefOpts, ReadableBoxedValues<{ level: 1 | 2 | 3 | 4 | 5 | 6 }> {}
+
+export class DialogTitleState {
+	static create(opts: DialogTitleStateOpts) {
+		return new DialogTitleState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogTitleStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: DialogTitleStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.root.titleState = this;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: 'heading',
+				'aria-level': this.opts.level.current,
+				[this.root.getBitsAttr('title')]: '',
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface DialogDescriptionStateOpts extends WithRefOpts {}
+
+export class DialogDescriptionState {
+	static create(opts: DialogDescriptionStateOpts) {
+		return new DialogDescriptionState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogDescriptionStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: DialogDescriptionStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.root.descriptionState = this;
+		this.attachment = attachRef(this.opts.ref, (v) => {
+			this.root.descriptionNode = v;
+		});
+	}
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[this.root.getBitsAttr('description')]: '',
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface DialogContentStateOpts extends WithRefOpts {}
+
+export class DialogContentState {
+	static create(opts: DialogContentStateOpts) {
+		return new DialogContentState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogContentStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+
+	constructor(opts: DialogContentStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref, (v) => {
+			this.root.contentNode = v;
+			this.root.contentId = v?.id;
+		});
+	}
+
+	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				role: this.root.opts.variant.current === 'alert-dialog' ? 'alertdialog' : 'dialog',
+				'aria-modal': 'true',
+				'aria-describedby': this.root.descriptionId,
+				'aria-labelledby': this.root.titleId,
+				[this.root.getBitsAttr('content')]: '',
+				style: {
+					pointerEvents: 'auto',
+					outline: this.root.opts.variant.current === 'alert-dialog' ? 'none' : undefined,
+					'--bits-dialog-depth': this.root.depth,
+					'--bits-dialog-nested-count': this.root.nestedOpenCount,
+					// CSS containment isolates style/layout calculations from the rest of the page,
+					// improving performance when there's a large DOM behind the dialog.
+					// Paint is omitted so tooltips/selects can render outside dialog bounds.
+					contain: 'layout style',
+				},
+				tabindex: this.root.opts.variant.current === 'alert-dialog' ? -1 : undefined,
+				'data-nested-open': boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+				'data-nested': boolToEmptyStrOrUndef(this.root.parent !== null),
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}
+
+interface DialogOverlayStateOpts extends WithRefOpts {}
+
+export class DialogOverlayState {
+	static create(opts: DialogOverlayStateOpts) {
+		return new DialogOverlayState(opts, getDialogRoot());
+	}
+
+	readonly opts: DialogOverlayStateOpts;
+	readonly root: DialogRootState;
+	readonly attachment: RefAttachment;
+	constructor(opts: DialogOverlayStateOpts, root: DialogRootState) {
+		this.opts = opts;
+		this.root = root;
+		this.attachment = attachRef(this.opts.ref);
+	}
+
+	readonly snippetProps = $derived.by(() => ({ open: this.root.cell.open }));
+
+	readonly props = $derived.by(
+		() =>
+			({
+				id: this.opts.id.current,
+				[this.root.getBitsAttr('overlay')]: '',
+				style: {
+					pointerEvents: 'auto',
+					'--bits-dialog-depth': this.root.depth,
+					'--bits-dialog-nested-count': this.root.nestedOpenCount,
+				},
+				'data-nested-open': boolToEmptyStrOrUndef(this.root.nestedOpenCount > 0),
+				'data-nested': boolToEmptyStrOrUndef(this.root.parent !== null),
+				...this.root.sharedProps,
+				...this.attachment,
+			}) as const,
+	);
+}

package/src/lib/components/dialog/index.ts

@@ -0,0 +1,19 @@
+export { default as Root } from './components/dialog.svelte';
+export { default as Title } from './components/dialog-title.svelte';
+export { default as Close } from './components/dialog-close.svelte';
+export { default as Portal } from '../../internal/portal/portal.svelte';
+export { default as Content } from './components/dialog-content.svelte';
+export { default as Overlay } from './components/dialog-overlay.svelte';
+export { default as Trigger } from './components/dialog-trigger.svelte';
+export { default as Description } from './components/dialog-description.svelte';
+
+export type {
+	DialogRootProps as RootProps,
+	DialogTitleProps as TitleProps,
+	DialogCloseProps as CloseProps,
+	DialogPortalProps as PortalProps,
+	DialogContentProps as ContentProps,
+	DialogOverlayProps as OverlayProps,
+	DialogTriggerProps as TriggerProps,
+	DialogDescriptionProps as DescriptionProps,
+} from './types.js';

package/src/lib/components/dialog/types.ts

@@ -0,0 +1,105 @@
+import type { EscapeLayerProps } from "../../internal/escape-layer/types.js";
+import type { DismissibleLayerProps } from "../../internal/dismissible-layer/types.js";
+import type { PresenceProps } from "../../internal/types.js";
+import type { FocusScopeProps } from "../../internal/focus-scope/types.js";
+import type { TextSelectionGuardProps } from "../../internal/types.js";
+import type { ScrollLockProps } from "../../internal/body-scroll-lock.svelte.js";
+import type { Snippet } from "svelte";
+import type {
+	OnChangeFn,
+	WithChild,
+	WithChildNoChildrenSnippetProps,
+	Without,
+} from "../../internal/types.js";
+import type {
+	BitsPrimitiveButtonAttributes,
+	BitsPrimitiveDivAttributes,
+} from "../../internal/attribute-types.js";
+import type { PortalProps } from "../../internal/portal/index.js";
+import type { DialogState } from "./dialog.svelte.js";
+
+export type DialogRootPropsWithoutHTML = {
+	/**
+	 * The derivation source for the dialog's open state: the internal cell
+	 * re-derives whenever this prop changes, and interactions (trigger, Escape,
+	 * a snippet-cell write) override it until the next change. Reconcile
+	 * dismissals via onOpenChangeComplete. Plain value — not bindable.
+	 */
+	open?: boolean;
+
+	/**
+	 * A callback called when the dialog finishes opening/closing animations.
+	 * This is an occurrence (animation settled), not a state mirror — use it
+	 * for dismissal-is-navigation flows, not to track `open` (depend on the
+	 * cell instead).
+	 */
+	onOpenChangeComplete?: OnChangeFn<boolean>;
+
+	/**
+	 * A caller-constructed cell (own source and, optionally, a delegate writer)
+	 * used instead of building one from `open`. When given, `open` is ignored.
+	 */
+	state?: DialogState;
+
+	/** Children receive the state cell, typed and guaranteed within the tree. */
+	children?: Snippet<[DialogState]>;
+};
+
+export type DialogRootProps = DialogRootPropsWithoutHTML;
+
+export type DialogContentSnippetProps = {
+	open: boolean;
+};
+
+export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<
+	Omit<
+		EscapeLayerProps &
+			Omit<DismissibleLayerProps, "onInteractOutsideStart"> &
+			PresenceProps &
+			FocusScopeProps &
+			TextSelectionGuardProps &
+			ScrollLockProps,
+		"loop"
+	>,
+	DialogContentSnippetProps
+>;
+
+export type DialogContentProps = DialogContentPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
+
+export type DialogOverlaySnippetProps = {
+	open: boolean;
+};
+
+export type DialogOverlayPropsWithoutHTML = WithChild<
+	PresenceProps,
+	DialogOverlaySnippetProps
+>;
+
+export type DialogOverlayProps = DialogOverlayPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DialogOverlayPropsWithoutHTML>;
+
+export type DialogPortalPropsWithoutHTML = PortalProps;
+export type DialogPortalProps = DialogPortalPropsWithoutHTML;
+
+export type DialogTriggerPropsWithoutHTML = WithChild;
+
+export type DialogTriggerProps = DialogTriggerPropsWithoutHTML &
+	Without<BitsPrimitiveButtonAttributes, DialogTriggerPropsWithoutHTML>;
+
+export type DialogTitlePropsWithoutHTML = WithChild<{
+	/**
+	 * The heading level of the dialog title.
+	 */
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+
+export type DialogTitleProps = DialogTitlePropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DialogTitlePropsWithoutHTML>;
+
+export type DialogClosePropsWithoutHTML = DialogTriggerPropsWithoutHTML;
+export type DialogCloseProps = DialogTriggerProps;
+
+export type DialogDescriptionPropsWithoutHTML = WithChild;
+export type DialogDescriptionProps = DialogDescriptionPropsWithoutHTML &
+	Without<BitsPrimitiveDivAttributes, DialogDescriptionPropsWithoutHTML>;

package/src/lib/components/drawer/drawer-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Close, type CloseProps } from '../dialog/index.js';
+
+let { ref = $bindable(null), ...restProps }: CloseProps = $props();
+</script>
+
+<Close bind:ref data-slot="drawer-close" {...restProps} />

package/src/lib/components/drawer/drawer-content.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	// Vaul's drag physics need an in-flow, draggable <div>, not a top-layer native <dialog> — so the
+	// drawer keeps the headless JS-overlay content (the public Dialog.Content is now a native <dialog>).
+	import DialogContentHeadless from '../dialog/components/dialog-content-headless.svelte';
+	import { type WithChildren, boxWith } from '../../internal/tools/index.js';
+	import { mergeProps } from '../../internal/merge-props.js';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '../../internal/utils.js';
+	import { createId } from '../../internal/create-id.js';
+	import DrawerPortal from './drawer-portal.svelte';
+	import DrawerOverlay from './drawer-overlay.svelte';
+	import { useDrawerContent } from '../../internal/vaul/use-drawer-content.svelte.js';
+	import type { DrawerContentProps as ContentProps } from '../../internal/vaul/types.js';
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		onOpenAutoFocus = () => {},
+		onInteractOutside = () => {},
+		onFocusOutside = () => {},
+		oncontextmenu = () => {},
+		onpointerdown = () => {},
+		onpointerup = () => {},
+		onpointerout = () => {},
+		onpointermove = () => {},
+		children,
+		...restProps
+	}: WithChildren<WithoutChildrenOrChild<ContentProps>> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+	} = $props();
+
+	const contentState = useDrawerContent({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v),
+		),
+		oncontextmenu: boxWith(() => oncontextmenu ?? (() => {})),
+		onInteractOutside: boxWith(() => onInteractOutside),
+		onpointerdown: boxWith(() => onpointerdown ?? (() => {})),
+		onpointermove: boxWith(() => onpointermove ?? (() => {})),
+		onpointerout: boxWith(() => onpointerout ?? (() => {})),
+		onpointerup: boxWith(() => onpointerup ?? (() => {})),
+		onOpenAutoFocus: boxWith(() => onOpenAutoFocus),
+		onFocusOutside: boxWith(() => onFocusOutside),
+	});
+
+	const snapPointsOffset = $state.snapshot(contentState.ctx.snapPointsOffset);
+
+	const styleProp = $derived(
+		snapPointsOffset && snapPointsOffset.length > 0
+			? {
+					'--snap-point-height': `${snapPointsOffset[contentState.ctx.activeSnapPointIndex ?? 0]}px`,
+				}
+			: {},
+	);
+
+	const mergedProps = $derived(
+		mergeProps(
+			{
+				'data-slot': 'drawer-content',
+				class: join(
+					'group/drawer-content fixed z-50 flex h-auto flex-col bg-background',
+					'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80dvh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
+					'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80dvh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
+					'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:inset-e-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=right]:sm:max-w-sm',
+					'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:inset-s-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=left]:sm:max-w-sm',
+					className,
+				),
+			},
+			restProps,
+			contentState.props,
+			{ style: styleProp },
+		),
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	) as any;
+</script>
+
+<DrawerPortal {...portalProps}>
+	<DrawerOverlay />
+	<DialogContentHeadless {...mergedProps}>
+		<div class="bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block">
+		</div>
+		{@render children?.()}
+	</DialogContentHeadless>
+</DrawerPortal>

package/src/lib/components/drawer/drawer-description.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import { Description, type DescriptionProps } from '../dialog/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: DescriptionProps = $props();
+</script>
+
+<Description bind:ref data-slot="drawer-description" class={join('text-muted-foreground text-sm', className)} {...restProps} />

package/src/lib/components/drawer/drawer-footer.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="drawer-footer" class={join('mt-auto flex flex-col gap-2 p-4', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/drawer/drawer-header.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { join } from 'overrule';
+	import type { WithElementRef } from '../../internal/utils.js';
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="drawer-header" class={join('flex flex-col gap-1.5 p-4', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/drawer/drawer-nested.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+import DrawerRoot from './drawer.svelte';
+import type { DrawerRootProps as RootProps } from '../../internal/vaul/types.js';
+import { OpenCell } from '../../internal/open-cell.svelte.js';
+import { getDrawer } from '../../internal/vaul/use-drawer-root.svelte.js';
+
+let {
+	shouldScaleBackground = true,
+	open = false,
+	state: givenCell,
+	activeSnapPoint = $bindable(null),
+	onDrag = () => {},
+	...restProps
+}: Omit<RootProps, 'nested' | 'onRelease' | 'onClose' | 'open' | 'onOpenChange'> & {
+	/** Derivation source for the nested drawer's open state. Not bindable. */
+	open?: boolean;
+	/** A caller-constructed cell used instead of building one from `open`. */
+	state?: OpenCell;
+} = $props();
+
+const rootState = getDrawer();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const rest = $derived(restProps) as any;
+
+// svelte-ignore state_referenced_locally
+const cell = givenCell ?? new OpenCell(() => open);
+</script>
+
+<DrawerRoot
+	{shouldScaleBackground}
+	bind:activeSnapPoint
+	state={cell}
+	nested
+	onClose={() => rootState.onNestedOpenChange(false)}
+	onDrag={(e, p) => {
+		rootState.onNestedDrag(e, p);
+		onDrag(e, p);
+	}}
+	_internal_onOpenChange={(o) => {
+		if (o) rootState.onNestedOpenChange(o);
+	}}
+	onRelease={rootState.onNestedRelease}
+	{...rest}
+/>