compote-ui 0.80.0 → 0.81.0

package/dist/components/dialog/alert-dialog.svelte

@@ -1,73 +1,73 @@
-<script lang="ts">
-	import { PhX } from '../../icons';
-	import { Dialog } from '@ark-ui/svelte/dialog';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
-	import type { AlertDialogProps } from './dialog.types';
-
-	let {
-		open = $bindable(),
-		title,
-		description,
-		confirmLabel = 'Confirm',
-		cancelLabel = 'Cancel',
-		onConfirm,
-		onCancel,
-		variant = 'default',
-		lazyMount = true,
-		unmountOnExit = true,
-		...restProps
-	}: AlertDialogProps = $props();
-
-	const confirmClass = $derived(
-		variant === 'destructive'
-			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
-	);
-</script>
-
-<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
-	<Portal>
-		<Dialog.Backdrop
-			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		/>
-		<Dialog.Positioner
-			class="fixed inset-0 flex items-center justify-center"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		>
-			<Dialog.Content
-				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-				{...releaseFocusOnExitProps}
-			>
-				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
-					{title}
-				</Dialog.Title>
-				{#if description}
-					<Dialog.Description class="mt-2 text-sm text-ink-dim">
-						{#each Array.isArray(description) ? description : [description] as line, i (i)}
-							<span class="block">{line}</span>
-						{/each}
-					</Dialog.Description>
-				{/if}
-				<div class="mt-6 flex justify-end gap-3">
-					<Dialog.CloseTrigger
-						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
-						onclick={onCancel}
-					>
-						{cancelLabel}
-					</Dialog.CloseTrigger>
-					<button type="button" class={confirmClass} onclick={onConfirm}>
-						{confirmLabel}
-					</button>
-				</div>
-				<Dialog.CloseTrigger
-					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
-				>
-					<PhX class="h-4 w-4" />
-					<span class="sr-only">Close</span>
-				</Dialog.CloseTrigger>
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
-</Dialog.Root>
+<script lang="ts">
+	import { PhX } from '../../icons';
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+	import type { AlertDialogProps } from './dialog.types';
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		confirmLabel = 'Confirm',
+		cancelLabel = 'Cancel',
+		onConfirm,
+		onCancel,
+		variant = 'default',
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: AlertDialogProps = $props();
+
+	const confirmClass = $derived(
+		variant === 'destructive'
+			? 'inline-flex h-9 items-center justify-center rounded-md bg-red-600 px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-red-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+			: 'inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-ink-inverse shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+	);
+</script>
+
+<Dialog.Root role="alertdialog" bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	<Portal>
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		/>
+		<Dialog.Positioner
+			class="fixed inset-0 flex items-center justify-center"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		>
+			<Dialog.Content
+				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+				{...releaseFocusOnExitProps}
+			>
+				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
+					{title}
+				</Dialog.Title>
+				{#if description}
+					<Dialog.Description class="mt-2 text-sm text-ink-dim">
+						{#each Array.isArray(description) ? description : [description] as line, i (i)}
+							<span class="block">{line}</span>
+						{/each}
+					</Dialog.Description>
+				{/if}
+				<div class="mt-6 flex justify-end gap-3">
+					<Dialog.CloseTrigger
+						class="inline-flex h-9 items-center justify-center rounded-md border bg-surface-1 px-4 text-sm font-medium shadow-sm transition-colors hover:bg-surface-2 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
+						onclick={onCancel}
+					>
+						{cancelLabel}
+					</Dialog.CloseTrigger>
+					<button type="button" class={confirmClass} onclick={onConfirm}>
+						{confirmLabel}
+					</button>
+				</div>
+				<Dialog.CloseTrigger
+					class="absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none"
+				>
+					<PhX class="h-4 w-4" />
+					<span class="sr-only">Close</span>
+				</Dialog.CloseTrigger>
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

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

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import { Dialog } from '@ark-ui/svelte/dialog';
-	import { Portal } from '@ark-ui/svelte/portal';
-	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
-	import { cn } from 'tailwind-variants';
-	import type { DialogProps } from './dialog.types';
-
-	let {
-		open = $bindable(),
-		children,
-		contentClass,
-		lazyMount = true,
-		unmountOnExit = true,
-		onOpenChange,
-		...restProps
-	}: DialogProps = $props();
-
-	function handleOpenChange(details: { open: boolean }) {
-		open = details.open;
-		onOpenChange?.(details);
-	}
-</script>
-
-<Dialog.Root {open} {lazyMount} {unmountOnExit} onOpenChange={handleOpenChange} {...restProps}>
-	<Portal>
-		<Dialog.Backdrop
-			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		/>
-		<Dialog.Positioner
-			class="fixed inset-0 flex items-center justify-center p-4"
-			style="z-index: calc(50 + var(--layer-index, 0))"
-		>
-			<Dialog.Content
-				class={cn(
-					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-					contentClass
-				)}
-				{...releaseFocusOnExitProps}
-			>
-				{@render children()}
-			</Dialog.Content>
-		</Dialog.Positioner>
-	</Portal>
-</Dialog.Root>
+<script lang="ts">
+	import { Dialog } from '@ark-ui/svelte/dialog';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+	import { cn } from 'tailwind-variants';
+	import type { DialogProps } from './dialog.types';
+
+	let {
+		open = $bindable(),
+		children,
+		contentClass,
+		lazyMount = true,
+		unmountOnExit = true,
+		onOpenChange,
+		...restProps
+	}: DialogProps = $props();
+
+	function handleOpenChange(details: { open: boolean }) {
+		open = details.open;
+		onOpenChange?.(details);
+	}
+</script>
+
+<Dialog.Root {open} {lazyMount} {unmountOnExit} onOpenChange={handleOpenChange} {...restProps}>
+	<Portal>
+		<Dialog.Backdrop
+			class="fixed inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		/>
+		<Dialog.Positioner
+			class="fixed inset-0 flex items-center justify-center p-4"
+			style="z-index: calc(50 + var(--layer-index, 0))"
+		>
+			<Dialog.Content
+				class={cn(
+					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+					contentClass
+				)}
+				{...releaseFocusOnExitProps}
+			>
+				{@render children()}
+			</Dialog.Content>
+		</Dialog.Positioner>
+	</Portal>
+</Dialog.Root>

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

@@ -1,213 +1,213 @@
-<script lang="ts">
-	import { Drawer } from '@ark-ui/svelte/drawer';
-	import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
-	import type { ClassValue } from 'svelte/elements';
-	import { cn } from 'tailwind-variants';
-	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
-
-	interface Props extends DrawerContentBaseProps {
-		class?: ClassValue;
-		backdropClass?: ClassValue;
-		positionerClass?: ClassValue;
-		maxWidth?: string;
-		maxHeight?: string;
-	}
-
-	let {
-		class: className,
-		backdropClass,
-		positionerClass,
-		maxWidth,
-		maxHeight,
-		children,
-		draggable = false,
-		...rest
-	}: Props = $props();
-</script>
-
-<Drawer.Backdrop
-	class={cn(
-		'fixed inset-0 z-50 bg-black/50',
-		'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
-		'data-[state=open]:animate-in data-[state=open]:fade-in-0',
-		backdropClass
-	)}
-/>
-<Drawer.Positioner
-	class={cn(
-		'fixed inset-0 z-50 flex items-end justify-center',
-		'data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start',
-		'data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end',
-		'data-[swipe-direction=up]:items-start',
-		positionerClass
-	)}
->
-	<Drawer.Content
-		{...rest}
-		{draggable}
-		style={[
-			maxWidth && `--drawer-max-width:${maxWidth}`,
-			maxHeight && `--drawer-max-height:${maxHeight}`
-		]
-			.filter(Boolean)
-			.join(';')}
-		class={cn(
-			'pointer-events-auto relative flex h-full w-full flex-col bg-surface-1 shadow-xl outline-none',
-			className
-		)}
-		{...releaseFocusOnExitProps}
-	>
-		{@render children?.()}
-	</Drawer.Content>
-</Drawer.Positioner>
-
-<style>
-	/* Side drawers: grabber becomes an absolutely-positioned vertical strip on the open edge */
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
-			[data-scope='drawer'][data-part='grabber'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
-			[data-scope='drawer'][data-part='grabber']
-	) {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: auto;
-		height: 100%;
-		padding: 0 0.75rem;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
-			[data-scope='drawer'][data-part='grabber']
-	) {
-		right: 0;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
-			[data-scope='drawer'][data-part='grabber']
-	) {
-		left: 0;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
-			[data-scope='drawer'][data-part='grabber-indicator'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
-			[data-scope='drawer'][data-part='grabber-indicator']
-	) {
-		width: 4px;
-		height: 2.5rem;
-	}
-
-	/* Bottom/top drawers: cap height, overridable via --drawer-max-height */
-	:global(
-		[data-scope='drawer'][data-part='content']:not([data-swipe-direction]),
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='up']
-	) {
-		max-height: var(--drawer-max-height, 96svh);
-	}
-
-	/* Side drawers: constrain width, remove height cap — overridable via --drawer-max-width */
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
-	) {
-		max-width: var(--drawer-max-width, 25rem);
-		max-height: none;
-	}
-
-	/* Bleed pseudo-element so background extends past rounded corners on the open edge */
-	:global([data-scope='drawer'][data-part='content'])::after {
-		content: '';
-		position: absolute;
-		left: 0;
-		right: 0;
-		top: 100%;
-		height: 50px;
-		background: inherit;
-		pointer-events: none;
-	}
-
-	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='up'])::after {
-		top: auto;
-		bottom: 100%;
-	}
-
-	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='left'])::after {
-		top: 0;
-		bottom: 0;
-		left: auto;
-		right: 100%;
-		width: 50px;
-		height: auto;
-	}
-
-	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='right'])::after {
-		top: 0;
-		bottom: 0;
-		right: auto;
-		left: 100%;
-		width: 50px;
-		height: auto;
-	}
-
-	:global([data-scope='drawer'][data-part='content'][data-state='open']) {
-		animation-name: enter;
-		animation-duration: 500ms;
-		animation-fill-mode: both;
-	}
-	:global([data-scope='drawer'][data-part='content'][data-state='closed']) {
-		animation-name: exit;
-		animation-duration: 300ms;
-		animation-fill-mode: both;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='open'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='open']
-	) {
-		--tw-enter-translate-y: 100%;
-	}
-	:global(
-		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='closed'],
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='closed']
-	) {
-		--tw-exit-translate-y: 100%;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='open']
-	) {
-		--tw-enter-translate-y: -100%;
-	}
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='closed']
-	) {
-		--tw-exit-translate-y: -100%;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='open']
-	) {
-		--tw-enter-translate-x: -100%;
-	}
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='closed']
-	) {
-		--tw-exit-translate-x: -100%;
-	}
-
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='open']
-	) {
-		--tw-enter-translate-x: 100%;
-	}
-	:global(
-		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='closed']
-	) {
-		--tw-exit-translate-x: 100%;
-	}
-</style>
+<script lang="ts">
+	import { Drawer } from '@ark-ui/svelte/drawer';
+	import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
+
+	interface Props extends DrawerContentBaseProps {
+		class?: ClassValue;
+		backdropClass?: ClassValue;
+		positionerClass?: ClassValue;
+		maxWidth?: string;
+		maxHeight?: string;
+	}
+
+	let {
+		class: className,
+		backdropClass,
+		positionerClass,
+		maxWidth,
+		maxHeight,
+		children,
+		draggable = false,
+		...rest
+	}: Props = $props();
+</script>
+
+<Drawer.Backdrop
+	class={cn(
+		'fixed inset-0 z-50 bg-black/50',
+		'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+		'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+		backdropClass
+	)}
+/>
+<Drawer.Positioner
+	class={cn(
+		'fixed inset-0 z-50 flex items-end justify-center',
+		'data-[swipe-direction=left]:items-stretch data-[swipe-direction=left]:justify-start',
+		'data-[swipe-direction=right]:items-stretch data-[swipe-direction=right]:justify-end',
+		'data-[swipe-direction=up]:items-start',
+		positionerClass
+	)}
+>
+	<Drawer.Content
+		{...rest}
+		{draggable}
+		style={[
+			maxWidth && `--drawer-max-width:${maxWidth}`,
+			maxHeight && `--drawer-max-height:${maxHeight}`
+		]
+			.filter(Boolean)
+			.join(';')}
+		class={cn(
+			'pointer-events-auto relative flex h-full w-full flex-col bg-surface-1 shadow-xl outline-none',
+			className
+		)}
+		{...releaseFocusOnExitProps}
+	>
+		{@render children?.()}
+	</Drawer.Content>
+</Drawer.Positioner>
+
+<style>
+	/* Side drawers: grabber becomes an absolutely-positioned vertical strip on the open edge */
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
+			[data-scope='drawer'][data-part='grabber'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
+			[data-scope='drawer'][data-part='grabber']
+	) {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: auto;
+		height: 100%;
+		padding: 0 0.75rem;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
+			[data-scope='drawer'][data-part='grabber']
+	) {
+		right: 0;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
+			[data-scope='drawer'][data-part='grabber']
+	) {
+		left: 0;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left']
+			[data-scope='drawer'][data-part='grabber-indicator'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
+			[data-scope='drawer'][data-part='grabber-indicator']
+	) {
+		width: 4px;
+		height: 2.5rem;
+	}
+
+	/* Bottom/top drawers: cap height, overridable via --drawer-max-height */
+	:global(
+		[data-scope='drawer'][data-part='content']:not([data-swipe-direction]),
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='up']
+	) {
+		max-height: var(--drawer-max-height, 96svh);
+	}
+
+	/* Side drawers: constrain width, remove height cap — overridable via --drawer-max-width */
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right']
+	) {
+		max-width: var(--drawer-max-width, 25rem);
+		max-height: none;
+	}
+
+	/* Bleed pseudo-element so background extends past rounded corners on the open edge */
+	:global([data-scope='drawer'][data-part='content'])::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 100%;
+		height: 50px;
+		background: inherit;
+		pointer-events: none;
+	}
+
+	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='up'])::after {
+		top: auto;
+		bottom: 100%;
+	}
+
+	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='left'])::after {
+		top: 0;
+		bottom: 0;
+		left: auto;
+		right: 100%;
+		width: 50px;
+		height: auto;
+	}
+
+	:global([data-scope='drawer'][data-part='content'][data-swipe-direction='right'])::after {
+		top: 0;
+		bottom: 0;
+		right: auto;
+		left: 100%;
+		width: 50px;
+		height: auto;
+	}
+
+	:global([data-scope='drawer'][data-part='content'][data-state='open']) {
+		animation-name: enter;
+		animation-duration: 500ms;
+		animation-fill-mode: both;
+	}
+	:global([data-scope='drawer'][data-part='content'][data-state='closed']) {
+		animation-name: exit;
+		animation-duration: 300ms;
+		animation-fill-mode: both;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='open'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='open']
+	) {
+		--tw-enter-translate-y: 100%;
+	}
+	:global(
+		[data-scope='drawer'][data-part='content']:not([data-swipe-direction])[data-state='closed'],
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='down'][data-state='closed']
+	) {
+		--tw-exit-translate-y: 100%;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='open']
+	) {
+		--tw-enter-translate-y: -100%;
+	}
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='up'][data-state='closed']
+	) {
+		--tw-exit-translate-y: -100%;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='open']
+	) {
+		--tw-enter-translate-x: -100%;
+	}
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='left'][data-state='closed']
+	) {
+		--tw-exit-translate-x: -100%;
+	}
+
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='open']
+	) {
+		--tw-enter-translate-x: 100%;
+	}
+	:global(
+		[data-scope='drawer'][data-part='content'][data-swipe-direction='right'][data-state='closed']
+	) {
+		--tw-exit-translate-x: 100%;
+	}
+</style>