diff --git a/.changeset/bright-tools-gather.md b/.changeset/bright-tools-gather.md
new file mode 100644
index 0000000..b59044e
--- /dev/null
+++ b/.changeset/bright-tools-gather.md
@@ -0,0 +1,7 @@
+---
+"@karnstack/dowel": minor
+---
+
+Add Accordion, Breadcrumbs, Calendar and DatePicker, Collapsible, Combobox, CommandMenu, ContextMenu, Drawer, FileUpload and Dropzone, List collection primitives, Pagination, Progress, Slider, Toast with a global manager, ToggleGroup, and TreeView.
+
+Calendar and DatePicker use React Aria behavior and timezone-safe `CalendarDate` values from `@internationalized/date`.
diff --git a/README.md b/README.md
index 36803c6..7c4b996 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ The system theme is the default. Pass `light` or `dark` to pin a theme.
 
 ## Components
 
-Alert Dialog · Avatar · Badge · Button · Callout · Checkbox · Composer · Data Table · Dialog · Empty State · Icon Button · Input · Kbd · Menu · Native Select · Popover · Property Picker · Radio Group · Search Field · Select · Separator · Sidebar · Skeleton · Spinner · Status · Switch · Tabs · Tooltip
+Alert Dialog · Avatar · Badge · Button · Callout · Checkbox · Combobox · Command Menu · Composer · Data Table · Dialog · Drawer · Empty State · Icon Button · Input · Kbd · List · Menu · Native Select · Popover · Progress · Property Picker · Radio Group · Search Field · Select · Separator · Sidebar · Skeleton · Spinner · Status · Switch · Tabs · Toast · Tooltip
 
 Every component is keyboard tested and axe checked. The rendered catalog is contrast tested against WCAG 2.2 AA in light and dark. Visual controls own their appearance. Layout primitives accept application shell hooks.
 
diff --git a/apps/docs/src/components/command-search.tsx b/apps/docs/src/components/command-search.tsx
index 5b74315..611f412 100644
--- a/apps/docs/src/components/command-search.tsx
+++ b/apps/docs/src/components/command-search.tsx
@@ -1,135 +1,39 @@
-import { Dialog, Input, Kbd } from "@karnstack/dowel";
+import { CommandMenu } from "@karnstack/dowel";
 import { useNavigate } from "@tanstack/react-router";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 
-import { componentNav } from "../lib/nav";
-import { SearchIcon } from "./icons";
-
-const allComponents = {
-  title: "All components",
-  to: "/components" as const,
-  summary: "Browse every component in the library.",
-};
+import { nav } from "../lib/nav";
 
 export function CommandSearch({
-  open,
   onOpenChange,
 }: {
-  open: boolean;
   onOpenChange: (open: boolean) => void;
 }) {
   const navigate = useNavigate();
-  const [query, setQuery] = useState("");
-  const [activeIndex, setActiveIndex] = useState(0);
-  const results = useMemo(() => {
-    const normalized = query.trim().toLowerCase();
-    const items = [allComponents, ...componentNav];
-    if (!normalized) return items;
-    return items.filter((item) =>
-      `${item.title} ${item.summary}`.toLowerCase().includes(normalized),
-    );
-  }, [query]);
-
-  useEffect(() => setActiveIndex(0), [query]);
-  useEffect(() => {
-    if (!open) setQuery("");
-  }, [open]);
-
-  function openResult(index: number) {
-    const result = results[index];
-    if (!result) return;
-    onOpenChange(false);
-    void navigate({ to: result.to });
-  }
+  const items = useMemo(
+    () =>
+      nav.flatMap((section) =>
+        section.items.map((item) => ({
+          id: `${section.title}:${item.to}`,
+          label: item.title,
+          description: item.summary,
+          group: section.title,
+          keywords: [section.title],
+          onSelect: () => void navigate({ to: item.to }),
+        })),
+      ),
+    [navigate],
+  );
 
   return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Backdrop />
-        <Dialog.Popup variant="bare">
-          <div className="docs-command" role="search">
-            <div className="sr-only">
-              <Dialog.Title>Search components</Dialog.Title>
-            </div>
-            <div className="docs-command-input">
-              <SearchIcon />
-              <Input
-                autoFocus
-                aria-activedescendant={
-                  results[activeIndex]
-                    ? `component-search-option-${activeIndex}`
-                    : undefined
-                }
-                aria-autocomplete="list"
-                aria-controls="component-search-results"
-                aria-expanded="true"
-                aria-label="Search components"
-                name="component-search"
-                placeholder="Search components..."
-                role="combobox"
-                value={query}
-                variant="bare"
-                onChange={(event) => setQuery(event.currentTarget.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "ArrowDown") {
-                    event.preventDefault();
-                    if (!results.length) return;
-                    setActiveIndex((index) =>
-                      Math.min(index + 1, results.length - 1),
-                    );
-                  } else if (event.key === "ArrowUp") {
-                    event.preventDefault();
-                    if (!results.length) return;
-                    setActiveIndex((index) => Math.max(index - 1, 0));
-                  } else if (event.key === "Enter") {
-                    event.preventDefault();
-                    openResult(activeIndex);
-                  }
-                }}
-              />
-              <Kbd keys={["Esc"]} />
-            </div>
-
-            <div
-              className="docs-command-results"
-              id="component-search-results"
-              role="listbox"
-            >
-              {results.length ? (
-                results.map((result, index) => (
-                  <button
-                    aria-selected={index === activeIndex}
-                    className="docs-command-result"
-                    id={`component-search-option-${index}`}
-                    key={result.to}
-                    role="option"
-                    type="button"
-                    onClick={() => openResult(index)}
-                    onPointerMove={() => setActiveIndex(index)}
-                  >
-                    <span>{result.title}</span>
-                    <small>{result.summary}</small>
-                  </button>
-                ))
-              ) : (
-                <p className="docs-command-empty">No components found.</p>
-              )}
-            </div>
-
-            <div className="docs-command-footer" aria-hidden="true">
-              <span>
-                <Kbd keys={["↑"]} />
-                <Kbd keys={["↓"]} />
-                Navigate
-              </span>
-              <span>
-                <Kbd keys={["Enter"]} />
-                Open
-              </span>
-            </div>
-          </div>
-        </Dialog.Popup>
-      </Dialog.Portal>
-    </Dialog.Root>
+    <CommandMenu
+      label="Search documentation"
+      items={items}
+      defaultOpen
+      onOpenChange={onOpenChange}
+      placeholder="Search documentation..."
+      emptyText="No matching pages"
+      footer="↑↓ Navigate · ↵ Open · Esc Close"
+    />
   );
 }
diff --git a/apps/docs/src/components/component-gallery.tsx b/apps/docs/src/components/component-gallery.tsx
index 89eb7f9..1176d8b 100644
--- a/apps/docs/src/components/component-gallery.tsx
+++ b/apps/docs/src/components/component-gallery.tsx
@@ -1,24 +1,38 @@
 import { Link } from "@tanstack/react-router";
 import type { LinkProps } from "@tanstack/react-router";
 import {
+  Accordion,
   AlertDialog,
   Avatar,
   Badge,
+  Breadcrumbs,
   Button,
   Callout,
+  Collapsible,
   Checkbox,
   CheckboxGroup,
+  Combobox,
+  CommandMenu,
   Composer,
+  ContextMenu,
   DataTable,
+  DatePicker,
   Dialog,
+  Drawer,
   EmptyState,
   Field,
+  FileUpload,
   IconButton,
   Input,
   Kbd,
+  List,
+  ListCell,
+  ListRow,
   Menu,
   NativeSelect,
+  Pagination,
   Popover,
+  Progress,
   PropertyPicker,
   PropertyPill,
   RadioGroup,
@@ -26,15 +40,22 @@ import {
   Separator,
   Select,
   Sidebar,
+  Slider,
   Skeleton,
   Spinner,
   Status,
   Switch,
   Tabs,
   Textarea,
+  ToastProvider,
+  ToggleGroup,
   Tooltip,
+  TreeView,
   createDataTableColumnHelper,
+  parseDate,
+  toast,
 } from "@karnstack/dowel";
+import { useState } from "react";
 import type { ReactNode } from "react";
 
 import {
@@ -103,10 +124,34 @@ function GalleryItem({
   );
 }
 
+function GalleryPagination() {
+  const [page, setPage] = useState(3);
+  return <Pagination page={page} totalPages={8} onPageChange={setPage} />;
+}
+
 export function ComponentGallery() {
   return (
     <section className="docs-gallery" aria-label="Live component catalog">
       <ul className="docs-gallery-grid" role="list">
+        <GalleryItem
+          title="Accordion"
+          to="/components/accordion"
+          layout="stack"
+        >
+          <Accordion.Root defaultValue={["details"]}>
+            <Accordion.Item value="details">
+              <Accordion.Header>
+                <Accordion.Trigger>Project details</Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Panel>
+                <Accordion.Content>
+                  Visible to workspace members.
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion.Root>
+        </GalleryItem>
+
         <GalleryItem title="Alert Dialog" to="/components/alert-dialog">
           <AlertDialog.Root>
             <AlertDialog.Trigger
@@ -144,6 +189,24 @@ export function ComponentGallery() {
           <Button variant="ghost">More</Button>
         </GalleryItem>
 
+        <GalleryItem
+          title="Breadcrumbs"
+          to="/components/breadcrumbs"
+          layout="stack"
+        >
+          <Breadcrumbs
+            items={[
+              { label: "Workspace", href: "#workspace" },
+              { label: "Projects", href: "#projects" },
+              { label: "Dowel", current: true },
+            ]}
+          />
+        </GalleryItem>
+
+        <GalleryItem title="Calendar & Date Picker" to="/components/calendar">
+          <DatePicker label="Due date" defaultValue={parseDate("2026-08-12")} />
+        </GalleryItem>
+
         <GalleryItem title="Callout" to="/components/callout" layout="stack">
           <Callout title="Protected branch" tone="warning">
             Two approvals are required before merging.
@@ -207,6 +270,32 @@ export function ComponentGallery() {
           />
         </GalleryItem>
 
+        <GalleryItem title="Combobox" to="/components/combobox" layout="stack">
+          <Combobox
+            label="Organization"
+            options={[
+              { value: "acme", label: "Acme" },
+              { value: "northstar", label: "Northstar" },
+            ]}
+            placeholder="Find an organization"
+          />
+        </GalleryItem>
+
+        <GalleryItem
+          title="Collapsible"
+          to="/components/collapsible"
+          layout="stack"
+        >
+          <Collapsible.Root defaultOpen>
+            <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+            <Collapsible.Panel>
+              <Collapsible.Content>
+                Branch protection enabled.
+              </Collapsible.Content>
+            </Collapsible.Panel>
+          </Collapsible.Root>
+        </GalleryItem>
+
         <GalleryItem title="Textarea" to="/components/input" layout="stack">
           <Field.Root>
             <Field.Label>Description</Field.Label>
@@ -277,6 +366,26 @@ export function ComponentGallery() {
           </Menu.Root>
         </GalleryItem>
 
+        <GalleryItem
+          title="Context Menu"
+          to="/components/context-menu"
+          layout="stack"
+        >
+          <ContextMenu.Root>
+            <ContextMenu.Trigger>
+              Right-click for project actions
+            </ContextMenu.Trigger>
+            <ContextMenu.Portal>
+              <ContextMenu.Positioner>
+                <ContextMenu.Popup>
+                  <ContextMenu.Item>Rename</ContextMenu.Item>
+                  <ContextMenu.Item>Duplicate</ContextMenu.Item>
+                </ContextMenu.Popup>
+              </ContextMenu.Positioner>
+            </ContextMenu.Portal>
+          </ContextMenu.Root>
+        </GalleryItem>
+
         <GalleryItem title="Dialog" to="/components/dialog">
           <Dialog.Root>
             <Dialog.Trigger render={<Button>New project</Button>} />
@@ -306,6 +415,50 @@ export function ComponentGallery() {
           </Dialog.Root>
         </GalleryItem>
 
+        <GalleryItem title="Drawer" to="/components/drawer">
+          <Drawer.Root side="right">
+            <Drawer.Trigger render={<Button>Open details</Button>} />
+            <Drawer.Portal>
+              <Drawer.Backdrop />
+              <Drawer.Viewport>
+                <Drawer.Popup>
+                  <Drawer.Content>
+                    <Drawer.Header>
+                      <Drawer.Title>Repository details</Drawer.Title>
+                      <Drawer.Description>
+                        Metadata for dowel.
+                      </Drawer.Description>
+                    </Drawer.Header>
+                    <Drawer.Footer>
+                      <Drawer.Close render={<Button>Close</Button>} />
+                    </Drawer.Footer>
+                  </Drawer.Content>
+                </Drawer.Popup>
+              </Drawer.Viewport>
+            </Drawer.Portal>
+          </Drawer.Root>
+        </GalleryItem>
+
+        <GalleryItem title="Command Menu" to="/components/command-menu">
+          <CommandMenu
+            trigger={<Button>Open commands</Button>}
+            items={[
+              {
+                id: "repo",
+                label: "Open repository",
+                group: "Navigation",
+                onSelect: () => {},
+              },
+              {
+                id: "settings",
+                label: "Open settings",
+                group: "Navigation",
+                onSelect: () => {},
+              },
+            ]}
+          />
+        </GalleryItem>
+
         <GalleryItem title="Popover" to="/components/popover">
           <Popover.Root>
             <Popover.Trigger render={<Button>Repository access</Button>} />
@@ -373,6 +526,35 @@ export function ComponentGallery() {
           <Spinner size="lg" />
         </GalleryItem>
 
+        <GalleryItem title="Progress" to="/components/progress" layout="stack">
+          <Progress label="Upload artifacts" value={64} />
+        </GalleryItem>
+
+        <GalleryItem title="Pagination" to="/components/pagination">
+          <GalleryPagination />
+        </GalleryItem>
+
+        <GalleryItem title="Slider" to="/components/slider" layout="stack">
+          <Slider.Root defaultValue={40}>
+            <Slider.Label>Volume</Slider.Label>
+            <Slider.Value />
+            <Slider.Control>
+              <Slider.Track>
+                <Slider.Indicator />
+              </Slider.Track>
+              <Slider.Thumb aria-label="Volume" />
+            </Slider.Control>
+          </Slider.Root>
+        </GalleryItem>
+
+        <GalleryItem title="Toast" to="/components/toast">
+          <ToastProvider>
+            <Button onClick={() => toast.success("Repository created")}>
+              Show toast
+            </Button>
+          </ToastProvider>
+        </GalleryItem>
+
         <GalleryItem title="Skeleton" to="/components/skeleton" layout="stack">
           <Skeleton />
           <Skeleton size="sm" />
@@ -406,6 +588,33 @@ export function ComponentGallery() {
           </Tabs.Root>
         </GalleryItem>
 
+        <GalleryItem title="Toggle Group" to="/components/toggle-group">
+          <ToggleGroup.Root aria-label="View options">
+            <ToggleGroup.Item defaultPressed>List</ToggleGroup.Item>
+            <ToggleGroup.Item>Board</ToggleGroup.Item>
+          </ToggleGroup.Root>
+        </GalleryItem>
+
+        <GalleryItem
+          title="Tree View"
+          to="/components/tree-view"
+          layout="stack"
+        >
+          <TreeView
+            defaultExpandedIds={["product"]}
+            items={[
+              {
+                id: "product",
+                label: "Product",
+                children: [
+                  { id: "roadmap", label: "Roadmap" },
+                  { id: "feedback", label: "Feedback" },
+                ],
+              },
+            ]}
+          />
+        </GalleryItem>
+
         <GalleryItem title="Sidebar" to="/components/sidebar">
           <Sidebar.Root
             className="docs-gallery-sidebar"
@@ -446,6 +655,31 @@ export function ComponentGallery() {
           />
         </GalleryItem>
 
+        <GalleryItem title="List" to="/components/list" layout="wide">
+          <List aria-label="Repositories" divided>
+            <ListRow selected>
+              <ListCell grow>dowel</ListCell>
+              <ListCell tone="tertiary">Synced</ListCell>
+            </ListRow>
+            <ListRow>
+              <ListCell grow>sourcetown</ListCell>
+              <ListCell tone="tertiary">Updated yesterday</ListCell>
+            </ListRow>
+          </List>
+        </GalleryItem>
+
+        <GalleryItem
+          title="File Upload"
+          to="/components/file-upload"
+          layout="wide"
+        >
+          <FileUpload
+            multiple
+            maxFiles={3}
+            description="Drop files here or browse"
+          />
+        </GalleryItem>
+
         <GalleryItem title="Composer" to="/components/composer" layout="wide">
           <Composer.Root
             aria-label="Create issue example"
diff --git a/apps/docs/src/components/icons.tsx b/apps/docs/src/components/icons.tsx
index 2629dfc..eb2b3e9 100644
--- a/apps/docs/src/components/icons.tsx
+++ b/apps/docs/src/components/icons.tsx
@@ -2,6 +2,7 @@ import {
   ArrowRightIcon as HeroArrowRightIcon,
   Bars3Icon,
   CheckIcon as HeroCheckIcon,
+  ChevronRightIcon as HeroChevronRightIcon,
   MagnifyingGlassIcon,
   MoonIcon as HeroMoonIcon,
   Square2StackIcon,
@@ -28,6 +29,7 @@ export const CloseIcon = docsIcon(XMarkIcon);
 export const SearchIcon = docsIcon(MagnifyingGlassIcon);
 export const CopyIcon = docsIcon(Square2StackIcon);
 export const CheckIcon = docsIcon(HeroCheckIcon);
+export const ChevronRightIcon = docsIcon(HeroChevronRightIcon);
 export const ArrowRightIcon = docsIcon(HeroArrowRightIcon);
 
 /** Heroicons excludes brand logos, so the GitHub mark remains local. */
diff --git a/apps/docs/src/components/sidebar-nav.tsx b/apps/docs/src/components/sidebar-nav.tsx
index 66682f0..df53e8b 100644
--- a/apps/docs/src/components/sidebar-nav.tsx
+++ b/apps/docs/src/components/sidebar-nav.tsx
@@ -1,6 +1,70 @@
-import { Link } from "@tanstack/react-router";
+import { Link, useRouterState } from "@tanstack/react-router";
+import { useEffect, useId, useState } from "react";
 
+import { ChevronRightIcon } from "./icons";
 import { nav } from "../lib/nav";
+import type { NavSection } from "../lib/nav";
+
+function NavSectionDisclosure({
+  section,
+  pathname,
+  onNavigate,
+}: {
+  section: NavSection;
+  pathname: string;
+  onNavigate?: () => void;
+}) {
+  const active = section.items.some((item) => item.to === pathname);
+  const [open, setOpen] = useState(true);
+  const itemsId = useId();
+
+  useEffect(() => {
+    if (active) setOpen(true);
+  }, [active]);
+
+  return (
+    <section
+      className="docs-nav-section"
+      data-open={open ? "" : undefined}
+      data-active={active ? "" : undefined}
+    >
+      <button
+        type="button"
+        className="docs-nav-heading"
+        aria-expanded={open}
+        aria-controls={itemsId}
+        onClick={() => setOpen((value) => !value)}
+      >
+        <span>{section.title}</span>
+        <span className="docs-nav-chevron">
+          <ChevronRightIcon />
+        </span>
+      </button>
+      <div
+        id={itemsId}
+        className="docs-nav-items"
+        aria-hidden={!open}
+        inert={open ? undefined : true}
+      >
+        <ul role="list">
+          {section.items.map((item) => (
+            <li key={item.to}>
+              <Link
+                to={item.to}
+                onClick={onNavigate}
+                // Without `exact`, "/" matches every route and the
+                // Introduction link stays highlighted on every page.
+                activeOptions={{ exact: true }}
+              >
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
 
 /**
  * One nav, rendered twice: once in the sticky desktop sidebar and once in the
@@ -8,27 +72,19 @@ import { nav } from "../lib/nav";
  * listing different components, which is the usual way a mobile menu rots.
  */
 export function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+
   return (
     <nav className="docs-nav" aria-label="Documentation">
       {nav.map((section) => (
-        <div className="docs-nav-section" key={section.title}>
-          <p className="docs-nav-heading">{section.title}</p>
-          <ul role="list">
-            {section.items.map((item) => (
-              <li key={item.to}>
-                <Link
-                  to={item.to}
-                  onClick={onNavigate}
-                  // Without `exact`, "/" matches every route and the
-                  // Introduction link stays highlighted on every page.
-                  activeOptions={{ exact: true }}
-                >
-                  {item.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
+        <NavSectionDisclosure
+          key={section.title}
+          section={section}
+          pathname={pathname}
+          onNavigate={onNavigate}
+        />
       ))}
     </nav>
   );
diff --git a/apps/docs/src/docs.css b/apps/docs/src/docs.css
index 9f63896..8040ac1 100644
--- a/apps/docs/src/docs.css
+++ b/apps/docs/src/docs.css
@@ -181,135 +181,102 @@ body {
   gap: var(--dowel-space-3);
 }
 
-/* --------------------------------------------------------- command search */
-
-.docs-command {
-  display: flex;
-  flex-direction: column;
-  max-block-size: min(34rem, calc(100dvh - 4rem));
-  overflow: hidden;
-  border: 1px solid var(--dowel-border-2);
-  border-radius: var(--dowel-radius-lg);
-  background: var(--dowel-bg-elevated);
-  box-shadow: var(--docs-panel-shadow);
-}
+/* ------------------------------------------------------------------- nav */
 
-.docs-command-input {
-  display: flex;
-  flex: none;
-  align-items: center;
-  gap: var(--dowel-space-4);
-  min-block-size: 3.25rem;
-  padding-inline: var(--dowel-space-7);
-  border-block-end: 1px solid var(--dowel-border-1);
-  color: var(--dowel-text-3);
+.docs-nav-section {
+  margin-block-end: var(--dowel-space-1);
+  transition: margin-block-end var(--dowel-dur-fast) var(--dowel-ease);
 }
 
-.docs-command-input [data-dowel-component="input"] {
-  flex: 1;
-  min-inline-size: 0;
-  block-size: 3rem;
-  padding-inline: 0;
-  font-size: 1rem;
+.docs-nav-section[data-open] {
+  margin-block-end: var(--dowel-space-4);
 }
 
-.docs-command-results {
+.docs-nav-heading {
   display: flex;
-  flex-direction: column;
-  gap: 1px;
-  min-block-size: 0;
-  overflow-y: auto;
-  padding: var(--dowel-space-3);
-}
-
-.docs-command-result {
-  display: grid;
-  gap: 2px;
+  align-items: center;
+  gap: var(--dowel-space-2);
   inline-size: 100%;
-  min-block-size: 3rem;
-  padding: var(--dowel-space-4) var(--dowel-space-6);
+  min-block-size: 1.75rem;
+  margin: 0;
+  padding: 0 var(--dowel-space-3);
   border: 0;
   border-radius: 6px;
   background: transparent;
-  color: var(--dowel-text-1);
+  color: var(--dowel-text-2);
   font: inherit;
+  font-size: 0.6875rem;
+  font-weight: var(--dowel-fw-medium);
+  letter-spacing: 0.04em;
   text-align: start;
+  text-transform: uppercase;
   cursor: pointer;
 }
 
-.docs-command-result[aria-selected="true"] {
+.docs-nav-heading:hover {
+  color: var(--dowel-text-1);
   background: var(--dowel-bg-2);
 }
 
-.docs-command-result:focus-visible {
+.docs-nav-heading:focus-visible {
   outline: 2px solid var(--dowel-focus);
   outline-offset: -2px;
 }
 
-.docs-command-result span {
-  font-size: var(--dowel-fs-small);
-  font-weight: var(--dowel-fw-medium);
-}
-
-.docs-command-result small {
-  overflow: hidden;
-  color: var(--dowel-text-3);
-  font-size: var(--dowel-fs-mini);
-  font-weight: var(--dowel-fw-normal);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.docs-nav-section[data-active] > .docs-nav-heading {
+  color: var(--dowel-text-1);
 }
 
-.docs-command-empty {
-  margin: 0;
-  padding: 2rem var(--dowel-space-6);
+.docs-nav-chevron {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: auto;
   color: var(--dowel-text-3);
-  font-size: var(--dowel-fs-small);
-  text-align: center;
+  transition: transform var(--dowel-dur-fast) var(--dowel-ease);
 }
 
-.docs-command-footer {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--dowel-space-7);
-  min-block-size: 2.25rem;
-  padding-inline: var(--dowel-space-6);
-  border-block-start: 1px solid var(--dowel-border-1);
-  color: var(--dowel-text-4);
-  font-size: var(--dowel-fs-mini);
+.docs-nav-chevron svg {
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
 }
 
-.docs-command-footer span {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dowel-space-2);
+.docs-nav-section[data-open] .docs-nav-chevron {
+  transform: rotate(90deg);
 }
 
-/* ------------------------------------------------------------------- nav */
-
-.docs-nav-section {
-  margin-block-end: var(--dowel-space-7);
+.docs-nav-items {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity var(--dowel-dur-fast) var(--dowel-ease);
 }
 
-.docs-nav-heading {
-  margin: 0 0 var(--dowel-space-2);
-  padding-inline: var(--dowel-space-4);
-  font-size: var(--dowel-fs-mini);
-  font-weight: var(--dowel-fw-medium);
-  color: var(--dowel-text-2);
+.docs-nav-section[data-open] .docs-nav-items {
+  grid-template-rows: 1fr;
+  opacity: 1;
 }
 
 .docs-nav ul {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  min-block-size: 0;
   margin: 0;
-  padding: 0;
+  overflow: hidden;
+  padding: var(--dowel-space-1) 0 0 var(--dowel-space-5);
   list-style: none;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .docs-nav-section,
+  .docs-nav-chevron,
+  .docs-nav-items {
+    transition-duration: 0.01ms;
+  }
+}
+
 .docs-nav a {
   display: flex;
   align-items: center;
@@ -807,6 +774,24 @@ body {
   justify-content: flex-start;
 }
 
+.docs-calendar-example {
+  display: grid;
+  justify-items: center;
+  gap: var(--dowel-space-4);
+}
+
+.docs-calendar-value {
+  margin: 0;
+  color: var(--dowel-text-3);
+  font-size: var(--dowel-fs-mini);
+}
+
+.docs-calendar-value code {
+  color: var(--dowel-text-2);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+}
+
 /* The code block is welded to the preview: no radius of its own, one shared
    border. */
 .docs-demo .docs-code {
diff --git a/apps/docs/src/lib/nav.ts b/apps/docs/src/lib/nav.ts
index e45a0a2..374b325 100644
--- a/apps/docs/src/lib/nav.ts
+++ b/apps/docs/src/lib/nav.ts
@@ -20,6 +20,11 @@ export type NavSection = {
 };
 
 export const componentNav: NavItem[] = [
+  {
+    title: "Accordion",
+    to: "/components/accordion",
+    summary: "A keyboard-accessible group of animated disclosure panels.",
+  },
   {
     title: "Alert Dialog",
     to: "/components/alert-dialog",
@@ -35,11 +40,21 @@ export const componentNav: NavItem[] = [
     to: "/components/badge",
     summary: "A compact status or metadata pill in five tones.",
   },
+  {
+    title: "Breadcrumbs",
+    to: "/components/breadcrumbs",
+    summary: "A compact location trail with automatic middle-item elision.",
+  },
   {
     title: "Button",
     to: "/components/button",
     summary: "The default action control. Five hierarchy levels, two sizes.",
   },
+  {
+    title: "Calendar & Date Picker",
+    to: "/components/calendar",
+    summary: "An internationalized month grid and segmented date field.",
+  },
   {
     title: "Callout",
     to: "/components/callout",
@@ -50,11 +65,31 @@ export const componentNav: NavItem[] = [
     to: "/components/checkbox",
     summary: "Checked, unchecked, and mixed selection with native form values.",
   },
+  {
+    title: "Collapsible",
+    to: "/components/collapsible",
+    summary: "An animated disclosure for one optional content region.",
+  },
+  {
+    title: "Combobox",
+    to: "/components/combobox",
+    summary: "A filterable single-choice field for larger collections.",
+  },
+  {
+    title: "Command Menu",
+    to: "/components/command-menu",
+    summary: "A modal search surface for grouped application commands.",
+  },
   {
     title: "Composer",
     to: "/components/composer",
     summary: "A borderless creation shell with metadata and action regions.",
   },
+  {
+    title: "Context Menu",
+    to: "/components/context-menu",
+    summary: "A pointer-positioned menu for actions on a target surface.",
+  },
   {
     title: "Data Table",
     to: "/components/data-table",
@@ -65,11 +100,21 @@ export const componentNav: NavItem[] = [
     to: "/components/dialog",
     summary: "A modal on the modal elevation tier, labelled by its title.",
   },
+  {
+    title: "Drawer",
+    to: "/components/drawer",
+    summary: "A swipe-dismissable edge panel for navigation and detail.",
+  },
   {
     title: "Empty State",
     to: "/components/empty-state",
     summary: "Structured guidance and actions for a surface without content.",
   },
+  {
+    title: "File Upload",
+    to: "/components/file-upload",
+    summary: "A native file picker and dropzone with built-in validation.",
+  },
   {
     title: "Icon Button",
     to: "/components/icon-button",
@@ -85,6 +130,11 @@ export const componentNav: NavItem[] = [
     to: "/components/kbd",
     summary: "A keyboard shortcut rendered one key per cap.",
   },
+  {
+    title: "List",
+    to: "/components/list",
+    summary: "Semantic grouped rows with cells, density, and selection.",
+  },
   {
     title: "Menu",
     to: "/components/menu",
@@ -95,6 +145,11 @@ export const componentNav: NavItem[] = [
     to: "/components/native-select",
     summary: "A resilient native choice control with Dowel field styling.",
   },
+  {
+    title: "Pagination",
+    to: "/components/pagination",
+    summary: "Controlled page navigation with compact number elision.",
+  },
   {
     title: "Popover",
     to: "/components/popover",
@@ -106,6 +161,11 @@ export const componentNav: NavItem[] = [
     summary:
       "Searchable grouped metadata selection with a compact pill trigger.",
   },
+  {
+    title: "Progress",
+    to: "/components/progress",
+    summary: "Determinate and indeterminate progress for long tasks.",
+  },
   {
     title: "Radio Group",
     to: "/components/radio-group",
@@ -131,6 +191,11 @@ export const componentNav: NavItem[] = [
     to: "/components/sidebar",
     summary: "A responsive application rail with pointer and keyboard resize.",
   },
+  {
+    title: "Slider",
+    to: "/components/slider",
+    summary: "A pointer and keyboard control for a numeric range.",
+  },
   {
     title: "Skeleton",
     to: "/components/skeleton",
@@ -156,11 +221,114 @@ export const componentNav: NavItem[] = [
     to: "/components/tabs",
     summary: "Compact pill and line view switching with arrow-key activation.",
   },
+  {
+    title: "Toast",
+    to: "/components/toast",
+    summary: "A global notification queue with actions and promises.",
+  },
+  {
+    title: "Toggle Group",
+    to: "/components/toggle-group",
+    summary: "A connected set of independently pressed view controls.",
+  },
   {
     title: "Tooltip",
     to: "/components/tooltip",
     summary: "A hover and focus label on the popover elevation tier.",
   },
+  {
+    title: "Tree View",
+    to: "/components/tree-view",
+    summary: "A nested hierarchy with selection and keyboard navigation.",
+  },
+];
+
+function components(...paths: NavItem["to"][]): NavItem[] {
+  return paths.map((path) => {
+    const item = componentNav.find((candidate) => candidate.to === path);
+    if (!item) throw new Error(`Missing component navigation item: ${path}`);
+    return item;
+  });
+}
+
+export const componentSections: NavSection[] = [
+  {
+    title: "Actions",
+    items: components(
+      "/components/button",
+      "/components/icon-button",
+      "/components/toggle-group",
+    ),
+  },
+  {
+    title: "Forms and selection",
+    items: components(
+      "/components/checkbox",
+      "/components/calendar",
+      "/components/combobox",
+      "/components/file-upload",
+      "/components/input",
+      "/components/native-select",
+      "/components/property-picker",
+      "/components/radio-group",
+      "/components/search-field",
+      "/components/select",
+      "/components/slider",
+      "/components/switch",
+    ),
+  },
+  {
+    title: "Navigation",
+    items: components(
+      "/components/breadcrumbs",
+      "/components/command-menu",
+      "/components/pagination",
+      "/components/sidebar",
+      "/components/tabs",
+      "/components/tree-view",
+    ),
+  },
+  {
+    title: "Overlays",
+    items: components(
+      "/components/alert-dialog",
+      "/components/context-menu",
+      "/components/dialog",
+      "/components/drawer",
+      "/components/menu",
+      "/components/popover",
+      "/components/tooltip",
+    ),
+  },
+  {
+    title: "Data and display",
+    items: components(
+      "/components/accordion",
+      "/components/avatar",
+      "/components/badge",
+      "/components/collapsible",
+      "/components/data-table",
+      "/components/kbd",
+      "/components/list",
+      "/components/separator",
+      "/components/status",
+    ),
+  },
+  {
+    title: "Feedback",
+    items: components(
+      "/components/callout",
+      "/components/empty-state",
+      "/components/progress",
+      "/components/skeleton",
+      "/components/spinner",
+      "/components/toast",
+    ),
+  },
+  {
+    title: "Composites",
+    items: components("/components/composer"),
+  },
 ];
 
 export const nav: NavSection[] = [
@@ -179,5 +347,5 @@ export const nav: NavSection[] = [
       },
     ],
   },
-  { title: "Components", items: componentNav },
+  ...componentSections,
 ];
diff --git a/apps/docs/src/routeTree.gen.ts b/apps/docs/src/routeTree.gen.ts
index 38a7824..a68130f 100644
--- a/apps/docs/src/routeTree.gen.ts
+++ b/apps/docs/src/routeTree.gen.ts
@@ -13,22 +13,34 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as ComponentsRouteRouteImport } from './routes/components/route'
 import { Route as DependenciesRouteImport } from './routes/dependencies'
 import { Route as ComponentsIndexRouteImport } from './routes/components/index'
+import { Route as ComponentsAccordionRouteImport } from './routes/components/accordion'
 import { Route as ComponentsAlertDialogRouteImport } from './routes/components/alert-dialog'
 import { Route as ComponentsAvatarRouteImport } from './routes/components/avatar'
 import { Route as ComponentsBadgeRouteImport } from './routes/components/badge'
+import { Route as ComponentsBreadcrumbsRouteImport } from './routes/components/breadcrumbs'
 import { Route as ComponentsButtonRouteImport } from './routes/components/button'
+import { Route as ComponentsCalendarRouteImport } from './routes/components/calendar'
 import { Route as ComponentsCalloutRouteImport } from './routes/components/callout'
 import { Route as ComponentsCheckboxRouteImport } from './routes/components/checkbox'
+import { Route as ComponentsCollapsibleRouteImport } from './routes/components/collapsible'
+import { Route as ComponentsComboboxRouteImport } from './routes/components/combobox'
+import { Route as ComponentsCommandMenuRouteImport } from './routes/components/command-menu'
 import { Route as ComponentsComposerRouteImport } from './routes/components/composer'
+import { Route as ComponentsContextMenuRouteImport } from './routes/components/context-menu'
 import { Route as ComponentsDataTableRouteImport } from './routes/components/data-table'
 import { Route as ComponentsDialogRouteImport } from './routes/components/dialog'
+import { Route as ComponentsDrawerRouteImport } from './routes/components/drawer'
 import { Route as ComponentsEmptyStateRouteImport } from './routes/components/empty-state'
+import { Route as ComponentsFileUploadRouteImport } from './routes/components/file-upload'
 import { Route as ComponentsIconButtonRouteImport } from './routes/components/icon-button'
 import { Route as ComponentsInputRouteImport } from './routes/components/input'
 import { Route as ComponentsKbdRouteImport } from './routes/components/kbd'
+import { Route as ComponentsListRouteImport } from './routes/components/list'
 import { Route as ComponentsMenuRouteImport } from './routes/components/menu'
 import { Route as ComponentsNativeSelectRouteImport } from './routes/components/native-select'
+import { Route as ComponentsPaginationRouteImport } from './routes/components/pagination'
 import { Route as ComponentsPopoverRouteImport } from './routes/components/popover'
+import { Route as ComponentsProgressRouteImport } from './routes/components/progress'
 import { Route as ComponentsPropertyPickerRouteImport } from './routes/components/property-picker'
 import { Route as ComponentsRadioGroupRouteImport } from './routes/components/radio-group'
 import { Route as ComponentsSearchFieldRouteImport } from './routes/components/search-field'
@@ -36,11 +48,15 @@ import { Route as ComponentsSelectRouteImport } from './routes/components/select
 import { Route as ComponentsSeparatorRouteImport } from './routes/components/separator'
 import { Route as ComponentsSidebarRouteImport } from './routes/components/sidebar'
 import { Route as ComponentsSkeletonRouteImport } from './routes/components/skeleton'
+import { Route as ComponentsSliderRouteImport } from './routes/components/slider'
 import { Route as ComponentsSpinnerRouteImport } from './routes/components/spinner'
 import { Route as ComponentsStatusRouteImport } from './routes/components/status'
 import { Route as ComponentsSwitchRouteImport } from './routes/components/switch'
 import { Route as ComponentsTabsRouteImport } from './routes/components/tabs'
+import { Route as ComponentsToastRouteImport } from './routes/components/toast'
+import { Route as ComponentsToggleGroupRouteImport } from './routes/components/toggle-group'
 import { Route as ComponentsTooltipRouteImport } from './routes/components/tooltip'
+import { Route as ComponentsTreeViewRouteImport } from './routes/components/tree-view'
 
 const IndexRoute = IndexRouteImport.update({
   id: '/',
@@ -62,6 +78,11 @@ const ComponentsIndexRoute = ComponentsIndexRouteImport.update({
   path: '/',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsAccordionRoute = ComponentsAccordionRouteImport.update({
+  id: '/accordion',
+  path: '/accordion',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsAlertDialogRoute = ComponentsAlertDialogRouteImport.update({
   id: '/alert-dialog',
   path: '/alert-dialog',
@@ -77,11 +98,21 @@ const ComponentsBadgeRoute = ComponentsBadgeRouteImport.update({
   path: '/badge',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsBreadcrumbsRoute = ComponentsBreadcrumbsRouteImport.update({
+  id: '/breadcrumbs',
+  path: '/breadcrumbs',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsButtonRoute = ComponentsButtonRouteImport.update({
   id: '/button',
   path: '/button',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsCalendarRoute = ComponentsCalendarRouteImport.update({
+  id: '/calendar',
+  path: '/calendar',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsCalloutRoute = ComponentsCalloutRouteImport.update({
   id: '/callout',
   path: '/callout',
@@ -92,11 +123,31 @@ const ComponentsCheckboxRoute = ComponentsCheckboxRouteImport.update({
   path: '/checkbox',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsCollapsibleRoute = ComponentsCollapsibleRouteImport.update({
+  id: '/collapsible',
+  path: '/collapsible',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
+const ComponentsComboboxRoute = ComponentsComboboxRouteImport.update({
+  id: '/combobox',
+  path: '/combobox',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
+const ComponentsCommandMenuRoute = ComponentsCommandMenuRouteImport.update({
+  id: '/command-menu',
+  path: '/command-menu',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsComposerRoute = ComponentsComposerRouteImport.update({
   id: '/composer',
   path: '/composer',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsContextMenuRoute = ComponentsContextMenuRouteImport.update({
+  id: '/context-menu',
+  path: '/context-menu',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsDataTableRoute = ComponentsDataTableRouteImport.update({
   id: '/data-table',
   path: '/data-table',
@@ -107,11 +158,21 @@ const ComponentsDialogRoute = ComponentsDialogRouteImport.update({
   path: '/dialog',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsDrawerRoute = ComponentsDrawerRouteImport.update({
+  id: '/drawer',
+  path: '/drawer',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsEmptyStateRoute = ComponentsEmptyStateRouteImport.update({
   id: '/empty-state',
   path: '/empty-state',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsFileUploadRoute = ComponentsFileUploadRouteImport.update({
+  id: '/file-upload',
+  path: '/file-upload',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsIconButtonRoute = ComponentsIconButtonRouteImport.update({
   id: '/icon-button',
   path: '/icon-button',
@@ -127,6 +188,11 @@ const ComponentsKbdRoute = ComponentsKbdRouteImport.update({
   path: '/kbd',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsListRoute = ComponentsListRouteImport.update({
+  id: '/list',
+  path: '/list',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsMenuRoute = ComponentsMenuRouteImport.update({
   id: '/menu',
   path: '/menu',
@@ -137,11 +203,21 @@ const ComponentsNativeSelectRoute = ComponentsNativeSelectRouteImport.update({
   path: '/native-select',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsPaginationRoute = ComponentsPaginationRouteImport.update({
+  id: '/pagination',
+  path: '/pagination',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsPopoverRoute = ComponentsPopoverRouteImport.update({
   id: '/popover',
   path: '/popover',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsProgressRoute = ComponentsProgressRouteImport.update({
+  id: '/progress',
+  path: '/progress',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsPropertyPickerRoute =
   ComponentsPropertyPickerRouteImport.update({
     id: '/property-picker',
@@ -178,6 +254,11 @@ const ComponentsSkeletonRoute = ComponentsSkeletonRouteImport.update({
   path: '/skeleton',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsSliderRoute = ComponentsSliderRouteImport.update({
+  id: '/slider',
+  path: '/slider',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsSpinnerRoute = ComponentsSpinnerRouteImport.update({
   id: '/spinner',
   path: '/spinner',
@@ -198,32 +279,59 @@ const ComponentsTabsRoute = ComponentsTabsRouteImport.update({
   path: '/tabs',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsToastRoute = ComponentsToastRouteImport.update({
+  id: '/toast',
+  path: '/toast',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
+const ComponentsToggleGroupRoute = ComponentsToggleGroupRouteImport.update({
+  id: '/toggle-group',
+  path: '/toggle-group',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 const ComponentsTooltipRoute = ComponentsTooltipRouteImport.update({
   id: '/tooltip',
   path: '/tooltip',
   getParentRoute: () => ComponentsRouteRoute,
 } as any)
+const ComponentsTreeViewRoute = ComponentsTreeViewRouteImport.update({
+  id: '/tree-view',
+  path: '/tree-view',
+  getParentRoute: () => ComponentsRouteRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/components': typeof ComponentsRouteRouteWithChildren
   '/dependencies': typeof DependenciesRoute
+  '/components/accordion': typeof ComponentsAccordionRoute
   '/components/alert-dialog': typeof ComponentsAlertDialogRoute
   '/components/avatar': typeof ComponentsAvatarRoute
   '/components/badge': typeof ComponentsBadgeRoute
+  '/components/breadcrumbs': typeof ComponentsBreadcrumbsRoute
   '/components/button': typeof ComponentsButtonRoute
+  '/components/calendar': typeof ComponentsCalendarRoute
   '/components/callout': typeof ComponentsCalloutRoute
   '/components/checkbox': typeof ComponentsCheckboxRoute
+  '/components/collapsible': typeof ComponentsCollapsibleRoute
+  '/components/combobox': typeof ComponentsComboboxRoute
+  '/components/command-menu': typeof ComponentsCommandMenuRoute
   '/components/composer': typeof ComponentsComposerRoute
+  '/components/context-menu': typeof ComponentsContextMenuRoute
   '/components/data-table': typeof ComponentsDataTableRoute
   '/components/dialog': typeof ComponentsDialogRoute
+  '/components/drawer': typeof ComponentsDrawerRoute
   '/components/empty-state': typeof ComponentsEmptyStateRoute
+  '/components/file-upload': typeof ComponentsFileUploadRoute
   '/components/icon-button': typeof ComponentsIconButtonRoute
   '/components/input': typeof ComponentsInputRoute
   '/components/kbd': typeof ComponentsKbdRoute
+  '/components/list': typeof ComponentsListRoute
   '/components/menu': typeof ComponentsMenuRoute
   '/components/native-select': typeof ComponentsNativeSelectRoute
+  '/components/pagination': typeof ComponentsPaginationRoute
   '/components/popover': typeof ComponentsPopoverRoute
+  '/components/progress': typeof ComponentsProgressRoute
   '/components/property-picker': typeof ComponentsPropertyPickerRoute
   '/components/radio-group': typeof ComponentsRadioGroupRoute
   '/components/search-field': typeof ComponentsSearchFieldRoute
@@ -231,32 +339,48 @@ export interface FileRoutesByFullPath {
   '/components/separator': typeof ComponentsSeparatorRoute
   '/components/sidebar': typeof ComponentsSidebarRoute
   '/components/skeleton': typeof ComponentsSkeletonRoute
+  '/components/slider': typeof ComponentsSliderRoute
   '/components/spinner': typeof ComponentsSpinnerRoute
   '/components/status': typeof ComponentsStatusRoute
   '/components/switch': typeof ComponentsSwitchRoute
   '/components/tabs': typeof ComponentsTabsRoute
+  '/components/toast': typeof ComponentsToastRoute
+  '/components/toggle-group': typeof ComponentsToggleGroupRoute
   '/components/tooltip': typeof ComponentsTooltipRoute
+  '/components/tree-view': typeof ComponentsTreeViewRoute
   '/components/': typeof ComponentsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/dependencies': typeof DependenciesRoute
+  '/components/accordion': typeof ComponentsAccordionRoute
   '/components/alert-dialog': typeof ComponentsAlertDialogRoute
   '/components/avatar': typeof ComponentsAvatarRoute
   '/components/badge': typeof ComponentsBadgeRoute
+  '/components/breadcrumbs': typeof ComponentsBreadcrumbsRoute
   '/components/button': typeof ComponentsButtonRoute
+  '/components/calendar': typeof ComponentsCalendarRoute
   '/components/callout': typeof ComponentsCalloutRoute
   '/components/checkbox': typeof ComponentsCheckboxRoute
+  '/components/collapsible': typeof ComponentsCollapsibleRoute
+  '/components/combobox': typeof ComponentsComboboxRoute
+  '/components/command-menu': typeof ComponentsCommandMenuRoute
   '/components/composer': typeof ComponentsComposerRoute
+  '/components/context-menu': typeof ComponentsContextMenuRoute
   '/components/data-table': typeof ComponentsDataTableRoute
   '/components/dialog': typeof ComponentsDialogRoute
+  '/components/drawer': typeof ComponentsDrawerRoute
   '/components/empty-state': typeof ComponentsEmptyStateRoute
+  '/components/file-upload': typeof ComponentsFileUploadRoute
   '/components/icon-button': typeof ComponentsIconButtonRoute
   '/components/input': typeof ComponentsInputRoute
   '/components/kbd': typeof ComponentsKbdRoute
+  '/components/list': typeof ComponentsListRoute
   '/components/menu': typeof ComponentsMenuRoute
   '/components/native-select': typeof ComponentsNativeSelectRoute
+  '/components/pagination': typeof ComponentsPaginationRoute
   '/components/popover': typeof ComponentsPopoverRoute
+  '/components/progress': typeof ComponentsProgressRoute
   '/components/property-picker': typeof ComponentsPropertyPickerRoute
   '/components/radio-group': typeof ComponentsRadioGroupRoute
   '/components/search-field': typeof ComponentsSearchFieldRoute
@@ -264,11 +388,15 @@ export interface FileRoutesByTo {
   '/components/separator': typeof ComponentsSeparatorRoute
   '/components/sidebar': typeof ComponentsSidebarRoute
   '/components/skeleton': typeof ComponentsSkeletonRoute
+  '/components/slider': typeof ComponentsSliderRoute
   '/components/spinner': typeof ComponentsSpinnerRoute
   '/components/status': typeof ComponentsStatusRoute
   '/components/switch': typeof ComponentsSwitchRoute
   '/components/tabs': typeof ComponentsTabsRoute
+  '/components/toast': typeof ComponentsToastRoute
+  '/components/toggle-group': typeof ComponentsToggleGroupRoute
   '/components/tooltip': typeof ComponentsTooltipRoute
+  '/components/tree-view': typeof ComponentsTreeViewRoute
   '/components': typeof ComponentsIndexRoute
 }
 export interface FileRoutesById {
@@ -276,22 +404,34 @@ export interface FileRoutesById {
   '/': typeof IndexRoute
   '/components': typeof ComponentsRouteRouteWithChildren
   '/dependencies': typeof DependenciesRoute
+  '/components/accordion': typeof ComponentsAccordionRoute
   '/components/alert-dialog': typeof ComponentsAlertDialogRoute
   '/components/avatar': typeof ComponentsAvatarRoute
   '/components/badge': typeof ComponentsBadgeRoute
+  '/components/breadcrumbs': typeof ComponentsBreadcrumbsRoute
   '/components/button': typeof ComponentsButtonRoute
+  '/components/calendar': typeof ComponentsCalendarRoute
   '/components/callout': typeof ComponentsCalloutRoute
   '/components/checkbox': typeof ComponentsCheckboxRoute
+  '/components/collapsible': typeof ComponentsCollapsibleRoute
+  '/components/combobox': typeof ComponentsComboboxRoute
+  '/components/command-menu': typeof ComponentsCommandMenuRoute
   '/components/composer': typeof ComponentsComposerRoute
+  '/components/context-menu': typeof ComponentsContextMenuRoute
   '/components/data-table': typeof ComponentsDataTableRoute
   '/components/dialog': typeof ComponentsDialogRoute
+  '/components/drawer': typeof ComponentsDrawerRoute
   '/components/empty-state': typeof ComponentsEmptyStateRoute
+  '/components/file-upload': typeof ComponentsFileUploadRoute
   '/components/icon-button': typeof ComponentsIconButtonRoute
   '/components/input': typeof ComponentsInputRoute
   '/components/kbd': typeof ComponentsKbdRoute
+  '/components/list': typeof ComponentsListRoute
   '/components/menu': typeof ComponentsMenuRoute
   '/components/native-select': typeof ComponentsNativeSelectRoute
+  '/components/pagination': typeof ComponentsPaginationRoute
   '/components/popover': typeof ComponentsPopoverRoute
+  '/components/progress': typeof ComponentsProgressRoute
   '/components/property-picker': typeof ComponentsPropertyPickerRoute
   '/components/radio-group': typeof ComponentsRadioGroupRoute
   '/components/search-field': typeof ComponentsSearchFieldRoute
@@ -299,11 +439,15 @@ export interface FileRoutesById {
   '/components/separator': typeof ComponentsSeparatorRoute
   '/components/sidebar': typeof ComponentsSidebarRoute
   '/components/skeleton': typeof ComponentsSkeletonRoute
+  '/components/slider': typeof ComponentsSliderRoute
   '/components/spinner': typeof ComponentsSpinnerRoute
   '/components/status': typeof ComponentsStatusRoute
   '/components/switch': typeof ComponentsSwitchRoute
   '/components/tabs': typeof ComponentsTabsRoute
+  '/components/toast': typeof ComponentsToastRoute
+  '/components/toggle-group': typeof ComponentsToggleGroupRoute
   '/components/tooltip': typeof ComponentsTooltipRoute
+  '/components/tree-view': typeof ComponentsTreeViewRoute
   '/components/': typeof ComponentsIndexRoute
 }
 export interface FileRouteTypes {
@@ -312,22 +456,34 @@ export interface FileRouteTypes {
     | '/'
     | '/components'
     | '/dependencies'
+    | '/components/accordion'
     | '/components/alert-dialog'
     | '/components/avatar'
     | '/components/badge'
+    | '/components/breadcrumbs'
     | '/components/button'
+    | '/components/calendar'
     | '/components/callout'
     | '/components/checkbox'
+    | '/components/collapsible'
+    | '/components/combobox'
+    | '/components/command-menu'
     | '/components/composer'
+    | '/components/context-menu'
     | '/components/data-table'
     | '/components/dialog'
+    | '/components/drawer'
     | '/components/empty-state'
+    | '/components/file-upload'
     | '/components/icon-button'
     | '/components/input'
     | '/components/kbd'
+    | '/components/list'
     | '/components/menu'
     | '/components/native-select'
+    | '/components/pagination'
     | '/components/popover'
+    | '/components/progress'
     | '/components/property-picker'
     | '/components/radio-group'
     | '/components/search-field'
@@ -335,32 +491,48 @@ export interface FileRouteTypes {
     | '/components/separator'
     | '/components/sidebar'
     | '/components/skeleton'
+    | '/components/slider'
     | '/components/spinner'
     | '/components/status'
     | '/components/switch'
     | '/components/tabs'
+    | '/components/toast'
+    | '/components/toggle-group'
     | '/components/tooltip'
+    | '/components/tree-view'
     | '/components/'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
     | '/dependencies'
+    | '/components/accordion'
     | '/components/alert-dialog'
     | '/components/avatar'
     | '/components/badge'
+    | '/components/breadcrumbs'
     | '/components/button'
+    | '/components/calendar'
     | '/components/callout'
     | '/components/checkbox'
+    | '/components/collapsible'
+    | '/components/combobox'
+    | '/components/command-menu'
     | '/components/composer'
+    | '/components/context-menu'
     | '/components/data-table'
     | '/components/dialog'
+    | '/components/drawer'
     | '/components/empty-state'
+    | '/components/file-upload'
     | '/components/icon-button'
     | '/components/input'
     | '/components/kbd'
+    | '/components/list'
     | '/components/menu'
     | '/components/native-select'
+    | '/components/pagination'
     | '/components/popover'
+    | '/components/progress'
     | '/components/property-picker'
     | '/components/radio-group'
     | '/components/search-field'
@@ -368,33 +540,49 @@ export interface FileRouteTypes {
     | '/components/separator'
     | '/components/sidebar'
     | '/components/skeleton'
+    | '/components/slider'
     | '/components/spinner'
     | '/components/status'
     | '/components/switch'
     | '/components/tabs'
+    | '/components/toast'
+    | '/components/toggle-group'
     | '/components/tooltip'
+    | '/components/tree-view'
     | '/components'
   id:
     | '__root__'
     | '/'
     | '/components'
     | '/dependencies'
+    | '/components/accordion'
     | '/components/alert-dialog'
     | '/components/avatar'
     | '/components/badge'
+    | '/components/breadcrumbs'
     | '/components/button'
+    | '/components/calendar'
     | '/components/callout'
     | '/components/checkbox'
+    | '/components/collapsible'
+    | '/components/combobox'
+    | '/components/command-menu'
     | '/components/composer'
+    | '/components/context-menu'
     | '/components/data-table'
     | '/components/dialog'
+    | '/components/drawer'
     | '/components/empty-state'
+    | '/components/file-upload'
     | '/components/icon-button'
     | '/components/input'
     | '/components/kbd'
+    | '/components/list'
     | '/components/menu'
     | '/components/native-select'
+    | '/components/pagination'
     | '/components/popover'
+    | '/components/progress'
     | '/components/property-picker'
     | '/components/radio-group'
     | '/components/search-field'
@@ -402,11 +590,15 @@ export interface FileRouteTypes {
     | '/components/separator'
     | '/components/sidebar'
     | '/components/skeleton'
+    | '/components/slider'
     | '/components/spinner'
     | '/components/status'
     | '/components/switch'
     | '/components/tabs'
+    | '/components/toast'
+    | '/components/toggle-group'
     | '/components/tooltip'
+    | '/components/tree-view'
     | '/components/'
   fileRoutesById: FileRoutesById
 }
@@ -446,6 +638,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsIndexRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/accordion': {
+      id: '/components/accordion'
+      path: '/accordion'
+      fullPath: '/components/accordion'
+      preLoaderRoute: typeof ComponentsAccordionRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/alert-dialog': {
       id: '/components/alert-dialog'
       path: '/alert-dialog'
@@ -467,6 +666,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsBadgeRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/breadcrumbs': {
+      id: '/components/breadcrumbs'
+      path: '/breadcrumbs'
+      fullPath: '/components/breadcrumbs'
+      preLoaderRoute: typeof ComponentsBreadcrumbsRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/button': {
       id: '/components/button'
       path: '/button'
@@ -474,6 +680,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsButtonRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/calendar': {
+      id: '/components/calendar'
+      path: '/calendar'
+      fullPath: '/components/calendar'
+      preLoaderRoute: typeof ComponentsCalendarRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/callout': {
       id: '/components/callout'
       path: '/callout'
@@ -488,6 +701,27 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsCheckboxRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/collapsible': {
+      id: '/components/collapsible'
+      path: '/collapsible'
+      fullPath: '/components/collapsible'
+      preLoaderRoute: typeof ComponentsCollapsibleRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
+    '/components/combobox': {
+      id: '/components/combobox'
+      path: '/combobox'
+      fullPath: '/components/combobox'
+      preLoaderRoute: typeof ComponentsComboboxRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
+    '/components/command-menu': {
+      id: '/components/command-menu'
+      path: '/command-menu'
+      fullPath: '/components/command-menu'
+      preLoaderRoute: typeof ComponentsCommandMenuRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/composer': {
       id: '/components/composer'
       path: '/composer'
@@ -495,6 +729,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsComposerRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/context-menu': {
+      id: '/components/context-menu'
+      path: '/context-menu'
+      fullPath: '/components/context-menu'
+      preLoaderRoute: typeof ComponentsContextMenuRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/data-table': {
       id: '/components/data-table'
       path: '/data-table'
@@ -509,6 +750,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsDialogRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/drawer': {
+      id: '/components/drawer'
+      path: '/drawer'
+      fullPath: '/components/drawer'
+      preLoaderRoute: typeof ComponentsDrawerRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/empty-state': {
       id: '/components/empty-state'
       path: '/empty-state'
@@ -516,6 +764,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsEmptyStateRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/file-upload': {
+      id: '/components/file-upload'
+      path: '/file-upload'
+      fullPath: '/components/file-upload'
+      preLoaderRoute: typeof ComponentsFileUploadRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/icon-button': {
       id: '/components/icon-button'
       path: '/icon-button'
@@ -537,6 +792,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsKbdRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/list': {
+      id: '/components/list'
+      path: '/list'
+      fullPath: '/components/list'
+      preLoaderRoute: typeof ComponentsListRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/menu': {
       id: '/components/menu'
       path: '/menu'
@@ -551,6 +813,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsNativeSelectRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/pagination': {
+      id: '/components/pagination'
+      path: '/pagination'
+      fullPath: '/components/pagination'
+      preLoaderRoute: typeof ComponentsPaginationRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/popover': {
       id: '/components/popover'
       path: '/popover'
@@ -558,6 +827,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsPopoverRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/progress': {
+      id: '/components/progress'
+      path: '/progress'
+      fullPath: '/components/progress'
+      preLoaderRoute: typeof ComponentsProgressRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/property-picker': {
       id: '/components/property-picker'
       path: '/property-picker'
@@ -607,6 +883,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsSkeletonRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/slider': {
+      id: '/components/slider'
+      path: '/slider'
+      fullPath: '/components/slider'
+      preLoaderRoute: typeof ComponentsSliderRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/spinner': {
       id: '/components/spinner'
       path: '/spinner'
@@ -635,6 +918,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsTabsRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/toast': {
+      id: '/components/toast'
+      path: '/toast'
+      fullPath: '/components/toast'
+      preLoaderRoute: typeof ComponentsToastRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
+    '/components/toggle-group': {
+      id: '/components/toggle-group'
+      path: '/toggle-group'
+      fullPath: '/components/toggle-group'
+      preLoaderRoute: typeof ComponentsToggleGroupRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
     '/components/tooltip': {
       id: '/components/tooltip'
       path: '/tooltip'
@@ -642,26 +939,45 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ComponentsTooltipRouteImport
       parentRoute: typeof ComponentsRouteRoute
     }
+    '/components/tree-view': {
+      id: '/components/tree-view'
+      path: '/tree-view'
+      fullPath: '/components/tree-view'
+      preLoaderRoute: typeof ComponentsTreeViewRouteImport
+      parentRoute: typeof ComponentsRouteRoute
+    }
   }
 }
 
 interface ComponentsRouteRouteChildren {
+  ComponentsAccordionRoute: typeof ComponentsAccordionRoute
   ComponentsAlertDialogRoute: typeof ComponentsAlertDialogRoute
   ComponentsAvatarRoute: typeof ComponentsAvatarRoute
   ComponentsBadgeRoute: typeof ComponentsBadgeRoute
+  ComponentsBreadcrumbsRoute: typeof ComponentsBreadcrumbsRoute
   ComponentsButtonRoute: typeof ComponentsButtonRoute
+  ComponentsCalendarRoute: typeof ComponentsCalendarRoute
   ComponentsCalloutRoute: typeof ComponentsCalloutRoute
   ComponentsCheckboxRoute: typeof ComponentsCheckboxRoute
+  ComponentsCollapsibleRoute: typeof ComponentsCollapsibleRoute
+  ComponentsComboboxRoute: typeof ComponentsComboboxRoute
+  ComponentsCommandMenuRoute: typeof ComponentsCommandMenuRoute
   ComponentsComposerRoute: typeof ComponentsComposerRoute
+  ComponentsContextMenuRoute: typeof ComponentsContextMenuRoute
   ComponentsDataTableRoute: typeof ComponentsDataTableRoute
   ComponentsDialogRoute: typeof ComponentsDialogRoute
+  ComponentsDrawerRoute: typeof ComponentsDrawerRoute
   ComponentsEmptyStateRoute: typeof ComponentsEmptyStateRoute
+  ComponentsFileUploadRoute: typeof ComponentsFileUploadRoute
   ComponentsIconButtonRoute: typeof ComponentsIconButtonRoute
   ComponentsInputRoute: typeof ComponentsInputRoute
   ComponentsKbdRoute: typeof ComponentsKbdRoute
+  ComponentsListRoute: typeof ComponentsListRoute
   ComponentsMenuRoute: typeof ComponentsMenuRoute
   ComponentsNativeSelectRoute: typeof ComponentsNativeSelectRoute
+  ComponentsPaginationRoute: typeof ComponentsPaginationRoute
   ComponentsPopoverRoute: typeof ComponentsPopoverRoute
+  ComponentsProgressRoute: typeof ComponentsProgressRoute
   ComponentsPropertyPickerRoute: typeof ComponentsPropertyPickerRoute
   ComponentsRadioGroupRoute: typeof ComponentsRadioGroupRoute
   ComponentsSearchFieldRoute: typeof ComponentsSearchFieldRoute
@@ -669,31 +985,47 @@ interface ComponentsRouteRouteChildren {
   ComponentsSeparatorRoute: typeof ComponentsSeparatorRoute
   ComponentsSidebarRoute: typeof ComponentsSidebarRoute
   ComponentsSkeletonRoute: typeof ComponentsSkeletonRoute
+  ComponentsSliderRoute: typeof ComponentsSliderRoute
   ComponentsSpinnerRoute: typeof ComponentsSpinnerRoute
   ComponentsStatusRoute: typeof ComponentsStatusRoute
   ComponentsSwitchRoute: typeof ComponentsSwitchRoute
   ComponentsTabsRoute: typeof ComponentsTabsRoute
+  ComponentsToastRoute: typeof ComponentsToastRoute
+  ComponentsToggleGroupRoute: typeof ComponentsToggleGroupRoute
   ComponentsTooltipRoute: typeof ComponentsTooltipRoute
+  ComponentsTreeViewRoute: typeof ComponentsTreeViewRoute
   ComponentsIndexRoute: typeof ComponentsIndexRoute
 }
 
 const ComponentsRouteRouteChildren: ComponentsRouteRouteChildren = {
+  ComponentsAccordionRoute: ComponentsAccordionRoute,
   ComponentsAlertDialogRoute: ComponentsAlertDialogRoute,
   ComponentsAvatarRoute: ComponentsAvatarRoute,
   ComponentsBadgeRoute: ComponentsBadgeRoute,
+  ComponentsBreadcrumbsRoute: ComponentsBreadcrumbsRoute,
   ComponentsButtonRoute: ComponentsButtonRoute,
+  ComponentsCalendarRoute: ComponentsCalendarRoute,
   ComponentsCalloutRoute: ComponentsCalloutRoute,
   ComponentsCheckboxRoute: ComponentsCheckboxRoute,
+  ComponentsCollapsibleRoute: ComponentsCollapsibleRoute,
+  ComponentsComboboxRoute: ComponentsComboboxRoute,
+  ComponentsCommandMenuRoute: ComponentsCommandMenuRoute,
   ComponentsComposerRoute: ComponentsComposerRoute,
+  ComponentsContextMenuRoute: ComponentsContextMenuRoute,
   ComponentsDataTableRoute: ComponentsDataTableRoute,
   ComponentsDialogRoute: ComponentsDialogRoute,
+  ComponentsDrawerRoute: ComponentsDrawerRoute,
   ComponentsEmptyStateRoute: ComponentsEmptyStateRoute,
+  ComponentsFileUploadRoute: ComponentsFileUploadRoute,
   ComponentsIconButtonRoute: ComponentsIconButtonRoute,
   ComponentsInputRoute: ComponentsInputRoute,
   ComponentsKbdRoute: ComponentsKbdRoute,
+  ComponentsListRoute: ComponentsListRoute,
   ComponentsMenuRoute: ComponentsMenuRoute,
   ComponentsNativeSelectRoute: ComponentsNativeSelectRoute,
+  ComponentsPaginationRoute: ComponentsPaginationRoute,
   ComponentsPopoverRoute: ComponentsPopoverRoute,
+  ComponentsProgressRoute: ComponentsProgressRoute,
   ComponentsPropertyPickerRoute: ComponentsPropertyPickerRoute,
   ComponentsRadioGroupRoute: ComponentsRadioGroupRoute,
   ComponentsSearchFieldRoute: ComponentsSearchFieldRoute,
@@ -701,11 +1033,15 @@ const ComponentsRouteRouteChildren: ComponentsRouteRouteChildren = {
   ComponentsSeparatorRoute: ComponentsSeparatorRoute,
   ComponentsSidebarRoute: ComponentsSidebarRoute,
   ComponentsSkeletonRoute: ComponentsSkeletonRoute,
+  ComponentsSliderRoute: ComponentsSliderRoute,
   ComponentsSpinnerRoute: ComponentsSpinnerRoute,
   ComponentsStatusRoute: ComponentsStatusRoute,
   ComponentsSwitchRoute: ComponentsSwitchRoute,
   ComponentsTabsRoute: ComponentsTabsRoute,
+  ComponentsToastRoute: ComponentsToastRoute,
+  ComponentsToggleGroupRoute: ComponentsToggleGroupRoute,
   ComponentsTooltipRoute: ComponentsTooltipRoute,
+  ComponentsTreeViewRoute: ComponentsTreeViewRoute,
   ComponentsIndexRoute: ComponentsIndexRoute,
 }
 
diff --git a/apps/docs/src/routes/__root.tsx b/apps/docs/src/routes/__root.tsx
index 9948803..f7b664e 100644
--- a/apps/docs/src/routes/__root.tsx
+++ b/apps/docs/src/routes/__root.tsx
@@ -102,7 +102,9 @@ function RootDocument() {
               <DocsShell>
                 <Outlet />
               </DocsShell>
-              <CommandSearch open={searchOpen} onOpenChange={setSearchOpen} />
+              {searchOpen ? (
+                <CommandSearch onOpenChange={setSearchOpen} />
+              ) : null}
             </DocsContext.Provider>
           </Tooltip.Provider>
         </ThemeProvider>
diff --git a/apps/docs/src/routes/components/accordion.tsx b/apps/docs/src/routes/components/accordion.tsx
new file mode 100644
index 0000000..7690e42
--- /dev/null
+++ b/apps/docs/src/routes/components/accordion.tsx
@@ -0,0 +1,49 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Accordion } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/accordion")({
+  component: AccordionDocs,
+});
+
+function AccordionDocs() {
+  return (
+    <DocsPage
+      title="Accordion"
+      lead="A keyboard-accessible group of disclosure panels for dense supporting content."
+      toc={[{ id: "default", title: "Grouped disclosures" }]}
+    >
+      <Section id="default" title="Grouped disclosures">
+        <Demo
+          layout="stack"
+          code={`<Accordion.Root defaultValue={["details"]}>\n  <Accordion.Item value="details">\n    <Accordion.Header>\n      <Accordion.Trigger>Project details</Accordion.Trigger>\n    </Accordion.Header>\n    <Accordion.Panel>\n      <Accordion.Content>Visible to workspace members.</Accordion.Content>\n    </Accordion.Panel>\n  </Accordion.Item>\n</Accordion.Root>`}
+        >
+          <Accordion.Root defaultValue={["details"]}>
+            <Accordion.Item value="details">
+              <Accordion.Header>
+                <Accordion.Trigger>Project details</Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Panel>
+                <Accordion.Content>
+                  Visible to workspace members and invited guests.
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion.Item>
+            <Accordion.Item value="retention">
+              <Accordion.Header>
+                <Accordion.Trigger>Data retention</Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Panel>
+                <Accordion.Content>
+                  Deleted records are retained for 30 days.
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion.Item>
+          </Accordion.Root>
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/breadcrumbs.tsx b/apps/docs/src/routes/components/breadcrumbs.tsx
new file mode 100644
index 0000000..a92aa98
--- /dev/null
+++ b/apps/docs/src/routes/components/breadcrumbs.tsx
@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Breadcrumbs } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/breadcrumbs")({
+  component: BreadcrumbsDocs,
+});
+
+const items = [
+  { label: "Workspace", href: "#workspace" },
+  { label: "Projects", href: "#projects" },
+  { label: "Dowel", current: true },
+];
+
+function BreadcrumbsDocs() {
+  return (
+    <DocsPage
+      title="Breadcrumbs"
+      lead="A compact location trail with automatic middle-item elision."
+      toc={[{ id: "default", title: "Location trail" }]}
+    >
+      <Section id="default" title="Location trail">
+        <Demo code={`<Breadcrumbs items={items} />`} layout="stack">
+          <Breadcrumbs items={items} />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/calendar.tsx b/apps/docs/src/routes/components/calendar.tsx
new file mode 100644
index 0000000..97c488e
--- /dev/null
+++ b/apps/docs/src/routes/components/calendar.tsx
@@ -0,0 +1,58 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Calendar, DatePicker, parseDate } from "@karnstack/dowel";
+import { useState } from "react";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/calendar")({
+  component: CalendarDocs,
+});
+
+function CalendarExample() {
+  const [date, setDate] = useState(parseDate("2026-08-12"));
+  return (
+    <div className="docs-calendar-example">
+      <Calendar
+        value={date}
+        onValueChange={setDate}
+        defaultFocusedValue={parseDate("2026-08-01")}
+      />
+      <output className="docs-calendar-value" aria-live="polite">
+        Selected: <code>{date.toString()}</code>
+      </output>
+    </div>
+  );
+}
+
+function CalendarDocs() {
+  return (
+    <DocsPage
+      title="Calendar & Date Picker"
+      lead="An internationalized month grid and segmented date field with timezone-safe CalendarDate values."
+      toc={[
+        { id: "calendar", title: "Calendar" },
+        { id: "picker", title: "Date picker" },
+      ]}
+    >
+      <Section id="calendar" title="Calendar">
+        <Demo
+          code={`const [date, setDate] = useState(parseDate("2026-08-12"));\n\n<Calendar value={date} onValueChange={setDate} />\n<output>Selected: {date.toString()}</output>`}
+        >
+          <CalendarExample />
+        </Demo>
+      </Section>
+      <Section id="picker" title="Date picker">
+        <p>
+          DatePicker adds locale-aware editable segments and composes the same
+          keyboard-navigable calendar into its popover.
+        </p>
+        <Demo
+          code={`<DatePicker label="Due date" defaultValue={parseDate("2026-08-12")} />`}
+        >
+          <DatePicker label="Due date" defaultValue={parseDate("2026-08-12")} />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/collapsible.tsx b/apps/docs/src/routes/components/collapsible.tsx
new file mode 100644
index 0000000..644b1ff
--- /dev/null
+++ b/apps/docs/src/routes/components/collapsible.tsx
@@ -0,0 +1,35 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Collapsible } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/collapsible")({
+  component: CollapsibleDocs,
+});
+
+function CollapsibleDocs() {
+  return (
+    <DocsPage
+      title="Collapsible"
+      lead="An animated disclosure for one optional region of content."
+      toc={[{ id: "default", title: "Disclosure" }]}
+    >
+      <Section id="default" title="Disclosure">
+        <Demo
+          layout="stack"
+          code={`<Collapsible.Root defaultOpen>\n  <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>\n  <Collapsible.Panel>\n    <Collapsible.Content>Optional configuration.</Collapsible.Content>\n  </Collapsible.Panel>\n</Collapsible.Root>`}
+        >
+          <Collapsible.Root defaultOpen>
+            <Collapsible.Trigger>Advanced settings</Collapsible.Trigger>
+            <Collapsible.Panel>
+              <Collapsible.Content>
+                Configure branch protection and merge automation.
+              </Collapsible.Content>
+            </Collapsible.Panel>
+          </Collapsible.Root>
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/combobox.tsx b/apps/docs/src/routes/components/combobox.tsx
new file mode 100644
index 0000000..f84399e
--- /dev/null
+++ b/apps/docs/src/routes/components/combobox.tsx
@@ -0,0 +1,59 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Combobox, Field } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/combobox")({
+  component: ComboboxDocs,
+});
+
+const organizations = [
+  { value: "acme", label: "Acme", group: "Organizations" },
+  {
+    value: "northstar",
+    label: "Northstar",
+    description: "12 repositories",
+    group: "Organizations",
+  },
+  { value: "personal", label: "Personal workspace", group: "Workspaces" },
+];
+
+function ComboboxDocs() {
+  return (
+    <DocsPage
+      title="Combobox"
+      lead="A filterable single-choice field for larger predefined collections."
+      toc={[
+        { id: "default", title: "Filter and select" },
+        { id: "behavior", title: "Behavior" },
+      ]}
+    >
+      <Section id="default" title="Filter and select">
+        <p>
+          Use Combobox when Select would make someone scan too many options.
+        </p>
+        <Demo
+          layout="stack"
+          code={`<Field.Root>\n  <Field.Label>Organization</Field.Label>\n  <Combobox label="Organization" options={organizations} />\n</Field.Root>`}
+        >
+          <Field.Root>
+            <Field.Label>Organization</Field.Label>
+            <Combobox
+              label="Organization"
+              options={organizations}
+              placeholder="Find an organization"
+            />
+          </Field.Root>
+        </Demo>
+      </Section>
+      <Section id="behavior" title="Behavior">
+        <p>
+          Typing filters labels, descriptions, and groups. Arrow keys move
+          through results, Enter selects, Escape closes, and the clear button
+          resets the value.
+        </p>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/command-menu.tsx b/apps/docs/src/routes/components/command-menu.tsx
new file mode 100644
index 0000000..74a6a39
--- /dev/null
+++ b/apps/docs/src/routes/components/command-menu.tsx
@@ -0,0 +1,67 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Button, CommandMenu } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/command-menu")({
+  component: CommandMenuDocs,
+});
+
+const commands = [
+  {
+    id: "repo",
+    label: "Open repository",
+    description: "Jump to a repository",
+    group: "Navigation",
+    shortcut: "G R",
+    keywords: ["project"],
+    onSelect: () => {},
+  },
+  {
+    id: "settings",
+    label: "Open settings",
+    group: "Navigation",
+    shortcut: "G S",
+    onSelect: () => {},
+  },
+  {
+    id: "create",
+    label: "Create merge request",
+    group: "Actions",
+    shortcut: "C M",
+    onSelect: () => {},
+  },
+];
+
+function CommandMenuDocs() {
+  return (
+    <DocsPage
+      title="Command Menu"
+      lead="A modal, searchable command surface with groups, descriptions, keywords, and shortcuts."
+      toc={[
+        { id: "default", title: "Grouped commands" },
+        { id: "control", title: "Application control" },
+      ]}
+    >
+      <Section id="default" title="Grouped commands">
+        <Demo
+          code={`<CommandMenu\n  trigger={<Button>Open commands</Button>}\n  items={commands}\n  footer="↑↓ Navigate · ↵ Run · Esc Close"\n/>`}
+        >
+          <CommandMenu
+            trigger={<Button>Open commands</Button>}
+            items={commands}
+            footer="↑↓ Navigate · ↵ Run · Esc Close"
+          />
+        </Demo>
+      </Section>
+      <Section id="control" title="Application control">
+        <p>
+          Control open state from the application hotkey registry. Dowel owns
+          filtering, focus, keyboard movement, and dismissal; each command keeps
+          its own domain action.
+        </p>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/context-menu.tsx b/apps/docs/src/routes/components/context-menu.tsx
new file mode 100644
index 0000000..dbc2d0f
--- /dev/null
+++ b/apps/docs/src/routes/components/context-menu.tsx
@@ -0,0 +1,42 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ContextMenu } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/context-menu")({
+  component: ContextMenuDocs,
+});
+
+function ContextMenuDocs() {
+  return (
+    <DocsPage
+      title="Context Menu"
+      lead="A pointer-positioned action menu that shares Dowel's dropdown interaction model."
+      toc={[{ id: "default", title: "Context actions" }]}
+    >
+      <Section id="default" title="Context actions">
+        <Demo
+          layout="stack"
+          code={`<ContextMenu.Root>\n  <ContextMenu.Trigger>Right-click this surface</ContextMenu.Trigger>\n  <ContextMenu.Portal>\n    <ContextMenu.Positioner>\n      <ContextMenu.Popup>\n        <ContextMenu.Item>Rename</ContextMenu.Item>\n        <ContextMenu.Item>Duplicate</ContextMenu.Item>\n      </ContextMenu.Popup>\n    </ContextMenu.Positioner>\n  </ContextMenu.Portal>\n</ContextMenu.Root>`}
+        >
+          <ContextMenu.Root>
+            <ContextMenu.Trigger>
+              Right-click this surface for project actions
+            </ContextMenu.Trigger>
+            <ContextMenu.Portal>
+              <ContextMenu.Positioner>
+                <ContextMenu.Popup>
+                  <ContextMenu.Item>Rename</ContextMenu.Item>
+                  <ContextMenu.Item>Duplicate</ContextMenu.Item>
+                  <ContextMenu.Separator />
+                  <ContextMenu.Item tone="danger">Archive</ContextMenu.Item>
+                </ContextMenu.Popup>
+              </ContextMenu.Positioner>
+            </ContextMenu.Portal>
+          </ContextMenu.Root>
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/drawer.tsx b/apps/docs/src/routes/components/drawer.tsx
new file mode 100644
index 0000000..8c9748a
--- /dev/null
+++ b/apps/docs/src/routes/components/drawer.tsx
@@ -0,0 +1,64 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Button, Drawer } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/drawer")({
+  component: DrawerDocs,
+});
+
+function DrawerExample() {
+  return (
+    <Drawer.Root side="right">
+      <Drawer.Trigger render={<Button>Open repository details</Button>} />
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup>
+            <Drawer.Content>
+              <Drawer.Header>
+                <Drawer.Title>Repository details</Drawer.Title>
+                <Drawer.Description>
+                  Metadata and access for dowel.
+                </Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>Default branch: main</Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close render={<Button>Close</Button>} />
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+function DrawerDocs() {
+  return (
+    <DocsPage
+      title="Drawer"
+      lead="A swipe-dismissable edge panel for narrow navigation and temporary detail."
+      toc={[
+        { id: "default", title: "Side drawer" },
+        { id: "sides", title: "Sides and gestures" },
+      ]}
+    >
+      <Section id="default" title="Side drawer">
+        <Demo
+          code={`<Drawer.Root side="right">\n  <Drawer.Trigger render={<Button>Open details</Button>} />\n  <Drawer.Portal>\n    <Drawer.Backdrop />\n    <Drawer.Viewport>\n      <Drawer.Popup>…</Drawer.Popup>\n    </Drawer.Viewport>\n  </Drawer.Portal>\n</Drawer.Root>`}
+        >
+          <DrawerExample />
+        </Demo>
+      </Section>
+      <Section id="sides" title="Sides and gestures">
+        <p>
+          Top, right, bottom, and left placement each map to the matching
+          swipe-dismiss gesture. Use Dialog when gesture dismissal and edge
+          attachment are unnecessary.
+        </p>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/file-upload.tsx b/apps/docs/src/routes/components/file-upload.tsx
new file mode 100644
index 0000000..a3b5d05
--- /dev/null
+++ b/apps/docs/src/routes/components/file-upload.tsx
@@ -0,0 +1,34 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { FileUpload } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/file-upload")({
+  component: FileUploadDocs,
+});
+
+function FileUploadDocs() {
+  return (
+    <DocsPage
+      title="File Upload"
+      lead="A native file picker and dropzone with type, size, count, and duplicate validation."
+      toc={[{ id: "default", title: "Dropzone" }]}
+    >
+      <Section id="default" title="Dropzone">
+        <Demo
+          layout="stack"
+          code={`<FileUpload\n  multiple\n  accept="image/*,.pdf"\n  maxFiles={3}\n  maxSize={5 * 1024 * 1024}\n  description="PNG, JPG, or PDF up to 5 MB"\n/>`}
+        >
+          <FileUpload
+            multiple
+            accept="image/*,.pdf"
+            maxFiles={3}
+            maxSize={5 * 1024 * 1024}
+            description="PNG, JPG, or PDF up to 5 MB"
+          />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/list.tsx b/apps/docs/src/routes/components/list.tsx
new file mode 100644
index 0000000..430f490
--- /dev/null
+++ b/apps/docs/src/routes/components/list.tsx
@@ -0,0 +1,63 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  Avatar,
+  GroupHeader,
+  List,
+  ListCell,
+  ListRow,
+  Status,
+} from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/list")({
+  component: ListDocs,
+});
+
+function ListDocs() {
+  return (
+    <DocsPage
+      title="List"
+      lead="Semantic grouped rows with constrained cells, selection, density, and truncation."
+      toc={[
+        { id: "collection", title: "Dense collection" },
+        { id: "composition", title: "Composition" },
+      ]}
+    >
+      <Section id="collection" title="Dense collection">
+        <Demo
+          layout="stack"
+          code={`<List aria-label="Repositories" divided>\n  <GroupHeader>Favorites</GroupHeader>\n  <ListRow selected>\n    <Avatar name="Dowel" shape="square" />\n    <ListCell grow truncate>dowel</ListCell>\n    <ListCell tone="tertiary">Updated today</ListCell>\n  </ListRow>\n</List>`}
+        >
+          <List aria-label="Repositories" divided>
+            <GroupHeader>Favorites</GroupHeader>
+            <ListRow selected>
+              <Avatar name="Dowel" shape="square" size="sm" />
+              <ListCell grow truncate>
+                dowel
+              </ListCell>
+              <ListCell tone="tertiary">
+                <Status tone="success">Synced</Status>
+              </ListCell>
+            </ListRow>
+            <ListRow>
+              <Avatar name="Sourcetown" shape="square" size="sm" />
+              <ListCell grow truncate>
+                sourcetown
+              </ListCell>
+              <ListCell tone="tertiary">Updated yesterday</ListCell>
+            </ListRow>
+          </List>
+        </Demo>
+      </Section>
+      <Section id="composition" title="Composition">
+        <p>
+          Rows preserve list semantics and own layout only. Put native links,
+          buttons, checkboxes, or menus inside cells when a row needs
+          interaction.
+        </p>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/pagination.tsx b/apps/docs/src/routes/components/pagination.tsx
new file mode 100644
index 0000000..ee22f49
--- /dev/null
+++ b/apps/docs/src/routes/components/pagination.tsx
@@ -0,0 +1,33 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Pagination } from "@karnstack/dowel";
+import { useState } from "react";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/pagination")({
+  component: PaginationDocs,
+});
+
+function PaginationExample() {
+  const [page, setPage] = useState(4);
+  return <Pagination page={page} totalPages={12} onPageChange={setPage} />;
+}
+
+function PaginationDocs() {
+  return (
+    <DocsPage
+      title="Pagination"
+      lead="Controlled page navigation with resilient bounds and compact elision."
+      toc={[{ id: "default", title: "Page navigation" }]}
+    >
+      <Section id="default" title="Page navigation">
+        <Demo
+          code={`const [page, setPage] = useState(4);\n\n<Pagination page={page} totalPages={12} onPageChange={setPage} />`}
+        >
+          <PaginationExample />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/progress.tsx b/apps/docs/src/routes/components/progress.tsx
new file mode 100644
index 0000000..429d336
--- /dev/null
+++ b/apps/docs/src/routes/components/progress.tsx
@@ -0,0 +1,29 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Progress } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/progress")({
+  component: ProgressDocs,
+});
+
+function ProgressDocs() {
+  return (
+    <DocsPage
+      title="Progress"
+      lead="Determinate and indeterminate task progress with localized values."
+      toc={[{ id: "states", title: "Task states" }]}
+    >
+      <Section id="states" title="Task states">
+        <Demo
+          layout="stack"
+          code={`<Progress label="Upload artifacts" value={64} />\n<Progress label="Connecting" value={null} showValue={false} />`}
+        >
+          <Progress label="Upload artifacts" value={64} />
+          <Progress label="Connecting" value={null} showValue={false} />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/slider.tsx b/apps/docs/src/routes/components/slider.tsx
new file mode 100644
index 0000000..ced9a00
--- /dev/null
+++ b/apps/docs/src/routes/components/slider.tsx
@@ -0,0 +1,37 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Slider } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/slider")({
+  component: SliderDocs,
+});
+
+function SliderDocs() {
+  return (
+    <DocsPage
+      title="Slider"
+      lead="A precise pointer and keyboard control for values across a numeric range."
+      toc={[{ id: "default", title: "Numeric range" }]}
+    >
+      <Section id="default" title="Numeric range">
+        <Demo
+          layout="stack"
+          code={`<Slider.Root defaultValue={40}>\n  <Slider.Label>Volume</Slider.Label>\n  <Slider.Value />\n  <Slider.Control>\n    <Slider.Track><Slider.Indicator /></Slider.Track>\n    <Slider.Thumb aria-label="Volume" />\n  </Slider.Control>\n</Slider.Root>`}
+        >
+          <Slider.Root defaultValue={40}>
+            <Slider.Label>Volume</Slider.Label>
+            <Slider.Value />
+            <Slider.Control>
+              <Slider.Track>
+                <Slider.Indicator />
+              </Slider.Track>
+              <Slider.Thumb aria-label="Volume" />
+            </Slider.Control>
+          </Slider.Root>
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/toast.tsx b/apps/docs/src/routes/components/toast.tsx
new file mode 100644
index 0000000..4188830
--- /dev/null
+++ b/apps/docs/src/routes/components/toast.tsx
@@ -0,0 +1,74 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { Button, ToastProvider, toast } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/toast")({
+  component: ToastDocs,
+});
+
+function ToastDocs() {
+  return (
+    <DocsPage
+      title="Toast"
+      lead="A globally callable notification queue with tone, actions, promises, and swipe dismissal."
+      toc={[
+        { id: "global", title: "Global manager" },
+        { id: "motion", title: "Stacking and motion" },
+        { id: "guidance", title: "When to use" },
+      ]}
+    >
+      <Section id="global" title="Global manager">
+        <p>
+          Mount one provider near the application root, then call toast from
+          components or ordinary modules.
+        </p>
+        <Demo
+          code={`<ToastProvider>\n  <App />\n</ToastProvider>\n\ntoast.success("Repository created", {\n  description: "dowel is ready",\n});`}
+        >
+          <ToastProvider>
+            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+              <Button
+                onClick={() =>
+                  toast.success("Repository created", {
+                    description: "dowel is ready",
+                  })
+                }
+              >
+                Create toast
+              </Button>
+              <Button
+                onClick={() => {
+                  toast("Sync queued", { description: "Waiting for a slot" });
+                  toast.info("Syncing repository", {
+                    description: "Pulling the latest changes",
+                  });
+                  toast.success("Repository synced", {
+                    description: "Everything is up to date",
+                  });
+                }}
+              >
+                Create stack
+              </Button>
+            </div>
+          </ToastProvider>
+        </Demo>
+      </Section>
+      <Section id="motion" title="Stacking and motion">
+        <p>
+          New notifications settle onto a compact stack. Hover or focus the
+          viewport to expand it, and drag a toast down or right to dismiss it.
+          Motion is reduced automatically when the operating system requests it.
+        </p>
+      </Section>
+      <Section id="guidance" title="When to use">
+        <p>
+          Reserve toasts for transient, non-blocking results. Keep validation
+          and pending state next to the action that produced them. F6 moves
+          focus into the notification viewport.
+        </p>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/toggle-group.tsx b/apps/docs/src/routes/components/toggle-group.tsx
new file mode 100644
index 0000000..35f3981
--- /dev/null
+++ b/apps/docs/src/routes/components/toggle-group.tsx
@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ToggleGroup } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/toggle-group")({
+  component: ToggleGroupDocs,
+});
+
+function ToggleGroupDocs() {
+  return (
+    <DocsPage
+      title="Toggle Group"
+      lead="A connected set of independently pressed controls for compact view options."
+      toc={[{ id: "default", title: "View options" }]}
+    >
+      <Section id="default" title="View options">
+        <Demo
+          code={`<ToggleGroup.Root aria-label="View options">\n  <ToggleGroup.Item defaultPressed>List</ToggleGroup.Item>\n  <ToggleGroup.Item>Board</ToggleGroup.Item>\n</ToggleGroup.Root>`}
+        >
+          <ToggleGroup.Root aria-label="View options">
+            <ToggleGroup.Item defaultPressed>List</ToggleGroup.Item>
+            <ToggleGroup.Item>Board</ToggleGroup.Item>
+            <ToggleGroup.Item>Timeline</ToggleGroup.Item>
+          </ToggleGroup.Root>
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/components/tree-view.tsx b/apps/docs/src/routes/components/tree-view.tsx
new file mode 100644
index 0000000..b3ba964
--- /dev/null
+++ b/apps/docs/src/routes/components/tree-view.tsx
@@ -0,0 +1,47 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { TreeView } from "@karnstack/dowel";
+
+import { Demo } from "../../components/demo";
+import { DocsPage, Section } from "../../components/docs-page";
+
+export const Route = createFileRoute("/components/tree-view")({
+  component: TreeViewDocs,
+});
+
+const items = [
+  {
+    id: "product",
+    label: "Product",
+    children: [
+      { id: "roadmap", label: "Roadmap" },
+      { id: "feedback", label: "Feedback" },
+    ],
+  },
+  {
+    id: "engineering",
+    label: "Engineering",
+    children: [
+      { id: "platform", label: "Platform" },
+      { id: "web", label: "Web" },
+    ],
+  },
+];
+
+function TreeViewDocs() {
+  return (
+    <DocsPage
+      title="Tree View"
+      lead="A nested, keyboard-navigable hierarchy with controlled selection and expansion."
+      toc={[{ id: "default", title: "Workspace hierarchy" }]}
+    >
+      <Section id="default" title="Workspace hierarchy">
+        <Demo
+          layout="stack"
+          code={`<TreeView items={items} defaultExpandedIds={["product"]} />`}
+        >
+          <TreeView items={items} defaultExpandedIds={["product"]} />
+        </Demo>
+      </Section>
+    </DocsPage>
+  );
+}
diff --git a/apps/docs/src/routes/dependencies.tsx b/apps/docs/src/routes/dependencies.tsx
index 3a34e04..df7c4f8 100644
--- a/apps/docs/src/routes/dependencies.tsx
+++ b/apps/docs/src/routes/dependencies.tsx
@@ -35,6 +35,16 @@ const runtimeDependencies = [
     version: packageMetadata.dependencies["@tanstack/react-table"],
     role: "Its headless, application-controlled state model handles advanced table behavior without coupling Dowel to a table layout or data-fetching opinion.",
   },
+  {
+    name: "@internationalized/date",
+    version: packageMetadata.dependencies["@internationalized/date"],
+    role: "Its timezone-safe date types and locale-aware calendar arithmetic keep date-only values stable across regions, time zones, and calendar systems.",
+  },
+  {
+    name: "react-aria-components",
+    version: packageMetadata.dependencies["react-aria-components"],
+    role: "It supplies the Calendar and DatePicker accessibility model, including roving focus, keyboard navigation, localized date segments, and validation behavior.",
+  },
 ] as const;
 
 const peerDependencies = [
diff --git a/apps/docs/test/browser/contrast.spec.ts b/apps/docs/test/browser/contrast.spec.ts
index a711dde..10325ef 100644
--- a/apps/docs/test/browser/contrast.spec.ts
+++ b/apps/docs/test/browser/contrast.spec.ts
@@ -20,6 +20,107 @@ test("dependencies renders inside the documentation shell", async ({
   await expect(page.locator(".docs-workspace-footer")).toBeVisible();
 });
 
+test("documentation search uses the library command menu and includes dependencies", async ({
+  page,
+}) => {
+  await page.goto("/components/command-menu");
+  await page.waitForLoadState("networkidle");
+  await page.getByRole("button", { name: /^search\b/i }).click();
+
+  const commandMenu = page.locator('[data-dowel-component="command-menu"]');
+  await expect(commandMenu).toBeVisible();
+  await commandMenu.getByRole("combobox").fill("dependencies");
+  await commandMenu.getByText("Dependencies", { exact: true }).click();
+
+  await expect(page).toHaveURL(/\/dependencies$/);
+  await expect(
+    page.getByRole("heading", { level: 1, name: "Dependencies" }),
+  ).toBeVisible();
+});
+
+test("calendar exposes its live selected date and uses a non-text cursor", async ({
+  page,
+}) => {
+  await page.goto("/components/calendar");
+  await page.waitForLoadState("networkidle");
+
+  const twelfth = page
+    .getByRole("button", { name: /August 12, 2026/i })
+    .first();
+  await expect(twelfth).toHaveAttribute("data-selected", "true");
+  await expect(page.locator(".docs-calendar-value")).toHaveText(
+    "Selected: 2026-08-12",
+  );
+  await expect(twelfth).toHaveCSS("cursor", "default");
+  await expect(twelfth).toHaveCSS("align-items", "center");
+  await expect(twelfth).toHaveCSS("justify-content", "center");
+
+  await page
+    .getByRole("button", { name: /August 20, 2026/i })
+    .first()
+    .click();
+  await expect(page.locator(".docs-calendar-value")).toHaveText(
+    "Selected: 2026-08-20",
+  );
+});
+
+test("semantic badges share one neutral shell", async ({ page }) => {
+  await page.goto("/components/badge");
+
+  const accent = page.locator(
+    '[data-dowel-component="badge"][data-tone="accent"]',
+  );
+  const danger = page.locator(
+    '[data-dowel-component="badge"][data-tone="danger"]',
+  );
+  const [accentBackground, dangerBackground, accentColor, dangerColor] =
+    await Promise.all([
+      accent.evaluate((element) => getComputedStyle(element).backgroundColor),
+      danger.evaluate((element) => getComputedStyle(element).backgroundColor),
+      accent.evaluate((element) => getComputedStyle(element).color),
+      danger.evaluate((element) => getComputedStyle(element).color),
+    ]);
+
+  expect(dangerBackground).toBe(accentBackground);
+  expect(dangerColor).not.toBe(accentColor);
+});
+
+test("component navigation opens the active category and toggles sections", async ({
+  page,
+}) => {
+  await page.goto("/components/toast");
+  await expect(
+    page.locator('[data-dowel-component="toast-viewport"]'),
+  ).toBeAttached();
+
+  const feedback = page.getByRole("button", { name: "Feedback" }).first();
+  const actions = page.getByRole("button", { name: "Actions" }).first();
+  await expect(feedback).toHaveAttribute("aria-expanded", "true");
+  await expect(
+    page.getByRole("link", { name: "Toast", exact: true }).first(),
+  ).toBeVisible();
+  await expect(actions).toHaveAttribute("aria-expanded", "true");
+
+  await actions.click();
+  await expect(actions).toHaveAttribute("aria-expanded", "false");
+  await expect(
+    actions.locator("xpath=following-sibling::*[1]"),
+  ).toHaveAttribute("aria-hidden", "true");
+});
+
+test("toast notifications stack and expand on hover", async ({ page }) => {
+  await page.goto("/components/toast");
+  const viewport = page.locator('[data-dowel-component="toast-viewport"]');
+  await expect(viewport).toBeAttached();
+  await page.getByRole("button", { name: "Create stack" }).click();
+
+  const toasts = page.locator('[data-dowel-component="toast"]');
+  await expect(toasts).toHaveCount(3);
+  await toasts.first().hover();
+  await expect(viewport).toHaveAttribute("data-expanded", "");
+  await expect(toasts.first()).toHaveAttribute("data-expanded", "");
+});
+
 for (const theme of themes) {
   test(`component catalog meets WCAG 2.2 AA contrast in ${theme} mode`, async ({
     page,
diff --git a/packages/dowel/README.md b/packages/dowel/README.md
index fe543d7..3d8cff8 100644
--- a/packages/dowel/README.md
+++ b/packages/dowel/README.md
@@ -25,7 +25,7 @@ import { Button, ThemeProvider } from "@karnstack/dowel";
 
 ## Components
 
-Alert Dialog · Avatar · Badge · Button · Callout · Checkbox · Composer · Data Table · Dialog · Empty State · Icon Button · Input · Kbd · Menu · Native Select · Popover · Property Picker · Radio Group · Search Field · Select · Separator · Sidebar · Skeleton · Spinner · Status · Switch · Tabs · Tooltip
+Alert Dialog · Avatar · Badge · Button · Callout · Checkbox · Combobox · Command Menu · Composer · Data Table · Dialog · Drawer · Empty State · Icon Button · Input · Kbd · List · Menu · Native Select · Popover · Progress · Property Picker · Radio Group · Search Field · Select · Separator · Sidebar · Skeleton · Spinner · Status · Switch · Tabs · Toast · Tooltip
 
 Visual controls own their appearance. Layout primitives accept application
 hooks. Every theme, focus state, and interaction ships with the package.
diff --git a/packages/dowel/package.json b/packages/dowel/package.json
index 1b21e0f..15900ee 100644
--- a/packages/dowel/package.json
+++ b/packages/dowel/package.json
@@ -53,8 +53,10 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@heroicons/react": "2.2.0",
+    "@internationalized/date": "^3.12.3",
     "@stylexjs/stylex": "0.19.0",
-    "@tanstack/react-table": "^9.1.2"
+    "@tanstack/react-table": "^9.1.2",
+    "react-aria-components": "^1.20.0"
   },
   "devDependencies": {
     "@stylexjs/eslint-plugin": "0.19.0",
diff --git a/packages/dowel/src/components/accordion/accordion.stylex.ts b/packages/dowel/src/components/accordion/accordion.stylex.ts
new file mode 100644
index 0000000..4677897
--- /dev/null
+++ b/packages/dowel/src/components/accordion/accordion.stylex.ts
@@ -0,0 +1,73 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+
+export const accordion = stylex.create({
+  root: {
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    overflow: "hidden",
+    width: "100%",
+  },
+  item: {
+    borderTopColor: tokens["--dowel-border-default"],
+    borderTopStyle: "solid",
+    borderTopWidth: tokens["--dowel-hairline"],
+    ":first-child": { borderTopWidth: 0 },
+  },
+  header: { margin: 0 },
+  trigger: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    color: tokens["--dowel-text-primary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    gap: "0.75rem",
+    justifyContent: "space-between",
+    minHeight: "2.5rem",
+    outline: "none",
+    paddingInline: "0.75rem",
+    textAlign: "left",
+    width: "100%",
+    ":hover": { backgroundColor: tokens["--dowel-bg-hover"] },
+    ":focus-visible": {
+      boxShadow: `inset 0 0 0 1px ${tokens["--dowel-focus-ring"]}`,
+    },
+    "[data-disabled]": { color: tokens["--dowel-text-disabled"] },
+  },
+  triggerText: { minWidth: 0 },
+  icon: {
+    color: tokens["--dowel-text-tertiary"],
+    flexShrink: 0,
+    transitionDuration: {
+      default: tokens["--dowel-duration-fast"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "transform",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+  },
+  panel: {
+    color: tokens["--dowel-text-secondary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    height: "var(--accordion-panel-height)",
+    lineHeight: 1.5,
+    overflow: "hidden",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "height",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    "[data-starting-style]": { height: 0 },
+    "[data-ending-style]": { height: 0 },
+  },
+  content: { padding: "0 0.75rem 0.75rem" },
+});
diff --git a/packages/dowel/src/components/accordion/accordion.test.tsx b/packages/dowel/src/components/accordion/accordion.test.tsx
new file mode 100644
index 0000000..b877123
--- /dev/null
+++ b/packages/dowel/src/components/accordion/accordion.test.tsx
@@ -0,0 +1,24 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { Accordion } from "./index";
+
+describe("Accordion", () => {
+  it("opens panels from their heading", async () => {
+    render(
+      <Accordion.Root>
+        <Accordion.Item value="one">
+          <Accordion.Header>
+            <Accordion.Trigger>Details</Accordion.Trigger>
+          </Accordion.Header>
+          <Accordion.Panel>
+            <Accordion.Content>Panel content</Accordion.Content>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion.Root>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Details" }));
+    expect(screen.getByText("Panel content")).toBeDefined();
+  });
+});
diff --git a/packages/dowel/src/components/accordion/index.tsx b/packages/dowel/src/components/accordion/index.tsx
new file mode 100644
index 0000000..6298f48
--- /dev/null
+++ b/packages/dowel/src/components/accordion/index.tsx
@@ -0,0 +1,98 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { ChevronRightIcon } from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+
+import * as styles from "./accordion.stylex";
+
+type PartProps<T extends ElementType> = Omit<
+  ComponentPropsWithoutRef<T>,
+  "className" | "style"
+>;
+
+function sx(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+const Root = forwardRef<HTMLDivElement, PartProps<typeof BaseAccordion.Root>>(
+  function AccordionRoot(props, ref) {
+    return (
+      <BaseAccordion.Root
+        ref={ref}
+        {...props}
+        {...sx(styles.accordion.root)}
+        data-dowel-component="accordion"
+      />
+    );
+  },
+);
+
+const Item = forwardRef<HTMLDivElement, PartProps<typeof BaseAccordion.Item>>(
+  function AccordionItem(props, ref) {
+    return (
+      <BaseAccordion.Item
+        ref={ref}
+        {...props}
+        {...sx(styles.accordion.item)}
+        data-dowel-part="accordion-item"
+      />
+    );
+  },
+);
+
+const Header = forwardRef<
+  HTMLHeadingElement,
+  PartProps<typeof BaseAccordion.Header>
+>(function AccordionHeader(props, ref) {
+  return (
+    <BaseAccordion.Header
+      ref={ref}
+      {...props}
+      {...sx(styles.accordion.header)}
+    />
+  );
+});
+
+const Trigger = forwardRef<
+  HTMLElement,
+  PartProps<typeof BaseAccordion.Trigger>
+>(function AccordionTrigger({ children, ...props }, ref) {
+  return (
+    <BaseAccordion.Trigger
+      ref={ref}
+      {...props}
+      {...sx(styles.accordion.trigger)}
+    >
+      <span {...sx(styles.accordion.triggerText)}>{children}</span>
+      <ChevronRightIcon
+        aria-hidden="true"
+        width={14}
+        height={14}
+        {...sx(styles.accordion.icon)}
+      />
+    </BaseAccordion.Trigger>
+  );
+});
+
+const Panel = forwardRef<HTMLDivElement, PartProps<typeof BaseAccordion.Panel>>(
+  function AccordionPanel(props, ref) {
+    return (
+      <BaseAccordion.Panel
+        ref={ref}
+        {...props}
+        {...sx(styles.accordion.panel)}
+        data-dowel-part="accordion-panel"
+      />
+    );
+  },
+);
+
+const Content = forwardRef<HTMLDivElement, { children?: ReactNode }>(
+  function AccordionContent(props, ref) {
+    return <div ref={ref} {...props} {...sx(styles.accordion.content)} />;
+  },
+);
+
+export const Accordion = { Root, Item, Header, Trigger, Panel, Content };
diff --git a/packages/dowel/src/components/badge/badge.stylex.ts b/packages/dowel/src/components/badge/badge.stylex.ts
index 584790c..7b9d733 100644
--- a/packages/dowel/src/components/badge/badge.stylex.ts
+++ b/packages/dowel/src/components/badge/badge.stylex.ts
@@ -55,8 +55,5 @@ export const tone = stylex.create({
   accent: { color: tokens["--dowel-accent"] },
   success: { color: tokens["--dowel-success"] },
   warning: { color: tokens["--dowel-warning"] },
-  danger: {
-    backgroundColor: tokens["--dowel-danger-surface"],
-    color: tokens["--dowel-danger"],
-  },
+  danger: { color: tokens["--dowel-danger"] },
 });
diff --git a/packages/dowel/src/components/breadcrumbs/breadcrumbs.stylex.ts b/packages/dowel/src/components/breadcrumbs/breadcrumbs.stylex.ts
new file mode 100644
index 0000000..929df1e
--- /dev/null
+++ b/packages/dowel/src/components/breadcrumbs/breadcrumbs.stylex.ts
@@ -0,0 +1,55 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+export const breadcrumbs = stylex.create({
+  root: { minWidth: 0 },
+  list: {
+    alignItems: "center",
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "0.25rem",
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+  },
+  item: {
+    alignItems: "center",
+    display: "inline-flex",
+    gap: "0.25rem",
+    minWidth: 0,
+  },
+  separator: { color: tokens["--dowel-text-disabled"], flexShrink: 0 },
+  link: {
+    borderRadius: tokens["--dowel-radius-sm"],
+    color: tokens["--dowel-text-secondary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    outline: "none",
+    padding: "0.125rem 0.25rem",
+    textDecoration: "none",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+  },
+  current: {
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    overflow: "hidden",
+    padding: "0.125rem 0.25rem",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  ellipsis: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    padding: "0.125rem",
+  },
+});
diff --git a/packages/dowel/src/components/breadcrumbs/breadcrumbs.test.tsx b/packages/dowel/src/components/breadcrumbs/breadcrumbs.test.tsx
new file mode 100644
index 0000000..1cea75f
--- /dev/null
+++ b/packages/dowel/src/components/breadcrumbs/breadcrumbs.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Breadcrumbs } from "./index";
+describe("Breadcrumbs", () => {
+  it("marks the current page", () => {
+    render(
+      <Breadcrumbs
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Settings", current: true },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Settings").getAttribute("aria-current")).toBe(
+      "page",
+    );
+  });
+});
diff --git a/packages/dowel/src/components/breadcrumbs/index.tsx b/packages/dowel/src/components/breadcrumbs/index.tsx
new file mode 100644
index 0000000..00dc119
--- /dev/null
+++ b/packages/dowel/src/components/breadcrumbs/index.tsx
@@ -0,0 +1,78 @@
+import {
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+} from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import * as styles from "./breadcrumbs.stylex";
+
+export interface BreadcrumbItem {
+  label: ReactNode;
+  href?: string;
+  current?: boolean;
+}
+export interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  ariaLabel?: string;
+  maxItems?: number;
+}
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+export function Breadcrumbs({
+  items,
+  ariaLabel = "Breadcrumbs",
+  maxItems = 5,
+}: BreadcrumbsProps) {
+  const visible: Array<BreadcrumbItem | "ellipsis"> =
+    items.length > maxItems
+      ? [items[0]!, "ellipsis", ...items.slice(-(maxItems - 2))]
+      : items;
+  return (
+    <nav
+      aria-label={ariaLabel}
+      {...sx(styles.breadcrumbs.root)}
+      data-dowel-component="breadcrumbs"
+    >
+      <ol {...sx(styles.breadcrumbs.list)}>
+        {visible.map((item, index) => (
+          <li
+            key={
+              item === "ellipsis" ? "ellipsis" : `${index}-${String(item.href)}`
+            }
+            {...sx(styles.breadcrumbs.item)}
+          >
+            {index > 0 ? (
+              <ChevronRightIcon
+                width={12}
+                height={12}
+                aria-hidden="true"
+                {...sx(styles.breadcrumbs.separator)}
+              />
+            ) : null}
+            {item === "ellipsis" ? (
+              <span
+                aria-label="More levels"
+                {...sx(styles.breadcrumbs.ellipsis)}
+              >
+                <EllipsisHorizontalIcon width={14} height={14} />
+              </span>
+            ) : item.href && !item.current ? (
+              <a href={item.href} {...sx(styles.breadcrumbs.link)}>
+                {item.label}
+              </a>
+            ) : (
+              <span
+                aria-current={item.current ? "page" : undefined}
+                {...sx(styles.breadcrumbs.current)}
+              >
+                {item.label}
+              </span>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
diff --git a/packages/dowel/src/components/calendar/calendar.stylex.ts b/packages/dowel/src/components/calendar/calendar.stylex.ts
new file mode 100644
index 0000000..75436d6
--- /dev/null
+++ b/packages/dowel/src/components/calendar/calendar.stylex.ts
@@ -0,0 +1,240 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const COARSE = "@media (pointer: coarse)";
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+
+export const calendar = stylex.create({
+  root: {
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    padding: "0.25rem",
+    width: "17.5rem",
+  },
+  header: {
+    alignItems: "center",
+    display: "grid",
+    gap: "0.25rem",
+    gridTemplateColumns: "2rem 1fr 2rem",
+    marginBottom: "0.375rem",
+  },
+  month: {
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    margin: 0,
+    textAlign: "center",
+  },
+  nav: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-secondary"],
+    display: "inline-flex",
+    height: "2rem",
+    justifyContent: "center",
+    outline: "none",
+    padding: 0,
+    width: "2rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-1px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+  },
+  grid: {
+    borderCollapse: "separate",
+    borderSpacing: "0.125rem",
+    tableLayout: "fixed",
+    width: "100%",
+  },
+  weekday: {
+    color: tokens["--dowel-text-tertiary"],
+    fontSize: "0.6875rem",
+    fontWeight: 600,
+    height: "1.5rem",
+    padding: 0,
+    textAlign: "center",
+    textTransform: "uppercase",
+  },
+  day: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-secondary"],
+    cursor: "default",
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    height: { default: "2rem", [COARSE]: "2.5rem" },
+    justifyContent: "center",
+    outline: "none",
+    padding: 0,
+    position: "relative",
+    textAlign: "center",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+  },
+  dayFocused: {
+    outlineColor: tokens["--dowel-focus-ring"],
+    outlineOffset: "-1px",
+    outlineStyle: "solid",
+    outlineWidth: "1px",
+  },
+  outside: { color: tokens["--dowel-text-disabled"] },
+  selected: {
+    backgroundColor: tokens["--dowel-accent"],
+    color: tokens["--dowel-on-accent"],
+    ":hover": {
+      backgroundColor: tokens["--dowel-accent-hover"],
+      color: tokens["--dowel-on-accent"],
+    },
+  },
+  today: {
+    fontWeight: 700,
+    "::after": {
+      backgroundColor: tokens["--dowel-accent"],
+      borderRadius: "50%",
+      bottom: "0.1875rem",
+      content: '""',
+      height: "2px",
+      left: "calc(50% - 1px)",
+      position: "absolute",
+      width: "2px",
+    },
+  },
+  todaySelected: {
+    "::after": { backgroundColor: tokens["--dowel-on-accent"] },
+  },
+  disabled: {
+    color: tokens["--dowel-text-disabled"],
+    opacity: 0.45,
+  },
+  unavailable: {
+    color: tokens["--dowel-text-tertiary"],
+    textDecoration: "line-through",
+  },
+});
+
+export const picker = stylex.create({
+  root: {
+    display: "inline-flex",
+    flexDirection: "column",
+    fontFamily: tokens["--dowel-font-sans"],
+    gap: "0.375rem",
+    minWidth: 0,
+  },
+  label: {
+    color: tokens["--dowel-text-primary"],
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    lineHeight: 1.4,
+  },
+  group: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-1"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-control"],
+    boxSizing: "border-box",
+    display: "inline-flex",
+    height: tokens["--dowel-control-md"],
+    minWidth: "10rem",
+    transitionDuration: tokens["--dowel-duration-normal"],
+    transitionProperty: "border-color, background-color, opacity",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    ":hover": { borderColor: tokens["--dowel-border-strong"] },
+  },
+  groupFocused: {
+    borderColor: tokens["--dowel-focus-ring"],
+    boxShadow: "none",
+  },
+  groupInvalid: { borderColor: tokens["--dowel-danger"] },
+  disabled: { cursor: "not-allowed", opacity: 0.55 },
+  input: {
+    alignItems: "center",
+    color: tokens["--dowel-text-primary"],
+    display: "flex",
+    flex: 1,
+    fontSize: "0.8125rem",
+    fontWeight: 450,
+    letterSpacing: "-0.0125rem",
+    minWidth: 0,
+    paddingLeft: "0.625rem",
+  },
+  segment: {
+    borderRadius: "3px",
+    color: tokens["--dowel-text-primary"],
+    outline: "none",
+    paddingBlock: "0.125rem",
+    "[data-placeholder]": { color: tokens["--dowel-text-tertiary"] },
+    "[data-focused]": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    "[data-type='literal']": { color: tokens["--dowel-text-tertiary"] },
+  },
+  trigger: {
+    alignItems: "center",
+    alignSelf: "stretch",
+    backgroundColor: "transparent",
+    borderColor: tokens["--dowel-border-subtle"],
+    borderRadius: 0,
+    borderStyle: "solid",
+    borderWidth: "0 0 0 1px",
+    color: tokens["--dowel-text-secondary"],
+    display: "inline-flex",
+    justifyContent: "center",
+    outline: "none",
+    padding: 0,
+    width: "2rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+  },
+  description: {
+    color: tokens["--dowel-text-tertiary"],
+    fontSize: "0.75rem",
+    lineHeight: 1.5,
+  },
+  popover: {
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: "10px",
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-popover"],
+    boxSizing: "border-box",
+    maxWidth: "calc(100vw - 1rem)",
+    opacity: 1,
+    outline: "none",
+    padding: "0.5rem",
+    transitionDuration: {
+      default: tokens["--dowel-duration-fast"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity, transform",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    zIndex: 70,
+    "[data-entering]": { opacity: 0, transform: "translateY(-2px)" },
+    "[data-exiting]": { opacity: 0, transform: "translateY(-2px)" },
+  },
+  dialog: { outline: "none" },
+});
diff --git a/packages/dowel/src/components/calendar/calendar.test.tsx b/packages/dowel/src/components/calendar/calendar.test.tsx
new file mode 100644
index 0000000..1a9224e
--- /dev/null
+++ b/packages/dowel/src/components/calendar/calendar.test.tsx
@@ -0,0 +1,54 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { parseDate } from "@internationalized/date";
+import { describe, expect, it, vi } from "vitest";
+import { Calendar, DatePicker } from "./index";
+describe("Calendar", () => {
+  it("marks the controlled date as selected", () => {
+    render(<Calendar value={parseDate("2026-08-12")} locale="en-US" />);
+    expect(
+      screen
+        .getByRole("button", { name: /August 12, 2026/i })
+        .getAttribute("data-selected"),
+    ).not.toBeNull();
+  });
+
+  it("selects a date", async () => {
+    const change = vi.fn();
+    render(
+      <Calendar
+        defaultFocusedValue={parseDate("2026-08-01")}
+        onValueChange={change}
+      />,
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: /August 12, 2026/i }),
+    );
+    expect(change.mock.calls[0]?.[0]?.toString()).toBe("2026-08-12");
+  });
+  it("opens from a date picker", async () => {
+    render(
+      <DatePicker
+        label="Due date"
+        placeholderValue={parseDate("2026-08-01")}
+      />,
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: /Open calendar.*Due date/i }),
+    );
+    expect(
+      await screen.findByRole("grid", { name: /August 2026/i }),
+    ).toBeDefined();
+  });
+  it("moves focus with calendar arrow keys", async () => {
+    render(<Calendar defaultValue={parseDate("2026-08-12")} locale="en-US" />);
+    const selected = screen.getByRole("button", {
+      name: /August 12, 2026/i,
+    });
+    selected.focus();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(document.activeElement).toBe(
+      screen.getByRole("button", { name: /August 13, 2026/i }),
+    );
+  });
+});
diff --git a/packages/dowel/src/components/calendar/index.tsx b/packages/dowel/src/components/calendar/index.tsx
new file mode 100644
index 0000000..f36ef58
--- /dev/null
+++ b/packages/dowel/src/components/calendar/index.tsx
@@ -0,0 +1,223 @@
+import {
+  CalendarDaysIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/16/solid";
+import { CalendarDate } from "@internationalized/date";
+import * as stylex from "@stylexjs/stylex";
+import {
+  Button as AriaButton,
+  Calendar as AriaCalendar,
+  CalendarCell as AriaCalendarCell,
+  CalendarGrid as AriaCalendarGrid,
+  CalendarGridBody as AriaCalendarGridBody,
+  CalendarGridHeader as AriaCalendarGridHeader,
+  CalendarHeaderCell as AriaCalendarHeaderCell,
+  CalendarHeading as AriaCalendarHeading,
+  DateInput as AriaDateInput,
+  DatePicker as AriaDatePicker,
+  DateSegment as AriaDateSegment,
+  Dialog as AriaDialog,
+  Group as AriaGroup,
+  I18nProvider,
+  Label as AriaLabel,
+  Popover as AriaPopover,
+} from "react-aria-components";
+import type {
+  CalendarCellRenderProps,
+  CalendarProps as AriaCalendarProps,
+  DatePickerProps as AriaDatePickerProps,
+  GroupRenderProps,
+} from "react-aria-components";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+import * as styles from "./calendar.stylex";
+
+function sx(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+function calendarCellClassName({
+  isDisabled,
+  isFocusVisible,
+  isOutsideMonth,
+  isSelected,
+  isToday,
+  isUnavailable,
+}: CalendarCellRenderProps) {
+  return (
+    sx(
+      styles.calendar.day,
+      isOutsideMonth && styles.calendar.outside,
+      isSelected && styles.calendar.selected,
+      isToday && styles.calendar.today,
+      isToday && isSelected && styles.calendar.todaySelected,
+      isFocusVisible && styles.calendar.dayFocused,
+      isDisabled && styles.calendar.disabled,
+      isUnavailable && styles.calendar.unavailable,
+    ).className ?? ""
+  );
+}
+
+function CalendarContents() {
+  return (
+    <>
+      <header {...sx(styles.calendar.header)}>
+        <AriaButton
+          slot="previous"
+          aria-label="Previous month"
+          {...sx(styles.calendar.nav)}
+        >
+          <ChevronLeftIcon width={14} height={14} aria-hidden="true" />
+        </AriaButton>
+        <AriaCalendarHeading {...sx(styles.calendar.month)} />
+        <AriaButton
+          slot="next"
+          aria-label="Next month"
+          {...sx(styles.calendar.nav)}
+        >
+          <ChevronRightIcon width={14} height={14} aria-hidden="true" />
+        </AriaButton>
+      </header>
+      <AriaCalendarGrid weekdayStyle="narrow" {...sx(styles.calendar.grid)}>
+        <AriaCalendarGridHeader>
+          {(day) => (
+            <AriaCalendarHeaderCell {...sx(styles.calendar.weekday)}>
+              {day}
+            </AriaCalendarHeaderCell>
+          )}
+        </AriaCalendarGridHeader>
+        <AriaCalendarGridBody>
+          {(date) => (
+            <AriaCalendarCell date={date} className={calendarCellClassName} />
+          )}
+        </AriaCalendarGridBody>
+      </AriaCalendarGrid>
+    </>
+  );
+}
+
+export interface CalendarProps
+  extends Omit<
+    AriaCalendarProps<CalendarDate>,
+    "aria-label" | "children" | "className" | "onChange" | "style"
+  > {
+  ariaLabel?: string;
+  locale?: string;
+  onValueChange?: (date: CalendarDate) => void;
+}
+
+function CalendarRoot({
+  ariaLabel = "Choose date",
+  onValueChange,
+  ...props
+}: Omit<CalendarProps, "locale">) {
+  return (
+    <AriaCalendar
+      {...props}
+      aria-label={ariaLabel}
+      onChange={onValueChange}
+      {...sx(styles.calendar.root)}
+      data-dowel-component="calendar"
+    >
+      <CalendarContents />
+    </AriaCalendar>
+  );
+}
+
+export function Calendar({ locale, ...props }: CalendarProps) {
+  const calendar = <CalendarRoot {...props} />;
+  return locale ? (
+    <I18nProvider locale={locale}>{calendar}</I18nProvider>
+  ) : (
+    calendar
+  );
+}
+
+export interface DatePickerProps
+  extends Omit<
+    AriaDatePickerProps<CalendarDate>,
+    "children" | "className" | "onChange" | "style"
+  > {
+  label: string;
+  description?: ReactNode;
+  locale?: string;
+  onValueChange?: (date: CalendarDate | null) => void;
+}
+
+function groupClassName({
+  isDisabled,
+  isFocusWithin,
+  isInvalid,
+}: GroupRenderProps) {
+  return (
+    sx(
+      styles.picker.group,
+      isFocusWithin && styles.picker.groupFocused,
+      isInvalid && styles.picker.groupInvalid,
+      isDisabled && styles.picker.disabled,
+    ).className ?? ""
+  );
+}
+
+function DatePickerRoot({
+  label,
+  description,
+  onValueChange,
+  ...props
+}: Omit<DatePickerProps, "locale">) {
+  const [portalContainer, setPortalContainer] = useState<HTMLDivElement | null>(
+    null,
+  );
+  return (
+    <AriaDatePicker
+      ref={setPortalContainer}
+      {...props}
+      onChange={onValueChange}
+      {...sx(styles.picker.root)}
+      data-dowel-component="date-picker"
+    >
+      <AriaLabel {...sx(styles.picker.label)}>{label}</AriaLabel>
+      <AriaGroup className={groupClassName}>
+        <AriaDateInput {...sx(styles.picker.input)}>
+          {(segment) => (
+            <AriaDateSegment segment={segment} {...sx(styles.picker.segment)} />
+          )}
+        </AriaDateInput>
+        <AriaButton aria-label="Open calendar" {...sx(styles.picker.trigger)}>
+          <CalendarDaysIcon width={14} height={14} aria-hidden="true" />
+        </AriaButton>
+      </AriaGroup>
+      {description ? (
+        <span slot="description" {...sx(styles.picker.description)}>
+          {description}
+        </span>
+      ) : null}
+      <AriaPopover
+        placement="bottom start"
+        offset={4}
+        UNSTABLE_portalContainer={portalContainer ?? undefined}
+        {...sx(styles.picker.popover)}
+      >
+        <AriaDialog {...sx(styles.picker.dialog)}>
+          <AriaCalendar {...sx(styles.calendar.root)}>
+            <CalendarContents />
+          </AriaCalendar>
+        </AriaDialog>
+      </AriaPopover>
+    </AriaDatePicker>
+  );
+}
+
+export function DatePicker({ locale, ...props }: DatePickerProps) {
+  const picker = <DatePickerRoot {...props} />;
+  return locale ? (
+    <I18nProvider locale={locale}>{picker}</I18nProvider>
+  ) : (
+    picker
+  );
+}
+
+export { CalendarDate };
diff --git a/packages/dowel/src/components/collapsible/collapsible.stylex.ts b/packages/dowel/src/components/collapsible/collapsible.stylex.ts
new file mode 100644
index 0000000..a65d605
--- /dev/null
+++ b/packages/dowel/src/components/collapsible/collapsible.stylex.ts
@@ -0,0 +1,62 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+export const collapsible = stylex.create({
+  root: { color: tokens["--dowel-text-primary"], width: "100%" },
+  trigger: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-secondary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    gap: "0.5rem",
+    justifyContent: "space-between",
+    minHeight: "2rem",
+    outline: "none",
+    paddingInline: "0.5rem",
+    width: "100%",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-1px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+  },
+  icon: {
+    color: tokens["--dowel-text-tertiary"],
+    flexShrink: 0,
+    transitionDuration: {
+      default: tokens["--dowel-duration-fast"],
+      [REDUCED]: "0.01ms",
+    },
+    transitionProperty: "transform",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+  },
+  panel: {
+    height: "var(--collapsible-panel-height)",
+    overflow: "hidden",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED]: "0.01ms",
+    },
+    transitionProperty: "height",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    "[data-starting-style]": { height: 0 },
+    "[data-ending-style]": { height: 0 },
+  },
+  content: {
+    color: tokens["--dowel-text-secondary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    lineHeight: 1.5,
+    padding: "0.375rem 0.5rem 0.5rem",
+  },
+});
diff --git a/packages/dowel/src/components/collapsible/collapsible.test.tsx b/packages/dowel/src/components/collapsible/collapsible.test.tsx
new file mode 100644
index 0000000..5326b71
--- /dev/null
+++ b/packages/dowel/src/components/collapsible/collapsible.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Collapsible } from "./index";
+describe("Collapsible", () => {
+  it("toggles its panel", async () => {
+    render(
+      <Collapsible.Root>
+        <Collapsible.Trigger>More</Collapsible.Trigger>
+        <Collapsible.Panel>
+          <Collapsible.Content>Hidden details</Collapsible.Content>
+        </Collapsible.Panel>
+      </Collapsible.Root>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "More" }));
+    expect(screen.getByText("Hidden details")).toBeDefined();
+  });
+});
diff --git a/packages/dowel/src/components/collapsible/index.tsx b/packages/dowel/src/components/collapsible/index.tsx
new file mode 100644
index 0000000..c58728d
--- /dev/null
+++ b/packages/dowel/src/components/collapsible/index.tsx
@@ -0,0 +1,68 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { ChevronRightIcon } from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+
+import * as styles from "./collapsible.stylex";
+
+type PartProps<T extends ElementType> = Omit<
+  ComponentPropsWithoutRef<T>,
+  "className" | "style"
+>;
+function sx(...values: stylex.StyleXStyles[]) {
+  const r = stylex.props(...values);
+  return { className: r.className, style: r.style };
+}
+
+const Root = forwardRef<HTMLDivElement, PartProps<typeof BaseCollapsible.Root>>(
+  function Root(props, ref) {
+    return (
+      <BaseCollapsible.Root
+        ref={ref}
+        {...props}
+        {...sx(styles.collapsible.root)}
+        data-dowel-component="collapsible"
+      />
+    );
+  },
+);
+const Trigger = forwardRef<
+  HTMLButtonElement,
+  PartProps<typeof BaseCollapsible.Trigger>
+>(function Trigger({ children, ...props }, ref) {
+  return (
+    <BaseCollapsible.Trigger
+      ref={ref}
+      {...props}
+      {...sx(styles.collapsible.trigger)}
+    >
+      <span>{children}</span>
+      <ChevronRightIcon
+        width={14}
+        height={14}
+        aria-hidden="true"
+        {...sx(styles.collapsible.icon)}
+      />
+    </BaseCollapsible.Trigger>
+  );
+});
+const Panel = forwardRef<
+  HTMLDivElement,
+  PartProps<typeof BaseCollapsible.Panel>
+>(function Panel(props, ref) {
+  return (
+    <BaseCollapsible.Panel
+      ref={ref}
+      {...props}
+      {...sx(styles.collapsible.panel)}
+      data-dowel-part="collapsible-panel"
+    />
+  );
+});
+const Content = forwardRef<HTMLDivElement, { children?: ReactNode }>(
+  function Content(props, ref) {
+    return <div ref={ref} {...props} {...sx(styles.collapsible.content)} />;
+  },
+);
+export const Collapsible = { Root, Trigger, Panel, Content };
diff --git a/packages/dowel/src/components/combobox/combobox.stylex.ts b/packages/dowel/src/components/combobox/combobox.stylex.ts
new file mode 100644
index 0000000..45c9a23
--- /dev/null
+++ b/packages/dowel/src/components/combobox/combobox.stylex.ts
@@ -0,0 +1,164 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+
+export const control = stylex.create({
+  root: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-1"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-control"],
+    boxSizing: "border-box",
+    display: "flex",
+    height: tokens["--dowel-control-lg"],
+    minWidth: "12rem",
+    overflow: "hidden",
+    ":focus-within": {
+      borderColor: tokens["--dowel-focus-ring"],
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-1px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+    ":has(input:disabled)": {
+      backgroundColor: tokens["--dowel-bg-surface-2"],
+      color: tokens["--dowel-text-disabled"],
+    },
+  },
+  input: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    flex: 1,
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.875rem",
+    height: "100%",
+    lineHeight: 1.4,
+    minWidth: 0,
+    outline: "none",
+    padding: "0 0.625rem",
+    "::placeholder": { color: tokens["--dowel-text-tertiary"] },
+    ":disabled": { cursor: "not-allowed" },
+  },
+  actions: {
+    alignItems: "center",
+    display: "flex",
+    paddingInlineEnd: "0.25rem",
+  },
+  action: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderRadius: tokens["--dowel-radius-sm"],
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    height: "1.75rem",
+    justifyContent: "center",
+    padding: 0,
+    width: "1.75rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-2px",
+      outlineStyle: "solid",
+      outlineWidth: "2px",
+    },
+    "[data-disabled]": { cursor: "not-allowed", opacity: 0.5 },
+  },
+});
+
+export const popup = stylex.create({
+  root: {
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-popover"],
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    maxHeight: "min(20rem, var(--available-height))",
+    minWidth: "var(--anchor-width)",
+    opacity: 1,
+    outline: "none",
+    overflow: "hidden",
+    transformOrigin: "var(--transform-origin)",
+    transitionDuration: {
+      default: tokens["--dowel-duration-fast"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity, scale",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    "[data-starting-style]": { opacity: 0, scale: 0.98 },
+    "[data-ending-style]": { opacity: 0, scale: 0.98 },
+  },
+  list: { maxHeight: "19rem", overflowY: "auto", padding: "0.25rem" },
+  groupLabel: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.6875rem",
+    fontWeight: 550,
+    lineHeight: 1.4,
+    padding: "0.5rem 0.5rem 0.25rem",
+  },
+  item: {
+    alignItems: "center",
+    borderRadius: tokens["--dowel-radius-sm"],
+    boxSizing: "border-box",
+    cursor: "default",
+    display: "flex",
+    gap: "0.5rem",
+    minHeight: tokens["--dowel-control-md"],
+    outline: "none",
+    padding: "0.375rem 0.5rem",
+    "[data-highlighted]": { backgroundColor: tokens["--dowel-bg-hover"] },
+    "[data-selected]": { color: tokens["--dowel-accent"] },
+    "[data-disabled]": { color: tokens["--dowel-text-disabled"] },
+  },
+  icon: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    flexShrink: 0,
+  },
+  copy: { display: "flex", flex: 1, flexDirection: "column", minWidth: 0 },
+  label: {
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    lineHeight: 1.4,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  description: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    lineHeight: 1.4,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  indicator: {
+    alignItems: "center",
+    color: tokens["--dowel-accent"],
+    display: "inline-flex",
+    flexShrink: 0,
+  },
+  empty: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    padding: "1rem",
+    textAlign: "center",
+  },
+});
diff --git a/packages/dowel/src/components/combobox/combobox.test.tsx b/packages/dowel/src/components/combobox/combobox.test.tsx
new file mode 100644
index 0000000..19466b0
--- /dev/null
+++ b/packages/dowel/src/components/combobox/combobox.test.tsx
@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { Combobox } from "./index";
+
+const options = [
+  { value: "acme", label: "Acme", group: "Organizations" },
+  { value: "northstar", label: "Northstar", group: "Organizations" },
+  {
+    value: "archive",
+    label: "Archive",
+    description: "Read only",
+    disabled: true,
+  },
+] as const;
+
+describe("Combobox", () => {
+  it("filters and selects an option", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <Combobox
+        label="Organization"
+        options={options}
+        onValueChange={onValueChange}
+      />,
+    );
+    const input = screen.getByRole("combobox", { name: "Organization" });
+    await userEvent.type(input, "north");
+    expect(screen.queryByRole("option", { name: "Acme" })).toBeNull();
+    await userEvent.keyboard("{ArrowDown}{Enter}");
+    expect(onValueChange).toHaveBeenCalledWith("northstar");
+    expect((input as HTMLInputElement).value).toBe("Northstar");
+  });
+
+  it("submits the selected value", () => {
+    const { container } = render(
+      <form>
+        <Combobox
+          label="Organization"
+          name="organization"
+          options={options}
+          value="acme"
+        />
+      </form>,
+    );
+    expect(
+      new FormData(container.querySelector("form")!).get("organization"),
+    ).toBe("acme");
+  });
+
+  it("has no accessibility violations when open", async () => {
+    const { container } = render(
+      <main>
+        <Combobox label="Organization" options={options} />
+      </main>,
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: "Open organization options" }),
+    );
+    await screen.findByRole("listbox");
+    await expectNoA11yViolations(container.ownerDocument.body);
+  });
+});
diff --git a/packages/dowel/src/components/combobox/index.tsx b/packages/dowel/src/components/combobox/index.tsx
new file mode 100644
index 0000000..c43bf8e
--- /dev/null
+++ b/packages/dowel/src/components/combobox/index.tsx
@@ -0,0 +1,209 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  XMarkIcon,
+} from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { useContext, useMemo, useState } from "react";
+import type { ReactNode } from "react";
+
+import { DowelThemeContext, themeStyles } from "../../theme/theme-provider";
+import * as styles from "./combobox.stylex";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  description?: string;
+  group?: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps {
+  label: string;
+  options: readonly ComboboxOption[];
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  onInputValueChange?: (inputValue: string) => void;
+  placeholder?: string;
+  emptyText?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  form?: string;
+  id?: string;
+  autoComplete?: string;
+  onOpenChange?: (open: boolean) => void;
+}
+
+type OptionGroup = {
+  key: string;
+  label?: string;
+  items: readonly ComboboxOption[];
+};
+
+function groupOptions(options: readonly ComboboxOption[]): OptionGroup[] {
+  const groups = new Map<string, ComboboxOption[]>();
+  for (const option of options) {
+    const key = option.group ?? "";
+    const group = groups.get(key);
+    if (group) group.push(option);
+    else groups.set(key, [option]);
+  }
+  return Array.from(groups, ([key, items]) => ({
+    key: key || "__ungrouped",
+    label: key || undefined,
+    items,
+  }));
+}
+
+function sx(style: stylex.StyleXStyles) {
+  const resolved = stylex.props(style);
+  return { className: resolved.className, style: resolved.style };
+}
+
+export function Combobox({
+  label,
+  options,
+  value,
+  defaultValue = null,
+  onValueChange,
+  onInputValueChange,
+  placeholder = "Select an option",
+  emptyText = "No matching options",
+  clearable = true,
+  disabled = false,
+  readOnly = false,
+  required = false,
+  name,
+  form,
+  id,
+  autoComplete,
+  onOpenChange,
+}: ComboboxProps) {
+  const theme = useContext(DowelThemeContext);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const currentValue = value === undefined ? uncontrolledValue : value;
+  const selectedOption =
+    options.find((option) => option.value === currentValue) ?? null;
+  const groups = useMemo(() => groupOptions(options), [options]);
+  const portalTheme = stylex.props(themeStyles[theme]);
+
+  function changeValue(next: ComboboxOption | null) {
+    const nextValue = next?.value ?? null;
+    if (value === undefined) setUncontrolledValue(nextValue);
+    onValueChange?.(nextValue);
+  }
+
+  return (
+    <BaseCombobox.Root<ComboboxOption>
+      id={id}
+      name={name}
+      form={form}
+      items={groups}
+      value={selectedOption}
+      onValueChange={changeValue}
+      onInputValueChange={(inputValue) => onInputValueChange?.(inputValue)}
+      onOpenChange={(open) => onOpenChange?.(open)}
+      itemToStringLabel={(option) => option.label}
+      itemToStringValue={(option) => option.value}
+      isItemEqualToValue={(option, selected) => option.value === selected.value}
+      autoHighlight
+      autoComplete={autoComplete}
+      disabled={disabled}
+      readOnly={readOnly}
+      required={required}
+    >
+      <BaseCombobox.InputGroup
+        {...sx(styles.control.root)}
+        data-dowel-component="combobox-control"
+      >
+        <BaseCombobox.Input
+          {...sx(styles.control.input)}
+          aria-label={label}
+          placeholder={placeholder}
+        />
+        <span {...sx(styles.control.actions)}>
+          {clearable ? (
+            <BaseCombobox.Clear
+              {...sx(styles.control.action)}
+              aria-label={`Clear ${label.toLowerCase()}`}
+            >
+              <XMarkIcon width={14} height={14} />
+            </BaseCombobox.Clear>
+          ) : null}
+          <BaseCombobox.Trigger
+            {...sx(styles.control.action)}
+            aria-label={`Open ${label.toLowerCase()} options`}
+          >
+            <ChevronDownIcon width={14} height={14} />
+          </BaseCombobox.Trigger>
+        </span>
+      </BaseCombobox.InputGroup>
+      <BaseCombobox.Portal
+        className={portalTheme.className}
+        style={portalTheme.style}
+        data-dowel-theme={theme}
+      >
+        <BaseCombobox.Positioner sideOffset={4} align="start">
+          <BaseCombobox.Popup
+            {...sx(styles.popup.root)}
+            role="region"
+            aria-label={`${label} options`}
+            data-dowel-component="combobox-popup"
+          >
+            <BaseCombobox.Empty>
+              <div {...sx(styles.popup.empty)}>{emptyText}</div>
+            </BaseCombobox.Empty>
+            <BaseCombobox.List {...sx(styles.popup.list)}>
+              {(group: OptionGroup) => (
+                <BaseCombobox.Group key={group.key} items={group.items}>
+                  {group.label ? (
+                    <BaseCombobox.GroupLabel {...sx(styles.popup.groupLabel)}>
+                      {group.label}
+                    </BaseCombobox.GroupLabel>
+                  ) : null}
+                  <BaseCombobox.Collection>
+                    {(option: ComboboxOption) => (
+                      <BaseCombobox.Item
+                        key={option.value}
+                        value={option}
+                        disabled={option.disabled}
+                        {...sx(styles.popup.item)}
+                      >
+                        {option.icon ? (
+                          <span {...sx(styles.popup.icon)} aria-hidden="true">
+                            {option.icon}
+                          </span>
+                        ) : null}
+                        <span {...sx(styles.popup.copy)}>
+                          <span {...sx(styles.popup.label)}>
+                            {option.label}
+                          </span>
+                          {option.description ? (
+                            <span {...sx(styles.popup.description)}>
+                              {option.description}
+                            </span>
+                          ) : null}
+                        </span>
+                        <BaseCombobox.ItemIndicator
+                          {...sx(styles.popup.indicator)}
+                        >
+                          <CheckIcon width={14} height={14} />
+                        </BaseCombobox.ItemIndicator>
+                      </BaseCombobox.Item>
+                    )}
+                  </BaseCombobox.Collection>
+                </BaseCombobox.Group>
+              )}
+            </BaseCombobox.List>
+          </BaseCombobox.Popup>
+        </BaseCombobox.Positioner>
+      </BaseCombobox.Portal>
+    </BaseCombobox.Root>
+  );
+}
diff --git a/packages/dowel/src/components/command-menu/command-menu.stylex.ts b/packages/dowel/src/components/command-menu/command-menu.stylex.ts
new file mode 100644
index 0000000..2a40c65
--- /dev/null
+++ b/packages/dowel/src/components/command-menu/command-menu.stylex.ts
@@ -0,0 +1,167 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const MOBILE = "@media (max-width: 639px)";
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+
+export const command = stylex.create({
+  title: {
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: "1px",
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+  },
+  backdrop: {
+    backgroundColor: tokens["--dowel-scrim"],
+    inset: 0,
+    opacity: 1,
+    position: "fixed",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity",
+    zIndex: 60,
+    "[data-starting-style]": { opacity: 0 },
+    "[data-ending-style]": { opacity: 0 },
+  },
+  popup: {
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: {
+      default: tokens["--dowel-radius-lg"],
+      [MOBILE]: tokens["--dowel-radius-md"],
+    },
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-modal"],
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    insetBlockStart: { default: "max(3rem, 15vh)", [MOBILE]: "0.5rem" },
+    insetInlineStart: "50%",
+    maxHeight: {
+      default: "min(32rem, calc(100dvh - 6rem))",
+      [MOBILE]: "calc(100dvh - 1rem)",
+    },
+    opacity: 1,
+    outline: "none",
+    overflow: "hidden",
+    position: "fixed",
+    transform: "translateX(-50%)",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity, translate",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    translate: "0 0",
+    width: {
+      default: "min(38rem, calc(100vw - 2rem))",
+      [MOBILE]: "calc(100vw - 1rem)",
+    },
+    zIndex: 61,
+    "[data-starting-style]": { opacity: 0, translate: "0 -0.25rem" },
+    "[data-ending-style]": { opacity: 0, translate: "0 -0.25rem" },
+  },
+  search: {
+    alignItems: "center",
+    borderBottomColor: tokens["--dowel-border-subtle"],
+    borderBottomStyle: "solid",
+    borderBottomWidth: tokens["--dowel-hairline"],
+    display: "flex",
+    gap: "0.625rem",
+    minHeight: "3rem",
+    paddingInline: "0.875rem",
+  },
+  searchIcon: { color: tokens["--dowel-text-tertiary"], flexShrink: 0 },
+  input: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    color: tokens["--dowel-text-primary"],
+    flex: 1,
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: { default: "0.9375rem", [MOBILE]: "1rem" },
+    height: "3rem",
+    minWidth: 0,
+    outline: "none",
+    padding: 0,
+    "::placeholder": { color: tokens["--dowel-text-tertiary"] },
+  },
+  list: { maxHeight: "26rem", overflowY: "auto", padding: "0.375rem" },
+  groupLabel: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.6875rem",
+    fontWeight: 550,
+    lineHeight: 1.4,
+    padding: "0.5rem 0.5rem 0.25rem",
+  },
+  item: {
+    alignItems: "center",
+    borderRadius: tokens["--dowel-radius-sm"],
+    cursor: "default",
+    display: "flex",
+    gap: "0.625rem",
+    minHeight: "2.5rem",
+    outline: "none",
+    padding: "0.375rem 0.5rem",
+    "[data-highlighted]": { backgroundColor: tokens["--dowel-bg-hover"] },
+    "[data-disabled]": { color: tokens["--dowel-text-disabled"] },
+  },
+  itemIcon: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    flexShrink: 0,
+  },
+  itemCopy: { display: "flex", flex: 1, flexDirection: "column", minWidth: 0 },
+  itemLabel: {
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    lineHeight: 1.4,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  itemDescription: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    lineHeight: 1.4,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  shortcut: {
+    color: tokens["--dowel-text-tertiary"],
+    flexShrink: 0,
+    fontFamily: tokens["--dowel-font-mono"],
+    fontSize: "0.6875rem",
+    lineHeight: 1.4,
+  },
+  empty: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    padding: "2rem 1rem",
+    textAlign: "center",
+  },
+  footer: {
+    alignItems: "center",
+    borderTopColor: tokens["--dowel-border-subtle"],
+    borderTopStyle: "solid",
+    borderTopWidth: tokens["--dowel-hairline"],
+    color: tokens["--dowel-text-tertiary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.6875rem",
+    gap: "0.75rem",
+    justifyContent: "flex-end",
+    minHeight: "2rem",
+    padding: "0.375rem 0.75rem",
+  },
+});
diff --git a/packages/dowel/src/components/command-menu/command-menu.test.tsx b/packages/dowel/src/components/command-menu/command-menu.test.tsx
new file mode 100644
index 0000000..5af6b97
--- /dev/null
+++ b/packages/dowel/src/components/command-menu/command-menu.test.tsx
@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { Button } from "../button";
+import { CommandMenu } from "./index";
+
+function items(onSelect = vi.fn()) {
+  return [
+    {
+      id: "repo",
+      label: "Open repository",
+      group: "Navigation",
+      shortcut: "G R",
+      onSelect,
+    },
+    {
+      id: "settings",
+      label: "Open settings",
+      group: "Navigation",
+      keywords: ["preferences"],
+      onSelect: vi.fn(),
+    },
+  ];
+}
+
+describe("CommandMenu", () => {
+  it("supports controlled open state without a trigger", () => {
+    render(<CommandMenu open items={items()} />);
+    expect(
+      screen.getByRole("combobox", { name: "Command menu" }),
+    ).toBeDefined();
+  });
+
+  it("filters, runs a command, and closes", async () => {
+    const onSelect = vi.fn();
+    render(
+      <CommandMenu
+        trigger={<Button>Commands</Button>}
+        items={items(onSelect)}
+      />,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Commands" }));
+    const input = screen.getByRole("combobox", { name: "Command menu" });
+    await userEvent.type(input, "repo");
+    await userEvent.keyboard("{ArrowDown}{Enter}");
+    expect(onSelect).toHaveBeenCalledOnce();
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("matches keywords", async () => {
+    render(<CommandMenu defaultOpen items={items()} />);
+    await userEvent.type(screen.getByRole("combobox"), "preferences");
+    expect(screen.getByText("Open settings")).toBeDefined();
+  });
+
+  it("has no accessibility violations when open", async () => {
+    render(<CommandMenu defaultOpen items={items()} />);
+    await expectNoA11yViolations(screen.getByRole("dialog"));
+  });
+});
diff --git a/packages/dowel/src/components/command-menu/index.tsx b/packages/dowel/src/components/command-menu/index.tsx
new file mode 100644
index 0000000..5b87e94
--- /dev/null
+++ b/packages/dowel/src/components/command-menu/index.tsx
@@ -0,0 +1,192 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { MagnifyingGlassIcon } from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { useContext, useMemo, useState } from "react";
+import type { ReactElement, ReactNode } from "react";
+
+import { DowelThemeContext, themeStyles } from "../../theme/theme-provider";
+import * as styles from "./command-menu.stylex";
+
+export interface CommandMenuItem {
+  id: string;
+  label: string;
+  description?: string;
+  group?: string;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  keywords?: readonly string[];
+  onSelect: () => void;
+}
+
+export interface CommandMenuProps {
+  label?: string;
+  items: readonly CommandMenuItem[];
+  trigger?: ReactElement;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  placeholder?: string;
+  emptyText?: string;
+  footer?: ReactNode;
+}
+
+type CommandGroup = {
+  key: string;
+  label?: string;
+  items: readonly CommandMenuItem[];
+};
+
+function groupItems(items: readonly CommandMenuItem[]): CommandGroup[] {
+  const groups = new Map<string, CommandMenuItem[]>();
+  for (const item of items) {
+    const key = item.group ?? "";
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups, ([key, groupedItems]) => ({
+    key: key || "__ungrouped",
+    label: key || undefined,
+    items: groupedItems,
+  }));
+}
+
+function sx(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+export function CommandMenu({
+  label = "Command menu",
+  items,
+  trigger,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  placeholder = "Type a command or search",
+  emptyText = "No matching commands",
+  footer,
+}: CommandMenuProps) {
+  const theme = useContext(DowelThemeContext);
+  const portalTheme = stylex.props(themeStyles[theme]);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [query, setQuery] = useState("");
+  const currentOpen = open === undefined ? uncontrolledOpen : open;
+  const groups = useMemo(() => groupItems(items), [items]);
+
+  function changeOpen(nextOpen: boolean) {
+    if (open === undefined) setUncontrolledOpen(nextOpen);
+    if (!nextOpen) setQuery("");
+    onOpenChange?.(nextOpen);
+  }
+
+  function select(item: CommandMenuItem) {
+    item.onSelect();
+    changeOpen(false);
+  }
+
+  return (
+    <BaseDialog.Root open={currentOpen} onOpenChange={changeOpen}>
+      {trigger ? <BaseDialog.Trigger render={trigger} /> : null}
+      <BaseDialog.Portal
+        className={portalTheme.className}
+        style={portalTheme.style}
+        data-dowel-theme={theme}
+      >
+        <BaseDialog.Backdrop {...sx(styles.command.backdrop)} />
+        <BaseDialog.Popup
+          {...sx(styles.command.popup)}
+          data-dowel-component="command-menu"
+        >
+          <BaseDialog.Title render={<span />} {...sx(styles.command.title)}>
+            {label}
+          </BaseDialog.Title>
+          <BaseAutocomplete.Root
+            items={groups}
+            value={query}
+            onValueChange={(nextQuery) => setQuery(nextQuery)}
+            itemToStringValue={(item) =>
+              [item.label, item.description, ...(item.keywords ?? [])]
+                .filter(Boolean)
+                .join(" ")
+            }
+            autoHighlight="always"
+            inline
+            open
+          >
+            <BaseAutocomplete.InputGroup {...sx(styles.command.search)}>
+              <MagnifyingGlassIcon
+                {...sx(styles.command.searchIcon)}
+                width={18}
+                height={18}
+              />
+              <BaseAutocomplete.Input
+                {...sx(styles.command.input)}
+                aria-label={label}
+                placeholder={placeholder}
+                autoFocus
+              />
+            </BaseAutocomplete.InputGroup>
+            <BaseAutocomplete.Empty>
+              <div {...sx(styles.command.empty)}>{emptyText}</div>
+            </BaseAutocomplete.Empty>
+            <BaseAutocomplete.List {...sx(styles.command.list)}>
+              {(group: CommandGroup) => (
+                <BaseAutocomplete.Group key={group.key} items={group.items}>
+                  {group.label ? (
+                    <BaseAutocomplete.GroupLabel
+                      {...sx(styles.command.groupLabel)}
+                    >
+                      {group.label}
+                    </BaseAutocomplete.GroupLabel>
+                  ) : null}
+                  <BaseAutocomplete.Collection>
+                    {(item: CommandMenuItem) => (
+                      <BaseAutocomplete.Item
+                        key={item.id}
+                        value={item}
+                        disabled={item.disabled}
+                        onClick={() => select(item)}
+                        {...sx(styles.command.item)}
+                      >
+                        {item.icon ? (
+                          <span
+                            {...sx(styles.command.itemIcon)}
+                            aria-hidden="true"
+                          >
+                            {item.icon}
+                          </span>
+                        ) : null}
+                        <span {...sx(styles.command.itemCopy)}>
+                          <span {...sx(styles.command.itemLabel)}>
+                            {item.label}
+                          </span>
+                          {item.description ? (
+                            <span {...sx(styles.command.itemDescription)}>
+                              {item.description}
+                            </span>
+                          ) : null}
+                        </span>
+                        {item.shortcut ? (
+                          <span
+                            {...sx(styles.command.shortcut)}
+                            aria-label={`Shortcut ${item.shortcut}`}
+                          >
+                            {item.shortcut}
+                          </span>
+                        ) : null}
+                      </BaseAutocomplete.Item>
+                    )}
+                  </BaseAutocomplete.Collection>
+                </BaseAutocomplete.Group>
+              )}
+            </BaseAutocomplete.List>
+          </BaseAutocomplete.Root>
+          {footer ? <div {...sx(styles.command.footer)}>{footer}</div> : null}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  );
+}
diff --git a/packages/dowel/src/components/context-menu/context-menu.stylex.ts b/packages/dowel/src/components/context-menu/context-menu.stylex.ts
new file mode 100644
index 0000000..9bd4a76
--- /dev/null
+++ b/packages/dowel/src/components/context-menu/context-menu.stylex.ts
@@ -0,0 +1,23 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+export const context = stylex.create({
+  target: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-2"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "dashed",
+    borderWidth: "1px",
+    color: tokens["--dowel-text-secondary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    justifyContent: "center",
+    minHeight: "8rem",
+    outline: "none",
+    padding: "1rem",
+    userSelect: "none",
+    width: "100%",
+    ":focus-visible": { borderColor: tokens["--dowel-focus-ring"] },
+  },
+});
diff --git a/packages/dowel/src/components/context-menu/context-menu.test.tsx b/packages/dowel/src/components/context-menu/context-menu.test.tsx
new file mode 100644
index 0000000..7e7d825
--- /dev/null
+++ b/packages/dowel/src/components/context-menu/context-menu.test.tsx
@@ -0,0 +1,21 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ContextMenu } from "./index";
+describe("ContextMenu", () => {
+  it("opens at the pointer", async () => {
+    render(
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>Right click</ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner>
+            <ContextMenu.Popup>
+              <ContextMenu.Item>Rename</ContextMenu.Item>
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>,
+    );
+    fireEvent.contextMenu(screen.getByText("Right click"));
+    expect(await screen.findByText("Rename")).toBeDefined();
+  });
+});
diff --git a/packages/dowel/src/components/context-menu/index.tsx b/packages/dowel/src/components/context-menu/index.tsx
new file mode 100644
index 0000000..a735c66
--- /dev/null
+++ b/packages/dowel/src/components/context-menu/index.tsx
@@ -0,0 +1,52 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+
+import { Menu } from "../menu";
+import * as styles from "./context-menu.stylex";
+
+type TriggerProps = Omit<
+  ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>,
+  "className" | "style"
+>;
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+const Trigger = forwardRef<HTMLDivElement, TriggerProps>(
+  function ContextMenuTrigger(props, ref) {
+    return (
+      <BaseContextMenu.Trigger
+        ref={ref}
+        {...props}
+        {...sx(styles.context.target)}
+        data-dowel-component="context-menu-trigger"
+      />
+    );
+  },
+);
+
+export const ContextMenu = {
+  Root: BaseContextMenu.Root,
+  Trigger,
+  Portal: Menu.Portal,
+  Positioner: Menu.Positioner,
+  Popup: Menu.Popup,
+  Item: Menu.Item,
+  LinkItem: Menu.LinkItem,
+  CheckboxItem: Menu.CheckboxItem,
+  CheckboxItemIndicator: Menu.CheckboxItemIndicator,
+  RadioGroup: Menu.RadioGroup,
+  RadioItem: Menu.RadioItem,
+  RadioItemIndicator: Menu.RadioItemIndicator,
+  Group: Menu.Group,
+  GroupLabel: Menu.GroupLabel,
+  Separator: Menu.Separator,
+  SubmenuRoot: Menu.SubmenuRoot,
+  SubmenuTrigger: Menu.SubmenuTrigger,
+  Icon: Menu.Icon,
+  Shortcut: Menu.Shortcut,
+};
+
+export type { TriggerProps as ContextMenuTriggerProps };
diff --git a/packages/dowel/src/components/drawer/drawer.stylex.ts b/packages/dowel/src/components/drawer/drawer.stylex.ts
new file mode 100644
index 0000000..8dfc595
--- /dev/null
+++ b/packages/dowel/src/components/drawer/drawer.stylex.ts
@@ -0,0 +1,152 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+const MOBILE = "@media (max-width: 639px)";
+
+export const backdrop = stylex.create({
+  root: {
+    backgroundColor: tokens["--dowel-scrim"],
+    inset: 0,
+    opacity: "calc(1 - var(--drawer-swipe-progress, 0))",
+    position: "fixed",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity",
+    zIndex: 50,
+    "[data-starting-style]": { opacity: 0 },
+    "[data-ending-style]": { opacity: 0 },
+    "[data-swiping]": { transitionDuration: "0ms" },
+  },
+});
+
+export const viewport = stylex.create({
+  root: { inset: 0, pointerEvents: "none", position: "fixed", zIndex: 51 },
+});
+
+export const popup = stylex.create({
+  root: {
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    boxShadow: tokens["--dowel-shadow-modal"],
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    display: "flex",
+    flexDirection: "column",
+    outline: "none",
+    overflow: "hidden",
+    pointerEvents: "auto",
+    position: "absolute",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "transform",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    "[data-swiping]": { transitionDuration: "0ms" },
+  },
+  right: {
+    borderInlineStartColor: tokens["--dowel-border-default"],
+    borderInlineStartStyle: "solid",
+    borderInlineStartWidth: tokens["--dowel-hairline"],
+    height: "100dvh",
+    insetBlock: 0,
+    insetInlineEnd: 0,
+    maxWidth: "calc(100vw - 1rem)",
+    transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
+    width: "min(24rem, 90vw)",
+    "[data-starting-style]": { transform: "translateX(100%)" },
+    "[data-ending-style]": { transform: "translateX(100%)" },
+  },
+  left: {
+    borderInlineEndColor: tokens["--dowel-border-default"],
+    borderInlineEndStyle: "solid",
+    borderInlineEndWidth: tokens["--dowel-hairline"],
+    height: "100dvh",
+    insetBlock: 0,
+    insetInlineStart: 0,
+    maxWidth: "calc(100vw - 1rem)",
+    transform: "translateX(var(--drawer-swipe-movement-x, 0px))",
+    width: "min(24rem, 90vw)",
+    "[data-starting-style]": { transform: "translateX(-100%)" },
+    "[data-ending-style]": { transform: "translateX(-100%)" },
+  },
+  bottom: {
+    borderStartEndRadius: tokens["--dowel-radius-lg"],
+    borderStartStartRadius: tokens["--dowel-radius-lg"],
+    insetBlockEnd: 0,
+    insetInline: 0,
+    marginInline: "auto",
+    maxHeight: "calc(100dvh - 1rem)",
+    transform:
+      "translateY(calc(var(--drawer-snap-point-offset, 0px) + var(--drawer-swipe-movement-y, 0px)))",
+    width: { default: "min(36rem, calc(100vw - 2rem))", [MOBILE]: "100vw" },
+    "[data-starting-style]": { transform: "translateY(100%)" },
+    "[data-ending-style]": { transform: "translateY(100%)" },
+  },
+  top: {
+    borderEndEndRadius: tokens["--dowel-radius-lg"],
+    borderEndStartRadius: tokens["--dowel-radius-lg"],
+    insetBlockStart: 0,
+    insetInline: 0,
+    marginInline: "auto",
+    maxHeight: "calc(100dvh - 1rem)",
+    transform: "translateY(var(--drawer-swipe-movement-y, 0px))",
+    width: { default: "min(36rem, calc(100vw - 2rem))", [MOBILE]: "100vw" },
+    "[data-starting-style]": { transform: "translateY(-100%)" },
+    "[data-ending-style]": { transform: "translateY(-100%)" },
+  },
+});
+
+export const part = stylex.create({
+  content: { display: "flex", flex: 1, flexDirection: "column", minHeight: 0 },
+  handle: {
+    alignSelf: "center",
+    backgroundColor: tokens["--dowel-border-strong"],
+    borderRadius: tokens["--dowel-radius-pill"],
+    height: "0.25rem",
+    marginBlockStart: "0.5rem",
+    width: "2.25rem",
+  },
+  header: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.375rem",
+    padding: "1rem",
+  },
+  body: {
+    color: tokens["--dowel-text-secondary"],
+    flex: 1,
+    minHeight: 0,
+    overflowY: "auto",
+    padding: "0 1rem 1rem",
+  },
+  footer: {
+    alignItems: "center",
+    borderTopColor: tokens["--dowel-border-subtle"],
+    borderTopStyle: "solid",
+    borderTopWidth: tokens["--dowel-hairline"],
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "0.5rem",
+    justifyContent: "flex-end",
+    padding: "0.75rem 1rem 1rem",
+  },
+  title: {
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.9375rem",
+    fontWeight: 550,
+    lineHeight: 1.4,
+    margin: 0,
+  },
+  description: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    lineHeight: 1.5,
+    margin: 0,
+  },
+});
diff --git a/packages/dowel/src/components/drawer/drawer.test.tsx b/packages/dowel/src/components/drawer/drawer.test.tsx
new file mode 100644
index 0000000..c4aa9e1
--- /dev/null
+++ b/packages/dowel/src/components/drawer/drawer.test.tsx
@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { Button } from "../button";
+import { Drawer } from "./index";
+
+function Example() {
+  return (
+    <Drawer.Root side="left">
+      <Drawer.Trigger render={<Button>Browse</Button>} />
+      <Drawer.Portal>
+        <Drawer.Backdrop />
+        <Drawer.Viewport>
+          <Drawer.Popup side="left">
+            <Drawer.Content>
+              <Drawer.Header>
+                <Drawer.Title>Repositories</Drawer.Title>
+                <Drawer.Description>Choose a repository.</Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>Repository list</Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close render={<Button>Close</Button>} />
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Popup>
+        </Drawer.Viewport>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+
+describe("Drawer", () => {
+  it("opens, exposes its side, and closes", async () => {
+    render(<Example />);
+    await userEvent.click(screen.getByRole("button", { name: "Browse" }));
+    const dialog = screen.getByRole("dialog", { name: "Repositories" });
+    expect(dialog.dataset.side).toBe("left");
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(screen.queryByRole("dialog")).toBeNull();
+  });
+
+  it("has no accessibility violations when open", async () => {
+    render(<Example />);
+    await userEvent.click(screen.getByRole("button", { name: "Browse" }));
+    await expectNoA11yViolations(screen.getByRole("dialog"));
+  });
+});
diff --git a/packages/dowel/src/components/drawer/index.tsx b/packages/dowel/src/components/drawer/index.tsx
new file mode 100644
index 0000000..6838775
--- /dev/null
+++ b/packages/dowel/src/components/drawer/index.tsx
@@ -0,0 +1,179 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, forwardRef, useContext } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+import type { DrawerRootProps as BaseDrawerRootProps } from "@base-ui/react/drawer";
+
+import { DowelThemeContext, themeStyles } from "../../theme/theme-provider";
+import * as styles from "./drawer.stylex";
+
+type Props<T extends (...args: never) => unknown> = T extends (
+  props: infer P,
+) => unknown
+  ? Omit<P, "className" | "style">
+  : never;
+type DivProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+export type DrawerSide = "top" | "right" | "bottom" | "left";
+export interface DrawerRootProps
+  extends Omit<BaseDrawerRootProps, "swipeDirection"> {
+  side?: DrawerSide;
+}
+export interface DrawerPopupProps extends Props<typeof BaseDrawer.Popup> {
+  side?: DrawerSide;
+}
+
+function partProps(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+const swipeDirection = {
+  top: "up",
+  right: "right",
+  bottom: "down",
+  left: "left",
+} as const;
+
+const DrawerSideContext = createContext<DrawerSide>("right");
+
+export const Drawer = {
+  Provider: BaseDrawer.Provider,
+  Root: function DrawerRoot({ side = "right", ...props }: DrawerRootProps) {
+    return (
+      <DrawerSideContext.Provider value={side}>
+        <BaseDrawer.Root {...props} swipeDirection={swipeDirection[side]} />
+      </DrawerSideContext.Provider>
+    );
+  },
+  Trigger: function DrawerTrigger(props: Props<typeof BaseDrawer.Trigger>) {
+    return (
+      <BaseDrawer.Trigger {...props} className={undefined} style={undefined} />
+    );
+  },
+  Portal: function DrawerPortal(props: Props<typeof BaseDrawer.Portal>) {
+    const theme = useContext(DowelThemeContext);
+    const resolved = stylex.props(themeStyles[theme]);
+    return (
+      <BaseDrawer.Portal
+        {...props}
+        className={resolved.className}
+        style={resolved.style}
+        data-dowel-theme={theme}
+      />
+    );
+  },
+  Backdrop: function DrawerBackdrop(props: Props<typeof BaseDrawer.Backdrop>) {
+    return (
+      <BaseDrawer.Backdrop
+        {...props}
+        {...partProps(styles.backdrop.root)}
+        data-dowel-component="drawer-backdrop"
+      />
+    );
+  },
+  Viewport: function DrawerViewport(props: Props<typeof BaseDrawer.Viewport>) {
+    return (
+      <BaseDrawer.Viewport
+        {...props}
+        {...partProps(styles.viewport.root)}
+        data-dowel-component="drawer-viewport"
+      />
+    );
+  },
+  Popup: function DrawerPopup({
+    side: sideOverride,
+    ...props
+  }: DrawerPopupProps) {
+    const inheritedSide = useContext(DrawerSideContext);
+    const side = sideOverride ?? inheritedSide;
+    return (
+      <BaseDrawer.Popup
+        {...props}
+        {...partProps(styles.popup.root, styles.popup[side])}
+        data-dowel-component="drawer-popup"
+        data-side={side}
+      />
+    );
+  },
+  Content: function DrawerContent(props: Props<typeof BaseDrawer.Content>) {
+    return (
+      <BaseDrawer.Content
+        {...props}
+        {...partProps(styles.part.content)}
+        data-dowel-component="drawer-content"
+      />
+    );
+  },
+  Handle: forwardRef<HTMLDivElement, DivProps>(
+    function DrawerHandle(props, ref) {
+      return (
+        <div
+          ref={ref}
+          aria-hidden="true"
+          {...props}
+          {...partProps(styles.part.handle)}
+          data-dowel-component="drawer-handle"
+        />
+      );
+    },
+  ),
+  Header: forwardRef<HTMLDivElement, DivProps>(
+    function DrawerHeader(props, ref) {
+      return (
+        <div
+          ref={ref}
+          {...props}
+          {...partProps(styles.part.header)}
+          data-dowel-component="drawer-header"
+        />
+      );
+    },
+  ),
+  Body: forwardRef<HTMLDivElement, DivProps>(function DrawerBody(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...props}
+        {...partProps(styles.part.body)}
+        data-dowel-component="drawer-body"
+      />
+    );
+  }),
+  Footer: forwardRef<HTMLDivElement, DivProps>(
+    function DrawerFooter(props, ref) {
+      return (
+        <div
+          ref={ref}
+          {...props}
+          {...partProps(styles.part.footer)}
+          data-dowel-component="drawer-footer"
+        />
+      );
+    },
+  ),
+  Title: function DrawerTitle(props: Props<typeof BaseDrawer.Title>) {
+    return (
+      <BaseDrawer.Title
+        {...props}
+        {...partProps(styles.part.title)}
+        data-dowel-component="drawer-title"
+      />
+    );
+  },
+  Description: function DrawerDescription(
+    props: Props<typeof BaseDrawer.Description>,
+  ) {
+    return (
+      <BaseDrawer.Description
+        {...props}
+        {...partProps(styles.part.description)}
+        data-dowel-component="drawer-description"
+      />
+    );
+  },
+  Close: function DrawerClose(props: Props<typeof BaseDrawer.Close>) {
+    return (
+      <BaseDrawer.Close {...props} className={undefined} style={undefined} />
+    );
+  },
+};
diff --git a/packages/dowel/src/components/file-upload/file-upload.stylex.ts b/packages/dowel/src/components/file-upload/file-upload.stylex.ts
new file mode 100644
index 0000000..e9a57d5
--- /dev/null
+++ b/packages/dowel/src/components/file-upload/file-upload.stylex.ts
@@ -0,0 +1,118 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+export const upload = stylex.create({
+  root: { display: "grid", gap: "0.5rem", width: "100%" },
+  dropzone: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-2"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "dashed",
+    borderWidth: "1px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.375rem",
+    justifyContent: "center",
+    minHeight: "8rem",
+    padding: "1rem",
+    transitionDuration: tokens["--dowel-duration-fast"],
+    transitionProperty: "background-color, border-color",
+  },
+  dragging: {
+    backgroundColor: tokens["--dowel-bg-active"],
+    borderColor: tokens["--dowel-accent"],
+  },
+  disabled: { opacity: 0.55 },
+  input: {
+    border: 0,
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+  },
+  browse: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-primary"],
+    display: "inline-flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    gap: "0.5rem",
+    minHeight: "2rem",
+    outline: "none",
+    paddingInline: "0.5rem",
+    ":hover": { backgroundColor: tokens["--dowel-bg-hover"] },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+  },
+  description: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    textAlign: "center",
+  },
+  list: {
+    display: "grid",
+    gap: "0.25rem",
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+  },
+  file: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-2"],
+    borderRadius: tokens["--dowel-radius-sm"],
+    display: "flex",
+    gap: "0.5rem",
+    minHeight: "2rem",
+    padding: "0.25rem 0.375rem 0.25rem 0.5rem",
+  },
+  fileIcon: { color: tokens["--dowel-text-tertiary"], flexShrink: 0 },
+  fileName: {
+    color: tokens["--dowel-text-primary"],
+    flex: 1,
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  fileSize: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-mono"],
+    fontSize: "0.6875rem",
+  },
+  remove: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    height: "1.5rem",
+    justifyContent: "center",
+    outline: "none",
+    width: "1.5rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+  },
+});
diff --git a/packages/dowel/src/components/file-upload/file-upload.test.tsx b/packages/dowel/src/components/file-upload/file-upload.test.tsx
new file mode 100644
index 0000000..fc7a2f7
--- /dev/null
+++ b/packages/dowel/src/components/file-upload/file-upload.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { FileUpload } from "./index";
+describe("FileUpload", () => {
+  it("accepts and removes a file", async () => {
+    const change = vi.fn();
+    const { container } = render(<FileUpload onFilesChange={change} />);
+    const input = container.querySelector(
+      "input[type=file]",
+    ) as HTMLInputElement;
+    const file = new File(["hello"], "notes.txt", { type: "text/plain" });
+    await userEvent.upload(input, file);
+    expect(screen.getByText("notes.txt")).toBeDefined();
+    await userEvent.click(
+      screen.getByRole("button", { name: "Remove notes.txt" }),
+    );
+    expect(screen.queryByText("notes.txt")).toBeNull();
+    expect(change).toHaveBeenLastCalledWith([]);
+  });
+});
diff --git a/packages/dowel/src/components/file-upload/index.tsx b/packages/dowel/src/components/file-upload/index.tsx
new file mode 100644
index 0000000..fac066c
--- /dev/null
+++ b/packages/dowel/src/components/file-upload/index.tsx
@@ -0,0 +1,182 @@
+import {
+  ArrowUpTrayIcon,
+  DocumentIcon,
+  XMarkIcon,
+} from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { useRef, useState } from "react";
+import type { ChangeEvent, DragEvent, ReactNode } from "react";
+import * as styles from "./file-upload.stylex";
+
+export type FileRejectReason = "type" | "size" | "count";
+export interface RejectedFile {
+  file: File;
+  reason: FileRejectReason;
+}
+export interface FileUploadProps {
+  label?: ReactNode;
+  description?: ReactNode;
+  accept?: string;
+  multiple?: boolean;
+  maxFiles?: number;
+  maxSize?: number;
+  disabled?: boolean;
+  onFilesChange?: (files: File[]) => void;
+  onReject?: (rejected: RejectedFile[]) => void;
+}
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+function accepts(file: File, accept?: string) {
+  if (!accept) return true;
+  return accept
+    .split(",")
+    .map((part) => part.trim().toLowerCase())
+    .some((part) =>
+      part.startsWith(".")
+        ? file.name.toLowerCase().endsWith(part)
+        : part.endsWith("/*")
+          ? file.type.toLowerCase().startsWith(part.slice(0, -1))
+          : file.type.toLowerCase() === part,
+    );
+}
+function sizeLabel(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+export function FileUpload({
+  label = "Drop files here or browse",
+  description,
+  accept,
+  multiple = false,
+  maxFiles = multiple ? Infinity : 1,
+  maxSize = Infinity,
+  disabled,
+  onFilesChange,
+  onReject,
+}: FileUploadProps) {
+  const [files, setFiles] = useState<File[]>([]);
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  function commit(incoming: File[]) {
+    const rejected: RejectedFile[] = [];
+    const accepted = incoming.filter((file) => {
+      if (!accepts(file, accept)) {
+        rejected.push({ file, reason: "type" });
+        return false;
+      }
+      if (file.size > maxSize) {
+        rejected.push({ file, reason: "size" });
+        return false;
+      }
+      return true;
+    });
+    const combined = multiple ? [...files, ...accepted] : accepted.slice(0, 1);
+    const unique = combined.filter(
+      (file, index, all) =>
+        all.findIndex(
+          (candidate) =>
+            candidate.name === file.name &&
+            candidate.size === file.size &&
+            candidate.lastModified === file.lastModified,
+        ) === index,
+    );
+    const next = unique.slice(0, maxFiles);
+    unique
+      .slice(maxFiles)
+      .forEach((file) => rejected.push({ file, reason: "count" }));
+    setFiles(next);
+    onFilesChange?.(next);
+    if (rejected.length) onReject?.(rejected);
+  }
+  function change(event: ChangeEvent<HTMLInputElement>) {
+    commit([...(event.target.files ?? [])]);
+    event.target.value = "";
+  }
+  function drop(event: DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    if (disabled) return;
+    setDragging(false);
+    commit([...event.dataTransfer.files]);
+  }
+  function remove(index: number) {
+    const next = files.filter((_, fileIndex) => fileIndex !== index);
+    setFiles(next);
+    onFilesChange?.(next);
+  }
+  return (
+    <div {...sx(styles.upload.root)} data-dowel-component="file-upload">
+      <div
+        onDragEnter={(event) => {
+          event.preventDefault();
+          if (!disabled) setDragging(true);
+        }}
+        onDragOver={(event) => event.preventDefault()}
+        onDragLeave={(event) => {
+          if (!event.currentTarget.contains(event.relatedTarget as Node))
+            setDragging(false);
+        }}
+        onDrop={drop}
+        {...sx(
+          styles.upload.dropzone,
+          dragging && styles.upload.dragging,
+          disabled && styles.upload.disabled,
+        )}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          onChange={change}
+          {...sx(styles.upload.input)}
+        />
+        <button
+          type="button"
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+          {...sx(styles.upload.browse)}
+        >
+          <ArrowUpTrayIcon width={16} height={16} aria-hidden="true" />
+          <span>{label}</span>
+        </button>
+        {description ? (
+          <span {...sx(styles.upload.description)}>{description}</span>
+        ) : null}
+      </div>
+      {files.length ? (
+        <ul aria-label="Selected files" {...sx(styles.upload.list)}>
+          {files.map((file, index) => (
+            <li
+              key={`${file.name}-${file.size}-${file.lastModified}`}
+              {...sx(styles.upload.file)}
+            >
+              <DocumentIcon
+                width={14}
+                height={14}
+                aria-hidden="true"
+                {...sx(styles.upload.fileIcon)}
+              />
+              <span {...sx(styles.upload.fileName)}>{file.name}</span>
+              <span {...sx(styles.upload.fileSize)}>
+                {sizeLabel(file.size)}
+              </span>
+              <button
+                type="button"
+                aria-label={`Remove ${file.name}`}
+                onClick={() => remove(index)}
+                {...sx(styles.upload.remove)}
+              >
+                <XMarkIcon width={14} height={14} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}
+export const Dropzone = FileUpload;
diff --git a/packages/dowel/src/components/list/index.tsx b/packages/dowel/src/components/list/index.tsx
new file mode 100644
index 0000000..8af8c79
--- /dev/null
+++ b/packages/dowel/src/components/list/index.tsx
@@ -0,0 +1,127 @@
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+
+import * as styles from "./list.stylex";
+
+type UlProps = Omit<ComponentPropsWithoutRef<"ul">, "className" | "style">;
+type LiProps = Omit<ComponentPropsWithoutRef<"li">, "className" | "style">;
+type DivProps = Omit<ComponentPropsWithoutRef<"div">, "className" | "style">;
+
+export interface ListProps extends UlProps {
+  divided?: boolean;
+}
+
+export interface ListRowProps extends LiProps {
+  density?: "compact" | "default";
+  selected?: boolean;
+  disabled?: boolean;
+}
+
+export interface ListCellProps extends DivProps {
+  grow?: boolean;
+  align?: "start" | "end";
+  tone?: "primary" | "secondary" | "tertiary";
+  truncate?: boolean;
+}
+
+export interface GroupHeaderProps extends LiProps {
+  sticky?: boolean;
+}
+
+export const List = forwardRef<HTMLUListElement, ListProps>(function List(
+  { divided = false, ...props },
+  ref,
+) {
+  const resolved = stylex.props(
+    styles.list.root,
+    divided && styles.list.divided,
+  );
+  return (
+    <ul
+      ref={ref}
+      role="list"
+      {...props}
+      className={resolved.className}
+      style={resolved.style}
+      data-dowel-component="list"
+      data-divided={divided || undefined}
+    />
+  );
+});
+
+export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(function ListRow(
+  { density = "default", selected = false, disabled = false, ...props },
+  ref,
+) {
+  const resolved = stylex.props(
+    styles.row.root,
+    density === "compact" && styles.row.compact,
+    selected && styles.row.selected,
+    disabled && styles.row.disabled,
+  );
+  return (
+    <li
+      ref={ref}
+      {...props}
+      className={resolved.className}
+      style={resolved.style}
+      data-dowel-component="list-row"
+      data-density={density}
+      data-disabled={disabled || undefined}
+      data-selected={selected || undefined}
+    />
+  );
+});
+
+export const ListCell = forwardRef<HTMLDivElement, ListCellProps>(
+  function ListCell(
+    {
+      grow = false,
+      align = "start",
+      tone = "primary",
+      truncate = false,
+      ...props
+    },
+    ref,
+  ) {
+    const resolved = stylex.props(
+      styles.cell.root,
+      grow && styles.cell.grow,
+      align === "end" && styles.cell.end,
+      tone === "secondary" && styles.cell.secondary,
+      tone === "tertiary" && styles.cell.tertiary,
+      truncate && styles.cell.truncate,
+    );
+    return (
+      <div
+        ref={ref}
+        {...props}
+        className={resolved.className}
+        style={resolved.style}
+        data-dowel-component="list-cell"
+        data-align={align}
+        data-tone={tone}
+      />
+    );
+  },
+);
+
+export const GroupHeader = forwardRef<HTMLLIElement, GroupHeaderProps>(
+  function GroupHeader({ sticky = false, ...props }, ref) {
+    const resolved = stylex.props(
+      styles.groupHeader.root,
+      sticky && styles.groupHeader.sticky,
+    );
+    return (
+      <li
+        ref={ref}
+        {...props}
+        className={resolved.className}
+        style={resolved.style}
+        data-dowel-component="group-header"
+        data-sticky={sticky || undefined}
+      />
+    );
+  },
+);
diff --git a/packages/dowel/src/components/list/list.stylex.ts b/packages/dowel/src/components/list/list.stylex.ts
new file mode 100644
index 0000000..4263ca0
--- /dev/null
+++ b/packages/dowel/src/components/list/list.stylex.ts
@@ -0,0 +1,83 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+export const list = stylex.create({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    listStyle: "none",
+    margin: 0,
+    minWidth: 0,
+    padding: 0,
+  },
+  divided: {
+    backgroundColor: tokens["--dowel-border-subtle"],
+    rowGap: tokens["--dowel-hairline"],
+  },
+});
+
+export const row = stylex.create({
+  root: {
+    alignItems: "center",
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    display: "flex",
+    gap: "0.75rem",
+    minHeight: tokens["--dowel-row-md"],
+    minWidth: 0,
+    padding: "0.5rem 0.75rem",
+    position: "relative",
+    backgroundColor: tokens["--dowel-bg-surface-1"],
+  },
+  compact: { minHeight: "2.25rem", paddingBlock: "0.375rem" },
+  selected: { backgroundColor: tokens["--dowel-bg-active"] },
+  disabled: { color: tokens["--dowel-text-disabled"], opacity: 0.72 },
+});
+
+export const cell = stylex.create({
+  root: {
+    alignItems: "center",
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    gap: "0.5rem",
+    lineHeight: 1.4,
+    minWidth: 0,
+  },
+  grow: { flex: 1 },
+  end: {
+    justifyContent: "flex-end",
+    marginInlineStart: "auto",
+    textAlign: "end",
+  },
+  secondary: { color: tokens["--dowel-text-secondary"] },
+  tertiary: { color: tokens["--dowel-text-tertiary"] },
+  truncate: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+});
+
+export const groupHeader = stylex.create({
+  root: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.6875rem",
+    fontWeight: 550,
+    gap: "0.5rem",
+    lineHeight: 1.4,
+    minHeight: "1.75rem",
+    padding: "0.5rem 0.75rem 0.25rem",
+    backgroundColor: tokens["--dowel-bg-surface-1"],
+  },
+  sticky: {
+    backgroundColor: tokens["--dowel-bg-surface-1"],
+    insetBlockStart: 0,
+    position: "sticky",
+    zIndex: 1,
+  },
+});
diff --git a/packages/dowel/src/components/list/list.test.tsx b/packages/dowel/src/components/list/list.test.tsx
new file mode 100644
index 0000000..d76c6ca
--- /dev/null
+++ b/packages/dowel/src/components/list/list.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { GroupHeader, List, ListCell, ListRow } from "./index";
+
+describe("List", () => {
+  it("renders semantic grouped rows and selection state", () => {
+    render(
+      <List aria-label="Repositories" divided>
+        <GroupHeader>Favorites</GroupHeader>
+        <ListRow selected>
+          <ListCell grow truncate>
+            dowel
+          </ListCell>
+          <ListCell tone="tertiary">Public</ListCell>
+        </ListRow>
+      </List>,
+    );
+    expect(screen.getByRole("list", { name: "Repositories" })).toBeDefined();
+    expect(screen.getByText("dowel").closest("li")?.dataset.selected).toBe(
+      "true",
+    );
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <List aria-label="Repositories">
+        <ListRow>
+          <ListCell>dowel</ListCell>
+        </ListRow>
+      </List>,
+    );
+    await expectNoA11yViolations(container);
+  });
+});
diff --git a/packages/dowel/src/components/pagination/index.tsx b/packages/dowel/src/components/pagination/index.tsx
new file mode 100644
index 0000000..c4f3166
--- /dev/null
+++ b/packages/dowel/src/components/pagination/index.tsx
@@ -0,0 +1,92 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+} from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import * as styles from "./pagination.stylex";
+
+export interface PaginationProps {
+  page: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+  ariaLabel?: string;
+}
+type Token = number | "ellipsis-start" | "ellipsis-end";
+function tokens(page: number, total: number, siblings: number): Token[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+  const start = Math.max(2, page - siblings);
+  const end = Math.min(total - 1, page + siblings);
+  const out: Token[] = [1];
+  if (start > 2) out.push("ellipsis-start");
+  for (let n = start; n <= end; n++) out.push(n);
+  if (end < total - 1) out.push("ellipsis-end");
+  out.push(total);
+  return out;
+}
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  ariaLabel = "Pagination",
+}: PaginationProps) {
+  const safeTotal = Math.max(1, totalPages);
+  const safePage = Math.min(Math.max(1, page), safeTotal);
+  return (
+    <nav
+      aria-label={ariaLabel}
+      {...sx(styles.pagination.root)}
+      data-dowel-component="pagination"
+    >
+      <button
+        type="button"
+        aria-label="Previous page"
+        disabled={safePage === 1}
+        onClick={() => onPageChange(safePage - 1)}
+        {...sx(styles.pagination.button)}
+      >
+        <ChevronLeftIcon width={14} height={14} />
+      </button>
+      {tokens(safePage, safeTotal, siblingCount).map((token) =>
+        typeof token === "number" ? (
+          <button
+            key={token}
+            type="button"
+            aria-label={`Page ${token}`}
+            aria-current={token === safePage ? "page" : undefined}
+            onClick={() => onPageChange(token)}
+            {...sx(
+              styles.pagination.button,
+              token === safePage && styles.pagination.active,
+            )}
+          >
+            {token}
+          </button>
+        ) : (
+          <span
+            key={token}
+            aria-hidden="true"
+            {...sx(styles.pagination.ellipsis)}
+          >
+            <EllipsisHorizontalIcon width={14} height={14} />
+          </span>
+        ),
+      )}
+      <button
+        type="button"
+        aria-label="Next page"
+        disabled={safePage === safeTotal}
+        onClick={() => onPageChange(safePage + 1)}
+        {...sx(styles.pagination.button)}
+      >
+        <ChevronRightIcon width={14} height={14} />
+      </button>
+    </nav>
+  );
+}
diff --git a/packages/dowel/src/components/pagination/pagination.stylex.ts b/packages/dowel/src/components/pagination/pagination.stylex.ts
new file mode 100644
index 0000000..639bb5e
--- /dev/null
+++ b/packages/dowel/src/components/pagination/pagination.stylex.ts
@@ -0,0 +1,43 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+export const pagination = stylex.create({
+  root: { alignItems: "center", display: "flex", gap: "0.125rem" },
+  button: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-secondary"],
+    display: "inline-flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    height: tokens["--dowel-control-md"],
+    justifyContent: "center",
+    minWidth: tokens["--dowel-control-md"],
+    outline: "none",
+    paddingInline: "0.375rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+    ":disabled": { color: tokens["--dowel-text-disabled"], opacity: 0.55 },
+  },
+  active: {
+    backgroundColor: tokens["--dowel-bg-surface-3"],
+    color: tokens["--dowel-text-primary"],
+    fontWeight: 600,
+  },
+  ellipsis: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    height: tokens["--dowel-control-md"],
+    justifyContent: "center",
+    width: tokens["--dowel-control-md"],
+  },
+});
diff --git a/packages/dowel/src/components/pagination/pagination.test.tsx b/packages/dowel/src/components/pagination/pagination.test.tsx
new file mode 100644
index 0000000..f5f41b2
--- /dev/null
+++ b/packages/dowel/src/components/pagination/pagination.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Pagination } from "./index";
+describe("Pagination", () => {
+  it("moves to another page", async () => {
+    const change = vi.fn();
+    render(<Pagination page={2} totalPages={8} onPageChange={change} />);
+    await userEvent.click(screen.getByRole("button", { name: "Next page" }));
+    expect(change).toHaveBeenCalledWith(3);
+  });
+});
diff --git a/packages/dowel/src/components/progress/index.tsx b/packages/dowel/src/components/progress/index.tsx
new file mode 100644
index 0000000..6d8f3bc
--- /dev/null
+++ b/packages/dowel/src/components/progress/index.tsx
@@ -0,0 +1,60 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+
+import * as styles from "./progress.stylex";
+
+export interface ProgressProps {
+  label: ReactNode;
+  value: number | null;
+  min?: number;
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  showValue?: boolean;
+  getAriaValueText?: (formattedValue: string, value: number | null) => string;
+}
+
+function sx(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+export function Progress({
+  label,
+  value,
+  min = 0,
+  max = 100,
+  size = "md",
+  showValue = true,
+  getAriaValueText,
+}: ProgressProps) {
+  return (
+    <BaseProgress.Root
+      value={value}
+      min={min}
+      max={max}
+      getAriaValueText={getAriaValueText}
+      {...sx(styles.progress.root)}
+      data-dowel-component="progress"
+      data-size={size}
+    >
+      <div {...sx(styles.progress.metadata)}>
+        <BaseProgress.Label {...sx(styles.progress.label)}>
+          {label}
+        </BaseProgress.Label>
+        {showValue ? (
+          <BaseProgress.Value {...sx(styles.progress.value)} />
+        ) : null}
+      </div>
+      <BaseProgress.Track
+        {...sx(
+          styles.progress.track,
+          size === "sm" && styles.progress.small,
+          size === "lg" && styles.progress.large,
+        )}
+      >
+        <BaseProgress.Indicator {...sx(styles.progress.indicator)} />
+      </BaseProgress.Track>
+    </BaseProgress.Root>
+  );
+}
diff --git a/packages/dowel/src/components/progress/progress.stylex.ts b/packages/dowel/src/components/progress/progress.stylex.ts
new file mode 100644
index 0000000..5008d19
--- /dev/null
+++ b/packages/dowel/src/components/progress/progress.stylex.ts
@@ -0,0 +1,61 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+const slide = stylex.keyframes({
+  from: { transform: "translateX(-120%)" },
+  to: { transform: "translateX(260%)" },
+});
+
+export const progress = stylex.create({
+  root: { display: "grid", gap: "0.375rem", minWidth: 0, width: "100%" },
+  metadata: {
+    alignItems: "center",
+    display: "flex",
+    gap: "0.75rem",
+    justifyContent: "space-between",
+  },
+  label: {
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    lineHeight: 1.4,
+  },
+  value: {
+    color: tokens["--dowel-text-tertiary"],
+    fontFamily: tokens["--dowel-font-mono"],
+    fontSize: "0.75rem",
+    fontVariantNumeric: "tabular-nums",
+    lineHeight: 1.4,
+  },
+  track: {
+    backgroundColor: tokens["--dowel-bg-surface-3"],
+    borderRadius: tokens["--dowel-radius-pill"],
+    height: "0.375rem",
+    overflow: "hidden",
+    position: "relative",
+    width: "100%",
+  },
+  small: { height: "0.25rem" },
+  large: { height: "0.5rem" },
+  indicator: {
+    backgroundColor: tokens["--dowel-accent"],
+    borderRadius: "inherit",
+    height: "100%",
+    transitionDuration: {
+      default: tokens["--dowel-duration-normal"],
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "width",
+    transitionTimingFunction: tokens["--dowel-ease-out"],
+    "[data-complete]": { backgroundColor: tokens["--dowel-success"] },
+    "[data-indeterminate]": {
+      animationDuration: "1.2s",
+      animationIterationCount: "infinite",
+      animationName: slide,
+      animationTimingFunction: "ease-in-out",
+      width: "40%",
+    },
+  },
+});
diff --git a/packages/dowel/src/components/progress/progress.test.tsx b/packages/dowel/src/components/progress/progress.test.tsx
new file mode 100644
index 0000000..c895ae1
--- /dev/null
+++ b/packages/dowel/src/components/progress/progress.test.tsx
@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { Progress } from "./index";
+
+describe("Progress", () => {
+  it("announces and displays determinate progress", () => {
+    render(<Progress label="Upload artifacts" value={42} />);
+    const progress = screen.getByRole("progressbar", {
+      name: "Upload artifacts",
+    });
+    expect(progress.getAttribute("aria-valuenow")).toBe("42");
+    expect(screen.getByText("42%")).toBeDefined();
+  });
+
+  it("supports indeterminate progress", () => {
+    render(<Progress label="Connecting" value={null} showValue={false} />);
+    expect(screen.getByRole("progressbar").hasAttribute("aria-valuenow")).toBe(
+      false,
+    );
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <Progress label="Upload artifacts" value={42} />,
+    );
+    await expectNoA11yViolations(container);
+  });
+});
diff --git a/packages/dowel/src/components/slider/index.tsx b/packages/dowel/src/components/slider/index.tsx
new file mode 100644
index 0000000..c7b7f33
--- /dev/null
+++ b/packages/dowel/src/components/slider/index.tsx
@@ -0,0 +1,72 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
+import * as styles from "./slider.stylex";
+type P<T extends ElementType> = Omit<
+  ComponentPropsWithoutRef<T>,
+  "className" | "style"
+>;
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+const Root = forwardRef<HTMLDivElement, P<typeof BaseSlider.Root>>(
+  function Root(props, ref) {
+    return (
+      <BaseSlider.Root
+        ref={ref}
+        {...props}
+        {...sx(styles.slider.root)}
+        data-dowel-component="slider"
+      />
+    );
+  },
+);
+const Label = forwardRef<HTMLDivElement, P<typeof BaseSlider.Label>>(
+  function Label(props, ref) {
+    return (
+      <BaseSlider.Label ref={ref} {...props} {...sx(styles.slider.label)} />
+    );
+  },
+);
+const Value = forwardRef<HTMLOutputElement, P<typeof BaseSlider.Value>>(
+  function Value(props, ref) {
+    return (
+      <BaseSlider.Value ref={ref} {...props} {...sx(styles.slider.value)} />
+    );
+  },
+);
+const Control = forwardRef<HTMLDivElement, P<typeof BaseSlider.Control>>(
+  function Control(props, ref) {
+    return (
+      <BaseSlider.Control ref={ref} {...props} {...sx(styles.slider.control)} />
+    );
+  },
+);
+const Track = forwardRef<HTMLDivElement, P<typeof BaseSlider.Track>>(
+  function Track(props, ref) {
+    return (
+      <BaseSlider.Track ref={ref} {...props} {...sx(styles.slider.track)} />
+    );
+  },
+);
+const Indicator = forwardRef<HTMLDivElement, P<typeof BaseSlider.Indicator>>(
+  function Indicator(props, ref) {
+    return (
+      <BaseSlider.Indicator
+        ref={ref}
+        {...props}
+        {...sx(styles.slider.indicator)}
+      />
+    );
+  },
+);
+const Thumb = forwardRef<HTMLDivElement, P<typeof BaseSlider.Thumb>>(
+  function Thumb(props, ref) {
+    return (
+      <BaseSlider.Thumb ref={ref} {...props} {...sx(styles.slider.thumb)} />
+    );
+  },
+);
+export const Slider = { Root, Label, Value, Control, Track, Indicator, Thumb };
diff --git a/packages/dowel/src/components/slider/slider.stylex.ts b/packages/dowel/src/components/slider/slider.stylex.ts
new file mode 100644
index 0000000..c031930
--- /dev/null
+++ b/packages/dowel/src/components/slider/slider.stylex.ts
@@ -0,0 +1,64 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+export const slider = stylex.create({
+  root: { display: "grid", gap: "0.25rem", minWidth: 0, width: "100%" },
+  label: {
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    fontWeight: 500,
+  },
+  value: {
+    color: tokens["--dowel-text-secondary"],
+    fontFamily: tokens["--dowel-font-mono"],
+    fontSize: "0.75rem",
+    gridColumn: "2",
+    gridRow: "1",
+    justifySelf: "end",
+  },
+  control: {
+    alignItems: "center",
+    display: "flex",
+    gridColumn: "1 / -1",
+    minHeight: "1.75rem",
+    touchAction: "none",
+    userSelect: "none",
+    width: "100%",
+    "[data-orientation=vertical]": {
+      height: "10rem",
+      justifyContent: "center",
+      minWidth: "1.75rem",
+      width: "auto",
+    },
+  },
+  track: {
+    backgroundColor: tokens["--dowel-bg-surface-3"],
+    borderRadius: tokens["--dowel-radius-pill"],
+    height: "0.25rem",
+    position: "relative",
+    width: "100%",
+    "[data-orientation=vertical]": { height: "100%", width: "0.25rem" },
+  },
+  indicator: {
+    backgroundColor: tokens["--dowel-accent"],
+    borderRadius: "inherit",
+  },
+  thumb: {
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    borderColor: tokens["--dowel-border-strong"],
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    boxShadow: tokens["--dowel-shadow-control"],
+    height: "1rem",
+    outline: "none",
+    width: "1rem",
+    ":has(:focus-visible)": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "2px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+    "[data-dragging]": { borderColor: tokens["--dowel-accent"] },
+  },
+});
diff --git a/packages/dowel/src/components/slider/slider.test.tsx b/packages/dowel/src/components/slider/slider.test.tsx
new file mode 100644
index 0000000..5b905fd
--- /dev/null
+++ b/packages/dowel/src/components/slider/slider.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Slider } from "./index";
+describe("Slider", () => {
+  it("responds to keyboard changes", async () => {
+    render(
+      <Slider.Root defaultValue={25}>
+        <Slider.Label>Volume</Slider.Label>
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Indicator />
+            <Slider.Thumb aria-label="Volume" />
+          </Slider.Track>
+        </Slider.Control>
+      </Slider.Root>,
+    );
+    const slider = screen.getByRole("slider", { name: "Volume" });
+    slider.focus();
+    await userEvent.keyboard("{ArrowRight}");
+    expect(slider.getAttribute("aria-valuenow")).toBe("26");
+  });
+});
diff --git a/packages/dowel/src/components/toast/index.tsx b/packages/dowel/src/components/toast/index.tsx
new file mode 100644
index 0000000..6c6dde4
--- /dev/null
+++ b/packages/dowel/src/components/toast/index.tsx
@@ -0,0 +1,178 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XMarkIcon,
+} from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { useContext } from "react";
+import type { ReactNode } from "react";
+import type {
+  ToastManager,
+  ToastManagerAddOptions,
+  ToastManagerPromiseOptions,
+  ToastManagerUpdateOptions,
+  ToastRootToastObject,
+} from "@base-ui/react/toast";
+
+import { DowelThemeContext, themeStyles } from "../../theme/theme-provider";
+import * as styles from "./toast.stylex";
+
+export type ToastTone =
+  | "default"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+  | "loading";
+type ToastData = Record<string, never>;
+export interface ToastOptions
+  extends Omit<ToastManagerAddOptions<ToastData>, "title" | "type"> {
+  description?: ReactNode;
+  tone?: ToastTone;
+}
+export interface ToastUpdateOptions
+  extends Omit<ToastManagerUpdateOptions<ToastData>, "type"> {
+  tone?: ToastTone;
+}
+export interface ToastProviderProps {
+  children?: ReactNode;
+  timeout?: number;
+  limit?: number;
+  manager?: ToastManager<ToastData>;
+}
+
+const globalManager = BaseToast.createToastManager<ToastData>();
+
+function addToast(title: ReactNode, options: ToastOptions = {}) {
+  const { tone = "default", ...rest } = options;
+  return globalManager.add({ ...rest, title, type: tone });
+}
+
+export const toast = Object.assign(addToast, {
+  success: (title: ReactNode, options: Omit<ToastOptions, "tone"> = {}) =>
+    addToast(title, { ...options, tone: "success" }),
+  info: (title: ReactNode, options: Omit<ToastOptions, "tone"> = {}) =>
+    addToast(title, { ...options, tone: "info" }),
+  warning: (title: ReactNode, options: Omit<ToastOptions, "tone"> = {}) =>
+    addToast(title, { ...options, tone: "warning" }),
+  error: (title: ReactNode, options: Omit<ToastOptions, "tone"> = {}) =>
+    addToast(title, {
+      ...options,
+      tone: "danger",
+      priority: options.priority ?? "high",
+    }),
+  loading: (title: ReactNode, options: Omit<ToastOptions, "tone"> = {}) =>
+    addToast(title, {
+      ...options,
+      tone: "loading",
+      timeout: options.timeout ?? 0,
+    }),
+  dismiss: (id?: string) => globalManager.close(id),
+  update: (id: string, options: ToastUpdateOptions) => {
+    const { tone, ...rest } = options;
+    globalManager.update(id, tone ? { ...rest, type: tone } : rest);
+  },
+  promise: <Value,>(
+    promise: Promise<Value>,
+    options: ToastManagerPromiseOptions<Value, ToastData>,
+  ) => globalManager.promise(promise, options),
+});
+
+function sx(...values: stylex.StyleXStyles[]) {
+  const resolved = stylex.props(...values);
+  return { className: resolved.className, style: resolved.style };
+}
+
+function ToneIcon({ tone }: { tone: ToastTone }) {
+  const iconProps = { width: 16, height: 16 };
+  if (tone === "success") return <CheckCircleIcon {...iconProps} />;
+  if (tone === "warning") return <ExclamationTriangleIcon {...iconProps} />;
+  if (tone === "danger") return <ExclamationCircleIcon {...iconProps} />;
+  if (tone === "info") return <InformationCircleIcon {...iconProps} />;
+  if (tone === "loading") return <span {...sx(styles.toast.spinner)} />;
+  return null;
+}
+
+function ToastItem({ item }: { item: ToastRootToastObject<ToastData> }) {
+  const tone = (
+    item.type === "error" ? "danger" : (item.type ?? "default")
+  ) as ToastTone;
+  return (
+    <BaseToast.Root
+      toast={item}
+      {...sx(styles.toast.root)}
+      data-dowel-component="toast"
+      swipeDirection={["down", "right"]}
+    >
+      <BaseToast.Content {...sx(styles.toast.content)}>
+        {tone !== "default" ? (
+          <span
+            {...sx(
+              styles.toast.icon,
+              styles.toast[tone === "loading" ? "info" : tone],
+            )}
+            aria-hidden="true"
+          >
+            <ToneIcon tone={tone} />
+          </span>
+        ) : null}
+        <span {...sx(styles.toast.text)}>
+          <BaseToast.Title {...sx(styles.toast.title)} />
+          <BaseToast.Description {...sx(styles.toast.description)} />
+        </span>
+        <span {...sx(styles.toast.controls)}>
+          {item.actionProps ? (
+            <BaseToast.Action {...sx(styles.toast.action)} />
+          ) : null}
+          <BaseToast.Close
+            {...sx(styles.toast.close)}
+            aria-label="Dismiss notification"
+          >
+            <XMarkIcon width={14} height={14} />
+          </BaseToast.Close>
+        </span>
+      </BaseToast.Content>
+    </BaseToast.Root>
+  );
+}
+
+function ToastViewport() {
+  const { toasts } = BaseToast.useToastManager<ToastData>();
+  const theme = useContext(DowelThemeContext);
+  const portalTheme = stylex.props(themeStyles[theme]);
+  return (
+    <BaseToast.Portal
+      className={portalTheme.className}
+      style={portalTheme.style}
+      data-dowel-theme={theme}
+    >
+      <BaseToast.Viewport
+        {...sx(styles.toast.viewport)}
+        data-dowel-component="toast-viewport"
+      >
+        {toasts.map((item) => (
+          <ToastItem key={item.id} item={item} />
+        ))}
+      </BaseToast.Viewport>
+    </BaseToast.Portal>
+  );
+}
+
+export function ToastProvider({
+  children,
+  timeout = 5000,
+  limit = 3,
+  manager = globalManager,
+}: ToastProviderProps) {
+  return (
+    <BaseToast.Provider timeout={timeout} limit={limit} toastManager={manager}>
+      {children}
+      <ToastViewport />
+    </BaseToast.Provider>
+  );
+}
+
+export { globalManager as toastManager };
diff --git a/packages/dowel/src/components/toast/toast.stylex.ts b/packages/dowel/src/components/toast/toast.stylex.ts
new file mode 100644
index 0000000..1fe8089
--- /dev/null
+++ b/packages/dowel/src/components/toast/toast.stylex.ts
@@ -0,0 +1,220 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { tokens } from "../../theme/tokens.stylex";
+
+const MOBILE = "@media (max-width: 639px)";
+const REDUCED_MOTION = "@media (prefers-reduced-motion: reduce)";
+
+export const toast = stylex.create({
+  viewport: {
+    bottom: { default: "1rem", [MOBILE]: "0.5rem" },
+    maxWidth: { default: "calc(100vw - 2rem)", [MOBILE]: "calc(100vw - 1rem)" },
+    outline: "none",
+    pointerEvents: "none",
+    position: "fixed",
+    right: { default: "1rem", [MOBILE]: "0.5rem" },
+    width: "22rem",
+    zIndex: 70,
+  },
+  root: {
+    "--toast-gap": "0.5rem",
+    "--toast-peek": "0.5rem",
+    "--toast-scale": "calc(max(0, 1 - (var(--toast-index) * 0.05)))",
+    "--toast-shrink": "calc(1 - var(--toast-scale))",
+    "--toast-stack-height":
+      "var(--toast-frontmost-height, var(--toast-height))",
+    "--toast-z-index": "calc(1000 - var(--toast-index))",
+    "--toast-expanded-y":
+      "calc((var(--toast-offset-y) * -1) + (var(--toast-index) * var(--toast-gap) * -1) + var(--toast-swipe-movement-y))",
+    backgroundColor: tokens["--dowel-bg-elevated"],
+    bottom: 0,
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    boxShadow: tokens["--dowel-shadow-popover"],
+    boxSizing: "border-box",
+    color: tokens["--dowel-text-primary"],
+    cursor: "default",
+    height: "var(--toast-stack-height)",
+    left: 0,
+    opacity: 1,
+    overflow: "hidden",
+    pointerEvents: "auto",
+    position: "absolute",
+    transform:
+      "translateX(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) - (var(--toast-index) * var(--toast-peek)) - (var(--toast-shrink) * var(--toast-stack-height)))) scale(var(--toast-scale))",
+    transformOrigin: "bottom center",
+    transitionDuration: {
+      default: "400ms, 200ms, 200ms, 200ms",
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "transform, opacity, height, box-shadow",
+    transitionTimingFunction:
+      "cubic-bezier(0.22, 1, 0.36, 1), ease, cubic-bezier(0.22, 1, 0.36, 1), ease",
+    userSelect: "none",
+    width: "100%",
+    // CSS accepts a computed integer here; csstype only models literal integers.
+    zIndex: "var(--toast-z-index)" as unknown as number,
+    "::after": {
+      content: '""',
+      height: "calc(var(--toast-gap) + 1px)",
+      left: 0,
+      position: "absolute",
+      top: "100%",
+      width: "100%",
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-2px",
+      outlineStyle: "solid",
+      outlineWidth: "2px",
+    },
+    "[data-expanded]": {
+      height: "var(--toast-height)",
+      transform:
+        "translateX(var(--toast-swipe-movement-x)) translateY(var(--toast-expanded-y))",
+    },
+    "[data-starting-style]": {
+      opacity: 0,
+      transform: "translateY(calc(100% + 1rem)) scale(0.96)",
+    },
+    "[data-ending-style]": {
+      opacity: 0,
+      transform: "translateY(calc(100% + 1rem)) scale(0.96)",
+    },
+    "[data-ending-style][data-swipe-direction='up']": {
+      transform: "translateY(calc(var(--toast-swipe-movement-y) - 150%))",
+    },
+    "[data-ending-style][data-swipe-direction='down']": {
+      transform: "translateY(calc(var(--toast-swipe-movement-y) + 150%))",
+    },
+    "[data-ending-style][data-swipe-direction='left']": {
+      transform:
+        "translateX(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--toast-expanded-y))",
+    },
+    "[data-ending-style][data-swipe-direction='right']": {
+      transform:
+        "translateX(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--toast-expanded-y))",
+    },
+    "[data-swiping]": { transitionDuration: "0ms" },
+    "[data-limited]": { opacity: 0, pointerEvents: "none" },
+  },
+  content: {
+    alignItems: "flex-start",
+    display: "flex",
+    gap: "0.625rem",
+    minHeight: "3.25rem",
+    overflow: "hidden",
+    padding: "0.75rem",
+    transitionDuration: {
+      default: "250ms",
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    transitionProperty: "opacity",
+    transitionTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)",
+    "[data-behind]": { opacity: 0 },
+    "[data-expanded]": { opacity: 1 },
+  },
+  icon: {
+    alignItems: "center",
+    animationDuration: {
+      default: "200ms",
+      [REDUCED_MOTION]: "0.01ms",
+    },
+    animationName: stylex.keyframes({
+      from: { opacity: 0, transform: "scale(0.8)" },
+      to: { opacity: 1, transform: "scale(1)" },
+    }),
+    animationTimingFunction: "cubic-bezier(0.22, 1, 0.36, 1)",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    flexShrink: 0,
+    height: "1.25rem",
+  },
+  success: { color: tokens["--dowel-success"] },
+  warning: { color: tokens["--dowel-warning"] },
+  danger: { color: tokens["--dowel-danger"] },
+  info: { color: tokens["--dowel-accent"] },
+  spinner: {
+    animationDuration: "0.8s",
+    animationIterationCount: "infinite",
+    animationName: stylex.keyframes({ to: { transform: "rotate(360deg)" } }),
+    animationTimingFunction: "linear",
+    borderColor: tokens["--dowel-border-strong"],
+    borderRadius: "50%",
+    borderStyle: "solid",
+    borderTopColor: tokens["--dowel-accent"],
+    borderWidth: "2px",
+    height: "0.875rem",
+    width: "0.875rem",
+  },
+  text: {
+    display: "flex",
+    flex: 1,
+    flexDirection: "column",
+    gap: "0.125rem",
+    minWidth: 0,
+  },
+  title: {
+    color: tokens["--dowel-text-primary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    fontWeight: 550,
+    lineHeight: 1.4,
+    margin: 0,
+  },
+  description: {
+    color: tokens["--dowel-text-secondary"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    lineHeight: 1.45,
+    margin: 0,
+  },
+  controls: {
+    alignItems: "center",
+    display: "flex",
+    flexShrink: 0,
+    gap: "0.25rem",
+  },
+  action: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderRadius: tokens["--dowel-radius-sm"],
+    color: tokens["--dowel-accent"],
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    fontWeight: 550,
+    minHeight: "1.75rem",
+    padding: "0 0.375rem",
+    ":hover": { backgroundColor: tokens["--dowel-bg-hover"] },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-2px",
+      outlineStyle: "solid",
+      outlineWidth: "2px",
+    },
+  },
+  close: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    borderRadius: tokens["--dowel-radius-sm"],
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    height: "1.75rem",
+    justifyContent: "center",
+    padding: 0,
+    width: "1.75rem",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-2px",
+      outlineStyle: "solid",
+      outlineWidth: "2px",
+    },
+  },
+});
diff --git a/packages/dowel/src/components/toast/toast.test.tsx b/packages/dowel/src/components/toast/toast.test.tsx
new file mode 100644
index 0000000..3a923e7
--- /dev/null
+++ b/packages/dowel/src/components/toast/toast.test.tsx
@@ -0,0 +1,115 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/setup";
+import { ToastProvider, toast } from "./index";
+
+afterEach(() => toast.dismiss());
+
+describe("Toast", () => {
+  it("creates and dismisses a global toast", async () => {
+    render(
+      <ToastProvider timeout={0}>
+        <button
+          type="button"
+          onClick={() =>
+            toast.success("Repository created", {
+              description: "dowel is ready",
+            })
+          }
+        >
+          Create
+        </button>
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create" }));
+    expect(await screen.findByText("Repository created")).toBeDefined();
+    await userEvent.hover(
+      screen
+        .getByText("Repository created")
+        .closest('[data-dowel-component="toast"]')!,
+    );
+    await userEvent.click(
+      screen.getByRole("button", { name: "Dismiss notification" }),
+    );
+    await waitFor(() =>
+      expect(screen.queryByText("Repository created")).toBeNull(),
+    );
+  });
+
+  it("runs toast actions", async () => {
+    const undo = vi.fn();
+    render(
+      <ToastProvider timeout={0}>
+        <button
+          type="button"
+          onClick={() =>
+            toast("Archived", {
+              actionProps: { children: "Undo", onClick: undo },
+            })
+          }
+        >
+          Archive
+        </button>
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Archive" }));
+    await userEvent.click(await screen.findByRole("button", { name: "Undo" }));
+    expect(undo).toHaveBeenCalledOnce();
+  });
+
+  it("stacks toasts and expands them on hover", async () => {
+    render(
+      <ToastProvider timeout={0}>
+        <button
+          type="button"
+          onClick={() => {
+            toast("First");
+            toast("Second");
+            toast("Third");
+          }}
+        >
+          Create stack
+        </button>
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Create stack" }));
+    await screen.findByText("Third");
+
+    const viewport = document.querySelector(
+      '[data-dowel-component="toast-viewport"]',
+    )!;
+    const roots = [
+      ...document.querySelectorAll<HTMLElement>(
+        '[data-dowel-component="toast"]',
+      ),
+    ];
+    expect(roots).toHaveLength(3);
+    expect(
+      roots.map((root) => root.style.getPropertyValue("--toast-index")).sort(),
+    ).toEqual(["0", "1", "2"]);
+    expect(document.querySelectorAll("[data-behind]")).toHaveLength(2);
+
+    await userEvent.hover(viewport);
+    await waitFor(() => {
+      expect(viewport.hasAttribute("data-expanded")).toBe(true);
+      expect(roots.every((root) => root.hasAttribute("data-expanded"))).toBe(
+        true,
+      );
+    });
+  });
+
+  it("has no accessibility violations", async () => {
+    const { container } = render(
+      <ToastProvider timeout={0}>
+        <button type="button" onClick={() => toast.info("Synced")}>
+          Sync
+        </button>
+      </ToastProvider>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Sync" }));
+    await screen.findByText("Synced");
+    await expectNoA11yViolations(container.ownerDocument.body);
+  });
+});
diff --git a/packages/dowel/src/components/toggle-group/index.tsx b/packages/dowel/src/components/toggle-group/index.tsx
new file mode 100644
index 0000000..0e3c4e5
--- /dev/null
+++ b/packages/dowel/src/components/toggle-group/index.tsx
@@ -0,0 +1,50 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import * as stylex from "@stylexjs/stylex";
+import { forwardRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+
+import * as styles from "./toggle-group.stylex";
+
+type RootProps = Omit<
+  ComponentPropsWithoutRef<typeof BaseToggleGroup>,
+  "className" | "style"
+>;
+type ItemProps = Omit<
+  ComponentPropsWithoutRef<typeof BaseToggle>,
+  "className" | "style"
+>;
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+
+const Root = forwardRef<HTMLDivElement, RootProps>(
+  function ToggleGroupRoot(props, ref) {
+    return (
+      <BaseToggleGroup
+        ref={ref}
+        {...props}
+        {...sx(styles.toggle.group)}
+        data-dowel-component="toggle-group"
+      />
+    );
+  },
+);
+const Item = forwardRef<HTMLButtonElement, ItemProps>(
+  function ToggleGroupItem(props, ref) {
+    return (
+      <BaseToggle
+        ref={ref}
+        {...props}
+        {...sx(styles.toggle.item)}
+        data-dowel-component="toggle-group-item"
+      />
+    );
+  },
+);
+export const ToggleGroup = { Root, Item };
+export type {
+  RootProps as ToggleGroupRootProps,
+  ItemProps as ToggleGroupItemProps,
+};
diff --git a/packages/dowel/src/components/toggle-group/toggle-group.stylex.ts b/packages/dowel/src/components/toggle-group/toggle-group.stylex.ts
new file mode 100644
index 0000000..f73ab36
--- /dev/null
+++ b/packages/dowel/src/components/toggle-group/toggle-group.stylex.ts
@@ -0,0 +1,57 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+const COARSE = "@media (pointer: coarse)";
+export const toggle = stylex.create({
+  group: {
+    alignItems: "center",
+    backgroundColor: tokens["--dowel-bg-surface-2"],
+    borderColor: tokens["--dowel-border-default"],
+    borderRadius: tokens["--dowel-radius-md"],
+    borderStyle: "solid",
+    borderWidth: tokens["--dowel-hairline"],
+    display: "inline-flex",
+    gap: "0.125rem",
+    padding: "0.125rem",
+    "[data-orientation=vertical]": {
+      alignItems: "stretch",
+      flexDirection: "column",
+    },
+  },
+  item: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-secondary"],
+    display: "inline-flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    gap: "0.375rem",
+    height: { default: tokens["--dowel-control-md"], [COARSE]: "2.75rem" },
+    justifyContent: "center",
+    minWidth: tokens["--dowel-control-md"],
+    outline: "none",
+    paddingInline: "0.5rem",
+    userSelect: "none",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "1px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+    "[data-pressed]": {
+      backgroundColor: tokens["--dowel-bg-surface-1"],
+      boxShadow: tokens["--dowel-shadow-control"],
+      color: tokens["--dowel-text-primary"],
+    },
+    "[data-disabled]": {
+      color: tokens["--dowel-text-disabled"],
+      opacity: 0.55,
+    },
+  },
+});
diff --git a/packages/dowel/src/components/toggle-group/toggle-group.test.tsx b/packages/dowel/src/components/toggle-group/toggle-group.test.tsx
new file mode 100644
index 0000000..4eb7f98
--- /dev/null
+++ b/packages/dowel/src/components/toggle-group/toggle-group.test.tsx
@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ToggleGroup } from "./index";
+describe("ToggleGroup", () => {
+  it("selects one item by default", async () => {
+    render(
+      <ToggleGroup.Root aria-label="Alignment">
+        <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
+        <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
+      </ToggleGroup.Root>,
+    );
+    await userEvent.click(screen.getByRole("button", { name: "Right" }));
+    expect(
+      screen
+        .getByRole("button", { name: "Right" })
+        .getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+});
diff --git a/packages/dowel/src/components/tree-view/index.tsx b/packages/dowel/src/components/tree-view/index.tsx
new file mode 100644
index 0000000..dbacd5e
--- /dev/null
+++ b/packages/dowel/src/components/tree-view/index.tsx
@@ -0,0 +1,182 @@
+import { ChevronRightIcon } from "@heroicons/react/16/solid";
+import * as stylex from "@stylexjs/stylex";
+import { useMemo, useRef, useState } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+import * as styles from "./tree-view.stylex";
+
+export interface TreeViewItem {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  disabled?: boolean;
+  children?: TreeViewItem[];
+}
+export interface TreeViewProps {
+  items: TreeViewItem[];
+  selectedId?: string;
+  defaultSelectedId?: string;
+  onSelectionChange?: (id: string) => void;
+  expandedIds?: string[];
+  defaultExpandedIds?: string[];
+  onExpandedChange?: (ids: string[]) => void;
+  ariaLabel?: string;
+}
+function sx(...v: stylex.StyleXStyles[]) {
+  const r = stylex.props(...v);
+  return { className: r.className, style: r.style };
+}
+export function TreeView({
+  items,
+  selectedId,
+  defaultSelectedId,
+  onSelectionChange,
+  expandedIds,
+  defaultExpandedIds = [],
+  onExpandedChange,
+  ariaLabel = "Tree",
+}: TreeViewProps) {
+  const [internalSelected, setInternalSelected] = useState(defaultSelectedId);
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpandedIds);
+  const rootRef = useRef<HTMLUListElement>(null);
+  const selected = selectedId ?? internalSelected;
+  const expanded = expandedIds ?? internalExpanded;
+  const expandedSet = useMemo(() => new Set(expanded), [expanded]);
+  function setExpanded(next: string[]) {
+    if (expandedIds === undefined) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  }
+  function choose(id: string) {
+    if (selectedId === undefined) setInternalSelected(id);
+    onSelectionChange?.(id);
+  }
+  function toggle(id: string) {
+    setExpanded(
+      expandedSet.has(id)
+        ? expanded.filter((value) => value !== id)
+        : [...expanded, id],
+    );
+  }
+  function keyDown(event: KeyboardEvent<HTMLUListElement>) {
+    const nodes = [
+      ...(rootRef.current?.querySelectorAll<HTMLElement>("[data-tree-node]") ??
+        []),
+    ].filter((node) => node.offsetParent !== null);
+    const index = nodes.indexOf(event.target as HTMLElement);
+    if (index < 0) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      nodes[index + (event.key === "ArrowDown" ? 1 : -1)]?.focus();
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      nodes[event.key === "Home" ? 0 : nodes.length - 1]?.focus();
+    } else if (event.key === "ArrowRight") {
+      const node = nodes[index]!;
+      const id = node.dataset.treeNode!;
+      if (node.getAttribute("aria-expanded") === "false") {
+        event.preventDefault();
+        toggle(id);
+      } else {
+        const next = nodes[index + 1];
+        if (next && Number(next.dataset.level) > Number(node.dataset.level)) {
+          event.preventDefault();
+          next.focus();
+        }
+      }
+    } else if (event.key === "ArrowLeft") {
+      const node = nodes[index]!;
+      const id = node.dataset.treeNode!;
+      if (node.getAttribute("aria-expanded") === "true") {
+        event.preventDefault();
+        toggle(id);
+      } else {
+        const parentId = node.dataset.parent;
+        const parent = parentId
+          ? rootRef.current?.querySelector<HTMLElement>(
+              `[data-tree-node="${CSS.escape(parentId)}"]`,
+            )
+          : null;
+        if (parent) {
+          event.preventDefault();
+          parent.focus();
+        }
+      }
+    }
+  }
+  function renderItems(
+    list: TreeViewItem[],
+    level: number,
+    parent?: string,
+  ): ReactNode {
+    return list.map((item) => {
+      const branch = Boolean(item.children?.length);
+      const open = branch && expandedSet.has(item.id);
+      return (
+        <li key={item.id} role="none">
+          <button
+            type="button"
+            role="treeitem"
+            aria-level={level}
+            aria-selected={selected === item.id}
+            aria-expanded={branch ? open : undefined}
+            disabled={item.disabled}
+            tabIndex={
+              selected === item.id ||
+              (!selected && level === 1 && item === list[0])
+                ? 0
+                : -1
+            }
+            data-tree-node={item.id}
+            data-level={level}
+            data-parent={parent}
+            onClick={() => {
+              choose(item.id);
+              if (branch) toggle(item.id);
+            }}
+            {...sx(
+              styles.tree.node,
+              selected === item.id && styles.tree.selected,
+            )}
+          >
+            <span
+              {...sx(styles.tree.indent)}
+              style={{ width: `${(level - 1) * 16}px` }}
+            />
+            {branch ? (
+              <ChevronRightIcon
+                width={12}
+                height={12}
+                aria-hidden="true"
+                {...sx(styles.tree.chevron, open && styles.tree.open)}
+              />
+            ) : (
+              <span {...sx(styles.tree.spacer)} />
+            )}
+            {item.icon ? (
+              <span aria-hidden="true" {...sx(styles.tree.icon)}>
+                {item.icon}
+              </span>
+            ) : null}
+            <span {...sx(styles.tree.label)}>{item.label}</span>
+          </button>
+          {branch && open ? (
+            <ul role="group" {...sx(styles.tree.group)}>
+              {renderItems(item.children!, level + 1, item.id)}
+            </ul>
+          ) : null}
+        </li>
+      );
+    });
+  }
+  return (
+    <ul
+      ref={rootRef}
+      role="tree"
+      aria-label={ariaLabel}
+      onKeyDown={keyDown}
+      {...sx(styles.tree.root)}
+      data-dowel-component="tree-view"
+    >
+      {renderItems(items, 1)}
+    </ul>
+  );
+}
diff --git a/packages/dowel/src/components/tree-view/tree-view.stylex.ts b/packages/dowel/src/components/tree-view/tree-view.stylex.ts
new file mode 100644
index 0000000..90fd19f
--- /dev/null
+++ b/packages/dowel/src/components/tree-view/tree-view.stylex.ts
@@ -0,0 +1,70 @@
+import * as stylex from "@stylexjs/stylex";
+import { tokens } from "../../theme/tokens.stylex";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+export const tree = stylex.create({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1px",
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    width: "100%",
+  },
+  group: { listStyle: "none", margin: 0, padding: 0 },
+  node: {
+    alignItems: "center",
+    backgroundColor: "transparent",
+    borderRadius: tokens["--dowel-radius-sm"],
+    borderWidth: 0,
+    color: tokens["--dowel-text-secondary"],
+    display: "flex",
+    fontFamily: tokens["--dowel-font-sans"],
+    fontSize: "0.8125rem",
+    gap: "0.375rem",
+    minHeight: tokens["--dowel-control-md"],
+    outline: "none",
+    padding: "0 0.5rem",
+    textAlign: "left",
+    width: "100%",
+    ":hover": {
+      backgroundColor: tokens["--dowel-bg-hover"],
+      color: tokens["--dowel-text-primary"],
+    },
+    ":focus-visible": {
+      outlineColor: tokens["--dowel-focus-ring"],
+      outlineOffset: "-1px",
+      outlineStyle: "solid",
+      outlineWidth: "1px",
+    },
+    ":disabled": { color: tokens["--dowel-text-disabled"], opacity: 0.55 },
+  },
+  selected: {
+    backgroundColor: tokens["--dowel-bg-surface-3"],
+    color: tokens["--dowel-text-primary"],
+  },
+  indent: { flexShrink: 0 },
+  chevron: {
+    color: tokens["--dowel-text-tertiary"],
+    flexShrink: 0,
+    transitionDuration: {
+      default: tokens["--dowel-duration-fast"],
+      [REDUCED]: "0.01ms",
+    },
+    transitionProperty: "transform",
+  },
+  open: { transform: "rotate(90deg)" },
+  spacer: { display: "inline-block", width: "0.75rem" },
+  icon: {
+    alignItems: "center",
+    color: tokens["--dowel-text-tertiary"],
+    display: "inline-flex",
+    flexShrink: 0,
+  },
+  label: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+});
diff --git a/packages/dowel/src/components/tree-view/tree-view.test.tsx b/packages/dowel/src/components/tree-view/tree-view.test.tsx
new file mode 100644
index 0000000..a058bc0
--- /dev/null
+++ b/packages/dowel/src/components/tree-view/tree-view.test.tsx
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { TreeView } from "./index";
+describe("TreeView", () => {
+  it("expands branches and selects nodes", async () => {
+    render(
+      <TreeView
+        items={[
+          {
+            id: "docs",
+            label: "Docs",
+            children: [{ id: "api", label: "API" }],
+          },
+        ]}
+      />,
+    );
+    await userEvent.click(screen.getByRole("treeitem", { name: "Docs" }));
+    expect(screen.getByRole("treeitem", { name: "API" })).toBeDefined();
+    expect(
+      screen
+        .getByRole("treeitem", { name: "Docs" })
+        .getAttribute("aria-selected"),
+    ).toBe("true");
+  });
+});
diff --git a/packages/dowel/src/index.ts b/packages/dowel/src/index.ts
index d11b52f..b210199 100644
--- a/packages/dowel/src/index.ts
+++ b/packages/dowel/src/index.ts
@@ -98,3 +98,66 @@ export type {
 } from "./components/skeleton";
 export { EmptyState } from "./components/empty-state";
 export type { EmptyStateProps } from "./components/empty-state";
+export { Combobox } from "./components/combobox";
+export type { ComboboxOption, ComboboxProps } from "./components/combobox";
+export { GroupHeader, List, ListCell, ListRow } from "./components/list";
+export type {
+  GroupHeaderProps,
+  ListCellProps,
+  ListProps,
+  ListRowProps,
+} from "./components/list";
+export { Drawer } from "./components/drawer";
+export type {
+  DrawerPopupProps,
+  DrawerRootProps,
+  DrawerSide,
+} from "./components/drawer";
+export { Progress } from "./components/progress";
+export type { ProgressProps } from "./components/progress";
+export { ToastProvider, toast, toastManager } from "./components/toast";
+export type {
+  ToastOptions,
+  ToastProviderProps,
+  ToastTone,
+  ToastUpdateOptions,
+} from "./components/toast";
+export { CommandMenu } from "./components/command-menu";
+export type {
+  CommandMenuItem,
+  CommandMenuProps,
+} from "./components/command-menu";
+export { Accordion } from "./components/accordion";
+export { Collapsible } from "./components/collapsible";
+export { Breadcrumbs } from "./components/breadcrumbs";
+export type {
+  BreadcrumbItem,
+  BreadcrumbsProps,
+} from "./components/breadcrumbs";
+export { Pagination } from "./components/pagination";
+export type { PaginationProps } from "./components/pagination";
+export { ToggleGroup } from "./components/toggle-group";
+export type {
+  ToggleGroupItemProps,
+  ToggleGroupRootProps,
+} from "./components/toggle-group";
+export { Slider } from "./components/slider";
+export { TreeView } from "./components/tree-view";
+export type { TreeViewItem, TreeViewProps } from "./components/tree-view";
+export { Calendar, DatePicker } from "./components/calendar";
+export type { CalendarProps, DatePickerProps } from "./components/calendar";
+export {
+  CalendarDate,
+  getLocalTimeZone,
+  parseDate,
+  today,
+} from "@internationalized/date";
+export type { DateValue } from "@internationalized/date";
+export { ContextMenu } from "./components/context-menu";
+export type { ContextMenuTriggerProps } from "./components/context-menu";
+export { Dropzone, FileUpload } from "./components/file-upload";
+export type {
+  FileRejectReason,
+  FileUploadProps,
+  RejectedFile,
+} from "./components/file-upload";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6d219d5..d61514e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -81,12 +81,18 @@ importers:
       '@heroicons/react':
         specifier: 2.2.0
         version: 2.2.0(react@19.2.8)
+      '@internationalized/date':
+        specifier: ^3.12.3
+        version: 3.12.3
       '@stylexjs/stylex':
         specifier: 0.19.0
         version: 0.19.0
       '@tanstack/react-table':
         specifier: ^9.1.2
         version: 9.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-aria-components:
+        specifier: ^1.20.0
+        version: 1.20.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     devDependencies:
       '@stylexjs/eslint-plugin':
         specifier: 0.19.0
@@ -809,6 +815,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@internationalized/date@3.12.3':
+    resolution: {integrity: sha512-fuLX+3ZKLsxI73y8b01EG/WjHb6gE6weCqlfawPO27kBWGMh9G1yH6Csv1uU7/cac9H2GHmOMt6CjmuQ1aia4Q==}
+
+  '@internationalized/number@3.6.7':
+    resolution: {integrity: sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==}
+
+  '@internationalized/string@3.2.10':
+    resolution: {integrity: sha512-PDx6//vHSpRnHfxqMqto11zQvhsaU74O3mKv2F/0eicGZcl9NLjQmGlbHz/LsJh5tLKp4A4L7ZVTzN1/MmMTvA==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -880,6 +895,11 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
+  '@react-types/shared@3.36.1':
+    resolution: {integrity: sha512-AzsuD9OfxTOZMMvTRhlN3oHBwOmFN7tDh27LzqmHt4+uOgPhJT7ZM7/kVs/8/o0WxayMUIk3hBmCFRHv1FUoag==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   '@rolldown/binding-android-arm64@1.2.3':
     resolution: {integrity: sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1000,6 +1020,9 @@ packages:
     peerDependencies:
       unplugin: ^2.3.11
 
+  '@swc/helpers@0.5.23':
+    resolution: {integrity: sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==}
+
   '@tanstack/history@1.162.1':
     resolution: {integrity: sha512-DR9t6lfLVdrjgCwpglrR9DR7Ok8/HlXjcOE+goWXF3zyuLUO/ug7vMbSFxTqrQTtbRghJfyhmIZ0S6LhPIy44w==}
     engines: {node: '>=20.19'}
@@ -1434,6 +1457,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -1483,6 +1510,13 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1922,6 +1956,18 @@ packages:
   quansync@1.0.0:
     resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}
 
+  react-aria-components@1.20.0:
+    resolution: {integrity: sha512-BMbpIgoV9aELeBrB0Y120NgoigHb5OdcJwc+4e7uSnbTbamea6lo+gqcc4LAxzMaK3Jf+7LI1oCDE6yANsmxIQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
+  react-aria@3.51.0:
+    resolution: {integrity: sha512-AyWLw0XR38cFPwBu/ErgGaVrc5dupLEKmRlMXTGvFKOtbaGRQ2+yQJkjVhpdHhoRhU4+G+tJDFeHDTS8tK3bfQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+      react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   react-dom@19.2.8:
     resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
     peerDependencies:
@@ -1930,6 +1976,11 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-stately@3.49.0:
+    resolution: {integrity: sha512-13iNq2KzBrRAzxRc+n53hgROfIistiYY/sPtIhCw1qUB7/kmo+X1xEU2uiS5zcCIrc55AUPwoHqOIIpKWSwB9A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
+
   react@19.2.8:
     resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
@@ -2957,6 +3008,18 @@ snapshots:
   '@img/sharp-win32-x64@0.35.2':
     optional: true
 
+  '@internationalized/date@3.12.3':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
+  '@internationalized/number@3.6.7':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
+  '@internationalized/string@3.2.10':
+    dependencies:
+      '@swc/helpers': 0.5.23
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -3037,6 +3100,10 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
+  '@react-types/shared@3.36.1(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+
   '@rolldown/binding-android-arm64@1.2.3':
     optional: true
 
@@ -3128,6 +3195,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/helpers@0.5.23':
+    dependencies:
+      tslib: 2.8.1
+
   '@tanstack/history@1.162.1': {}
 
   '@tanstack/hotkeys@0.8.0':
@@ -3568,6 +3639,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -3615,6 +3690,10 @@ snapshots:
     dependencies:
       readdirp: 5.1.1
 
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
   convert-source-map@2.0.0: {}
 
   cookie-es@3.1.1: {}
@@ -3983,6 +4062,32 @@ snapshots:
 
   quansync@1.0.0: {}
 
+  react-aria-components@1.20.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@internationalized/date': 3.12.3
+      '@internationalized/string': 3.2.10
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.23
+      client-only: 0.0.1
+      react: 19.2.8
+      react-aria: 3.51.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-dom: 19.2.8(react@19.2.8)
+      react-stately: 3.49.0(react@19.2.8)
+
+  react-aria@3.51.0(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@internationalized/date': 3.12.3
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.10
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.23
+      aria-hidden: 1.2.6
+      clsx: 2.1.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-stately: 3.49.0(react@19.2.8)
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
   react-dom@19.2.8(react@19.2.8):
     dependencies:
       react: 19.2.8
@@ -3990,6 +4095,16 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-stately@3.49.0(react@19.2.8):
+    dependencies:
+      '@internationalized/date': 3.12.3
+      '@internationalized/number': 3.6.7
+      '@internationalized/string': 3.2.10
+      '@react-types/shared': 3.36.1(react@19.2.8)
+      '@swc/helpers': 0.5.23
+      react: 19.2.8
+      use-sync-external-store: 1.6.0(react@19.2.8)
+
   react@19.2.8: {}
 
   readdirp@5.1.1: {}
@@ -4163,8 +4278,7 @@ snapshots:
       - oxc-resolver
       - vue-tsc
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   typescript@5.9.3: {}