@heyramzi/ui 3.2.0 → 3.3.1

package/dist/components/list-page/toolbar-density.js

@@ -15,12 +15,31 @@ export function getToolbarDensity() {
 */
 // WHY `max-content` on a probe, not the row's own width: the row is sized by
 // its container, so reading it back always says "it fits" (see collapse.ts).
+// WHY `flex: none` too: a row that is itself a flex item takes its width from
+// flex-basis, so `max-content` alone read back the container (10 Nov 2026).
+// WHY transitions are stopped: under reduced motion `tokens/base.css` gives every
+// element an 80ms transition on `all`, so the probe's own width change started a
+// transition and the read got the old width. The row never folded at 390px and
+// axe flagged the squeezed search field (gallery, 10 Nov 2026). The last fold's
+// gap and shrink changes are still running then too, so they're finished first.
 export function naturalRowWidth(row) {
-	const { width, flexWrap } = row.style;
+	for (const animation of row.getAnimations({ subtree: true })) {
+		if (animation instanceof CSSTransition) animation.finish();
+	}
+	const { width, flexWrap, flex } = row.style;
+	const transition = row.style.getPropertyValue("transition");
+	const priority = row.style.getPropertyPriority("transition");
+	row.style.setProperty("transition", "none", "important");
 	row.style.width = "max-content";
 	row.style.flexWrap = "nowrap";
+	row.style.flex = "none";
 	const needed = row.getBoundingClientRect().width;
 	row.style.width = width;
 	row.style.flexWrap = flexWrap;
+	row.style.flex = flex;
+	// The restored size has to settle before transitions come back, or the
+	// row would animate back from its probe width.
+	void row.offsetWidth;
+	row.style.setProperty("transition", transition, priority);
 	return needed;
 }

package/dist/shadcn/drawer/index.js

@@ -0,0 +1,14 @@
+import Close from "../../../src/shadcn/drawer/drawer-close.svelte";
+import Content from "../../../src/shadcn/drawer/drawer-content.svelte";
+import Description from "../../../src/shadcn/drawer/drawer-description.svelte";
+import Footer from "../../../src/shadcn/drawer/drawer-footer.svelte";
+import Header from "../../../src/shadcn/drawer/drawer-header.svelte";
+import NestedRoot from "../../../src/shadcn/drawer/drawer-nested.svelte";
+import Overlay from "../../../src/shadcn/drawer/drawer-overlay.svelte";
+import Portal from "../../../src/shadcn/drawer/drawer-portal.svelte";
+import Title from "../../../src/shadcn/drawer/drawer-title.svelte";
+import Trigger from "../../../src/shadcn/drawer/drawer-trigger.svelte";
+import Root from "../../../src/shadcn/drawer/drawer.svelte";
+export { Root, NestedRoot, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, 
+//
+ Root as Drawer, NestedRoot as DrawerNestedRoot, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -353,6 +353,7 @@
     "svelte-sonner": "^1.2.3",
     "svelte2tsx": "^0.7.63",
     "typescript": "~7.0.2",
+    "vaul-svelte": "1.0.0-next.7",
     "vite-plus": "1.5.0"
   },
   "peerDependencies": {
@@ -361,7 +362,8 @@
     "bits-ui": "^2.19.5",
     "mode-watcher": "^1.1.0",
     "svelte": "^5.57.2",
-    "svelte-sonner": "^1.2.1"
+    "svelte-sonner": "^1.2.1",
+    "vaul-svelte": "^1.0.0-next.7"
   },
   "peerDependenciesMeta": {
     "mode-watcher": {
@@ -375,6 +377,9 @@
     },
     "@xyflow/svelte": {
       "optional": true
+    },
+    "vaul-svelte": {
+      "optional": true
     }
   },
   "scripts": {

package/scripts/sync-shadcn.mjs

@@ -79,7 +79,6 @@ const NOT_SHIPPED = new Set([
   "carousel",
   "chart",
   "data-table",
-  "drawer",
   "form",
   "kbd",
   "menubar",

package/src/components/list-page/filter-popover.svelte

@@ -9,6 +9,7 @@
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
 	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+	import { getToolbarDensity } from "./toolbar-density.js";
 	import CountChip from "../chip/count-chip.svelte";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
@@ -59,6 +60,10 @@
 	// =========================
 	let hasCount = $derived(count > 0);
 	let isActive = $derived(active ?? hasCount);
+	// In a list-page toolbar that ran out of room even with its tabs folded,
+	// the trigger keeps its icon and count and drops the word. See `ListPageShell`.
+	const density = getToolbarDensity();
+	let iconOnly = $derived(density?.tight === true);
 
 	// =========================
 	// STATE
@@ -80,9 +85,19 @@
 <!-- MARKUP -->
 <!-- =========================== -->
 <DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
+	<DropdownMenu.Trigger
+		class={toolbarTriggerClass({
+			active: isActive,
+			className: cn(
+				iconOnly && !hasCount && !trailing && "aspect-square justify-center px-0",
+				triggerClass,
+			),
+		})}
+		title={iconOnly ? label : undefined}
+	>
 		<IconComponent aria-hidden="true" class="size-3.5" />
-		<span>{label}</span>
+		<!-- Hidden, not dropped: the label stays the trigger's accessible name. -->
+		<span class={cn(iconOnly && "sr-only")}>{label}</span>
 		{#if trailing}
 			{@render trailing()}
 		{/if}

package/src/components/list-page/list-page-shell.svelte

@@ -2,7 +2,9 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import type { Snippet } from "svelte";
+	import { flushSync, tick, untrack, type Snippet } from "svelte";
+	import { MagnifyingGlass, X } from "phosphor-svelte";
+	import { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
 	import EmptyState from "./empty-state.svelte";
 	import { cn } from "../../lib/utils.js";
 	import { pageGutterClass } from "../../lib/layout.js";
@@ -40,6 +42,11 @@
 		content?: Snippet;
 		empty?: Snippet;
 		extra?: Snippet;
+		/** The folded search icon's name, on a toolbar too narrow for the field.
+		 *  Translate at the call site. */
+		searchLabel?: string;
+		/** The close button's name once the folded search is open. */
+		closeSearchLabel?: string;
 	}
 
 	// =========================
@@ -61,6 +68,8 @@
 		content,
 		empty,
 		extra,
+		searchLabel = "Search",
+		closeSearchLabel = "Close search",
 	}: Props = $props();
 
 	// =========================
@@ -69,16 +78,33 @@
 	// Null off an app shell, where the toolbar just has no section strip to draw.
 	const section = getSectionHost();
 	let row = $state<HTMLElement>();
-	let tabsBox = $state<HTMLElement>();
-	// True when the row at full size would wrap. The tabs then draw as one
-	// dropdown, the first control with a smaller self that still does its job.
-	let compact = $state(false);
+	// How far the row has folded to stay on one line. 0 is full size; 1 folds
+	// the tabs into a dropdown; 2 also drops the filter and display labels;
+	// 3 also turns search into an icon that opens the field across the row.
+	type Level = 0 | 1 | 2 | 3;
+	const DEEPEST: Level = 3;
+	let level = $state<Level>(0);
+	let searchOpen = $state(false);
+	let searchLayer = $state<HTMLElement>();
 	setToolbarDensity({
 		get compact() {
-			return compact;
+			return level >= 1;
+		},
+		get tight() {
+			return level >= 2;
 		},
 	});
 
+	// =========================
+	// HANDLERS
+	// =========================
+	// Focus lands in the field, since opening it is asking to type.
+	async function openSearch() {
+		searchOpen = true;
+		await tick();
+		searchLayer?.querySelector<HTMLElement>("input, [contenteditable]")?.focus();
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -101,22 +127,39 @@
 		if (!hasToolbar) return;
 		return section?.claim();
 	});
+	// Widened past the last fold, the field is back in the row, so the open
+	// layer has nothing left to cover.
+	$effect(() => {
+		if (level < DEEPEST) searchOpen = false;
+	});
 	// One row, never two (Ramzi, 9 Nov 2026): /tasks at 1500px put its status
 	// tabs and actions on a second line under search and filters.
-	// WHY the tabs' full width is remembered: once folded, the row only holds the
-	// dropdown, and a probe of it would say the full strip fits when it doesn't.
+	// Then 620px and 420px still wrapped, the filters on a line of their own, so
+	// a second fold drops their labels (10 Nov 2026).
+	// WHY each level's width is remembered: a folded row only holds the smaller
+	// controls, and a probe of it can't say whether the larger ones would fit.
+	// The probe refreshes the current level's entry, so new counts or chips
+	// cost at most one extra step before the row settles.
 	$effect(() => {
 		if (!row) return;
 		const el = row;
-		let fullTabs = 0;
+		const needs = [Infinity, Infinity, Infinity, Infinity];
 		let frame = 0;
+		// WHY settled in one pass with flushSync, not a frame per level: a phone
+		// load walked 0 to 3 over four frames, and axe read the squeezed search
+		// field in between (gallery, 390px).
 		const measure = () => {
 			frame = 0;
-			const needed = naturalRowWidth(el);
-			const tabs = tabsBox?.getBoundingClientRect().width ?? 0;
-			if (!compact) fullTabs = tabs;
-			const full = compact ? needed - tabs + fullTabs : needed;
-			compact = full > el.clientWidth + 0.5;
+			for (let step = 0; step <= DEEPEST * 2; step++) {
+				const room = el.clientWidth + 0.5;
+				const at = untrack(() => level);
+				needs[at] = naturalRowWidth(el);
+				let next = at;
+				if (needs[at] > room && at < DEEPEST) next = (at + 1) as Level;
+				else if (at > 0 && needs[at - 1] <= room) next = (at - 1) as Level;
+				if (next === at) return;
+				flushSync(() => (level = next));
+			}
 		};
 		// A frame's delay folds a burst of resizes into one probe and keeps the
 		// observer from looping on its own state change.
@@ -160,68 +203,111 @@
 		{#if hasToolbar}
 			<!-- One row on every list page: search and filters left, then tabs,
 			     view toggle and primary action right. -->
-			<!-- Without room, `order` keeps the actions beside search and drops
-			     filters to a scrolling line below. flex-wrap stays on at every width. -->
-			<!-- A container query, not a breakpoint: an 834px iPad read as desktop
-			     and clipped a 733px toolbar into a 538px column. -->
+			<!-- The row never wraps. Short of room it folds the tabs, then drops the
+			     filter and display labels; past that, search and the filters strip
+			     shrink and the strip scrolls. The actions never shrink. -->
 			<!-- Sticky, because the section tabs live here. `-mx-4 px-4` covers the
 			     gutter, `-mt-4 py-4` pulls the top padding inside the sticky box. -->
+			<!-- `data-fold` lets a caller's own control fold too: a primary button
+			     writes `group-data-[fold=3]/toolbar:sr-only` on its label. -->
 			<div
-				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
+				data-fold={level}
+				class="group/toolbar @container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-card/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-card/70"
 			>
-				<!-- Folded and still short of room, the row stops wrapping and the
-				     filters strip scrolls, since it's the one part that already can. -->
-				<div
-					bind:this={row}
-					class={cn(
-						"flex flex-wrap items-center gap-2",
-						compact && "@3xl/toolbar:flex-nowrap",
-						toolbarClass,
-					)}
-				>
-					<!-- The section tabs lead: which page comes before which slice of it.
-					     One row replaces two rows that held four controls. -->
+				<!-- WHY the section strip sits outside the measured row: it's the nav
+				     between pages, and under 768px it takes a line of its own above the
+				     toolbar. Counted in the probe, it folded controls that had room. -->
+				<!-- A container query, not a breakpoint: an 834px iPad read as desktop
+				     and clipped a 733px toolbar into a 538px column. -->
+				<div class="flex flex-wrap items-center gap-2">
 					{#if section?.strip}
-						<SectionRuns
-							strip={section.strip}
-							class="order-first w-full max-w-full @3xl/toolbar:w-auto"
-						/>
-					{/if}
-					{#if search}
-						<div class="order-1 flex min-w-0 flex-1 items-center @3xl/toolbar:flex-none">
-							{@render search()}
-						</div>
+						<SectionRuns strip={section.strip} class="w-full max-w-full @3xl/toolbar:w-auto" />
 					{/if}
-					{#if tabs || rightActions}
-						<!-- Shrinks and wraps, not shrink-0: /tasks needs 610px here, and
-						     shrink-0 clipped its last control off an iPad screen. -->
-						<div
-							class={cn(
-								"order-2 flex min-w-0 flex-wrap items-center gap-2 @3xl/toolbar:order-3",
-								hasLeading ? "@3xl/toolbar:ms-auto" : "flex-1",
-								compact && "@3xl/toolbar:shrink-0",
-							)}
-						>
-							{#if tabs}
-								<div
-									bind:this={tabsBox}
-									class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}
-								>
-									{@render tabs()}
+					<div
+						bind:this={row}
+						class={cn(
+							"relative flex min-w-0 flex-1 flex-nowrap items-center",
+							// Icon triggers sit closer: at 390px the last fold was 4px over.
+							level >= 2 ? "gap-1.5" : "gap-2",
+							toolbarClass,
+						)}
+					>
+						{#if search && level < DEEPEST}
+							<div class="flex min-w-0 shrink items-center">
+								{@render search()}
+							</div>
+						{:else if search && !searchOpen}
+							<!-- WHY a fold and not a squeeze: at 390px the field shrank under
+							     axe's 24px target size and showed two letters of its placeholder. -->
+							<button
+								type="button"
+								class={toolbarTriggerClass({
+									className: "aspect-square shrink-0 justify-center px-0",
+								})}
+								aria-label={searchLabel}
+								title={searchLabel}
+								onclick={openSearch}
+							>
+								<MagnifyingGlass aria-hidden="true" class="size-3.5" />
+							</button>
+						{:else if search}
+							<!-- Open, the field covers the whole row; Escape or the close
+							     button hands the row back, with the query kept. -->
+							<div
+								bind:this={searchLayer}
+								role="search"
+								class="absolute inset-0 z-10 flex items-center gap-2 bg-card"
+								onkeydown={(event) => {
+									if (event.key === "Escape") searchOpen = false;
+								}}
+							>
+								<div class="flex min-w-0 flex-1 items-center [&>*]:w-full [&>*]:max-w-none">
+									{@render search()}
 								</div>
-							{/if}
-							{#if rightActions}
-								{@render rightActions()}
-							{/if}
-						</div>
-					{/if}
-					{#if filters}
-						<div
-							class="no-scrollbar order-3 flex w-full max-w-full min-w-0 items-center gap-2 overflow-x-auto @3xl/toolbar:order-2 @3xl/toolbar:w-auto"
-						>
-							{@render filters()}
-						</div>
-					{/if}
+								<button
+									type="button"
+									class={toolbarTriggerClass({
+										className: "aspect-square shrink-0 justify-center px-0",
+									})}
+									aria-label={closeSearchLabel}
+									onclick={() => (searchOpen = false)}
+								>
+									<X aria-hidden="true" class="size-3.5" />
+								</button>
+							</div>
+						{/if}
+						{#if filters}
+							<!-- Tight, the strip stops shrinking: squeezed under its icon
+							     trigger, the trigger slid beneath the tabs (420px). Its
+							     chips scroll inside a capped width instead. -->
+							<div
+								class={cn(
+									"no-scrollbar flex min-w-0 items-center gap-2 overflow-x-auto",
+									level >= 2 ? "max-w-40 shrink-0" : "shrink",
+								)}
+							>
+								{@render filters()}
+							</div>
+						{/if}
+						{#if tabs || rightActions}
+							<div
+								class={cn(
+									"flex shrink-0 items-center",
+									level >= 2 ? "gap-1.5" : "gap-2",
+									hasLeading ? "ms-auto" : "flex-1",
+								)}
+							>
+								{#if tabs}
+									<div class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}>
+										{@render tabs()}
+									</div>
+								{/if}
+								{#if rightActions}
+									{@render rightActions()}
+								{/if}
+							</div>
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/if}

package/src/components/list-page/list-page-shell.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
 type EmptyConfig = {
     icon?: PhosphorIcon;
@@ -25,6 +25,11 @@ interface Props {
     content?: Snippet;
     empty?: Snippet;
     extra?: Snippet;
+    /** The folded search icon's name, on a toolbar too narrow for the field.
+     *  Translate at the call site. */
+    searchLabel?: string;
+    /** The close button's name once the folded search is open. */
+    closeSearchLabel?: string;
 }
 declare const $$Component: import("svelte").Component<Props, {}, "">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/components/list-page/toolbar-density.ts

@@ -5,7 +5,11 @@ import { getContext, setContext } from "svelte";
  * its row and sets this; a control inside it reads it and draws a smaller self.
  */
 export interface ToolbarDensity {
+  /** The tabs fold into one dropdown. */
   readonly compact: boolean;
+  /** Folded and still short: a filter or display trigger drops its label and
+   *  keeps the icon, so the row never wraps (TSK-2121, 420px). Implies compact. */
+  readonly tight: boolean;
 }
 
 // WHY context: the shell owns the measurement and 26 pages render their tabs
@@ -27,12 +31,31 @@ export function getToolbarDensity(): ToolbarDensity | undefined {
  */
 // WHY `max-content` on a probe, not the row's own width: the row is sized by
 // its container, so reading it back always says "it fits" (see collapse.ts).
+// WHY `flex: none` too: a row that is itself a flex item takes its width from
+// flex-basis, so `max-content` alone read back the container (10 Nov 2026).
+// WHY transitions are stopped: under reduced motion `tokens/base.css` gives every
+// element an 80ms transition on `all`, so the probe's own width change started a
+// transition and the read got the old width. The row never folded at 390px and
+// axe flagged the squeezed search field (gallery, 10 Nov 2026). The last fold's
+// gap and shrink changes are still running then too, so they're finished first.
 export function naturalRowWidth(row: HTMLElement): number {
-  const { width, flexWrap } = row.style;
+  for (const animation of row.getAnimations({ subtree: true })) {
+    if (animation instanceof CSSTransition) animation.finish();
+  }
+  const { width, flexWrap, flex } = row.style;
+  const transition = row.style.getPropertyValue("transition");
+  const priority = row.style.getPropertyPriority("transition");
+  row.style.setProperty("transition", "none", "important");
   row.style.width = "max-content";
   row.style.flexWrap = "nowrap";
+  row.style.flex = "none";
   const needed = row.getBoundingClientRect().width;
   row.style.width = width;
   row.style.flexWrap = flexWrap;
+  row.style.flex = flex;
+  // The restored size has to settle before transitions come back, or the
+  // row would animate back from its probe width.
+  void row.offsetWidth;
+  row.style.setProperty("transition", transition, priority);
   return needed;
 }

package/src/shadcn/drawer/drawer-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

package/src/shadcn/drawer/drawer-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { WithoutChildrenOrChild } from "../../lib/utils.js";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: DrawerPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+	} = $props();
+</script>
+
+<DrawerPortal {...portalProps}>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		bind:ref
+		data-slot="drawer-content"
+		class={cn(
+			"bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b group/drawer-content fixed z-50 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-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 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-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+			className
+		)}
+		{...restProps}
+	>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
+		{@render children?.()}
+	</DrawerPrimitive.Content>
+</DrawerPortal>

package/src/shadcn/drawer/drawer-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import type { WithoutChildrenOrChild } from "../../lib/utils.js";
+import DrawerPortal from "./drawer-portal.svelte";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = DrawerPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+	bind:ref
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/src/shadcn/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.DescriptionProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/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={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/drawer/drawer-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/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-header"
+	class={cn(
+		"gap-0.5 p-4 md:gap-1.5 md:text-left flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/drawer/drawer-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-nested.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(null),
+		...restProps
+	}: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />

package/src/shadcn/drawer/drawer-nested.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<import("vaul-svelte").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.OverlayProps = $props();
+</script>
+
+<DrawerPrimitive.Overlay
+	bind:ref
+	data-slot="drawer-overlay"
+	class={cn(
+		"bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/drawer/drawer-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.OverlayProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ...restProps }: DrawerPrimitive.PortalProps = $props();
+</script>
+
+<DrawerPrimitive.Portal {...restProps} />

package/src/shadcn/drawer/drawer-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.TitleProps = $props();
+</script>
+
+<DrawerPrimitive.Title
+	bind:ref
+	data-slot="drawer-title"
+	class={cn("cn-font-heading text-foreground font-medium", className)}
+	{...restProps}
+/>

package/src/shadcn/drawer/drawer-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.TitleProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
+</script>
+
+<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />

package/src/shadcn/drawer/drawer-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let {
+		shouldScaleBackground = true,
+		open = $bindable(false),
+		activeSnapPoint = $bindable(null),
+		...restProps
+	}: DrawerPrimitive.RootProps = $props();
+</script>
+
+<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />

package/src/shadcn/drawer/drawer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const $$Component: import("svelte").Component<import("vaul-svelte").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/index.ts

@@ -0,0 +1,38 @@
+import Close from "./drawer-close.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Portal from "./drawer-portal.svelte";
+import Title from "./drawer-title.svelte";
+import Trigger from "./drawer-trigger.svelte";
+import Root from "./drawer.svelte";
+
+export {
+	Root,
+	NestedRoot,
+	Content,
+	Description,
+	Overlay,
+	Footer,
+	Header,
+	Title,
+	Trigger,
+	Portal,
+	Close,
+
+	//
+	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
+	Content as DrawerContent,
+	Description as DrawerDescription,
+	Overlay as DrawerOverlay,
+	Footer as DrawerFooter,
+	Header as DrawerHeader,
+	Title as DrawerTitle,
+	Trigger as DrawerTrigger,
+	Portal as DrawerPortal,
+	Close as DrawerClose,
+};