diff --git a/packages/propel/.storybook/preview.tsx b/packages/propel/.storybook/preview.tsx
index 92d1d76..9b3e4df 100644
--- a/packages/propel/.storybook/preview.tsx
+++ b/packages/propel/.storybook/preview.tsx
@@ -31,11 +31,9 @@ const withTheme: Decorator = (Story, context) => {
   const theme: Theme = THEMES.includes(candidate as Theme) ? (candidate as Theme) : TEST_THEME;
   useLayoutEffect(() => {
     const el = document.documentElement;
-    const previous = el.dataset.theme;
     el.dataset.theme = theme;
     return () => {
-      if (previous == null) delete el.dataset.theme;
-      else el.dataset.theme = previous;
+      delete el.dataset.theme;
     };
   }, [theme]);
   return <Story />;
diff --git a/packages/propel/README.md b/packages/propel/README.md
index 481f2a5..e7760c5 100644
--- a/packages/propel/README.md
+++ b/packages/propel/README.md
@@ -93,6 +93,17 @@ vp test             # run tests
   folder; static wildcard `exports` (`./components/*`, `./hooks/*`) expose them
   as `@plane/propel/components/<name>` / `hooks/<name>` automatically — no
   `exports` edits and no barrel to maintain when you add a folder.
+- **Component folders have a public boundary.** `index.tsx` only re-exports the
+  public API for that component folder. Public components and public child
+  components live in sibling kebab-case files (`button.tsx`,
+  `accordion-trigger.tsx`, `table-cell.tsx`). Do not use `Object.assign` or
+  namespace-style APIs such as `Foo.Bar`; export `FooBar` as its own component
+  instead.
+- **Keep shared implementation private and accurately named.** Shared class
+  maps, CVA variants, and helpers should live in private sibling files such as
+  `*-styles.ts`, `*-shared.tsx`, or a real `*-context.tsx` when React context is
+  involved. Do not create public child files that only re-export from a
+  monolithic parent file.
 - `vp pack` needs at least one component or hook to build (a component library
   with zero entries has nothing to compile).
 - Compose classes with [`clsx`](https://github.com/lukeed/clsx) only — **do not
diff --git a/packages/propel/package.json b/packages/propel/package.json
index 39fc172..45fc789 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -30,6 +30,14 @@
     "**/*.css"
   ],
   "exports": {
+    "./base/*": {
+      "types": "./dist/base/*/index.d.ts",
+      "import": "./dist/base/*/index.js"
+    },
+    "./ui/*": {
+      "types": "./dist/ui/*/index.d.ts",
+      "import": "./dist/ui/*/index.js"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "import": "./dist/components/*/index.js"
diff --git a/packages/propel/src/base/text-area/index.ts b/packages/propel/src/base/text-area/index.ts
new file mode 100644
index 0000000..695e7b9
--- /dev/null
+++ b/packages/propel/src/base/text-area/index.ts
@@ -0,0 +1 @@
+export { BaseTextArea, type BaseTextAreaProps } from "./text-area";
diff --git a/packages/propel/src/base/text-area/text-area.tsx b/packages/propel/src/base/text-area/text-area.tsx
new file mode 100644
index 0000000..64575ab
--- /dev/null
+++ b/packages/propel/src/base/text-area/text-area.tsx
@@ -0,0 +1,32 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import * as React from "react";
+
+type BaseFieldControlProps = React.ComponentProps<typeof BaseField.Control>;
+
+type NativeTextAreaProps = Omit<
+  React.ComponentProps<"textarea">,
+  keyof BaseFieldControlProps | "children" | "className" | "style"
+>;
+
+export type BaseTextAreaProps = BaseFieldControlProps &
+  NativeTextAreaProps & {
+    /** The default value of the textarea. Use when uncontrolled. */
+    defaultValue?: React.ComponentProps<"textarea">["defaultValue"];
+    /** The value of the textarea. Use when controlled. */
+    value?: React.ComponentProps<"textarea">["value"];
+  };
+
+/**
+ * A native textarea element that automatically works with Field. Renders a `<textarea>` element.
+ *
+ * Adapted from Base UI Input.
+ */
+export const BaseTextArea = React.forwardRef<HTMLElement, BaseTextAreaProps>(
+  function BaseTextArea(props, forwardedRef) {
+    return <BaseField.Control ref={forwardedRef} render={<textarea />} {...props} />;
+  },
+);
+
+if (process.env.NODE_ENV !== "production") {
+  BaseTextArea.displayName = "BaseTextArea";
+}
diff --git a/packages/propel/src/components/accordion/accordion-panel.tsx b/packages/propel/src/components/accordion/accordion-panel.tsx
new file mode 100644
index 0000000..3a50124
--- /dev/null
+++ b/packages/propel/src/components/accordion/accordion-panel.tsx
@@ -0,0 +1,18 @@
+import {
+  AccordionPanel as AccordionPanelRoot,
+  type AccordionPanelProps as AccordionPanelRootProps,
+} from "../../ui/accordion";
+
+export type AccordionPanelProps = AccordionPanelRootProps;
+
+/**
+ * The ready-made accordion panel: composes the atomic `AccordionPanel` and adds the inner padding
+ * wrapper so content is inset from the trigger's edges.
+ */
+export function AccordionPanel({ children, ...props }: AccordionPanelProps) {
+  return (
+    <AccordionPanelRoot {...props}>
+      <div className="px-3 pb-3">{children}</div>
+    </AccordionPanelRoot>
+  );
+}
diff --git a/packages/propel/src/components/accordion/accordion-trigger.tsx b/packages/propel/src/components/accordion/accordion-trigger.tsx
new file mode 100644
index 0000000..84853bf
--- /dev/null
+++ b/packages/propel/src/components/accordion/accordion-trigger.tsx
@@ -0,0 +1,37 @@
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  AccordionTrigger as AccordionTriggerRoot,
+  type AccordionTriggerProps as AccordionTriggerRootProps,
+} from "../../ui/accordion";
+
+export type AccordionTriggerProps = AccordionTriggerRootProps & {
+  /**
+   * Node rendered before the label (inline-start), matching the Figma header icon. Sized to the
+   * trigger's `--node-size`. Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made accordion trigger: composes the atomic `AccordionTrigger` and lays out an optional
+ * `inlineStartNode`, the label, and the chevron that rotates when the panel opens.
+ */
+export function AccordionTrigger({ inlineStartNode, children, ...props }: AccordionTriggerProps) {
+  return (
+    <AccordionTriggerRoot {...props}>
+      {inlineStartNode ? (
+        <NodeSlot aria-hidden className="text-icon-secondary">
+          {inlineStartNode}
+        </NodeSlot>
+      ) : null}
+      <span className="flex-1">{children}</span>
+      <ChevronDown
+        aria-hidden
+        className="size-3.5 shrink-0 text-icon-secondary transition-transform duration-200 group-data-panel-open:rotate-180"
+      />
+    </AccordionTriggerRoot>
+  );
+}
diff --git a/packages/propel/src/components/accordion/accordion.stories.tsx b/packages/propel/src/components/accordion/accordion.stories.tsx
index 66860d7..7b4f1c8 100644
--- a/packages/propel/src/components/accordion/accordion.stories.tsx
+++ b/packages/propel/src/components/accordion/accordion.stories.tsx
@@ -2,7 +2,13 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { CircleHelp } from "lucide-react";
 import { expect } from "storybook/test";
 
-import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./index";
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+} from "./index";
 
 // Design-review convention — when to add a pseudo-states "States" story:
 //   * Only components that style interaction via CSS `hover:` / `active:` /
@@ -19,7 +25,7 @@ import { Accordion, AccordionItem, AccordionPanel, AccordionTrigger } from "./in
 const meta = {
   title: "Components/Accordion",
   component: Accordion,
-  subcomponents: { AccordionItem, AccordionTrigger, AccordionPanel },
+  subcomponents: { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel },
   // Give the centered canvas a sensible width so the full-width accordion has room.
   decorators: [
     (Story) => (
@@ -63,7 +69,9 @@ export const Default: Story = {
     <Accordion {...args} defaultValue={["what"]}>
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
-          <AccordionTrigger>{item.label}</AccordionTrigger>
+          <AccordionHeader>
+            <AccordionTrigger>{item.label}</AccordionTrigger>
+          </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
       ))}
@@ -71,15 +79,17 @@ export const Default: Story = {
   ),
 };
 
-/** Each trigger can carry a `leadingIcon`, matching the Figma header icon. */
+/** Each trigger can carry a `inlineStartNode`, matching the Figma header icon. */
 export const WithIcon: Story = {
   render: (args) => (
     <Accordion {...args} defaultValue={["what"]}>
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
-          <AccordionTrigger leadingIcon={<CircleHelp aria-hidden className="size-4" />}>
-            {item.label}
-          </AccordionTrigger>
+          <AccordionHeader>
+            <AccordionTrigger inlineStartNode={<CircleHelp aria-hidden className="size-4" />}>
+              {item.label}
+            </AccordionTrigger>
+          </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
       ))}
@@ -117,7 +127,9 @@ export const States: Story = {
         ] as const
       ).map(([label, id]) => (
         <AccordionItem key={label} value={id}>
-          <AccordionTrigger id={id}>{label} — What is Plane?</AccordionTrigger>
+          <AccordionHeader>
+            <AccordionTrigger id={id}>{label} — What is Plane?</AccordionTrigger>
+          </AccordionHeader>
           <AccordionPanel>Plane is an open-source project management tool.</AccordionPanel>
         </AccordionItem>
       ))}
@@ -133,7 +145,9 @@ export const MultipleItems: Story = {
     <Accordion {...args} defaultValue={["what", "pricing"]}>
       {ITEMS.map((item) => (
         <AccordionItem key={item.value} value={item.value}>
-          <AccordionTrigger>{item.label}</AccordionTrigger>
+          <AccordionHeader>
+            <AccordionTrigger>{item.label}</AccordionTrigger>
+          </AccordionHeader>
           <AccordionPanel>{item.body}</AccordionPanel>
         </AccordionItem>
       ))}
@@ -150,7 +164,9 @@ export const Interaction: Story = {
   render: () => (
     <Accordion>
       <AccordionItem value="a">
-        <AccordionTrigger>Section A</AccordionTrigger>
+        <AccordionHeader>
+          <AccordionTrigger>Section A</AccordionTrigger>
+        </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>
     </Accordion>
@@ -187,7 +203,9 @@ export const KeyboardToggle: Story = {
   render: () => (
     <Accordion>
       <AccordionItem value="a">
-        <AccordionTrigger>Section A</AccordionTrigger>
+        <AccordionHeader>
+          <AccordionTrigger>Section A</AccordionTrigger>
+        </AccordionHeader>
         <AccordionPanel>Panel A content</AccordionPanel>
       </AccordionItem>
     </Accordion>
diff --git a/packages/propel/src/components/accordion/index.tsx b/packages/propel/src/components/accordion/index.tsx
index e6ceebf..1c2d530 100644
--- a/packages/propel/src/components/accordion/index.tsx
+++ b/packages/propel/src/components/accordion/index.tsx
@@ -1,105 +1,11 @@
-import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
-import { cx } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-import type * as React from "react";
-
-// Accordion is a structural component: the Figma "Accordion" spec only defines the
-// collapsed/hover/expanded states (which Base UI drives as state, not props) — so
-// there are no styling axes (variant/tone/magnitude) to expose. The header row uses
-// `border/subtle` divider, `spacing/3` padding, `spacing/2` gap, `text/14`
-// medium `text/primary` label, a `background/layer/transparent` surface that goes to
-// `background/layer/transparent-hover` on hover, and an `icon/placeholder` chevron.
-
-export type AccordionProps = Omit<
-  React.ComponentProps<typeof BaseAccordion.Root>,
-  "className" | "render" | "style"
->;
-
-/**
- * Groups a set of `AccordionItem`s. Single-open by default; pass `multiple` to allow several panels
- * open at once. Use `defaultValue` (uncontrolled) or `value` + `onValueChange` (controlled) to
- * drive which items are expanded.
- */
-export function Accordion(props: AccordionProps) {
-  return <BaseAccordion.Root className="flex w-full flex-col" {...props} />;
-}
-
-export type AccordionItemProps = Omit<
-  React.ComponentProps<typeof BaseAccordion.Item>,
-  "className" | "render" | "style"
->;
-
-/** A single collapsible section: pairs an `AccordionTrigger` with an `AccordionPanel`. */
-export function AccordionItem(props: AccordionItemProps) {
-  return <BaseAccordion.Item className="border-b border-subtle" {...props} />;
-}
-
-export type AccordionTriggerProps = Omit<
-  React.ComponentProps<typeof BaseAccordion.Trigger>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Optional icon shown before the label, matching the Figma header icon. Named `leadingIcon` (not
-   * `icon`) to match Button/Input, so a `trailingIcon` can be added later without a breaking
-   * rename.
-   */
-  leadingIcon?: React.ReactNode;
-};
-
-/**
- * The clickable header that opens and closes its panel. Renders an optional `leadingIcon`, the
- * label, and a chevron that rotates when the panel is open. Base UI sets `aria-expanded` and
- * `aria-controls` for you.
- */
-export function AccordionTrigger({ leadingIcon, children, ...props }: AccordionTriggerProps) {
-  return (
-    <BaseAccordion.Header className="flex">
-      <BaseAccordion.Trigger
-        className={cx(
-          "group flex flex-1 items-center gap-2 p-3 text-start",
-          "text-14 font-medium text-primary",
-          "bg-layer-transparent hover:bg-layer-transparent-hover",
-          "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
-          "disabled:cursor-not-allowed disabled:opacity-60",
-        )}
-        {...props}
-      >
-        {leadingIcon ? (
-          <span className="flex size-4 shrink-0 items-center justify-center text-icon-secondary">
-            {leadingIcon}
-          </span>
-        ) : null}
-        <span className="flex-1">{children}</span>
-        <ChevronDown
-          aria-hidden
-          className="size-3.5 shrink-0 text-icon-secondary transition-transform duration-200 group-data-panel-open:rotate-180"
-        />
-      </BaseAccordion.Trigger>
-    </BaseAccordion.Header>
-  );
-}
-
-export type AccordionPanelProps = Omit<
-  React.ComponentProps<typeof BaseAccordion.Panel>,
-  "className" | "render" | "style"
->;
-
-/**
- * The collapsible content region for an item. Animates open/closed using Base UI's
- * `--accordion-panel-height` so the height transitions smoothly.
- */
-export function AccordionPanel({ children, ...props }: AccordionPanelProps) {
-  return (
-    <BaseAccordion.Panel
-      className={cx(
-        "h-(--accordion-panel-height) overflow-hidden",
-        "text-14 text-secondary",
-        "transition-[height] duration-200 ease-out",
-        "data-ending-style:h-0 data-starting-style:h-0",
-      )}
-      {...props}
-    >
-      <div className="px-3 pb-3">{children}</div>
-    </BaseAccordion.Panel>
-  );
-}
+export { AccordionPanel, type AccordionPanelProps } from "./accordion-panel";
+export { AccordionTrigger, type AccordionTriggerProps } from "./accordion-trigger";
+// Re-export the atomic structural parts so a full accordion is importable from this convenience.
+export {
+  Accordion,
+  AccordionHeader,
+  type AccordionHeaderProps,
+  AccordionItem,
+  type AccordionItemProps,
+  type AccordionProps,
+} from "../../ui/accordion";
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx b/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx
new file mode 100644
index 0000000..3ddc63d
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog-content.tsx
@@ -0,0 +1,24 @@
+import {
+  AlertDialogBackdrop,
+  AlertDialogPopup,
+  type AlertDialogPopupProps,
+  AlertDialogPortal,
+  AlertDialogViewport,
+} from "../../ui/alert-dialog";
+
+export type AlertDialogContentProps = AlertDialogPopupProps;
+
+/**
+ * Convenience that composes the alert dialog overlay boilerplate — portal, backdrop, centering
+ * viewport, and the centered popup — so a consumer only writes the trigger and the popup body.
+ */
+export function AlertDialogContent({ children, ...props }: AlertDialogContentProps) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport>
+        <AlertDialogPopup {...props}>{children}</AlertDialogPopup>
+      </AlertDialogViewport>
+    </AlertDialogPortal>
+  );
+}
diff --git a/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
new file mode 100644
index 0000000..d559a2e
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/alert-dialog.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./index";
+
+// Components-tier story: uses the ready-made `AlertDialogContent`, which composes
+// the portal/backdrop/centering-viewport/popup so a consumer only writes the
+// trigger and the popup body.
+const neutralButton =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+const dangerButton =
+  "inline-flex h-8 items-center rounded-md bg-danger-primary px-3 text-13 text-on-color outline-none";
+
+const meta = {
+  title: "Components/AlertDialog",
+  component: AlertDialog,
+  subcomponents: {
+    AlertDialogTrigger,
+    AlertDialogContent,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogClose,
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A destructive confirmation: it is modal and only closes through an explicit Cancel/Delete. */
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger render={<button type="button" className={dangerButton} />}>
+        Delete project
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <div className="flex w-80 flex-col gap-2">
+          <AlertDialogTitle>Delete project?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This permanently removes the project and all of its work items. This action can&apos;t
+            be undone.
+          </AlertDialogDescription>
+          <div className="mt-2 flex justify-end gap-2">
+            <AlertDialogClose render={<button type="button" className={neutralButton} />}>
+              Cancel
+            </AlertDialogClose>
+            <AlertDialogClose render={<button type="button" className={dangerButton} />}>
+              Delete
+            </AlertDialogClose>
+          </div>
+        </div>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  play: async ({ canvas, step }) => {
+    await step("open the alert dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Delete project" }));
+      const dialog = await within(document.body).findByRole("alertdialog");
+      await expect(within(dialog).getByText(/permanently removes/)).toBeInTheDocument();
+    });
+    await step("an outside click does NOT dismiss (always modal)", async () => {
+      await userEvent.click(document.body);
+      await expect(within(document.body).getByRole("alertdialog")).toBeInTheDocument();
+    });
+    await step("Cancel closes it", async () => {
+      const dialog = within(document.body).getByRole("alertdialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
diff --git a/packages/propel/src/components/alert-dialog/index.tsx b/packages/propel/src/components/alert-dialog/index.tsx
new file mode 100644
index 0000000..4cfb2aa
--- /dev/null
+++ b/packages/propel/src/components/alert-dialog/index.tsx
@@ -0,0 +1,14 @@
+export { AlertDialogContent, type AlertDialogContentProps } from "./alert-dialog-content";
+// Re-export the atomic parts so a full alert dialog can be assembled from one entry.
+export {
+  AlertDialog,
+  type AlertDialogProps,
+  AlertDialogClose,
+  type AlertDialogCloseProps,
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+  AlertDialogTitle,
+  type AlertDialogTitleProps,
+  AlertDialogTrigger,
+  type AlertDialogTriggerProps,
+} from "../../ui/alert-dialog";
diff --git a/packages/propel/src/components/autocomplete/autocomplete-content.tsx b/packages/propel/src/components/autocomplete/autocomplete-content.tsx
new file mode 100644
index 0000000..7c1a31c
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete-content.tsx
@@ -0,0 +1,35 @@
+import {
+  AutocompletePopup,
+  type AutocompletePopupProps,
+} from "../../ui/autocomplete/autocomplete-popup";
+import { AutocompletePortal } from "../../ui/autocomplete/autocomplete-portal";
+import {
+  AutocompletePositioner,
+  type AutocompletePositionerProps,
+} from "../../ui/autocomplete/autocomplete-positioner";
+
+export type AutocompleteContentProps = AutocompletePopupProps & {
+  /** Which side of the input the list opens toward. @default "bottom" */
+  side?: AutocompletePositionerProps["side"];
+  /** Distance in px between the input and the list. @default 4 */
+  sideOffset?: AutocompletePositionerProps["sideOffset"];
+  /** Alignment of the list relative to the input along `side`. @default "start" */
+  align?: AutocompletePositionerProps["align"];
+};
+
+/** The autocomplete list surface: portal + positioner + popup with Propel overlay styling. */
+export function AutocompleteContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: AutocompleteContentProps) {
+  return (
+    <AutocompletePortal>
+      <AutocompletePositioner side={side} sideOffset={sideOffset} align={align}>
+        <AutocompletePopup {...props}>{children}</AutocompletePopup>
+      </AutocompletePositioner>
+    </AutocompletePortal>
+  );
+}
diff --git a/packages/propel/src/components/autocomplete/autocomplete.stories.tsx b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
new file mode 100644
index 0000000..bd20cbe
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/autocomplete.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldDescription, FieldError, FieldLabel } from "../field/index";
+import {
+  Autocomplete,
+  AutocompleteClear,
+  AutocompleteContent,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteInputGroup,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompleteTrigger,
+} from "./index";
+
+const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
+
+// Components-tier story: the ready-made `AutocompleteContent` collapses the
+// portal/positioner/popup boilerplate into one element. The UI-tier `Autocomplete`
+// story assembles those raw parts by hand.
+const meta = {
+  title: "Components/Autocomplete",
+  component: Autocomplete,
+  subcomponents: {
+    AutocompleteInputGroup,
+    AutocompleteInput,
+    AutocompleteClear,
+    AutocompleteTrigger,
+    AutocompleteContent,
+    AutocompleteList,
+    AutocompleteItem,
+    AutocompleteEmpty,
+  },
+} satisfies Meta<typeof Autocomplete>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Autocomplete using the ready-made `AutocompleteContent` surface for free-form searchable input. */
+export const Default: Story = {
+  args: { items: IMAGES, mode: "both", required: true },
+  render: (args) => (
+    <Field name="containerImage">
+      <Autocomplete {...args}>
+        <FieldLabel magnitude="md">Container image</FieldLabel>
+        <AutocompleteInputGroup>
+          <AutocompleteInput placeholder="e.g. docker.io/library/node:latest" />
+          <AutocompleteClear />
+          <AutocompleteTrigger />
+        </AutocompleteInputGroup>
+        <FieldDescription magnitude="md">Enter a registry URL with optional tags.</FieldDescription>
+        <AutocompleteContent>
+          <AutocompleteEmpty>No matches</AutocompleteEmpty>
+          <AutocompleteList>
+            {IMAGES.map((image) => (
+              <AutocompleteItem key={image} value={image}>
+                {image}
+              </AutocompleteItem>
+            ))}
+          </AutocompleteList>
+        </AutocompleteContent>
+        <FieldError magnitude="md" />
+      </Autocomplete>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "node");
+    await expect(within(document.body).getByText("node:22-slim")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/autocomplete/index.tsx b/packages/propel/src/components/autocomplete/index.tsx
new file mode 100644
index 0000000..5f7d8af
--- /dev/null
+++ b/packages/propel/src/components/autocomplete/index.tsx
@@ -0,0 +1,19 @@
+export { AutocompleteContent, type AutocompleteContentProps } from "./autocomplete-content";
+// Re-export the atomic autocomplete parts so a full autocomplete can be assembled from one entry.
+export {
+  Autocomplete,
+  type AutocompleteProps,
+  AutocompleteClear,
+  type AutocompleteClearProps,
+  AutocompleteEmpty,
+  type AutocompleteEmptyProps,
+  AutocompleteInput,
+  type AutocompleteInputProps,
+  AutocompleteInputGroup,
+  type AutocompleteInputGroupProps,
+  AutocompleteItem,
+  type AutocompleteItemProps,
+  AutocompleteList,
+  AutocompleteTrigger,
+  type AutocompleteTriggerProps,
+} from "../../ui/autocomplete";
diff --git a/packages/propel/src/components/avatar-group/index.tsx b/packages/propel/src/components/avatar-group/index.tsx
index ee12ed4..15a5749 100644
--- a/packages/propel/src/components/avatar-group/index.tsx
+++ b/packages/propel/src/components/avatar-group/index.tsx
@@ -1,33 +1,3 @@
-import type * as React from "react";
-
-import { AvatarGroupContext, type AvatarMagnitude } from "../avatar";
-
-// Figma's "Avatar Groups" component only defines three sizes (Small/Base/Large =
-// 16/20/24px), so groups are limited to the matching magnitudes — narrower than a
-// standalone Avatar's full scale.
-export type AvatarGroupMagnitude = Extract<AvatarMagnitude, "2xs" | "xs" | "sm">;
-
-export type AvatarGroupProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
-  /** Shared size for every avatar in the group; an avatar's own `magnitude` overrides it. */
-  magnitude: AvatarGroupMagnitude;
-};
-
-// Overlapping stack of avatars — mirrors the Figma "Avatar groups" -6px overlap.
-// `-space-x-1.5` handles the overlap (negative margin between siblings) and each
-// `Avatar`'s own `border-subtle` is the single ring that separates them, matching
-// Figma. `magnitude` flows through context so the whole group stays one size.
-// None of these reach into the children directly:
-//
-//   <AvatarGroup magnitude="sm">
-//     <Avatar src={a} />
-//     <Avatar src={b} />
-//   </AvatarGroup>
-export function AvatarGroup({ children, magnitude, ...props }: AvatarGroupProps) {
-  return (
-    <AvatarGroupContext.Provider value={magnitude}>
-      <div className="inline-flex items-center -space-x-1.5" {...props}>
-        {children}
-      </div>
-    </AvatarGroupContext.Provider>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/avatar-group` only
+// when you need the lower-level parts.
+export * from "../../ui/avatar-group";
diff --git a/packages/propel/src/components/avatar/avatar.stories.tsx b/packages/propel/src/components/avatar/avatar.stories.tsx
index dcfbca1..56e7e34 100644
--- a/packages/propel/src/components/avatar/avatar.stories.tsx
+++ b/packages/propel/src/components/avatar/avatar.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
-import { AVATAR_TONES, Avatar, type AvatarMagnitude } from "./index";
+import { AVATAR_TONES, type AvatarMagnitude, Avatar } from "./index";
 
 const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
 
diff --git a/packages/propel/src/components/avatar/avatar.tsx b/packages/propel/src/components/avatar/avatar.tsx
new file mode 100644
index 0000000..ab3f8bc
--- /dev/null
+++ b/packages/propel/src/components/avatar/avatar.tsx
@@ -0,0 +1,65 @@
+import { User } from "lucide-react";
+import * as React from "react";
+
+import {
+  Avatar as AvatarRoot,
+  AvatarFallback,
+  AvatarGroupContext,
+  AvatarImage,
+  type AvatarMagnitude,
+  type AvatarProps as AvatarRootProps,
+  type AvatarTone,
+  getAvatarTone,
+} from "../../ui/avatar";
+
+// Person-icon (anonymous) sizes per magnitude, straight from Figma's "icon" values —
+// an explicit px size at each step, not a fixed fraction of the avatar.
+const iconSizeByMagnitude: Record<AvatarMagnitude, string> = {
+  "2xs": "size-3.5", // 14px
+  xs: "size-3.5", // 14px
+  sm: "size-4", // 16px
+  md: "size-5", // 20px
+  lg: "size-6", // 24px
+  xl: "size-6", // 24px
+  "2xl": "size-8", // 32px
+  "3xl": "size-8", // 32px
+};
+
+export type AvatarProps = AvatarRootProps & {
+  /** Image URL. When omitted, or while it is loading/failing, the fallback shows. */
+  src?: string;
+  /** Accessible name for the avatar (the person it represents). */
+  alt?: string;
+  /** Initials shown when there is no image. When omitted too, a person icon shows. */
+  fallback?: React.ReactNode;
+  /** Initials background color. Defaults to a stable color derived from `alt`. */
+  tone?: AvatarTone;
+};
+
+/**
+ * The ready-made avatar: an image that falls back to initials (or an anonymous person icon),
+ * composed from the `ui/avatar` parts (`Avatar` root + `AvatarImage` + `AvatarFallback`). Pass
+ * `src` for the photo, `fallback` for initials, and optionally `tone` (otherwise derived from
+ * `alt`).
+ */
+export function Avatar({ magnitude, src, alt, fallback, tone, ...props }: AvatarProps) {
+  // Base UI shows the fallback whenever the image is absent, loading, or failed, so the
+  // colored-initials styling lives on the Fallback element itself. Initials = a label tone
+  // color; the anonymous person icon = the neutral `none` tone.
+  const hasInitials = fallback != null;
+  const groupMagnitude = React.useContext(AvatarGroupContext);
+  const effectiveMagnitude = magnitude ?? groupMagnitude ?? "md";
+  // The tone is auto-derived from the name unless explicitly set, so each person gets a
+  // stable color without the caller having to choose one.
+  const resolvedTone = tone ?? getAvatarTone(alt ?? "");
+  return (
+    // `role="img"` + `aria-label` give the avatar one accessible name in every state
+    // (image / initials / icon); the inner image is decorative.
+    <AvatarRoot role="img" aria-label={alt} magnitude={magnitude} {...props}>
+      {src ? <AvatarImage src={src} alt="" /> : null}
+      <AvatarFallback tone={hasInitials ? resolvedTone : "none"}>
+        {fallback ?? <User aria-hidden className={iconSizeByMagnitude[effectiveMagnitude]} />}
+      </AvatarFallback>
+    </AvatarRoot>
+  );
+}
diff --git a/packages/propel/src/components/avatar/index.tsx b/packages/propel/src/components/avatar/index.tsx
index f423036..138a031 100644
--- a/packages/propel/src/components/avatar/index.tsx
+++ b/packages/propel/src/components/avatar/index.tsx
@@ -1,135 +1,4 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { User } from "lucide-react";
-import * as React from "react";
-
-// Magnitudes follow the Figma "Avatar" component scale (px): 2xs 16 → 3xl 64.
-// Border is 1px (`border-sm`) up to 32px and 2px (`border-lg`) from 40px up.
-const avatarVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center overflow-clip rounded-full border-subtle",
-  {
-    variants: {
-      magnitude: {
-        "2xs": "size-4 border-sm text-caption-2xs-regular",
-        xs: "size-5 border-sm text-11",
-        sm: "size-6 border-sm text-12",
-        md: "size-7 border-sm text-13",
-        lg: "size-8 border-sm text-16",
-        xl: "size-10 border-lg text-18",
-        "2xl": "size-14 border-lg text-24",
-        "3xl": "size-16 border-lg text-28",
-      },
-    },
-  },
-);
-
-export type AvatarMagnitude = NonNullable<VariantProps<typeof avatarVariants>["magnitude"]>;
-
-/**
- * Set by `AvatarGroup` to give every avatar inside it the same `magnitude`, so a group stays
- * consistently sized. An avatar's own `magnitude` prop takes precedence.
- */
-export const AvatarGroupContext = React.createContext<AvatarMagnitude | undefined>(undefined);
-
-// The initials tone palette the designer defined for avatars (Figma label colors).
-export const AVATAR_TONES = ["orange", "indigo", "emerald", "crimson", "pink", "purple"] as const;
-export type AvatarTone = (typeof AVATAR_TONES)[number];
-
-// Initials background per tone. The label colors are wired into `@theme inline`,
-// so these are plain utilities. Exported so WorkspaceAvatar shares the same palette.
-export const initialsToneClass: Record<AvatarTone, string> = {
-  orange: "bg-label-orange-bg-strong",
-  indigo: "bg-label-indigo-bg-strong",
-  emerald: "bg-label-emerald-bg-strong",
-  crimson: "bg-label-crimson-bg-strong",
-  pink: "bg-label-pink-bg-strong",
-  purple: "bg-label-purple-bg-strong",
-};
-
-/**
- * Deterministically pick a tone from a seed (e.g. a name or user id) so the same person always gets
- * the same color — the "system picks it" behavior. Used as the default when `tone` is not set; pass
- * `tone` to override.
- */
-export function getAvatarTone(seed: string): AvatarTone {
-  let hash = 0;
-  for (let i = 0; i < seed.length; i++) {
-    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
-  }
-  return AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length];
-}
-
-// Person-icon (anonymous) sizes per magnitude, straight from Figma's "icon"
-// values — an explicit px size at each step, not a fixed fraction of the avatar.
-const iconSizeByMagnitude: Record<AvatarMagnitude, string> = {
-  "2xs": "size-3.5", // 14px
-  xs: "size-3.5", // 14px
-  sm: "size-4", // 16px
-  md: "size-5", // 20px
-  lg: "size-6", // 24px
-  xl: "size-6", // 24px
-  "2xl": "size-8", // 32px
-  "3xl": "size-8", // 32px
-};
-
-export type AvatarProps = Omit<
-  React.ComponentProps<typeof BaseAvatar.Root>,
-  "className" | "render" | "style"
-> & {
-  /** Image URL. When omitted, or while it is loading/failing, the fallback shows. */
-  src?: string;
-  /** Accessible name for the avatar (the person it represents). */
-  alt?: string;
-  /** Initials shown when there is no image. When omitted too, a person icon shows. */
-  fallback?: React.ReactNode;
-  /** Initials background color. Defaults to a stable color derived from `alt`. */
-  tone?: AvatarTone;
-  /**
-   * Avatar size. Optional because an `Avatar` inside an `AvatarGroup` inherits the group's
-   * magnitude; standalone it falls back to `md`.
-   */
-  magnitude?: AvatarMagnitude;
-};
-
-export function Avatar({ magnitude, src, alt, fallback, tone, ...props }: AvatarProps) {
-  // Base UI shows the fallback whenever the image is absent, loading, or failed,
-  // so the colored-initials styling lives on the Fallback element itself — keying
-  // it off `src` would miss the load/error case. Initials = a label tone color +
-  // white text; the person icon = the neutral layer + a muted placeholder icon.
-  const hasInitials = fallback != null;
-  // An explicit `magnitude` wins; otherwise inherit the group's (if inside one); a
-  // standalone avatar with neither falls back to `md` so it always has a size.
-  const groupMagnitude = React.useContext(AvatarGroupContext);
-  const effectiveMagnitude = magnitude ?? groupMagnitude ?? "md";
-  // The tone is auto-derived from the name unless explicitly set, so each person
-  // gets a stable color without the caller having to choose one.
-  const resolvedTone = tone ?? getAvatarTone(alt ?? "");
-  return (
-    <BaseAvatar.Root
-      // `role="img"` + `aria-label` give the avatar one accessible name in every
-      // state (image / initials / icon); the inner image is decorative so there's
-      // exactly one named image. Consumers can override via spread props.
-      role="img"
-      aria-label={alt}
-      // The `border-subtle` from `avatarVariants` is the avatar's only border. Inside
-      // an AvatarGroup that same border separates overlapping siblings, matching
-      // Figma's single `border/subtle` ring — there is no extra outer ring.
-      className={cx(avatarVariants({ magnitude: effectiveMagnitude }), "bg-layer-1")}
-      {...props}
-    >
-      {src ? <BaseAvatar.Image src={src} alt="" className="size-full object-cover" /> : null}
-      <BaseAvatar.Fallback
-        className={cx(
-          "flex size-full items-center justify-center leading-none",
-          // Initials: tone label color + white text. Icon (anonymous): neutral
-          // layer + the muted `placeholder` icon color (Figma `icon/placeholder`).
-          hasInitials
-            ? `${initialsToneClass[resolvedTone]} text-on-color`
-            : "bg-layer-1 text-icon-placeholder",
-        )}
-      >
-        {fallback ?? <User aria-hidden className={iconSizeByMagnitude[effectiveMagnitude]} />}
-      </BaseAvatar.Fallback>
-    </BaseAvatar.Root>
-  );
-}
+export { Avatar, type AvatarProps } from "./avatar";
+// Re-export the avatar tone palette + magnitude type so the components-tier story (and
+// consumers) can reach them without dropping to `ui/avatar`.
+export { AVATAR_TONES, type AvatarMagnitude, type AvatarTone } from "../../ui/avatar";
diff --git a/packages/propel/src/components/badge/badge.stories.tsx b/packages/propel/src/components/badge/badge.stories.tsx
index 2d42e6a..4a1d90d 100644
--- a/packages/propel/src/components/badge/badge.stories.tsx
+++ b/packages/propel/src/components/badge/badge.stories.tsx
@@ -21,19 +21,12 @@ const TONES: BadgeTone[] = [
 
 const MAGNITUDES: BadgeMagnitude[] = ["sm", "md", "lg"];
 
-// Design-review convention for every propel component:
-//   1. `parameters.design` links the story to its Figma frame, so the Storybook
-//      "Design" panel (@storybook/addon-designs) shows code + Figma side by side.
-//   2. Components that style interaction via CSS `hover:`/`active:`/`focus-visible:`
-//      utilities get a `States` story using storybook-addon-pseudo-states to force
-//      those pseudo-classes side by side (see e.g. Accordion). Badge is static — it
-//      has no interaction-state styling — so it gets NO pseudo-states story; its
-//      variation is fully covered by Tones + Magnitudes.
+// Badge is static — no interaction-state styling — so it gets no pseudo-states story;
+// its variation is fully covered by Tones + Magnitudes.
 const meta = {
   title: "Components/Badge",
   component: Badge,
-  // Give the `leadingIcon` ReactNode prop a usable icon picker in the Controls panel.
-  argTypes: { leadingIcon: iconControl },
+  argTypes: { inlineStartNode: iconControl },
   args: {
     children: "Badge",
     tone: "neutral",
@@ -54,9 +47,6 @@ export const Default: Story = {};
 
 /** Every color/intent the badge supports, side by side. */
 export const Tones: Story = {
-  // The grid iterates `tone` and labels each swatch with the tone name, so disable just
-  // those two controls; `magnitude` and `leadingIcon` stay live and update every swatch
-  // at once.
   argTypes: { tone: { control: false }, children: { control: false } },
   render: (args) => (
     <div className="flex flex-wrap items-center gap-3">
@@ -71,7 +61,6 @@ export const Tones: Story = {
 
 /** The three sizes (Figma S / Base / Large). */
 export const Magnitudes: Story = {
-  // Iterates `magnitude` (and labels with it); `tone` and `leadingIcon` stay live.
   argTypes: { magnitude: { control: false }, children: { control: false } },
   render: (args) => (
     <div className="flex items-center gap-3">
@@ -84,7 +73,7 @@ export const Magnitudes: Story = {
   ),
 };
 
-/** Badges with an optional leading icon, which is sized to the magnitude and tinted to the tone. */
+/** Badges with an optional leading icon, sized to the magnitude and tinted to the tone. */
 export const WithIcon: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
@@ -95,7 +84,7 @@ export const WithIcon: Story = {
           {...args}
           tone="success"
           magnitude={magnitude}
-          leadingIcon={<Check />}
+          inlineStartNode={<Check />}
         >
           Done
         </Badge>
@@ -104,14 +93,9 @@ export const WithIcon: Story = {
   ),
 };
 
-// The Figma "Plan Badges" frame defines a paid/free treatment for plan and
-// upgrade affordances. Its two fills (Figma tokens `plans/brand/*` and
-// `plans/neutral/*`) already exist on Badge's `tone` axis, so a plan badge is
-// just a tone choice -- no new component or axis is needed:
-//   paid -> `brand`  (subtle brand-accent fill + brand text, the "upgrade" accent)
-//   free -> `grey`   (neutral grey fill + grey text)
-// Both follow propel semantic tokens, so dark mode tracks automatically. The
-// magnitudes (sm/md/lg) and radius/padding match the standard Badge steps.
+// The Figma "Plan Badges" frame's two fills (`plans/brand/*`, `plans/neutral/*`) already
+// exist on Badge's `tone` axis, so a plan badge is just a tone choice:
+//   paid -> `brand`  free -> `grey`
 const PLAN_TONES = { paid: "brand", free: "grey" } as const satisfies Record<
   "paid" | "free",
   BadgeTone
diff --git a/packages/propel/src/components/badge/index.tsx b/packages/propel/src/components/badge/index.tsx
index 510cb6f..c5312d0 100644
--- a/packages/propel/src/components/badge/index.tsx
+++ b/packages/propel/src/components/badge/index.tsx
@@ -1,80 +1,3 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-// Magnitudes follow the Figma "Badge" Size axis: S → Base → Large. Mapped onto the
-// t-shirt scale by their label text size (S 12px, Base 13px, Large 14px), consistent
-// with how Avatar names its steps. Height/padding/radius track Figma per step.
-const badgeVariants = cva(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 leading-none font-medium whitespace-nowrap",
-  {
-    variants: {
-      magnitude: {
-        // S: 18px tall, 4px x-padding, 4px radius (radius/sm), text/12.
-        sm: "h-[18px] rounded-sm px-1 text-12",
-        // Base: 20px tall, 6px x-padding, 6px radius (radius/md), text/13.
-        md: "h-5 rounded-md px-1.5 text-13",
-        // Large: 24px tall, 8px x-padding, 6px radius (radius/md), text/14.
-        lg: "h-6 rounded-md px-2 text-14",
-      },
-      // The Color axis. Label-hue tones map to the `bg-label-*`/`text-label-*`
-      // utilities; semantic tones (brand/info/success/warning/danger) map to the
-      // matching subtle background + primary text tokens — no arbitrary hex.
-      tone: {
-        neutral: "bg-layer-3 text-label-grey-text",
-        grey: "bg-label-grey-bg text-label-grey-text",
-        brand: "bg-accent-subtle text-accent-primary",
-        info: "bg-info-subtle text-info-primary",
-        indigo: "bg-label-indigo-bg text-label-indigo-text",
-        success: "bg-success-subtle text-success-primary",
-        emerald: "bg-label-emerald-bg text-label-emerald-text",
-        warning: "bg-warning-subtle text-warning-primary",
-        yellow: "bg-label-yellow-bg text-label-yellow-text",
-        danger: "bg-danger-subtle text-danger-primary",
-        crimson: "bg-label-crimson-bg text-label-crimson-text",
-        orange: "bg-label-orange-bg text-label-orange-text",
-      },
-    },
-  },
-);
-
-export type BadgeMagnitude = NonNullable<VariantProps<typeof badgeVariants>["magnitude"]>;
-export type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>["tone"]>;
-
-// Leading-icon box size per magnitude, from Figma's icon values: 14px for S/Base,
-// 16px for Large. The icon inherits the tone's text color via `currentColor`.
-const iconSizeByMagnitude: Record<BadgeMagnitude, string> = {
-  sm: "size-3.5", // 14px
-  md: "size-3.5", // 14px
-  lg: "size-4", // 16px
-};
-
-export type BadgeProps = Omit<React.ComponentProps<"span">, "className" | "style"> & {
-  /** The badge label — text, a count, or any inline content. */
-  children?: React.ReactNode;
-  /** Color/intent of the badge. */
-  tone: BadgeTone;
-  /** Size of the badge. */
-  magnitude: BadgeMagnitude;
-  /**
-   * Optional leading icon (e.g. a lucide icon), sized to the magnitude and tinted to the tone.
-   * Named `leadingIcon` (not `icon`) to match Button/Input and leave room for a future
-   * `trailingIcon`.
-   */
-  leadingIcon?: React.ReactNode;
-};
-
-export function Badge({ children, tone, magnitude, leadingIcon, ...props }: BadgeProps) {
-  return (
-    <span className={badgeVariants({ tone, magnitude })} {...props}>
-      {leadingIcon ? (
-        <span
-          aria-hidden
-          className={cx("inline-flex shrink-0 [&>svg]:size-full", iconSizeByMagnitude[magnitude])}
-        >
-          {leadingIcon}
-        </span>
-      ) : null}
-      {children}
-    </span>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/badge` only
+// when you need the lower-level parts.
+export * from "../../ui/badge";
diff --git a/packages/propel/src/components/banner/banner.stories.tsx b/packages/propel/src/components/banner/banner.stories.tsx
index 73e5119..ddff81a 100644
--- a/packages/propel/src/components/banner/banner.stories.tsx
+++ b/packages/propel/src/components/banner/banner.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info } from "lucide-react";
 import { expect, fn } from "storybook/test";
 
 import { iconControl } from "../../storybook/icon-control";
@@ -10,8 +11,7 @@ const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
 const meta = {
   title: "Components/Banner",
   component: Banner,
-  // Icon picker control for the leading icon (None keeps the default tone icon).
-  argTypes: { leadingIcon: iconControl },
+  argTypes: { inlineStartNode: iconControl },
   args: {
     title: "There is something that needs your attention",
     variant: "page",
@@ -32,11 +32,9 @@ export const Default: Story = {};
 
 /** Every intent (`tone`) side by side — the soft surface + foreground color per meaning. */
 export const Tones: Story = {
-  // Iterates `tone` (and pins `variant` to inline for the showcase), so disable those
-  // controls; the rest stay live and update every banner at once.
   argTypes: { tone: { control: false }, variant: { control: false } },
   render: (args) => (
-    <div className="flex w-[640px] flex-col gap-3">
+    <div className="flex w-160 flex-col gap-3">
       {TONES.map((tone) => (
         <Banner key={tone} {...args} variant="inline" tone={tone} />
       ))}
@@ -46,11 +44,9 @@ export const Tones: Story = {
 
 /** The two scopes (`variant`): the full-width page strip vs the rounded inline card. */
 export const Variants: Story = {
-  // Iterates `variant` (and pins `tone` to info for the comparison), so disable those
-  // controls; the rest stay live and update both banners at once.
   argTypes: { variant: { control: false }, tone: { control: false } },
   render: (args) => (
-    <div className="flex w-[640px] flex-col gap-4">
+    <div className="flex w-160 flex-col gap-4">
       <Banner {...args} variant="page" tone="info" />
       <Banner {...args} variant="inline" tone="info" />
     </div>
@@ -58,9 +54,8 @@ export const Variants: Story = {
 };
 
 /**
- * The full page banner from Figma (see the meta's design link): a message with trailing actions and
- * a dismiss control. `actions` takes any nodes, so the banner composes propel `Button`s, here a
- * ghost, a secondary, and a primary, matching the three buttons plus the close in the design.
+ * The full page banner from Figma: a message with trailing actions and a dismiss control. `actions`
+ * composes propel `Button`s — a ghost, a secondary, and a primary.
  */
 export const WithActions: Story = {
   parameters: { controls: { disable: true } },
@@ -94,10 +89,8 @@ export const Dismissible: Story = {
 };
 
 /**
- * Real interaction test: clicking the dismiss button invokes `onDismiss`. The spy comes from a
- * Storybook `fn()`; the button is queried by its `aria-label`. Tagged
- * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and AI manifest, but still
- * runs under the default `test` tag.
+ * Real interaction test: clicking the dismiss button invokes `onDismiss`. Tagged out of the
+ * sidebar/docs/manifest but still run under the default `test` tag.
  */
 export const DismissCallsHandler: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -112,3 +105,31 @@ export const DismissCallsHandler: Story = {
     await expect(args.onDismiss).toHaveBeenCalledTimes(1);
   },
 };
+
+/**
+ * Optional content branches: consumers can hide the icon, pass a custom icon, render body-only
+ * content, and warning/danger tones use assertive `alert` semantics.
+ */
+export const OptionalContentSemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex w-160 flex-col gap-3">
+      <Banner variant="inline" tone="warning" inlineStartNode={null}>
+        Maintenance starts at 6 PM.
+      </Banner>
+      <Banner
+        variant="inline"
+        tone="info"
+        title="Custom icon"
+        inlineStartNode={<Info data-testid="custom-banner-icon" />}
+      />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const warning = canvas.getByRole("alert");
+    await expect(warning).toHaveTextContent("Maintenance starts at 6 PM.");
+    await expect(warning.querySelector("svg")).not.toBeInTheDocument();
+    await expect(canvas.getByTestId("custom-banner-icon")).toBeInTheDocument();
+    await expect(canvas.getByRole("status")).toHaveTextContent("Custom icon");
+  },
+};
diff --git a/packages/propel/src/components/banner/index.tsx b/packages/propel/src/components/banner/index.tsx
index 7a1a049..30da6a9 100644
--- a/packages/propel/src/components/banner/index.tsx
+++ b/packages/propel/src/components/banner/index.tsx
@@ -1,158 +1,3 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { CircleAlert, Info, Megaphone, TriangleAlert, X, type LucideIcon } from "lucide-react";
-import * as React from "react";
-
-// Banner = the Figma "Banners" component. Two scopes (`variant`) and five intents
-// (`tone`). `page` is a full-width strip with a bottom border that sits at the top
-// of a page; `inline` is a self-contained rounded card placed within content.
-const bannerVariants = cva("flex items-center overflow-clip", {
-  variants: {
-    // Figma "Scope": page banner (full-width strip) vs inline banner (rounded card).
-    variant: {
-      page: "gap-2 border-b px-4 py-3",
-      inline: "gap-2 rounded-lg border px-3 py-2",
-    },
-    // Figma "Intent": the meaning/color of the banner. Each tone sets its own soft
-    // background, border, and (via the text element / icon) foreground color.
-    tone: {
-      neutral: "",
-      info: "",
-      accent: "",
-      warning: "",
-      danger: "",
-    },
-  },
-  // Per Figma the neutral page banner sits on the page surface, while the colored
-  // tones use their soft tone surface; inline neutral uses the layered surface.
-  compoundVariants: [
-    { variant: "page", tone: "neutral", class: "border-subtle bg-surface-1" },
-    { variant: "inline", tone: "neutral", class: "border-subtle bg-surface-2" },
-    { tone: "info", class: "border-info-subtle bg-info-subtle" },
-    { tone: "accent", class: "border-accent-subtle bg-accent-subtle" },
-    { tone: "warning", class: "border-warning-subtle bg-warning-subtle" },
-    { tone: "danger", class: "border-danger-subtle bg-danger-subtle" },
-  ],
-});
-
-type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>["variant"]>;
-export type BannerTone = NonNullable<VariantProps<typeof bannerVariants>["tone"]>;
-
-// Foreground (title + default icon) color per tone, mapped from the Figma
-// `text/*` and `icon/*` tokens to propel's semantic text utilities.
-// The title uses the `primary` tone text token. For danger and warning the `secondary`
-// step (red/700, amber/700) does not meet WCAG AA against its own soft tone background,
-// so per design those banners use the darker primary text and icon tokens.
-const toneTextClass: Record<BannerTone, string> = {
-  neutral: "text-secondary",
-  info: "text-info-primary",
-  accent: "text-accent-primary",
-  warning: "text-warning-primary",
-  danger: "text-danger-primary",
-};
-
-const toneIconClass: Record<BannerTone, string> = {
-  neutral: "text-icon-secondary",
-  info: "text-icon-info-secondary",
-  accent: "text-icon-accent-primary",
-  warning: "text-icon-warning-primary",
-  danger: "text-icon-danger-primary",
-};
-
-// The leading icon the system picks per tone when none is supplied. Treated as
-// content (overridable via `icon`), not a style variant.
-const toneIcon: Record<BannerTone, LucideIcon> = {
-  neutral: Info,
-  info: Info,
-  accent: Megaphone,
-  warning: TriangleAlert,
-  danger: CircleAlert,
-};
-
-// warning/danger are time-sensitive problems → `alert` (assertive). The calmer
-// tones are advisory → `status` (polite). Picks the right live-region semantics.
-const toneRole: Record<BannerTone, "status" | "alert"> = {
-  neutral: "status",
-  info: "status",
-  accent: "status",
-  warning: "alert",
-  danger: "alert",
-};
-
-export type BannerProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
-  /** Figma Scope: a full-width page strip (`page`) or a self-contained card (`inline`). */
-  variant: BannerVariant;
-  /** Figma Intent: the banner's meaning/color. */
-  tone: BannerTone;
-  /**
-   * Leading icon. Defaults to a tone-appropriate lucide icon; pass `null` to hide it. Named
-   * `leadingIcon` (not `icon`) to match Button/Input and leave room for a future `trailingIcon`.
-   */
-  leadingIcon?: React.ReactNode;
-  /** The banner's headline. Rendered as its own block above any `children` body. */
-  title?: React.ReactNode;
-  /** Trailing actions (e.g. buttons), placed after the message. */
-  actions?: React.ReactNode;
-  /** When provided, shows a dismiss button that calls this on click. */
-  onDismiss?: () => void;
-};
-
-export function Banner({
-  variant,
-  tone,
-  leadingIcon,
-  title,
-  actions,
-  onDismiss,
-  children,
-  ...props
-}: BannerProps) {
-  // The page banner uses a 20px icon and a medium-weight message; the inline
-  // banner uses a 16px icon and a regular-weight message (per Figma typography).
-  const iconSize = variant === "page" ? "size-5" : "size-4";
-  const textWeight = variant === "page" ? "font-medium" : "font-normal";
-  const DefaultIcon = toneIcon[tone];
-  return (
-    <div
-      // `role`/`aria-live` come from the tone so assistive tech announces problems
-      // assertively and advisories politely; consumers can override via spread.
-      role={toneRole[tone]}
-      className={cx(bannerVariants({ variant, tone }))}
-      {...props}
-    >
-      {leadingIcon === undefined ? (
-        <DefaultIcon aria-hidden className={cx("shrink-0", iconSize, toneIconClass[tone])} />
-      ) : leadingIcon ? (
-        <span
-          aria-hidden
-          className={cx(
-            "flex shrink-0 items-center [&>svg]:size-full",
-            iconSize,
-            toneIconClass[tone],
-          )}
-        >
-          {leadingIcon}
-        </span>
-      ) : null}
-      <div
-        className={cx("min-w-0 flex-1 text-14 leading-relaxed", textWeight, toneTextClass[tone])}
-      >
-        {title ? <div>{title}</div> : null}
-        {children ? <div className={cx(title ? "mt-1" : undefined)}>{children}</div> : null}
-      </div>
-      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
-      {onDismiss ? (
-        <button
-          type="button"
-          aria-label="Dismiss"
-          onClick={onDismiss}
-          className={cx(
-            "flex shrink-0 items-center justify-center rounded-md p-1 text-icon-tertiary",
-            "hover:bg-layer-1",
-          )}
-        >
-          <X aria-hidden className="size-4" />
-        </button>
-      ) : null}
-    </div>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/banner` only
+// when you need the lower-level parts.
+export * from "../../ui/banner";
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-dropdown-item.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-dropdown-item.tsx
new file mode 100644
index 0000000..ebc1def
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-dropdown-item.tsx
@@ -0,0 +1,17 @@
+import { Menu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type BreadcrumbDropdownItemProps = Omit<
+  React.ComponentProps<typeof Menu.Item>,
+  "className" | "style"
+>;
+
+/** A single item inside `BreadcrumbDropdown`. */
+export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
+  return (
+    <Menu.Item
+      className="flex cursor-default items-center rounded-sm px-2 py-1 text-14 leading-[1.54] text-secondary outline-none select-none data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary"
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-dropdown.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-dropdown.tsx
new file mode 100644
index 0000000..daef9b5
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-dropdown.tsx
@@ -0,0 +1,38 @@
+import { Menu } from "@base-ui/react/menu";
+import { Ellipsis } from "lucide-react";
+import type * as React from "react";
+
+import { OverlayPanel } from "../../internal/overlay-panel";
+import { BreadcrumbTrigger } from "../../ui/breadcrumb";
+
+export type BreadcrumbDropdownProps = Omit<
+  React.ComponentProps<typeof Menu.Trigger>,
+  "className" | "style"
+> & {
+  /** The collapsed crumbs shown in the menu. */
+  children?: React.ReactNode;
+  /** Accessible name for the trigger. Defaults to "Show more breadcrumbs". */
+  label?: string;
+};
+
+/** A collapsed/overflow crumb that opens a menu of hidden crumbs. */
+export function BreadcrumbDropdown({
+  children,
+  label = "Show more breadcrumbs",
+  ...props
+}: BreadcrumbDropdownProps) {
+  return (
+    <Menu.Root>
+      <Menu.Trigger aria-label={label} render={<BreadcrumbTrigger />} {...props}>
+        <Ellipsis className="size-3.5" />
+      </Menu.Trigger>
+      <Menu.Portal>
+        <Menu.Positioner side="bottom" align="start" sideOffset={4}>
+          <OverlayPanel elevation="raised" radius="md" width="auto">
+            <Menu.Popup className="p-1 outline-none">{children}</Menu.Popup>
+          </OverlayPanel>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
+  );
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-content.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-content.tsx
new file mode 100644
index 0000000..c5258c8
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-content.tsx
@@ -0,0 +1,8 @@
+import { MenuContent, type MenuContentProps } from "../menu/index";
+
+export type BreadcrumbMenuContentProps = MenuContentProps;
+
+/** The menu surface for a `BreadcrumbMenu`. */
+export function BreadcrumbMenuContent(props: BreadcrumbMenuContentProps) {
+  return <MenuContent {...props} />;
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-item.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-item.tsx
new file mode 100644
index 0000000..f3481f6
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-item.tsx
@@ -0,0 +1,8 @@
+import { MenuItem, type MenuItemProps } from "../menu/index";
+
+export type BreadcrumbMenuItemProps = MenuItemProps;
+
+/** A row in a `BreadcrumbMenu`. */
+export function BreadcrumbMenuItem(props: BreadcrumbMenuItemProps) {
+  return <MenuItem {...props} />;
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
new file mode 100644
index 0000000..a47138c
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu-trigger.tsx
@@ -0,0 +1,33 @@
+import { Menu } from "@base-ui/react/menu";
+import { ChevronRight } from "lucide-react";
+import type * as React from "react";
+
+import { BreadcrumbTrigger } from "../../ui/breadcrumb";
+
+export type BreadcrumbMenuTriggerProps = Omit<
+  React.ComponentProps<typeof Menu.Trigger>,
+  "className" | "style"
+> & {
+  /** Leading content, typically a work-item/page icon. */
+  icon?: React.ReactNode;
+  /** The crumb label. */
+  children?: React.ReactNode;
+};
+
+/** The crumb that opens a `BreadcrumbMenu`. */
+export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
+  return (
+    <Menu.Trigger render={<BreadcrumbTrigger group />} {...props}>
+      {icon != null ? (
+        <span className="flex size-4 shrink-0 items-center justify-center text-icon-tertiary">
+          {icon}
+        </span>
+      ) : null}
+      {children}
+      <ChevronRight
+        className="size-3.5 shrink-0 text-icon-tertiary transition-transform group-data-popup-open/trigger:rotate-90 rtl:not-group-data-popup-open/trigger:-scale-x-100"
+        aria-hidden="true"
+      />
+    </Menu.Trigger>
+  );
+}
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb-menu.tsx b/packages/propel/src/components/breadcrumb/breadcrumb-menu.tsx
new file mode 100644
index 0000000..70ca5ce
--- /dev/null
+++ b/packages/propel/src/components/breadcrumb/breadcrumb-menu.tsx
@@ -0,0 +1,5 @@
+import { Menu, type MenuProps } from "../../ui/menu/index";
+
+/** A breadcrumb crumb dropdown root for switching between sibling pages or contexts. */
+export const BreadcrumbMenu = Menu;
+export type BreadcrumbMenuProps = MenuProps;
diff --git a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
index e86fbec..1b844e4 100644
--- a/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/propel/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -184,7 +184,7 @@ export const WithMenuCrumb: Story = {
 };
 
 /**
- * The menu crumb composes propel's `Dropdown` rows, so it supports the full row vocabulary — here a
+ * The menu crumb composes propel's `Menu` rows, so it supports the full row vocabulary — here a
  * single-select list (the current sibling carries `selected`, showing the trailing check) for
  * switching the active view.
  */
diff --git a/packages/propel/src/components/breadcrumb/index.tsx b/packages/propel/src/components/breadcrumb/index.tsx
index b50aa30..eb5d007 100644
--- a/packages/propel/src/components/breadcrumb/index.tsx
+++ b/packages/propel/src/components/breadcrumb/index.tsx
@@ -1,252 +1,21 @@
-import { Menu } from "@base-ui/react/menu";
-import { cva, cx } from "class-variance-authority";
-import { ChevronRight, Ellipsis } from "lucide-react";
-import * as React from "react";
-
-import { OverlayPanel } from "../../internal/overlay-panel";
-import {
-  Dropdown,
-  DropdownContent,
-  type DropdownContentProps,
-  DropdownItem,
-  type DropdownItemProps,
-  type DropdownProps,
-} from "../dropdown/index";
-
-// A breadcrumb crumb is a small pill: 14px medium label on the neutral
-// `text/tertiary` token, 4px horizontal padding, 6px radius, and a transparent
-// background that fills with `background/layer/transparent-hover` on hover. The
-// current page swaps the label to the stronger `text/primary` token. These map
-// 1:1 to the Figma "Breadcrumb components" item (default / hover / current).
-// The crumb is a single-line flex row of [icon] label [chevron]. Figma's text style
-// carries a 1.54 line-height, but applying that here inflates the text's line box and
-// floats the glyphs above the icon/chevron centers, so they read as misaligned. On a
-// single-line flex row the box should hug the glyphs (`leading-none`) and `items-center`
-// does the vertical centering; `py-0.5` restores the crumb/hover-pill height.
-const crumbVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary",
-  {
-    variants: {
-      // The hoverable crumbs (links, dropdown trigger) get the transparent-hover
-      // background + stronger text on hover; the static current page does not.
-      interactive: {
-        true: "transition-colors hover:bg-layer-transparent-hover hover:text-primary",
-        false: "",
-      },
-    },
-  },
-);
-
-export type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "className" | "style">;
-
-/**
- * Breadcrumb trail: a `<nav aria-label="Breadcrumb">` wrapping an ordered list. Compose the trail
- * from `BreadcrumbItem`s — the number of crumbs is content the consumer provides, not a prop.
- */
-export function Breadcrumb({ children, ...props }: BreadcrumbProps) {
-  return (
-    <nav aria-label="Breadcrumb" {...props}>
-      <ol className="flex items-center gap-0.5">{children}</ol>
-    </nav>
-  );
-}
-
-export type BreadcrumbItemProps = Omit<React.ComponentProps<"li">, "className" | "style">;
-
-/** One step in the trail: a list item holding a link, page, or dropdown crumb. */
-export function BreadcrumbItem(props: BreadcrumbItemProps) {
-  return <li className="inline-flex items-center" {...props} />;
-}
-
-export type BreadcrumbLinkProps = Omit<React.ComponentProps<"a">, "className" | "style">;
-
-/** A navigable crumb — renders an anchor styled as a hoverable pill. */
-export function BreadcrumbLink(props: BreadcrumbLinkProps) {
-  return <a className={cx(crumbVariants({ interactive: true }))} {...props} />;
-}
-
-export type BreadcrumbPageProps = Omit<React.ComponentProps<"span">, "className" | "style">;
-
-/**
- * The current page — the last, non-navigable crumb. Marked `aria-current="page"` so assistive tech
- * announces it, and styled with the stronger `text/primary` token.
- */
-export function BreadcrumbPage(props: BreadcrumbPageProps) {
-  return (
-    <span
-      aria-current="page"
-      className={cx(crumbVariants({ interactive: false }), "text-primary")}
-      {...props}
-    />
-  );
-}
-
-export type BreadcrumbSeparatorProps = Omit<React.ComponentProps<"li">, "className" | "style">;
-
-/**
- * The visual divider between crumbs — a decorative `ChevronRight`. It's
- * `aria-hidden`/presentational so it isn't announced as a list item.
- */
-export function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps) {
-  return (
-    <li
-      aria-hidden
-      role="presentation"
-      className="flex items-center px-1 text-icon-tertiary"
-      {...props}
-    >
-      {children ?? <ChevronRight className="size-3.5 rtl:-scale-x-100" />}
-    </li>
-  );
-}
-
-export type BreadcrumbDropdownProps = Omit<
-  React.ComponentProps<typeof Menu.Trigger>,
-  "className" | "render" | "style"
-> & {
-  /** The collapsed crumbs shown in the menu — typically `BreadcrumbDropdownItem`s. */
-  children?: React.ReactNode;
-  /** Accessible name for the trigger. Defaults to "Show more breadcrumbs". */
-  label?: string;
-};
-
-/**
- * A collapsed/overflow crumb: an ellipsis trigger that opens a menu of the crumbs hidden to save
- * space. Built on Base UI's `Menu` so it's keyboard- and screen-reader-accessible out of the box.
- */
-export function BreadcrumbDropdown({
-  children,
-  label = "Show more breadcrumbs",
-  ...props
-}: BreadcrumbDropdownProps) {
-  return (
-    <Menu.Root>
-      <Menu.Trigger
-        aria-label={label}
-        className={cx(
-          crumbVariants({ interactive: true }),
-          "cursor-default data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
-        )}
-        {...props}
-      >
-        <Ellipsis className="size-3.5" />
-      </Menu.Trigger>
-      <Menu.Portal>
-        <Menu.Positioner side="bottom" align="start" sideOffset={4}>
-          <OverlayPanel elevation="raised" radius="md" width="auto">
-            <Menu.Popup className="p-1 outline-none">{children}</Menu.Popup>
-          </OverlayPanel>
-        </Menu.Positioner>
-      </Menu.Portal>
-    </Menu.Root>
-  );
-}
-
-export type BreadcrumbDropdownItemProps = Omit<
-  React.ComponentProps<typeof Menu.Item>,
-  "className" | "style"
->;
-
-/**
- * A single item inside `BreadcrumbDropdown` — a thin wrapper over Base UI's `Menu.Item` with
- * propel's menu-row styling. Render a link inside it (or pass `render`) to make the collapsed crumb
- * navigable.
- */
-export function BreadcrumbDropdownItem(props: BreadcrumbDropdownItemProps) {
-  return (
-    <Menu.Item
-      className="flex cursor-default items-center rounded-sm px-2 py-1 text-14 leading-[1.54] text-secondary outline-none select-none data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary"
-      {...props}
-    />
-  );
-}
-
-/**
- * A breadcrumb crumb that opens a dropdown menu — the Figma "Dropdown" property of a breadcrumb
- * crumb (default / hover / current). Unlike `BreadcrumbDropdown` (the overflow ellipsis that hides
- * middle crumbs), this is a _real_ crumb in the trail whose menu lets the user switch the current
- * step between sibling pages or contexts — e.g. jumping between projects, sub-pages, or views
- * without leaving the breadcrumb. It composes propel's `Dropdown`, so the portaled menu is
- * keyboard- and screen-reader-accessible.
- *
- * ```tsx
- * <BreadcrumbItem>
- *   <BreadcrumbMenu>
- *     <BreadcrumbMenuTrigger icon={<Layers />}>Plane Design</BreadcrumbMenuTrigger>
- *     <BreadcrumbMenuContent>
- *       <BreadcrumbMenuItem render={<a href="#" />}>Plane Mobile</BreadcrumbMenuItem>
- *       <BreadcrumbMenuItem render={<a href="#" />}>Plane Web</BreadcrumbMenuItem>
- *     </BreadcrumbMenuContent>
- *   </BreadcrumbMenu>
- * </BreadcrumbItem>;
- * ```
- */
-export const BreadcrumbMenu = Dropdown;
-export type BreadcrumbMenuProps = DropdownProps;
-
-export type BreadcrumbMenuTriggerProps = Omit<
-  React.ComponentProps<typeof Menu.Trigger>,
-  "className" | "render" | "style"
-> & {
-  /** Leading content, typically a work-item/page icon. Rendered before the label. */
-  icon?: React.ReactNode;
-  /** The crumb label. */
-  children?: React.ReactNode;
-};
-
-/**
- * The crumb that opens the menu: a hoverable pill (icon + label) with a trailing chevron. That
- * chevron IS the breadcrumb chevron (the same glyph as `BreadcrumbSeparator`): it points right when
- * closed and rotates down (`data-[popup-open]`) while the menu is open, matching the Figma
- * "Dropdown" crumb's default and hover/open states. Because it already serves as the divider to the
- * next crumb, do NOT place a `BreadcrumbSeparator` after a menu crumb, or it renders a second,
- * redundant arrow. It's the `Dropdown`/`Menu` trigger `<button>`, so it keeps the menu's keyboard
- * a11y (Enter / ArrowDown to open) out of the box.
- */
-export function BreadcrumbMenuTrigger({ icon, children, ...props }: BreadcrumbMenuTriggerProps) {
-  return (
-    <Menu.Trigger
-      className={cx(
-        crumbVariants({ interactive: true }),
-        "group/trigger cursor-default data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
-      )}
-      {...props}
-    >
-      {icon != null ? (
-        <span className="flex size-4 shrink-0 items-center justify-center text-icon-tertiary">
-          {icon}
-        </span>
-      ) : null}
-      {children}
-      {/* Chevron points right when closed; when the menu is open it rotates 90° to
-          point down (the Figma "Dropdown" hover/open state). RTL mirrors only the
-          *closed* chevron so it points left along the mirrored trail — the open
-          (rotated-down) chevron must not be mirrored, or it would point up. */}
-      <ChevronRight
-        className="size-3.5 shrink-0 text-icon-tertiary transition-transform group-data-popup-open/trigger:rotate-90 rtl:not-group-data-popup-open/trigger:-scale-x-100"
-        aria-hidden="true"
-      />
-    </Menu.Trigger>
-  );
-}
-
-export type BreadcrumbMenuContentProps = DropdownContentProps;
-
-/**
- * The menu surface for a `BreadcrumbMenu` — propel's `DropdownContent`, portaled and positioned
- * under the crumb. Place `BreadcrumbMenuItem`s inside it.
- */
-export function BreadcrumbMenuContent(props: BreadcrumbMenuContentProps) {
-  return <DropdownContent {...props} />;
-}
-
-export type BreadcrumbMenuItemProps = DropdownItemProps;
-
-/**
- * A row in a `BreadcrumbMenu` — propel's `DropdownItem`. Render a link inside it (via `render`) to
- * make the sibling crumb navigable. `variant` is required (the Dropdown row layout axis); use
- * `"default"` for the single-line sibling list.
- */
-export function BreadcrumbMenuItem(props: BreadcrumbMenuItemProps) {
-  return <DropdownItem {...props} />;
-}
+export {
+  Breadcrumb,
+  type BreadcrumbProps,
+  BreadcrumbItem,
+  type BreadcrumbItemProps,
+  BreadcrumbLink,
+  type BreadcrumbLinkProps,
+  BreadcrumbPage,
+  type BreadcrumbPageProps,
+  BreadcrumbSeparator,
+  type BreadcrumbSeparatorProps,
+} from "../../ui/breadcrumb";
+export { BreadcrumbDropdown, type BreadcrumbDropdownProps } from "./breadcrumb-dropdown";
+export {
+  BreadcrumbDropdownItem,
+  type BreadcrumbDropdownItemProps,
+} from "./breadcrumb-dropdown-item";
+export { BreadcrumbMenu, type BreadcrumbMenuProps } from "./breadcrumb-menu";
+export { BreadcrumbMenuContent, type BreadcrumbMenuContentProps } from "./breadcrumb-menu-content";
+export { BreadcrumbMenuItem, type BreadcrumbMenuItemProps } from "./breadcrumb-menu-item";
+export { BreadcrumbMenuTrigger, type BreadcrumbMenuTriggerProps } from "./breadcrumb-menu-trigger";
diff --git a/packages/propel/src/components/button/button.tsx b/packages/propel/src/components/button/button.tsx
new file mode 100644
index 0000000..61368fe
--- /dev/null
+++ b/packages/propel/src/components/button/button.tsx
@@ -0,0 +1,54 @@
+import { LoaderCircle } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { Button as ButtonRoot, type ButtonProps as ButtonRootProps } from "../../ui/button";
+
+export type ButtonProps = ButtonRootProps & {
+  /**
+   * Node rendered before the label (inline-start). An icon, avatar, or any node; it is sized to the
+   * button's `--node-size`. Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+  /**
+   * Node rendered after the label (inline-end). An icon, avatar, or any node; it is sized to the
+   * button's `--node-size`. Decorative, kept out of the name.
+   */
+  inlineEndNode?: React.ReactNode;
+  /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
+  loading?: boolean;
+};
+
+/**
+ * The ready-made `Button`: composes the atomic `Button` and lays out an optional
+ * `inlineStartNode`/`inlineEndNode` beside the label plus a `loading` spinner. Content —
+ * `children`, the inline nodes, `loading` — is not a variant.
+ */
+export function Button({
+  inlineStartNode,
+  inlineEndNode,
+  loading = false,
+  disabled,
+  children,
+  ...props
+}: ButtonProps) {
+  // `loading` is a soft-disabled state: Base UI keeps it focusable via
+  // `focusableWhenDisabled` while suppressing activation from pointer and keyboard.
+  // A plain `disabled` prop remains the hard, non-focusable native disabled state.
+  return (
+    <ButtonRoot
+      {...props}
+      disabled={disabled || loading}
+      focusableWhenDisabled={loading ? true : undefined}
+      aria-busy={loading ? true : undefined}
+    >
+      {loading ? (
+        <LoaderCircle aria-hidden className="size-(--node-size) animate-spin" />
+      ) : inlineStartNode ? (
+        <NodeSlot aria-hidden>{inlineStartNode}</NodeSlot>
+      ) : null}
+      {children}
+      {!loading && inlineEndNode ? <NodeSlot aria-hidden>{inlineEndNode}</NodeSlot> : null}
+    </ButtonRoot>
+  );
+}
diff --git a/packages/propel/src/components/button/index.tsx b/packages/propel/src/components/button/index.tsx
index f64ca01..0ce3df3 100644
--- a/packages/propel/src/components/button/index.tsx
+++ b/packages/propel/src/components/button/index.tsx
@@ -1,238 +1,10 @@
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { LoaderCircle } from "lucide-react";
-import * as React from "react";
-
-import { getLoadingButtonProps } from "../../internal/loading-button";
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// Magnitudes follow the Figma "Buttons" Size scale. Figma ships S/Base/L/XL; those
-// map to sm/md/lg/xl by their px heights (20/24/28/32). Per Figma:
-// S -> text-12/px-1.5; Base & L -> text-13; XL -> text-14. All chrome'd magnitudes
-// use leading-none so the flex-centered label sits dead-center in the fixed height.
-export const buttonVariants = cva(
-  // Shared chrome: inline flex row, centered, focus-visible ring on the brand
-  // accent token, real disabled affordance, and a snug medium label.
-  cx(
-    "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-md font-medium",
-    "whitespace-nowrap transition-colors outline-none",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "disabled:cursor-not-allowed aria-busy:cursor-default",
-  ),
-  {
-    variants: {
-      // Figma "Type". Primary/secondary/tertiary/ghost are the neutral fills; link
-      // is the inline text affordance. The danger palette is selected via `tone`.
-      variant: {
-        primary: "",
-        // No border color here: the border color is owned by the tone compounds
-        // below (neutral -> border-strong, danger -> border-danger-strong), because
-        // a base color would be order-fragile against the tone color under cx.
-        secondary: "shadow-raised-100",
-        tertiary: "",
-        ghost: "",
-        link: "underline underline-offset-2",
-      },
-      // Neutral by default; `danger` swaps in the Figma "Error" palette.
-      tone: {
-        neutral: "",
-        danger: "",
-      },
-      // Link-only axis (Figma "Emphasis"). `solid` is the blue `link/primary`
-      // affordance; `subtle` is the muted gray inline link. It only changes the
-      // appearance of `variant="link"`; every other variant ignores it.
-      emphasis: {
-        solid: "",
-        subtle: "",
-      },
-      // `leading-none` collapses each label's line box to the glyph height so
-      // the flex `items-center` truly centers it inside the fixed-height button;
-      // any larger line-height (e.g. `leading-snug`) inflates the line box and
-      // makes the top/bottom padding read as uneven. Link overrides below opt
-      // back into a taller line-height since inline link text may wrap.
-      // Each magnitude also sets `--node-size`, the size every leading/trailing node
-      // (icon, avatar, ...) renders at. Per Figma's per-size icon values: 14px up to
-      // Base, 16px from L up. The slots and the loading spinner read this variable, so
-      // the button owns its node sizing in one place.
-      magnitude: {
-        sm: "h-5 min-w-10 px-1.5 text-12 leading-none [--node-size:0.875rem]",
-        md: "h-6 min-w-10 px-2 text-13 leading-none [--node-size:0.875rem]",
-        lg: "h-7 min-w-12 px-2 text-13 leading-none [--node-size:1rem]",
-        xl: "h-8 min-w-13 px-2 text-14 leading-none [--node-size:1rem]",
-      },
-    },
-    compoundVariants: [
-      // ----- Neutral solid (Figma Type=Primary) -----
-      {
-        variant: "primary",
-        tone: "neutral",
-        className: cx(
-          // `text-inverse` (white in light, near-black in dark) keeps AA contrast against
-          // the brand-blue surface, which is dark in light themes and light in dark ones.
-          "bg-accent-primary text-inverse",
-          "hover:bg-accent-primary-hover active:bg-accent-primary-active",
-          "disabled:bg-layer-disabled disabled:text-on-color-disabled",
-        ),
-      },
-      // ----- Neutral outline (Figma Type=Secondary) -----
-      {
-        variant: "secondary",
-        tone: "neutral",
-        className: cx(
-          "border border-strong bg-layer-2 text-secondary",
-          "hover:bg-layer-2-hover active:bg-layer-2-active",
-          "disabled:border-disabled disabled:bg-layer-disabled disabled:text-disabled disabled:shadow-none",
-        ),
-      },
-      // ----- Neutral soft (Figma Type=Tertiary) -----
-      {
-        variant: "tertiary",
-        tone: "neutral",
-        className: cx(
-          "bg-layer-3 text-secondary",
-          "hover:bg-layer-3-hover active:bg-layer-3-active",
-          "disabled:bg-layer-disabled disabled:text-disabled",
-        ),
-      },
-      // ----- Neutral ghost (Figma Type=Ghost) -----
-      {
-        variant: "ghost",
-        tone: "neutral",
-        className: cx(
-          "bg-layer-transparent text-secondary",
-          "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
-          "disabled:bg-transparent disabled:text-disabled",
-        ),
-      },
-      // ----- Neutral link, solid (Figma Type=Link, Emphasis=solid) -----
-      // The blue `link/primary` affordance.
-      {
-        variant: "link",
-        tone: "neutral",
-        emphasis: "solid",
-        className: cx(
-          "min-w-0 px-0 text-link-primary hover:text-link-primary-hover",
-          "disabled:text-disabled disabled:no-underline",
-        ),
-      },
-      // ----- Neutral link, subtle (Figma Type=Link, Emphasis=subtle) -----
-      // The muted gray inline link. Uses `text-secondary` (#4e5355) to match
-      // Figma and clear AA contrast — NOT the lighter `link-secondary` token.
-      {
-        variant: "link",
-        tone: "neutral",
-        emphasis: "subtle",
-        className: cx(
-          "min-w-0 px-0 text-secondary hover:text-primary",
-          "disabled:text-disabled disabled:no-underline",
-        ),
-      },
-      // Link size overrides: link has no chrome/height, so reset to inline text.
-      { variant: "link", magnitude: "sm", className: "h-auto leading-snug" },
-      { variant: "link", magnitude: "md", className: "h-auto" },
-      { variant: "link", magnitude: "lg", className: "h-auto" },
-      { variant: "link", magnitude: "xl", className: "h-auto" },
-      // ----- Danger solid (Figma Type=Error Fill) -----
-      {
-        variant: "primary",
-        tone: "danger",
-        className: cx(
-          "bg-danger-primary text-on-color",
-          "hover:bg-danger-primary-hover active:bg-danger-primary-active",
-          "disabled:bg-layer-disabled disabled:text-on-color-disabled",
-        ),
-      },
-      // ----- Danger outline (Figma Type=Error Outline) -----
-      {
-        variant: "secondary",
-        tone: "danger",
-        className: cx(
-          "border border-danger-strong bg-layer-2 text-danger-secondary",
-          "hover:bg-danger-subtle active:border-danger-subtle active:bg-danger-subtle-active",
-          "disabled:border-disabled disabled:bg-layer-disabled disabled:text-disabled disabled:shadow-none",
-        ),
-      },
-    ],
-  },
-);
-
-export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
-export type ButtonTone = NonNullable<VariantProps<typeof buttonVariants>["tone"]>;
-export type ButtonMagnitude = NonNullable<VariantProps<typeof buttonVariants>["magnitude"]>;
-export type ButtonEmphasis = NonNullable<VariantProps<typeof buttonVariants>["emphasis"]>;
-
-type ButtonOwnProps = {
-  variant: ButtonVariant;
-  tone: ButtonTone;
-  magnitude: ButtonMagnitude;
-  /**
-   * Link-only: picks the `link` look. `solid` is the blue `link/primary` style; `subtle` is the
-   * muted gray inline link. Optional and additive — it only affects `variant="link"`, so it has no
-   * default and every other `variant` ignores it.
-   */
-  emphasis?: ButtonEmphasis;
-  /**
-   * Node rendered before the label (inline-start). An icon, avatar, or any node; it is sized to the
-   * button's `--node-size`. Decorative, kept out of the name.
-   */
-  inlineStartNode?: React.ReactNode;
-  /**
-   * Node rendered after the label (inline-end). An icon, avatar, or any node; it is sized to the
-   * button's `--node-size`. Decorative, kept out of the name.
-   */
-  inlineEndNode?: React.ReactNode;
-  /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
-  loading?: boolean;
-};
-
-export type ButtonProps = Omit<React.ComponentProps<"button">, "className" | "style"> &
-  ButtonOwnProps;
-
-/**
- * A plain accessible button built on propel's design tokens. Pick a look with `variant` (Figma
- * Type), select the error palette with `tone`, and size it with `magnitude` — all required, so
- * consumers choose explicitly. For `variant="link"` only, optionally choose `solid` (blue) or
- * `subtle` (gray) with `emphasis`. Content — `children`, `inlineStartNode`/`inlineEndNode`,
- * `loading` — is not a variant.
- */
-export function Button({
-  variant,
-  tone,
-  magnitude,
-  emphasis,
-  inlineStartNode,
-  inlineEndNode,
-  loading = false,
-  disabled,
-  type = "button",
-  children,
-  onClick,
-  ...props
-}: ButtonProps) {
-  // `loading` is a soft-disabled state: it shows a spinner and must not fire
-  // clicks, but stays a real (focusable) button so screen readers announce the
-  // busy state via `aria-busy` + `aria-disabled`. `disabled` is the hard,
-  // non-focusable state and is the only thing that sets the native attribute.
-  // The spinner and both node slots size to the button's `--node-size`.
-  return (
-    <button
-      type={type}
-      {...getLoadingButtonProps({ loading, disabled, onClick })}
-      className={buttonVariants({ variant, tone, magnitude, emphasis })}
-      {...props}
-    >
-      {loading ? (
-        <LoaderCircle aria-hidden className="size-(--node-size) animate-spin" />
-      ) : inlineStartNode ? (
-        <span aria-hidden className={nodeSlotClass}>
-          {inlineStartNode}
-        </span>
-      ) : null}
-      {children}
-      {!loading && inlineEndNode ? (
-        <span aria-hidden className={nodeSlotClass}>
-          {inlineEndNode}
-        </span>
-      ) : null}
-    </button>
-  );
-}
+export { Button, type ButtonProps } from "./button";
+// Re-export the atomic button's variant types + `buttonVariants` so the full button surface is
+// importable from this convenience.
+export {
+  type ButtonEmphasis,
+  type ButtonMagnitude,
+  type ButtonTone,
+  type ButtonVariant,
+  buttonVariants,
+} from "../../ui/button";
diff --git a/packages/propel/src/components/calendar/calendar.stories.tsx b/packages/propel/src/components/calendar/calendar.stories.tsx
index 101eb7b..2fe8aef 100644
--- a/packages/propel/src/components/calendar/calendar.stories.tsx
+++ b/packages/propel/src/components/calendar/calendar.stories.tsx
@@ -77,9 +77,8 @@ export const WithDisabledDays: Story = {
 
 /**
  * Behavior tests: the month grid renders day buttons, clicking a day selects it, and a disabled day
- * stays unselectable. Tagged out of the sidebar/docs/manifest — it's a test canary, not a designer-
- * or agent-facing example — but still runs under the default `test` tag. A fixed `defaultMonth`
- * keeps the grid deterministic.
+ * stays unselectable. Tagged out of the sidebar/docs/manifest but still runs under `test`. A fixed
+ * `defaultMonth` keeps the grid deterministic.
  */
 export const Behavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -97,13 +96,9 @@ export const Behavior: Story = {
     );
   },
   play: async ({ canvas, userEvent }) => {
-    // The grid renders day cells; react-day-picker labels day buttons with the
-    // full date ("…, January 15th, 2025") and a selected day gains ", selected".
     const day15 = canvas.getByRole("button", { name: /January 15th, 2025$/ });
     await expect(day15).toBeInTheDocument();
 
-    // Clicking a day marks its grid cell selected (react-day-picker sets
-    // `aria-selected` on the gridcell, and the button's label gains "selected").
     await userEvent.click(day15);
     await expect(
       canvas.getByRole("button", { name: /January 15th, 2025, selected$/ }),
@@ -111,27 +106,22 @@ export const Behavior: Story = {
     const selectedCell = canvas.getByRole("gridcell", { selected: true });
     await expect(selectedCell).toHaveAttribute("data-day", "2025-01-15");
 
-    // A disabled day (Jan 1) renders a disabled, non-interactive button: it
-    // exposes `disabled`/`pointer-events: none`, so it can never be selected.
     const day1 = canvas.getByRole("button", { name: /January 1st, 2025$/ });
     await expect(day1).toBeDisabled();
     await expect(getComputedStyle(day1).pointerEvents).toBe("none");
-    // The earlier selection is the only selected cell — the disabled day added none.
     await expect(canvas.getAllByRole("gridcell", { selected: true })).toHaveLength(1);
   },
 };
 
 /**
  * Keyboard ARIA pattern (WAI-ARIA grid date picker): Tab moves focus into the month grid, **Arrow
- * keys** move the focused day (Right = +1 day, Down = +7 days), and **Enter** selects it
- * (`aria-selected` on the gridcell). A fixed `defaultMonth` and a known starting selection keep the
- * focused day deterministic. Tagged out of the sidebar/docs/manifest while still running under the
- * default `test` tag.
+ * keys** move the focused day (Right = +1 day, Down = +7 days), and **Enter** selects it. A fixed
+ * `defaultMonth` and known selection keep the focused day deterministic. Tagged out of the
+ * sidebar/docs/manifest but still runs under `test`.
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   render: () => {
-    // Pre-select Jan 15 so react-day-picker makes that the focusable day on Tab.
     const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 15));
     return (
       <Calendar
@@ -143,26 +133,19 @@ export const KeyboardNavigation: Story = {
     );
   },
   play: async ({ canvas, userEvent }) => {
-    // The grid is a single tab stop (only the selected/active day is tabbable), but
-    // the month-nav chevrons precede it in the tab order. Tab forward until focus
-    // reaches the grid's focusable day (Jan 15, the current selection).
     const day15 = canvas.getByRole("button", { name: /January 15th, 2025, selected$/ });
     for (let i = 0; i < 4 && document.activeElement !== day15; i++) {
       await userEvent.tab();
     }
     await expect(day15).toHaveFocus();
 
-    // Arrow Right moves the focused day forward one day (Jan 16).
     await userEvent.keyboard("{ArrowRight}");
     await expect(canvas.getByRole("button", { name: /January 16th, 2025$/ })).toHaveFocus();
 
-    // Arrow Down moves the focused day forward one week (Jan 23).
     await userEvent.keyboard("{ArrowDown}");
     const day23 = canvas.getByRole("button", { name: /January 23rd, 2025$/ });
     await expect(day23).toHaveFocus();
 
-    // Enter selects the focused day; its gridcell gains aria-selected and it is the
-    // single selected cell (the previous selection moved with the keyboard).
     await userEvent.keyboard("{Enter}");
     await expect(
       canvas.getByRole("button", { name: /January 23rd, 2025, selected$/ }),
diff --git a/packages/propel/src/components/calendar/index.tsx b/packages/propel/src/components/calendar/index.tsx
index 7286f0c..faf2186 100644
--- a/packages/propel/src/components/calendar/index.tsx
+++ b/packages/propel/src/components/calendar/index.tsx
@@ -1,103 +1,3 @@
-import { cx } from "class-variance-authority";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { DayPicker, type DayPickerProps } from "react-day-picker";
-
-import { surfaceVariants } from "../../internal/surface";
-
-// Propel-token class map for react-day-picker's UI parts. We never import its
-// default stylesheet — every visual decision below comes from a propel utility
-// (Figma node 1272-11630): 40px round day cells, accent endpoints, soft in-range
-// fill, a bordered/elevated container. Keys mirror react-day-picker's `UI`/
-// `DayFlag`/`SelectionState` enums.
-const calendarClassNames: Partial<NonNullable<DayPickerProps["classNames"]>> = {
-  // Elevated, bordered surface: the shared floating-card surface (white
-  // `surface-1`, subtle border) with `raised` overlay shadow and `lg` radius.
-  root: cx(surfaceVariants({ elevation: "raised", radius: "lg" }), "relative inline-block p-4"),
-  months: "flex flex-col gap-3",
-  month: "flex flex-col gap-3",
-  // Caption + nav share one row; the label leads, buttons sit at the end.
-  month_caption: "flex items-center h-7",
-  caption_label: "text-20 font-semibold text-primary",
-  nav: "absolute end-4 top-4 flex items-center gap-1",
-  // 28px transparent icon buttons that tint on hover (Figma "Icon buttons").
-  button_previous:
-    "inline-flex size-7 items-center justify-center rounded-md text-icon-tertiary hover:bg-layer-transparent-hover disabled:opacity-50",
-  button_next:
-    "inline-flex size-7 items-center justify-center rounded-md text-icon-tertiary hover:bg-layer-transparent-hover disabled:opacity-50",
-  month_grid: "border-collapse",
-  weekdays: "flex",
-  // Weekday column headers: body-sm-regular tertiary text on a 40px cell. The
-  // composite `text-body-sm-regular` utility carries the 14px size plus the
-  // propel regular weight/line-height (Figma "font/body-sm/regular").
-  weekday: "flex size-10 items-center justify-center text-body-sm-regular text-tertiary",
-  week: "flex w-full",
-  // react-day-picker v10 applies the modifier classNames (`selected`, `today`,
-  // `range_*`) and `aria-selected` to the gridcell (this `td`) itself — NOT to a
-  // descendant — so we target the cell directly with `[&.foo]`/`[&[aria-selected]]`
-  // and reach the inner button with `[&>button]`.
-  //
-  // The cell is the range backdrop: range cells (start/middle/end) get the soft
-  // in-range fill, and only the outer corners of an endpoint round off so a
-  // continuous range reads as one pill. A plain single-selected cell stays
-  // transparent (its solid pill comes from the button below).
-  day: "relative size-10 p-0 text-center [&.range-start]:bg-accent-subtle-hover [&.range-middle]:bg-accent-subtle-hover [&.range-end]:bg-accent-subtle-hover [&.range-start]:rounded-s-full [&.range-end]:rounded-e-full",
-  // The actual button: 40px round, body-sm text, primary color.
-  day_button:
-    "relative inline-flex size-10 items-center justify-center rounded-full text-14 text-primary hover:bg-layer-transparent-hover",
-  // Selected single day / range endpoints: solid accent button, inverse text.
-  // (`selected` is set on the cell for every day in a range; `range_middle`
-  // below resets the button back to transparent for the in-between days.)
-  // `text-inverse` keeps AA contrast on the brand-blue surface in every theme.
-  selected:
-    "[&>button]:bg-accent-primary [&>button]:text-inverse [&>button:hover]:bg-accent-primary",
-  // Endpoints are tagged so the cell can round the outer edge of the range.
-  range_start: "range-start",
-  range_end: "range-end",
-  // Middle of a range: keep the button transparent so only the cell's soft fill
-  // shows, and square the cell (the marker class also drives the fill above).
-  range_middle:
-    "range-middle [&>button]:bg-transparent [&>button]:text-primary [&>button:hover]:bg-transparent",
-  // Today (when not selected): accent text so the current date stands out. When
-  // the cell is also selected, the solid accent button (above) wins.
-  today: "[&:not([aria-selected])>button]:text-accent-primary [&>button]:font-semibold",
-  // Disabled days read as muted, non-interactive text.
-  disabled: "[&>button]:text-disabled [&>button]:pointer-events-none",
-  // Days from the adjacent month: dimmed.
-  outside: "[&>button]:text-tertiary",
-  hidden: "invisible",
-};
-
-/**
- * Props for {@link Calendar}. Forwards every react-day-picker `DayPickerProps` (`mode`, `selected`,
- * `onSelect`, `disabled`, `month`, `defaultMonth`, …) but drops `className`/`style`/`classNames` —
- * styling is owned by propel tokens.
- */
-// `DayPickerProps` is a discriminated union over `mode`; a plain `Omit` collapses
-// it and de-correlates `selected`/`onSelect`. Omit distributively so each union
-// member (and its mode↔selected↔onSelect relationship) is preserved.
-type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
-export type CalendarProps = DistributiveOmit<DayPickerProps, "className" | "style" | "classNames">;
-
-/**
- * A date picker built on react-day-picker and styled entirely with propel tokens. Supports `single`
- * and `range` selection via the `mode` prop and is fully keyboard- and screen-reader-accessible
- * (react-day-picker owns the grid semantics). Pass `selected`/`onSelect` to control the selection.
- */
-export function Calendar(props: CalendarProps) {
-  return (
-    <DayPicker
-      // react-day-picker handles month/grid/aria; we only restyle and swap the
-      // nav chevrons for lucide icons (decorative, hidden from assistive tech).
-      classNames={calendarClassNames}
-      components={{
-        Chevron: ({ orientation }) =>
-          orientation === "left" ? (
-            <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
-          ) : (
-            <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
-          ),
-      }}
-      {...props}
-    />
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/calendar` only
+// when you need the lower-level parts.
+export * from "../../ui/calendar";
diff --git a/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx
new file mode 100644
index 0000000..487e539
--- /dev/null
+++ b/packages/propel/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Checkbox } from "../checkbox/index";
+import { CheckboxGroup } from "./index";
+
+// Components-tier story: the ready-made `CheckboxGroup` holding ready-made `Checkbox`
+// rows (each with its own label + box). The group owns spacing (`density`) and the
+// selected-values array. The UI-tier story composes the atomic boxes instead.
+const meta = {
+  title: "Components/CheckboxGroup",
+  component: CheckboxGroup,
+  subcomponents: { Checkbox },
+  args: { density: "comfortable" },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Labeled checkbox rows; the first is selected by default. */
+export const Default: Story = {
+  args: { density: "comfortable", defaultValue: ["https"] },
+  render: (args) => (
+    <CheckboxGroup {...args} aria-label="Allowed protocols">
+      <Checkbox tone="neutral" value="http" label="HTTP" />
+      <Checkbox tone="neutral" value="https" label="HTTPS" />
+      <Checkbox tone="neutral" value="ssh" label="SSH" />
+    </CheckboxGroup>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("checkbox", { name: "HTTPS" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  },
+};
+
+/** `compact` density tightens the gap between rows. */
+export const Density: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-start gap-10">
+      <CheckboxGroup density="comfortable" defaultValue={["daily"]} aria-label="Comfortable">
+        <Checkbox tone="neutral" value="daily" label="Daily" />
+        <Checkbox tone="neutral" value="weekly" label="Weekly" />
+      </CheckboxGroup>
+      <CheckboxGroup density="compact" defaultValue={["daily"]} aria-label="Compact">
+        <Checkbox tone="neutral" value="daily" label="Daily" />
+        <Checkbox tone="neutral" value="weekly" label="Weekly" />
+      </CheckboxGroup>
+    </div>
+  ),
+};
+
+/** Selecting rows collects every checked value; multiple can be on at once. */
+export const SelectionBehavior: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { density: "comfortable", defaultValue: [] },
+  render: (args) => (
+    <CheckboxGroup {...args} aria-label="Allowed protocols">
+      <Checkbox tone="neutral" value="http" label="HTTP" />
+      <Checkbox tone="neutral" value="https" label="HTTPS" />
+    </CheckboxGroup>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const http = canvas.getByRole("checkbox", { name: "HTTP" });
+    const https = canvas.getByRole("checkbox", { name: "HTTPS" });
+    await expect(http).toHaveAttribute("aria-checked", "false");
+
+    await userEvent.click(http);
+    await expect(http).toHaveAttribute("aria-checked", "true");
+
+    await userEvent.click(https);
+    await expect(http).toHaveAttribute("aria-checked", "true");
+    await expect(https).toHaveAttribute("aria-checked", "true");
+  },
+};
diff --git a/packages/propel/src/components/checkbox-group/index.tsx b/packages/propel/src/components/checkbox-group/index.tsx
new file mode 100644
index 0000000..cdd4aa4
--- /dev/null
+++ b/packages/propel/src/components/checkbox-group/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/checkbox-group` only
+// when you need the lower-level parts.
+export * from "../../ui/checkbox-group";
diff --git a/packages/propel/src/components/checkbox/checkbox.stories.tsx b/packages/propel/src/components/checkbox/checkbox.stories.tsx
index c14d5fe..1708df0 100644
--- a/packages/propel/src/components/checkbox/checkbox.stories.tsx
+++ b/packages/propel/src/components/checkbox/checkbox.stories.tsx
@@ -75,15 +75,15 @@ export const WithLabel: Story = {
 };
 
 /**
- * An optional `leadingIcon` sits between the box and the label, matching the Figma "checkbox with
- * label" icon slot.
+ * An optional `inlineStartNode` sits between the box and the label, matching the Figma "checkbox
+ * with label" icon slot.
  */
 export const WithIcon: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <Checkbox
       tone="neutral"
-      leadingIcon={<Repeat aria-hidden className="size-3.5" />}
+      inlineStartNode={<Repeat aria-hidden className="size-3.5" />}
       label="Sync automatically"
       defaultChecked
     />
diff --git a/packages/propel/src/components/checkbox/checkbox.tsx b/packages/propel/src/components/checkbox/checkbox.tsx
new file mode 100644
index 0000000..f601c70
--- /dev/null
+++ b/packages/propel/src/components/checkbox/checkbox.tsx
@@ -0,0 +1,69 @@
+import { cx } from "class-variance-authority";
+import * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  Checkbox as CheckboxRoot,
+  CheckboxGlyph,
+  CheckboxIndicator,
+  type CheckboxProps as CheckboxRootProps,
+} from "../../ui/checkbox";
+
+export type { CheckboxTone } from "../../ui/checkbox";
+
+export type CheckboxProps = CheckboxRootProps & {
+  /**
+   * Optional text shown beside the box; the whole row becomes the clickable label. Omit it for a
+   * bare checkbox (just the box) — in that case give the box an accessible name with `aria-label`
+   * or `aria-labelledby`.
+   */
+  label?: React.ReactNode;
+  /**
+   * Node shown between the box and the label (inline-start), matching the Figma "checkbox with
+   * label" icon slot. Only rendered when `label` is present. Sized to `--node-size` (14px).
+   * Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made checkbox: composes the atomic `Checkbox` box with its `CheckboxIndicator`/glyph,
+ * and optionally wraps the row in a clickable `label` with an icon slot.
+ */
+export function Checkbox({ tone, label, inlineStartNode, id, ...props }: CheckboxProps) {
+  // Generate a stable id so an explicit `label` can be associated with the box.
+  const generatedId = React.useId();
+  const checkboxId = id ?? generatedId;
+
+  const box = (
+    <CheckboxRoot id={checkboxId} tone={tone} {...props}>
+      <CheckboxIndicator>
+        <CheckboxGlyph indeterminate={props.indeterminate} />
+      </CheckboxIndicator>
+    </CheckboxRoot>
+  );
+
+  if (label == null) return box;
+
+  return (
+    <label
+      // Figma "Checkbox with label" (node 1274:109) wraps the row in a clickable
+      // chip: `px-2 py-1` (8px/4px) padding and a `rounded-sm` corner, with a
+      // transparent-layer hover background (hover state 1276:15 →
+      // `bg-layer-transparent-hover`). The standalone box owns its own styling.
+      className={cx(
+        "inline-flex items-center gap-2 rounded-sm px-2 py-1 text-13 text-secondary transition-colors",
+        props.disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-transparent-hover",
+      )}
+      htmlFor={checkboxId}
+    >
+      {box}
+      {inlineStartNode ? (
+        <NodeSlot aria-hidden className="text-icon-secondary [--node-size:0.875rem]">
+          {inlineStartNode}
+        </NodeSlot>
+      ) : null}
+      {label}
+    </label>
+  );
+}
diff --git a/packages/propel/src/components/checkbox/index.tsx b/packages/propel/src/components/checkbox/index.tsx
index 235a12d..830c40d 100644
--- a/packages/propel/src/components/checkbox/index.tsx
+++ b/packages/propel/src/components/checkbox/index.tsx
@@ -1,162 +1,10 @@
-import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { Check, Minus } from "lucide-react";
-import * as React from "react";
-
-// The box follows the Figma "Checkbox" component: a single 16px square
-// (`size-4`) with a 4px radius (`rounded-sm`) and a 1px border. There is only
-// one size in Figma, so there is no `magnitude` axis.
-const checkboxVariants = cva(
-  cx(
-    // `align-top` keeps the inline-level box anchored to the top of its line box
-    // so it does NOT move vertically when the check/dash indicator mounts. An
-    // empty `inline-flex` element and one with a flex child baseline-align to the
-    // surrounding text differently; pinning the alignment makes the box geometry
-    // identical across unchecked / checked / indeterminate (no shift).
-    "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border-sm align-top",
-    "transition-colors outline-none",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-1",
-    // Unchecked: just the tone-specific border (see the `tone` variants).
-    // Checked / indeterminate: the accent-primary fill is identical for every
-    // tone, so it lives here in the base rather than the tone variants. This
-    // keeps a tone-less `CheckboxVisual` from rendering a white check on no fill.
-    // A white icon sits on top. Base UI exposes these via `data-*` attributes.
-    "data-checked:border-transparent data-checked:bg-accent-primary data-checked:text-icon-on-color",
-    "data-indeterminate:border-transparent data-indeterminate:bg-accent-primary data-indeterminate:text-icon-on-color",
-    // Disabled: muted border/fill and no pointer; overrides the checked fill.
-    "data-disabled:cursor-not-allowed data-disabled:border-disabled data-disabled:bg-transparent",
-    "data-disabled:data-checked:border-transparent data-disabled:data-checked:bg-layer-disabled data-disabled:data-checked:text-icon-disabled",
-    "data-disabled:data-indeterminate:border-transparent data-disabled:data-indeterminate:bg-layer-disabled data-disabled:data-indeterminate:text-icon-disabled",
-  ),
-  {
-    variants: {
-      tone: {
-        // Neutral: resting `icon-tertiary` border while unchecked. The checked
-        // fill is the shared accent-primary defined in the base above.
-        neutral: "border-icon-tertiary",
-        // The Figma "Error" state: only the *unchecked* border turns danger/red.
-        // Once checked the fill is the same accent blue as every other tone (the
-        // base `data-[checked]`/`data-[indeterminate]` rules above).
-        danger: "border-danger-strong",
-      },
-    },
-  },
-);
-
-type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;
-
-export type CheckboxTone = NonNullable<CheckboxVariantProps["tone"]>;
-
-// The check / dash glyph for the box, shared by the interactive Checkbox and the
-// presentational CheckboxVisual.
-function CheckboxGlyph({ indeterminate }: { indeterminate?: boolean }) {
-  return indeterminate ? (
-    <Minus aria-hidden className="size-3" />
-  ) : (
-    <Check aria-hidden className="size-3" />
-  );
-}
-
-export type CheckboxVisualProps = {
-  /** Resting color of the box. `danger` is the Figma "Error" state. */
-  tone: CheckboxTone;
-  /** Whether the box shows as checked. */
-  checked?: boolean;
-  /** Whether the box shows the indeterminate dash (wins over `checked`). */
-  indeterminate?: boolean;
-  /** Whether the box shows as disabled. */
-  disabled?: boolean;
-};
-
-/**
- * A purely presentational copy of the `Checkbox` box — same tokens and states, but a
- * non-interactive `<span>` with no `role`/focus. Use it when a checkbox _appearance_ is needed
- * inside another interactive control (e.g. a menu `menuitemcheckbox` row), where nesting a real
- * checkbox would be an ARIA `nested-interactive` violation. The parent control owns the state and
- * the a11y semantics.
- */
-export function CheckboxVisual({ tone, checked, indeterminate, disabled }: CheckboxVisualProps) {
-  return (
-    <span
-      aria-hidden
-      // Mirror Base UI's data attributes so `checkboxVariants` styles the box the same
-      // way it does the interactive Checkbox.
-      data-checked={checked && !indeterminate ? "" : undefined}
-      data-indeterminate={indeterminate ? "" : undefined}
-      data-disabled={disabled ? "" : undefined}
-      className={checkboxVariants({ tone })}
-    >
-      {checked || indeterminate ? <CheckboxGlyph indeterminate={indeterminate} /> : null}
-    </span>
-  );
-}
-
-export type CheckboxProps = Omit<
-  React.ComponentProps<typeof BaseCheckbox.Root>,
-  "className" | "render" | "style"
-> & {
-  /** Resting color of the box. `danger` is the Figma "Error" state. */
-  tone: CheckboxTone;
-  /**
-   * Optional text shown beside the box; the whole row becomes the clickable label. Omit it for a
-   * bare checkbox (just the box) — in that case give the box an accessible name with `aria-label`
-   * or `aria-labelledby`.
-   */
-  label?: React.ReactNode;
-  /**
-   * Optional icon shown between the box and the label, matching the Figma "checkbox with label"
-   * icon slot. Only rendered when `label` is present. Named `leadingIcon` (not `icon`) to match
-   * Button/Input, so a `trailingIcon` can be added later without a breaking rename.
-   */
-  leadingIcon?: React.ReactNode;
-};
-
-export function Checkbox({ tone, label, leadingIcon, id, ...props }: CheckboxProps) {
-  // Generate a stable id so an explicit `label` can be associated with the box.
-  const generatedId = React.useId();
-  const checkboxId = id ?? generatedId;
-
-  const box = (
-    <BaseCheckbox.Root
-      id={checkboxId}
-      // No `className`/`style` props (Omit'd above); the box owns its styling so
-      // every checkbox in the system looks the same. Base UI renders a real
-      // checkbox with `aria-checked` (including `mixed` for indeterminate).
-      className={checkboxVariants({ tone })}
-      {...props}
-    >
-      <BaseCheckbox.Indicator
-        // Only mounted while checked / indeterminate (no `keepMounted`), so the
-        // box is empty when unchecked. The dash wins for the mixed state;
-        // otherwise a check. Decorative — the Root carries the a11y state.
-        className="flex items-center justify-center"
-      >
-        <CheckboxGlyph indeterminate={props.indeterminate} />
-      </BaseCheckbox.Indicator>
-    </BaseCheckbox.Root>
-  );
-
-  if (label == null) return box;
-
-  return (
-    <label
-      // Figma "Checkbox with label" (node 1274:109) wraps the row in a clickable
-      // chip: `px-2 py-1` (8px/4px) padding and a `rounded-sm` corner, with a
-      // transparent-layer hover background (hover state 1276:15 →
-      // `bg-layer-transparent-hover`). The standalone box owns its own styling.
-      className={cx(
-        "inline-flex items-center gap-2 rounded-sm px-2 py-1 text-13 text-secondary transition-colors",
-        props.disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-layer-transparent-hover",
-      )}
-      htmlFor={checkboxId}
-    >
-      {box}
-      {leadingIcon ? (
-        <span className="flex size-3.5 shrink-0 items-center justify-center text-icon-secondary">
-          {leadingIcon}
-        </span>
-      ) : null}
-      {label}
-    </label>
-  );
-}
+export { Checkbox, type CheckboxProps, type CheckboxTone } from "./checkbox";
+// Re-export the presentational visual + atomic parts so the full checkbox surface is importable
+// from this convenience.
+export {
+  type CheckboxIndicatorProps,
+  CheckboxIndicator,
+  CheckboxGlyph,
+  CheckboxVisual,
+  type CheckboxVisualProps,
+} from "../../ui/checkbox";
diff --git a/packages/propel/src/components/collapsible/collapsible.stories.tsx b/packages/propel/src/components/collapsible/collapsible.stories.tsx
new file mode 100644
index 0000000..6aa0b98
--- /dev/null
+++ b/packages/propel/src/components/collapsible/collapsible.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Collapsible } from "./index";
+
+// Components-tier story: the ready-made `<Collapsible trigger=…>body</Collapsible>` wrapper that
+// wires the trigger and panel for the 90% case. The UI-tier story assembles the atomic parts.
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  args: {
+    trigger: "Recent activity",
+    children: "3 work items updated in the last hour.",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The default disclosure: collapsed on mount, click the trigger to reveal the body. */
+export const Default: Story = {};
+
+/** `defaultOpen` renders the panel expanded on mount. */
+export const DefaultOpen: Story = {
+  args: { defaultOpen: true },
+};
+
+/** Behavior test: the trigger toggles `aria-expanded` and shows/hides the body. */
+export const Toggle: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { trigger: "Toggle", children: "Panel content" },
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Toggle" });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await expect(canvas.getByText("Panel content")).toBeVisible();
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+  },
+};
diff --git a/packages/propel/src/components/collapsible/collapsible.tsx b/packages/propel/src/components/collapsible/collapsible.tsx
new file mode 100644
index 0000000..4cf0157
--- /dev/null
+++ b/packages/propel/src/components/collapsible/collapsible.tsx
@@ -0,0 +1,29 @@
+import type * as React from "react";
+
+import {
+  Collapsible as CollapsibleRoot,
+  type CollapsibleProps as CollapsibleRootProps,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+} from "../../ui/collapsible";
+
+export type CollapsibleProps = CollapsibleRootProps & {
+  /** The button content that opens and closes the panel. */
+  trigger: React.ReactNode;
+  /** The collapsible content region. */
+  children: React.ReactNode;
+};
+
+/**
+ * The ready-made collapsible: a single show/hide disclosure that wires the trigger and panel for
+ * the 90% case. Pass `trigger` for the toggle button and `children` for the body; forward
+ * `defaultOpen` (uncontrolled) or `open` + `onOpenChange` (controlled) to drive it.
+ */
+export function Collapsible({ trigger, children, ...props }: CollapsibleProps) {
+  return (
+    <CollapsibleRoot {...props}>
+      <CollapsibleTrigger>{trigger}</CollapsibleTrigger>
+      <CollapsiblePanel>{children}</CollapsiblePanel>
+    </CollapsibleRoot>
+  );
+}
diff --git a/packages/propel/src/components/collapsible/index.tsx b/packages/propel/src/components/collapsible/index.tsx
new file mode 100644
index 0000000..de000fc
--- /dev/null
+++ b/packages/propel/src/components/collapsible/index.tsx
@@ -0,0 +1,8 @@
+export { Collapsible, type CollapsibleProps } from "./collapsible";
+// Re-export the atomic structural parts so a custom collapsible is importable from this convenience.
+export {
+  CollapsiblePanel,
+  type CollapsiblePanelProps,
+  CollapsibleTrigger,
+  type CollapsibleTriggerProps,
+} from "../../ui/collapsible";
diff --git a/packages/propel/src/components/combobox/combobox-content.tsx b/packages/propel/src/components/combobox/combobox-content.tsx
new file mode 100644
index 0000000..326aff7
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox-content.tsx
@@ -0,0 +1,32 @@
+import { ComboboxPopup, type ComboboxPopupProps } from "../../ui/combobox/combobox-popup";
+import { ComboboxPortal } from "../../ui/combobox/combobox-portal";
+import {
+  ComboboxPositioner,
+  type ComboboxPositionerProps,
+} from "../../ui/combobox/combobox-positioner";
+
+export type ComboboxContentProps = ComboboxPopupProps & {
+  /** Which side of the input the list opens toward. @default "bottom" */
+  side?: ComboboxPositionerProps["side"];
+  /** Distance in px between the input and the list. @default 4 */
+  sideOffset?: ComboboxPositionerProps["sideOffset"];
+  /** Alignment of the list relative to the input along `side`. @default "start" */
+  align?: ComboboxPositionerProps["align"];
+};
+
+/** The combobox list surface: portal + positioner + popup with Propel overlay styling. */
+export function ComboboxContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: ComboboxContentProps) {
+  return (
+    <ComboboxPortal>
+      <ComboboxPositioner side={side} sideOffset={sideOffset} align={align}>
+        <ComboboxPopup {...props}>{children}</ComboboxPopup>
+      </ComboboxPositioner>
+    </ComboboxPortal>
+  );
+}
diff --git a/packages/propel/src/components/combobox/combobox.stories.tsx b/packages/propel/src/components/combobox/combobox.stories.tsx
new file mode 100644
index 0000000..b8a9d1e
--- /dev/null
+++ b/packages/propel/src/components/combobox/combobox.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldError, FieldLabel } from "../field/index";
+import {
+  Combobox,
+  ComboboxClear,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxTrigger,
+} from "./index";
+
+const REGIONS = ["us-central-1", "us-east-1", "eu-central-1", "ap-west-1"];
+
+// Components-tier story: the ready-made `ComboboxContent` collapses the
+// portal/positioner/popup boilerplate into one element. The UI-tier `Combobox`
+// story assembles those raw parts by hand.
+const meta = {
+  title: "Components/Combobox",
+  component: Combobox,
+  subcomponents: {
+    ComboboxLabel,
+    ComboboxInputGroup,
+    ComboboxInput,
+    ComboboxClear,
+    ComboboxTrigger,
+    ComboboxContent,
+    ComboboxList,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxEmpty,
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Combobox using the ready-made `ComboboxContent` surface for filterable selection. */
+export const Default: Story = {
+  args: { items: REGIONS, required: true },
+  render: (args) => (
+    <Field name="region">
+      <Combobox {...args}>
+        <FieldLabel magnitude="md">Region</FieldLabel>
+        <ComboboxInputGroup>
+          <ComboboxInput placeholder="e.g. eu-central-1" />
+          <ComboboxClear />
+          <ComboboxTrigger />
+        </ComboboxInputGroup>
+        <ComboboxContent>
+          <ComboboxEmpty>No matches</ComboboxEmpty>
+          <ComboboxList>
+            {REGIONS.map((region) => (
+              <ComboboxItem key={region} value={region}>
+                <ComboboxItemIndicator />
+                <span>{region}</span>
+              </ComboboxItem>
+            ))}
+          </ComboboxList>
+        </ComboboxContent>
+        <FieldError magnitude="md" />
+      </Combobox>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "eu");
+    await expect(within(document.body).getByText("eu-central-1")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/combobox/index.tsx b/packages/propel/src/components/combobox/index.tsx
new file mode 100644
index 0000000..0c1a902
--- /dev/null
+++ b/packages/propel/src/components/combobox/index.tsx
@@ -0,0 +1,23 @@
+export { ComboboxContent, type ComboboxContentProps } from "./combobox-content";
+// Re-export the atomic combobox parts so a full combobox can be assembled from one entry.
+export {
+  Combobox,
+  type ComboboxProps,
+  ComboboxClear,
+  type ComboboxClearProps,
+  ComboboxEmpty,
+  type ComboboxEmptyProps,
+  ComboboxInput,
+  type ComboboxInputProps,
+  ComboboxInputGroup,
+  type ComboboxInputGroupProps,
+  ComboboxItem,
+  type ComboboxItemProps,
+  ComboboxItemIndicator,
+  type ComboboxItemIndicatorProps,
+  ComboboxLabel,
+  type ComboboxLabelProps,
+  ComboboxList,
+  ComboboxTrigger,
+  type ComboboxTriggerProps,
+} from "../../ui/combobox";
diff --git a/packages/propel/src/components/context-menu/context-menu-item.tsx b/packages/propel/src/components/context-menu/context-menu-item.tsx
new file mode 100644
index 0000000..2d773ec
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-item.tsx
@@ -0,0 +1,45 @@
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  ContextMenuItem as ContextMenuItemRoot,
+  type ContextMenuItemProps as ContextMenuItemRootProps,
+} from "../../ui/context-menu";
+
+export type ContextMenuItemProps = Omit<ContextMenuItemRootProps, "label"> & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content after the label. */
+  inlineEndNode?: React.ReactNode;
+  /** Single-select selected state. */
+  selected?: boolean;
+};
+
+/**
+ * The ready-made menu row: composes the atomic `ContextMenuItem` and lays out optional leading and
+ * trailing content slots, the label, and a trailing check for single-select selected state.
+ */
+export function ContextMenuItem({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  selected,
+  children,
+  ...props
+}: ContextMenuItemProps) {
+  return (
+    <ContextMenuItemRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      {selected ? (
+        <span className="flex size-4 shrink-0 items-center justify-center">
+          <Check className="size-4 text-icon-accent-primary" aria-hidden="true" />
+        </span>
+      ) : null}
+    </ContextMenuItemRoot>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-link-item.tsx b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
new file mode 100644
index 0000000..4a8e8c7
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-link-item.tsx
@@ -0,0 +1,36 @@
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  ContextMenuLinkItem as ContextMenuLinkItemRoot,
+  type ContextMenuLinkItemProps as ContextMenuLinkItemRootProps,
+} from "../../ui/context-menu";
+
+export type ContextMenuLinkItemProps = Omit<ContextMenuLinkItemRootProps, "label"> & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content after the label. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made navigational menu row: composes the atomic `ContextMenuLinkItem` and lays out
+ * optional leading and trailing content slots around the label.
+ */
+export function ContextMenuLinkItem({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  children,
+  ...props
+}: ContextMenuLinkItemProps) {
+  return (
+    <ContextMenuLinkItemRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+    </ContextMenuLinkItemRoot>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
new file mode 100644
index 0000000..da7957e
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu-submenu-trigger.tsx
@@ -0,0 +1,42 @@
+import { ChevronRight } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  ContextMenuSubmenuTrigger as ContextMenuSubmenuTriggerRoot,
+  type ContextMenuSubmenuTriggerProps as ContextMenuSubmenuTriggerRootProps,
+} from "../../ui/context-menu";
+
+export type ContextMenuSubmenuTriggerProps = Omit<ContextMenuSubmenuTriggerRootProps, "label"> & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content before the chevron. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made submenu trigger: composes the atomic `ContextMenuSubmenuTrigger` and lays out
+ * optional leading and trailing content slots around the label, plus the chevron that points toward
+ * the submenu.
+ */
+export function ContextMenuSubmenuTrigger({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  children,
+  ...props
+}: ContextMenuSubmenuTriggerProps) {
+  return (
+    <ContextMenuSubmenuTriggerRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      <ChevronRight
+        className="size-4 shrink-0 text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100"
+        aria-hidden="true"
+      />
+    </ContextMenuSubmenuTriggerRoot>
+  );
+}
diff --git a/packages/propel/src/components/context-menu/context-menu.stories.tsx b/packages/propel/src/components/context-menu/context-menu.stories.tsx
new file mode 100644
index 0000000..19351dc
--- /dev/null
+++ b/packages/propel/src/components/context-menu/context-menu.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ClipboardPaste, Copy, Scissors, Trash2 } from "lucide-react";
+import { expect, fireEvent, waitFor } from "storybook/test";
+
+import {
+  ContextMenu,
+  ContextMenuItem,
+  ContextMenuPopup,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "./index";
+
+// Components-tier story: the rich `ContextMenuItem` lays out an icon + label + a
+// trailing shortcut, plus a single-select check. The UI-tier story composes the
+// raw `ContextMenuItem` rows by hand.
+const meta = {
+  title: "Components/ContextMenu",
+  component: ContextMenu,
+  subcomponents: {
+    ContextMenuTrigger,
+    ContextMenuPortal,
+    ContextMenuPositioner,
+    ContextMenuPopup,
+    ContextMenuItem,
+    ContextMenuSeparator,
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const triggerClass =
+  "flex h-32 w-72 items-center justify-center rounded-lg border-sm border-dashed border-subtle text-13 text-tertiary select-none";
+
+/** Right-click the area to open a ready-made menu of icon + label rows. */
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger render={<div className={triggerClass} />}>
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuPortal>
+        <ContextMenuPositioner>
+          <ContextMenuPopup>
+            <ContextMenuItem
+              inlineStartNode={<Scissors />}
+              label="Cut"
+              inlineEndNode={<span className="text-12 text-tertiary">⌘X</span>}
+            />
+            <ContextMenuItem
+              inlineStartNode={<Copy />}
+              label="Copy"
+              inlineEndNode={<span className="text-12 text-tertiary">⌘C</span>}
+            />
+            <ContextMenuItem
+              inlineStartNode={<ClipboardPaste />}
+              label="Paste"
+              inlineEndNode={<span className="text-12 text-tertiary">⌘V</span>}
+            />
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              inlineStartNode={<Trash2 className="text-danger-primary" />}
+              label={<span className="text-danger-primary">Delete</span>}
+            />
+          </ContextMenuPopup>
+        </ContextMenuPositioner>
+      </ContextMenuPortal>
+    </ContextMenu>
+  ),
+  play: async ({ canvas }) => {
+    await fireEvent.contextMenu(canvas.getByText("Right-click here"));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("Copy");
+    await expect(document.body).toHaveTextContent("Delete");
+  },
+};
diff --git a/packages/propel/src/components/context-menu/index.tsx b/packages/propel/src/components/context-menu/index.tsx
new file mode 100644
index 0000000..4f5f2c2
--- /dev/null
+++ b/packages/propel/src/components/context-menu/index.tsx
@@ -0,0 +1,40 @@
+export { ContextMenuItem, type ContextMenuItemProps } from "./context-menu-item";
+export { ContextMenuLinkItem, type ContextMenuLinkItemProps } from "./context-menu-link-item";
+export {
+  ContextMenuSubmenuTrigger,
+  type ContextMenuSubmenuTriggerProps,
+} from "./context-menu-submenu-trigger";
+// Re-export the atomic structural parts so a full context menu is importable from this convenience.
+export {
+  ContextMenu,
+  ContextMenuArrow,
+  type ContextMenuArrowProps,
+  ContextMenuBackdrop,
+  type ContextMenuBackdropProps,
+  ContextMenuCheckboxItem,
+  ContextMenuCheckboxItemIndicator,
+  type ContextMenuCheckboxItemIndicatorProps,
+  type ContextMenuCheckboxItemProps,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  type ContextMenuGroupLabelProps,
+  type ContextMenuGroupProps,
+  ContextMenuPopup,
+  type ContextMenuPopupProps,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  type ContextMenuPositionerProps,
+  type ContextMenuProps,
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupProps,
+  ContextMenuRadioItem,
+  ContextMenuRadioItemIndicator,
+  type ContextMenuRadioItemIndicatorProps,
+  type ContextMenuRadioItemProps,
+  ContextMenuSeparator,
+  type ContextMenuSeparatorProps,
+  ContextMenuSubmenuRoot,
+  type ContextMenuSubmenuRootProps,
+  ContextMenuTrigger,
+  type ContextMenuTriggerProps,
+} from "../../ui/context-menu";
diff --git a/packages/propel/src/components/dialog/dialog-content.tsx b/packages/propel/src/components/dialog/dialog-content.tsx
new file mode 100644
index 0000000..8cf045b
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog-content.tsx
@@ -0,0 +1,24 @@
+import {
+  DialogBackdrop,
+  DialogPopup,
+  type DialogPopupProps,
+  DialogPortal,
+  DialogViewport,
+} from "../../ui/dialog";
+
+export type DialogContentProps = DialogPopupProps;
+
+/**
+ * Convenience that composes the dialog overlay boilerplate — portal, backdrop, centering viewport,
+ * and the centered popup — so a consumer only writes the trigger and the popup body.
+ */
+export function DialogContent({ children, ...props }: DialogContentProps) {
+  return (
+    <DialogPortal>
+      <DialogBackdrop />
+      <DialogViewport>
+        <DialogPopup {...props}>{children}</DialogPopup>
+      </DialogViewport>
+    </DialogPortal>
+  );
+}
diff --git a/packages/propel/src/components/dialog/dialog.stories.tsx b/packages/propel/src/components/dialog/dialog.stories.tsx
new file mode 100644
index 0000000..443f2f4
--- /dev/null
+++ b/packages/propel/src/components/dialog/dialog.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "./index";
+
+// Components-tier story: uses the ready-made `DialogContent`, which composes the
+// portal/backdrop/centering-viewport/popup so a consumer only writes the trigger
+// and the popup body.
+const triggerClass =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  subcomponents: { DialogTrigger, DialogContent, DialogTitle, DialogDescription, DialogClose },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A confirmation dialog: title, description, and a footer of cancel / confirm actions. */
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger render={<button type="button" className={triggerClass} />}>
+        Delete project
+      </DialogTrigger>
+      <DialogContent>
+        <div className="flex w-80 flex-col gap-2">
+          <div className="flex items-start justify-between gap-4">
+            <DialogTitle>Delete project</DialogTitle>
+            <DialogClose
+              render={
+                <button type="button" aria-label="Close" className="size-7">
+                  <X aria-hidden className="size-4" />
+                </button>
+              }
+            />
+          </div>
+          <DialogDescription>
+            This permanently removes the project and all of its work items. This action can&apos;t
+            be undone.
+          </DialogDescription>
+          <div className="mt-2 flex justify-end gap-2">
+            <DialogClose render={<button type="button" className={triggerClass} />}>
+              Cancel
+            </DialogClose>
+            <DialogClose
+              render={
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center rounded-md bg-danger-primary px-3 text-13 text-on-color outline-none"
+                />
+              }
+            >
+              Delete
+            </DialogClose>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  ),
+  play: async ({ canvas, step }) => {
+    await step("open the dialog", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Delete project" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await expect(within(dialog).getByText(/permanently removes/)).toBeInTheDocument();
+    });
+    await step("Cancel closes the dialog", async () => {
+      const dialog = within(document.body).getByRole("dialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+/**
+ * Keyboard ARIA pattern: opening the dialog moves focus into it and `Escape` closes it, restoring
+ * focus to the trigger. Tagged out of the sidebar/docs/manifest while still running under `test`.
+ */
+export const EscapeCloses: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Dialog>
+      <DialogTrigger render={<button type="button" className={triggerClass} />}>
+        Open settings
+      </DialogTrigger>
+      <DialogContent>
+        <div className="flex w-80 flex-col gap-2">
+          <DialogTitle>Settings</DialogTitle>
+          <DialogDescription>Press Escape to dismiss.</DialogDescription>
+        </div>
+      </DialogContent>
+    </Dialog>
+  ),
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole("button", { name: "Open settings" });
+    await userEvent.click(trigger);
+    await within(document.body).findByRole("dialog");
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+    await expect(trigger).toHaveFocus();
+  },
+};
diff --git a/packages/propel/src/components/dialog/index.tsx b/packages/propel/src/components/dialog/index.tsx
new file mode 100644
index 0000000..07583dd
--- /dev/null
+++ b/packages/propel/src/components/dialog/index.tsx
@@ -0,0 +1,14 @@
+export { DialogContent, type DialogContentProps } from "./dialog-content";
+// Re-export the atomic parts so a full dialog can be assembled from one entry.
+export {
+  Dialog,
+  type DialogProps,
+  DialogClose,
+  type DialogCloseProps,
+  DialogDescription,
+  type DialogDescriptionProps,
+  DialogTitle,
+  type DialogTitleProps,
+  DialogTrigger,
+  type DialogTriggerProps,
+} from "../../ui/dialog";
diff --git a/packages/propel/src/components/drawer/drawer-panel.tsx b/packages/propel/src/components/drawer/drawer-panel.tsx
new file mode 100644
index 0000000..8e41801
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer-panel.tsx
@@ -0,0 +1,31 @@
+import {
+  DrawerBackdrop,
+  DrawerContent,
+  DrawerPopup,
+  type DrawerPopupProps,
+  DrawerPortal,
+  DrawerViewport,
+} from "../../ui/drawer";
+
+export type DrawerPanelProps = DrawerPopupProps;
+
+/**
+ * Convenience that composes the drawer overlay boilerplate — portal, backdrop, edge viewport,
+ * sliding popup, and the padded inner content region — so a consumer only writes the trigger and
+ * the panel body.
+ *
+ * Named `DrawerPanel` to avoid clashing with the atomic `DrawerContent` part (the padded inner
+ * content region), which this convenience composes internally.
+ */
+export function DrawerPanel({ children, ...props }: DrawerPanelProps) {
+  return (
+    <DrawerPortal>
+      <DrawerBackdrop />
+      <DrawerViewport>
+        <DrawerPopup {...props}>
+          <DrawerContent>{children}</DrawerContent>
+        </DrawerPopup>
+      </DrawerViewport>
+    </DrawerPortal>
+  );
+}
diff --git a/packages/propel/src/components/drawer/drawer.stories.tsx b/packages/propel/src/components/drawer/drawer.stories.tsx
new file mode 100644
index 0000000..0e81ef6
--- /dev/null
+++ b/packages/propel/src/components/drawer/drawer.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerDescription,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./index";
+
+// Components-tier story: uses the ready-made `DrawerPanel`, which composes the
+// portal/backdrop/edge-viewport/sliding-popup/padded-content so a consumer only
+// writes the trigger and the panel body.
+const triggerClass =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+const meta = {
+  title: "Components/Drawer",
+  component: Drawer,
+  subcomponents: { DrawerTrigger, DrawerPanel, DrawerTitle, DrawerDescription, DrawerClose },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A right-edge panel: title, dismiss button, and body. Opens from the trigger and slides in. */
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger render={<button type="button" className={triggerClass} />}>
+        Open details
+      </DrawerTrigger>
+      <DrawerPanel>
+        <div className="flex items-start justify-between gap-4">
+          <DrawerTitle>Work item details</DrawerTitle>
+          <DrawerClose
+            render={
+              <button type="button" aria-label="Close" className="size-7">
+                <X aria-hidden className="size-4" />
+              </button>
+            }
+          />
+        </div>
+        <DrawerDescription>Edit the fields for this work item.</DrawerDescription>
+        <div className="text-14 text-secondary">Panel body content goes here.</div>
+      </DrawerPanel>
+    </Drawer>
+  ),
+  play: async ({ canvas, step }) => {
+    await step("open the drawer", async () => {
+      await userEvent.click(canvas.getByRole("button", { name: "Open details" }));
+      const dialog = await within(document.body).findByRole("dialog");
+      await expect(within(dialog).getByText("Work item details")).toBeInTheDocument();
+    });
+    await step("close it with the dismiss button", async () => {
+      const dialog = within(document.body).getByRole("dialog");
+      await userEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+      await waitFor(() =>
+        expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+/**
+ * Keyboard ARIA pattern: `Escape` closes the drawer and restores focus to the trigger. Tagged out
+ * of the sidebar/docs/manifest while still running under the default `test` tag.
+ */
+export const EscapeCloses: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Drawer>
+      <DrawerTrigger render={<button type="button" className={triggerClass} />}>
+        Open filters
+      </DrawerTrigger>
+      <DrawerPanel>
+        <DrawerTitle>Filters</DrawerTitle>
+        <DrawerDescription>Press Escape to dismiss.</DrawerDescription>
+      </DrawerPanel>
+    </Drawer>
+  ),
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole("button", { name: "Open filters" });
+    await userEvent.click(trigger);
+    await within(document.body).findByRole("dialog");
+    await userEvent.keyboard("{Escape}");
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+    await expect(trigger).toHaveFocus();
+  },
+};
diff --git a/packages/propel/src/components/drawer/index.tsx b/packages/propel/src/components/drawer/index.tsx
new file mode 100644
index 0000000..728fbe7
--- /dev/null
+++ b/packages/propel/src/components/drawer/index.tsx
@@ -0,0 +1,20 @@
+export { DrawerPanel, type DrawerPanelProps } from "./drawer-panel";
+// Re-export the atomic parts so a full drawer can be assembled from one entry.
+export {
+  Drawer,
+  type DrawerProps,
+  DrawerClose,
+  type DrawerCloseProps,
+  DrawerContent,
+  type DrawerContentProps,
+  DrawerDescription,
+  type DrawerDescriptionProps,
+  DrawerProvider,
+  type DrawerProviderProps,
+  DrawerSwipeArea,
+  type DrawerSwipeAreaProps,
+  DrawerTitle,
+  type DrawerTitleProps,
+  DrawerTrigger,
+  type DrawerTriggerProps,
+} from "../../ui/drawer";
diff --git a/packages/propel/src/components/dropdown/index.tsx b/packages/propel/src/components/dropdown/index.tsx
deleted file mode 100644
index ad46ce4..0000000
--- a/packages/propel/src/components/dropdown/index.tsx
+++ /dev/null
@@ -1,543 +0,0 @@
-import { Menu } from "@base-ui/react/menu";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { Check, ChevronRight, Search } from "lucide-react";
-import * as React from "react";
-
-import { useControllableState } from "../../hooks/use-controllable-state/index";
-import { nodeSlotClass } from "../../internal/node-slot";
-import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
-import { CheckboxVisual } from "../checkbox/index";
-
-/**
- * The dropdown menu root — a Base UI `Menu.Root`. Holds open state and wires the trigger to the
- * content. Compose it with `DropdownTrigger` + `DropdownContent`:
- *
- * ```tsx
- * <Dropdown>
- *   <DropdownTrigger>Open</DropdownTrigger>
- *   <DropdownContent>
- *     <DropdownItem label="Edit" />
- *     <DropdownSeparator />
- *     <DropdownItem label="Delete" />
- *   </DropdownContent>
- * </Dropdown>;
- * ```
- */
-type BaseMenuRootProps = React.ComponentProps<typeof Menu.Root>;
-
-export type DropdownProps = Omit<
-  BaseMenuRootProps,
-  "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"
-> & {
-  /** Whether the menu is open. Controlled; pair with `onOpenChange`. */
-  open?: boolean;
-  /** Whether the menu is open on mount. Uncontrolled. @default false */
-  defaultOpen?: boolean;
-  /** Called with the next open state when the menu opens or closes. */
-  onOpenChange?: BaseMenuRootProps["onOpenChange"];
-  /**
-   * Modal behavior while open: `true` locks page scroll and blocks outside pointer interaction.
-   *
-   * @default false
-   */
-  modal?: BaseMenuRootProps["modal"];
-  /** The trigger and menu surface (`DropdownTrigger`, `DropdownContent`). */
-  children?: React.ReactNode;
-};
-
-export function Dropdown(props: DropdownProps) {
-  return <Menu.Root {...props} />;
-}
-
-export type DropdownTriggerProps = Omit<
-  React.ComponentProps<typeof Menu.Trigger>,
-  "className" | "style"
->;
-
-/**
- * The element that opens the menu. Renders a `<button>` by default; pass `render` to project the
- * trigger onto your own element (e.g. an icon button).
- */
-export function DropdownTrigger(props: DropdownTriggerProps) {
-  return <Menu.Trigger {...props} />;
-}
-
-// The menu surface is the shared `OverlayPanel`: the deeper `overlay` shadow at `lg`
-// radius, capped at the available height, with the sticky search/footer outside the
-// scroll and the `role="menu"` list (`Menu.Popup`) scrolling inside it. `OverlayPanel`
-// wraps the menu in a `ScrollArea` as an ancestor, so `Menu.Popup`'s direct children
-// stay menuitems and the surface is ARIA-valid.
-type DropdownContentWidth = OverlayPanelWidth;
-
-export type DropdownContentProps = Omit<
-  React.ComponentProps<typeof Menu.Popup>,
-  "className" | "style"
-> & {
-  /** Which side of the trigger the menu opens toward. @default "bottom" */
-  side?: React.ComponentProps<typeof Menu.Positioner>["side"];
-  /** Distance in px between the trigger and the menu. @default 4 */
-  sideOffset?: React.ComponentProps<typeof Menu.Positioner>["sideOffset"];
-  /** Alignment of the menu relative to the trigger along `side`. @default "start" */
-  align?: React.ComponentProps<typeof Menu.Positioner>["align"];
-  /**
-   * Fixed menu width. `anchor` matches the trigger; `sm`/`md`/`lg` are the picker widths from Figma
-   * (256 / 288 / 384px). @default "anchor"
-   */
-  width?: DropdownContentWidth;
-  /**
-   * A sticky `DropdownSearch` pinned above the list, _outside_ the `role="menu"` element so the
-   * menu only contains menu items (ARIA `aria-required-children`).
-   */
-  search?: React.ReactNode;
-  /**
-   * A sticky `DropdownFooter` pinned below the list, _outside_ the `role="menu"` element (same ARIA
-   * reasoning as `search`).
-   */
-  footer?: React.ReactNode;
-};
-
-/**
- * The menu surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the menu renders in a
- * portal, positioned against the trigger, with propel's popover styling. Place
- * `DropdownItem`/`DropdownCheckboxItem`/`DropdownSeparator`/`DropdownGroup` as children — they
- * become the `role="menu"` list. Non-menuitem chrome (a search input, a footer note) must go
- * through the `search`/`footer` props so it sits outside the menu role and keeps the surface
- * ARIA-valid.
- */
-export function DropdownContent({
-  children,
-  side = "bottom",
-  sideOffset = 4,
-  align = "start",
-  width,
-  search,
-  footer,
-  ...props
-}: DropdownContentProps) {
-  return (
-    <Menu.Portal>
-      <Menu.Positioner side={side} sideOffset={sideOffset} align={align} className="outline-none">
-        <OverlayPanel elevation="overlay" radius="lg" width={width} header={search} footer={footer}>
-          <Menu.Popup className="p-1 outline-none" {...props}>
-            {children}
-          </Menu.Popup>
-        </OverlayPanel>
-      </Menu.Positioner>
-    </Menu.Portal>
-  );
-}
-
-// One row. `variant` is the Figma layout axis: `default` is a single line and
-// `with-description` stacks a muted second line. `selected`/`disabled` are primitive
-// state, not variants. Hover & keyboard-highlight share the subtle transparent
-// overlay; disabled fades the row.
-const dropdownItemVariants = cva(
-  cx(
-    // Items are 34px tall (Figma); `rounded-md` radius per design. `--node-size` sizes
-    // the icons dropped into the inline-start/end node slots (16px), like Button.
-    "group/item flex w-full gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-    "text-secondary",
-    "data-disabled:pointer-events-none data-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      variant: {
-        // Single-line rows: fixed 34px, content vertically centered.
-        default: "h-[34px] items-center",
-        // Two-line rows: 6px top padding (Figma) with the leading icon top-aligned
-        // (align-start) so it sits with the first line; the row grows for the
-        // description and keeps a matching 6px bottom.
-        "with-description": "min-h-[34px] items-start py-1.5",
-      },
-      // `default` is a normal selectable row (highlight on hover/keyboard). `link`
-      // is a "View all"-style affordance: a pointer cursor and no hover background.
-      emphasis: {
-        default: "cursor-default data-highlighted:bg-layer-transparent-hover",
-        link: "cursor-pointer",
-      },
-    },
-  },
-);
-
-type DropdownItemVariant = NonNullable<VariantProps<typeof dropdownItemVariants>["variant"]>;
-type DropdownItemEmphasis = NonNullable<VariantProps<typeof dropdownItemVariants>["emphasis"]>;
-
-export type DropdownItemProps = Omit<
-  React.ComponentProps<typeof Menu.Item>,
-  "className" | "style" | "label"
-> & {
-  /**
-   * Row layout (required). `default` is a single line; `with-description` stacks a muted second
-   * line under the label. Selected/disabled are state props, not variants.
-   */
-  variant: DropdownItemVariant;
-  /**
-   * Leading content before the label — an icon (sized to 16px), or a full-size control such as a
-   * `Checkbox`, `Radio`, `Avatar`, or a color swatch. Single-select rows should use `selected`
-   * instead. (Logical node slot, like Button's `inlineStartNode`.)
-   */
-  inlineStartNode?: React.ReactNode;
-  /** The primary text of the row. */
-  label?: React.ReactNode;
-  /** Muted secondary line under the label (use with `variant="with-description"`). */
-  description?: React.ReactNode;
-  /**
-   * Muted text shown inline after the label (e.g. a language's English name). Sits between the
-   * label and the trailing node, on the same line as the label.
-   */
-  secondaryText?: React.ReactNode;
-  /**
-   * Trailing content after the label — a `Badge` count, a keyboard shortcut, value text, or an icon
-   * (sized to 16px). (Logical node slot, like Button's `inlineEndNode`.)
-   */
-  inlineEndNode?: React.ReactNode;
-  /**
-   * Single-select selected state: keeps the row's own icon and marks the selection with a trailing
-   * checkmark (the row's icon is never replaced). Distinct from the multi-select
-   * `DropdownCheckboxItem`, which shows a `Checkbox` on every row.
-   */
-  selected?: boolean;
-  /**
-   * Row emphasis. `default` is a normal selectable row (highlights on hover/keyboard focus). `link`
-   * is a "View all"-style affordance — a pointer cursor and no hover background. @default
-   * "default"
-   */
-  emphasis?: DropdownItemEmphasis;
-};
-
-/**
- * A selectable menu row: an optional `inlineStartNode` (icon or full-size control) + label (+
- * optional description / inline secondary text / `inlineEndNode`) — all of it content, laid out by
- * `variant`. Closes the menu when clicked (Base UI default). Pass `selected` for the single-select
- * trailing-checkmark pattern.
- */
-export function DropdownItem({
-  variant,
-  emphasis = "default",
-  inlineStartNode,
-  label,
-  description,
-  secondaryText,
-  inlineEndNode,
-  selected,
-  children,
-  ...props
-}: DropdownItemProps) {
-  return (
-    <Menu.Item className={dropdownItemVariants({ variant, emphasis })} {...props}>
-      {/* The node slots size icons to `--node-size` (16px) and let full-size controls
-          (Checkbox/Avatar/swatch) size themselves; the row's text color cascades. */}
-      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
-      <span className="flex min-w-0 flex-1 flex-col">
-        <span className="flex min-w-0 items-baseline gap-1.5">
-          <span className="truncate">{label ?? children}</span>
-          {secondaryText != null ? (
-            <span className="shrink-0 truncate text-12 text-tertiary group-data-disabled/item:text-disabled">
-              {secondaryText}
-            </span>
-          ) : null}
-        </span>
-        {description != null ? (
-          <span className="truncate text-12 text-tertiary group-data-disabled/item:text-disabled">
-            {description}
-          </span>
-        ) : null}
-      </span>
-      {inlineEndNode != null ? <span className={nodeSlotClass}>{inlineEndNode}</span> : null}
-      {/* Selection is marked with a trailing check — the row's own node is kept. */}
-      {selected ? (
-        <span className="flex h-5 w-4 shrink-0 items-center justify-center">
-          <Check className="size-4 text-icon-accent-primary" aria-hidden="true" />
-        </span>
-      ) : null}
-    </Menu.Item>
-  );
-}
-
-export type DropdownCheckboxItemProps = Omit<
-  React.ComponentProps<typeof Menu.CheckboxItem>,
-  "className" | "style" | "label"
-> & {
-  /**
-   * Leading content shown after the checkbox — an icon (16px), a color swatch, an `Avatar`, or a
-   * priority glyph (Avatar for assignees, swatch for labels, etc.). (Logical node slot, like
-   * Button's `inlineStartNode`.)
-   */
-  inlineStartNode?: React.ReactNode;
-  /** The primary text of the row. */
-  label?: React.ReactNode;
-  /** Trailing content — typically value text or a count. (Logical node slot.) */
-  inlineEndNode?: React.ReactNode;
-};
-
-/**
- * A toggleable multi-select menu row. The leading control is the propel `Checkbox` component
- * (driven by this row's Base UI checkbox-item state, so the box reflects
- * `checked`/`indeterminate`/`disabled` without owning its own state). The row keeps the
- * `role="menuitemcheckbox"` a11y semantics and stays open on click. Control it with `checked` +
- * `onCheckedChange`, or leave it uncontrolled with `defaultChecked`.
- */
-export function DropdownCheckboxItem({
-  inlineStartNode,
-  label,
-  inlineEndNode,
-  checked,
-  defaultChecked,
-  onCheckedChange,
-  children,
-  ...props
-}: DropdownCheckboxItemProps) {
-  // Mirror the row's checked state so the visual propel Checkbox stays in sync for
-  // both controlled (`checked`) and uncontrolled (`defaultChecked`) usage. The
-  // shared `useControllableState` hook tracks the value internally only when
-  // uncontrolled. Base UI's change event carries an extra `details` argument, so we
-  // forward `onCheckedChange` straight from that handler (where both `next` and
-  // `details` are in scope) and use the hook purely to mirror the visual state.
-  const [isChecked, setChecked] = useControllableState<boolean>({
-    value: checked,
-    defaultValue: defaultChecked ?? false,
-  });
-
-  return (
-    <Menu.CheckboxItem
-      className={cx(
-        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-        "text-secondary",
-        "data-highlighted:bg-layer-transparent-hover",
-        "data-disabled:pointer-events-none data-disabled:text-disabled",
-      )}
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onCheckedChange={(next, details) => {
-        setChecked(next);
-        onCheckedChange?.(next, details);
-      }}
-      {...props}
-    >
-      {/*
-        Compose the propel Checkbox *appearance* via its presentational sibling
-        `CheckboxVisual` (a non-interactive `<span>`), so the row keeps a single
-        interactive control (`role="menuitemcheckbox"`) and stays ARIA-valid — a real
-        Checkbox here would be a `nested-interactive` violation. The row owns the
-        toggle; the box just mirrors `isChecked`.
-      */}
-      <span className="flex shrink-0 items-center">
-        <CheckboxVisual tone="neutral" checked={isChecked} disabled={props.disabled} />
-      </span>
-      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
-      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {inlineEndNode != null ? (
-        <span className="shrink-0 text-12 text-tertiary">{inlineEndNode}</span>
-      ) : null}
-    </Menu.CheckboxItem>
-  );
-}
-
-export type DropdownSeparatorProps = Omit<
-  React.ComponentProps<typeof Menu.Separator>,
-  "className" | "style"
->;
-
-/** A thin divider between groups of items. */
-export function DropdownSeparator(props: DropdownSeparatorProps) {
-  return <Menu.Separator className="-mx-1 my-1 border-t border-subtle" {...props} />;
-}
-
-export type DropdownGroupProps = Omit<
-  React.ComponentProps<typeof Menu.Group>,
-  "className" | "style"
->;
-
-/**
- * Groups related items so a `DropdownLabel` can title them with the correct accessibility
- * relationship. Place a `DropdownLabel` first, then the items.
- */
-export function DropdownGroup(props: DropdownGroupProps) {
-  return <Menu.Group {...props} />;
-}
-
-export type DropdownLabelProps = Omit<
-  React.ComponentProps<typeof Menu.GroupLabel>,
-  "className" | "style"
-> & {
-  /**
-   * Optional trailing content on the heading row — e.g. a "View all" link or a count. Sits at the
-   * end of the label line (the Figma "Dropdown header" trailing slot).
-   */
-  inlineEndNode?: React.ReactNode;
-  children?: React.ReactNode;
-};
-
-/**
- * A non-interactive section heading for a group of items (the Figma "Dropdown header": `text/12`,
- * `text/tertiary`, title-case). Must be rendered inside a `DropdownGroup`, as the first child, to
- * label the items that follow it. Pass `inlineEndNode` for a trailing "View all" link or count.
- */
-export function DropdownLabel({ inlineEndNode, children, ...props }: DropdownLabelProps) {
-  return (
-    <Menu.GroupLabel
-      className="flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary"
-      {...props}
-    >
-      <span className="min-w-0 flex-1 truncate">{children}</span>
-      {inlineEndNode != null ? <span className="shrink-0">{inlineEndNode}</span> : null}
-    </Menu.GroupLabel>
-  );
-}
-
-// A sticky search header for filterable menus — the Figma "Search-Dropdown" row.
-// Pinned to the top of the popup (so it stays put while the list scrolls) on the
-// surface-1 background with a hairline bottom border. Owns no state; pass `value`
-// + `onValueChange` to filter the list in the parent story/component.
-export type DropdownSearchProps = Omit<
-  React.ComponentProps<"input">,
-  "className" | "style" | "onChange" | "value" | "type"
-> & {
-  /** Current search text. */
-  value?: string;
-  /** Called with the new text on each keystroke. */
-  onValueChange?: (value: string) => void;
-  /** Placeholder text. @default "Search" */
-  placeholder?: string;
-};
-
-/**
- * A sticky search input pinned to the top of a `DropdownContent`. Use it as the first child of the
- * content for filterable menus (Status, Labels, Assignees, …). It keeps focus inside the menu and
- * does not steal Base UI's typeahead because it is a real text input. Drive filtering with `value`
- * + `onValueChange`.
- */
-export function DropdownSearch({
-  value,
-  onValueChange,
-  placeholder = "Search",
-  ...props
-}: DropdownSearchProps) {
-  return (
-    <div className="flex shrink-0 items-center gap-1.5 border-b border-subtle bg-surface-1 px-3 py-2">
-      <Search className="size-4 shrink-0 text-icon-tertiary" aria-hidden="true" />
-      <input
-        type="text"
-        // Stop arrow/typeahead keys from being hijacked by the menu while typing,
-        // but let Escape bubble so the menu can still close.
-        onKeyDown={(event) => event.stopPropagation()}
-        value={value}
-        onChange={(event) => onValueChange?.(event.target.value)}
-        placeholder={placeholder}
-        className="min-w-0 flex-1 bg-transparent text-13 text-secondary outline-none placeholder:text-placeholder"
-        {...props}
-      />
-    </div>
-  );
-}
-
-export type DropdownFooterProps = Omit<React.ComponentProps<"div">, "className" | "style">;
-
-/**
- * A non-interactive footer pinned to the bottom of a `DropdownContent` — e.g. "Type to add a new
- * label." Render it as the last child of the content.
- */
-export function DropdownFooter(props: DropdownFooterProps) {
-  return (
-    <div
-      className="shrink-0 border-t border-subtle bg-layer-2 px-3 py-2 text-12 text-tertiary"
-      {...props}
-    />
-  );
-}
-
-/**
- * A submenu root. Wrap a `DropdownSubTrigger` + `DropdownSubContent` in it to nest a second menu
- * that opens from a row. Built on Base UI `Menu.SubmenuRoot`.
- */
-type BaseSubmenuRootProps = React.ComponentProps<typeof Menu.SubmenuRoot>;
-
-export type DropdownSubProps = Omit<
-  BaseSubmenuRootProps,
-  "open" | "defaultOpen" | "onOpenChange" | "children"
-> & {
-  /** Whether the submenu is open. Controlled; pair with `onOpenChange`. */
-  open?: boolean;
-  /** Whether the submenu is open on mount. Uncontrolled. @default false */
-  defaultOpen?: boolean;
-  /** Called with the next open state when the submenu opens or closes. */
-  onOpenChange?: BaseSubmenuRootProps["onOpenChange"];
-  /** The submenu's trigger and nested content (`DropdownSubTrigger`, `DropdownSubContent`). */
-  children?: React.ReactNode;
-};
-
-export function DropdownSub(props: DropdownSubProps) {
-  return <Menu.SubmenuRoot {...props} />;
-}
-
-export type DropdownSubTriggerProps = Omit<
-  React.ComponentProps<typeof Menu.SubmenuTrigger>,
-  "className" | "style" | "label"
-> & {
-  /** Leading content before the label — an icon (16px) or control. (Logical node slot.) */
-  inlineStartNode?: React.ReactNode;
-  /** The primary text of the row. */
-  label?: React.ReactNode;
-  /** Trailing content before the chevron — e.g. a `Badge` count. (Logical node slot.) */
-  inlineEndNode?: React.ReactNode;
-};
-
-/**
- * The row that opens a submenu. Looks like a `DropdownItem` with a trailing chevron; pass
- * `inlineEndNode` for a count `Badge` before the chevron. Must be rendered inside a `DropdownSub`,
- * paired with a `DropdownSubContent`.
- */
-export function DropdownSubTrigger({
-  inlineStartNode,
-  label,
-  inlineEndNode,
-  children,
-  ...props
-}: DropdownSubTriggerProps) {
-  return (
-    <Menu.SubmenuTrigger
-      className={cx(
-        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
-        "text-secondary",
-        "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
-        "data-disabled:pointer-events-none data-disabled:text-disabled",
-      )}
-      {...props}
-    >
-      {inlineStartNode != null ? <span className={nodeSlotClass}>{inlineStartNode}</span> : null}
-      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
-      {inlineEndNode != null ? <span className={nodeSlotClass}>{inlineEndNode}</span> : null}
-      <ChevronRight
-        className="size-4 shrink-0 text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100"
-        aria-hidden="true"
-      />
-    </Menu.SubmenuTrigger>
-  );
-}
-
-/**
- * The floating surface for a submenu. Same styling as `DropdownContent` but defaults to opening to
- * the right (`side="right"`). Place submenu items inside it.
- */
-export function DropdownSubContent({
-  children,
-  side = "right",
-  sideOffset = 4,
-  align = "start",
-  width,
-  search,
-  footer,
-  ...props
-}: DropdownContentProps) {
-  return (
-    <Menu.Portal>
-      <Menu.Positioner side={side} sideOffset={sideOffset} align={align} className="outline-none">
-        <OverlayPanel elevation="overlay" radius="lg" width={width} header={search} footer={footer}>
-          <Menu.Popup className="p-1 outline-none" {...props}>
-            {children}
-          </Menu.Popup>
-        </OverlayPanel>
-      </Menu.Positioner>
-    </Menu.Portal>
-  );
-}
diff --git a/packages/propel/src/components/field/autocomplete-field.tsx b/packages/propel/src/components/field/autocomplete-field.tsx
new file mode 100644
index 0000000..32d6393
--- /dev/null
+++ b/packages/propel/src/components/field/autocomplete-field.tsx
@@ -0,0 +1,89 @@
+import type * as React from "react";
+
+import {
+  Autocomplete,
+  AutocompleteClear,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteInputGroup,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompletePortal,
+  AutocompletePositioner,
+  type AutocompleteProps,
+  AutocompleteTrigger,
+} from "../../ui/autocomplete/index";
+import { Field } from "../../ui/field/field";
+import { FieldDescription } from "../../ui/field/field-description";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldLabel } from "../../ui/field/field-label";
+import type { FieldMagnitude } from "../../ui/field/variants";
+
+export type AutocompleteFieldProps = Omit<AutocompleteProps<string>, "children" | "items"> & {
+  /** Supporting text shown below the input. */
+  description?: React.ReactNode;
+  /** Accessible label used by the clear and popup trigger buttons. */
+  controlLabel: string;
+  /** Message rendered when no item matches. */
+  emptyLabel: React.ReactNode;
+  /** Error text shown below the control. */
+  error?: React.ReactNode;
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Items rendered in the popup. */
+  items: readonly string[];
+  /** Visible field label. */
+  label: React.ReactNode;
+  /** Label and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Input placeholder. */
+  placeholder?: string;
+};
+
+/** Ready-to-use autocomplete field with label, input, popup items, and helper/error text. */
+export function AutocompleteField({
+  description,
+  controlLabel,
+  disabled,
+  emptyLabel,
+  error,
+  hint,
+  items,
+  label,
+  magnitude,
+  name,
+  placeholder,
+  ...autocompleteProps
+}: AutocompleteFieldProps) {
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <Autocomplete disabled={disabled} items={items} {...autocompleteProps}>
+        <FieldLabel magnitude={magnitude}>{label}</FieldLabel>
+        <AutocompleteInputGroup>
+          <AutocompleteInput placeholder={placeholder} />
+          <AutocompleteClear aria-label={`Clear ${controlLabel}`} />
+          <AutocompleteTrigger aria-label={`Open ${controlLabel}`} />
+        </AutocompleteInputGroup>
+        {description != null ? (
+          <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+        ) : null}
+        <AutocompletePortal>
+          <AutocompletePositioner>
+            <AutocompletePopup>
+              <AutocompleteEmpty>{emptyLabel}</AutocompleteEmpty>
+              <AutocompleteList>
+                {items.map((item) => (
+                  <AutocompleteItem key={item} value={item}>
+                    {item}
+                  </AutocompleteItem>
+                ))}
+              </AutocompleteList>
+            </AutocompletePopup>
+          </AutocompletePositioner>
+        </AutocompletePortal>
+        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+      </Autocomplete>
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/checkbox-field.tsx b/packages/propel/src/components/field/checkbox-field.tsx
new file mode 100644
index 0000000..a18ed70
--- /dev/null
+++ b/packages/propel/src/components/field/checkbox-field.tsx
@@ -0,0 +1,59 @@
+import type * as React from "react";
+
+import type { CheckboxTone } from "../../ui/checkbox/index";
+import {
+  CheckboxFieldControl,
+  type CheckboxFieldControlProps,
+} from "../../ui/field/checkbox-field-control";
+import { Field } from "../../ui/field/field";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldItem } from "../../ui/field/field-item";
+import { FieldItemContent } from "../../ui/field/field-item-content";
+import type { FieldMagnitude } from "../../ui/field/variants";
+
+export type CheckboxFieldProps = Omit<
+  CheckboxFieldControlProps,
+  "aria-label" | "label" | "inlineStartNode" | "tone"
+> & {
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Error text shown below the control. */
+  error?: React.ReactNode;
+  /** Visible field label. */
+  label: React.ReactNode;
+  /** Label and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Optional supporting text announced as the checkbox description. */
+  description?: React.ReactNode;
+  /** Resting color of the box. */
+  tone: CheckboxTone;
+};
+
+/** Ready-to-use single checkbox field with label, description, and helper/error text. */
+export function CheckboxField({
+  label,
+  description,
+  hint,
+  error,
+  magnitude,
+  tone,
+  name,
+  disabled,
+  ...controlProps
+}: CheckboxFieldProps) {
+  return (
+    <Field
+      name={name}
+      disabled={disabled}
+      invalid={error != null || tone === "danger" || undefined}
+    >
+      <FieldItem disabled={disabled}>
+        <CheckboxFieldControl tone={tone} disabled={disabled} {...controlProps} />
+        <FieldItemContent magnitude={magnitude} description={description}>
+          {label}
+        </FieldItemContent>
+      </FieldItem>
+      <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/checkbox-group-field-option.tsx b/packages/propel/src/components/field/checkbox-group-field-option.tsx
new file mode 100644
index 0000000..ce21e97
--- /dev/null
+++ b/packages/propel/src/components/field/checkbox-group-field-option.tsx
@@ -0,0 +1,45 @@
+import type * as React from "react";
+
+import type { CheckboxTone } from "../../ui/checkbox/index";
+import {
+  CheckboxFieldControl,
+  type CheckboxFieldControlProps,
+} from "../../ui/field/checkbox-field-control";
+import { FieldItem } from "../../ui/field/field-item";
+import { FieldItemContent } from "../../ui/field/field-item-content";
+import { useFieldOptionMagnitude } from "../../ui/field/use-field-option-magnitude";
+import type { FieldMagnitude } from "../../ui/field/variants";
+
+export type CheckboxGroupFieldOptionProps = Omit<
+  CheckboxFieldControlProps,
+  "aria-label" | "label" | "inlineStartNode" | "tone"
+> & {
+  /** Visible option label. */
+  label: React.ReactNode;
+  /** Optional supporting text announced as the checkbox description. */
+  description?: React.ReactNode;
+  /** Label and description size. Inherited from `CheckboxGroupField` when omitted. */
+  magnitude?: FieldMagnitude;
+  /** Resting color of the box. */
+  tone: CheckboxTone;
+};
+
+/** A checkbox option row for use inside `CheckboxGroupField` or a custom `CheckboxGroup`. */
+export function CheckboxGroupFieldOption({
+  label,
+  description,
+  magnitude: magnitudeProp,
+  tone,
+  ...props
+}: CheckboxGroupFieldOptionProps) {
+  const magnitude = useFieldOptionMagnitude(magnitudeProp);
+
+  return (
+    <FieldItem disabled={props.disabled}>
+      <CheckboxFieldControl tone={tone} {...props} />
+      <FieldItemContent magnitude={magnitude} description={description}>
+        {label}
+      </FieldItemContent>
+    </FieldItem>
+  );
+}
diff --git a/packages/propel/src/components/field/checkbox-group-field.tsx b/packages/propel/src/components/field/checkbox-group-field.tsx
new file mode 100644
index 0000000..3f3dc8c
--- /dev/null
+++ b/packages/propel/src/components/field/checkbox-group-field.tsx
@@ -0,0 +1,57 @@
+import type * as React from "react";
+
+import { CheckboxGroup, type CheckboxGroupProps } from "../../ui/checkbox-group/index";
+import { Field } from "../../ui/field/field";
+import { FieldDescription } from "../../ui/field/field-description";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldOptionMagnitudeProvider } from "../../ui/field/field-option-magnitude-provider";
+import type { FieldMagnitude } from "../../ui/field/variants";
+import { Fieldset, FieldsetLegend } from "../../ui/fieldset/index";
+
+export type CheckboxGroupFieldProps = Omit<CheckboxGroupProps, "children" | "density" | "name"> & {
+  /** Checkbox option rows, usually `CheckboxGroupFieldOption`. */
+  children: React.ReactNode;
+  /** Spacing between checkbox options. */
+  density: CheckboxGroupProps["density"];
+  /** Supporting text shown below the legend. */
+  description?: React.ReactNode;
+  /** Error text shown below the group. */
+  error?: React.ReactNode;
+  /** Helper text shown below the group. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Visible fieldset legend. */
+  label: React.ReactNode;
+  /** Legend and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Submitted field name. */
+  name: string;
+};
+
+/** Ready-to-use checkbox group field with legend, description, and helper/error text. */
+export function CheckboxGroupField({
+  children,
+  density,
+  description,
+  disabled,
+  error,
+  hint,
+  label,
+  magnitude,
+  name,
+  ...groupProps
+}: CheckboxGroupFieldProps) {
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <Fieldset render={<CheckboxGroup density={density} disabled={disabled} {...groupProps} />}>
+        <FieldsetLegend magnitude={magnitude}>{label}</FieldsetLegend>
+        {description != null ? (
+          <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+        ) : null}
+        <FieldOptionMagnitudeProvider magnitude={magnitude}>
+          {children}
+        </FieldOptionMagnitudeProvider>
+      </Fieldset>
+      <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/combobox-field.tsx b/packages/propel/src/components/field/combobox-field.tsx
new file mode 100644
index 0000000..993137d
--- /dev/null
+++ b/packages/propel/src/components/field/combobox-field.tsx
@@ -0,0 +1,91 @@
+import type * as React from "react";
+
+import {
+  Combobox,
+  ComboboxClear,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxPortal,
+  ComboboxPositioner,
+  type ComboboxProps,
+  ComboboxTrigger,
+} from "../../ui/combobox/index";
+import { Field } from "../../ui/field/field";
+import { FieldDescription } from "../../ui/field/field-description";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldLabel } from "../../ui/field/field-label";
+import type { FieldMagnitude } from "../../ui/field/variants";
+
+export type ComboboxFieldProps = Omit<ComboboxProps<string>, "children" | "items"> & {
+  /** Supporting text shown below the input. */
+  description?: React.ReactNode;
+  /** Accessible label used by the clear and popup trigger buttons. */
+  controlLabel: string;
+  /** Message rendered when no item matches. */
+  emptyLabel: React.ReactNode;
+  /** Error text shown below the control. */
+  error?: React.ReactNode;
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Items rendered in the popup. */
+  items: readonly string[];
+  /** Visible field label. */
+  label: React.ReactNode;
+  /** Label and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Input placeholder. */
+  placeholder?: string;
+};
+
+/** Ready-to-use combobox field with label, filter input, popup items, and helper/error text. */
+export function ComboboxField({
+  description,
+  controlLabel,
+  disabled,
+  emptyLabel,
+  error,
+  hint,
+  items,
+  label,
+  magnitude,
+  name,
+  placeholder,
+  ...comboboxProps
+}: ComboboxFieldProps) {
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <Combobox disabled={disabled} items={items} {...comboboxProps}>
+        <FieldLabel magnitude={magnitude}>{label}</FieldLabel>
+        <ComboboxInputGroup>
+          <ComboboxInput placeholder={placeholder} />
+          <ComboboxClear aria-label={`Clear ${controlLabel}`} />
+          <ComboboxTrigger aria-label={`Open ${controlLabel}`} />
+        </ComboboxInputGroup>
+        {description != null ? (
+          <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+        ) : null}
+        <ComboboxPortal>
+          <ComboboxPositioner>
+            <ComboboxPopup>
+              <ComboboxEmpty>{emptyLabel}</ComboboxEmpty>
+              <ComboboxList>
+                {items.map((item) => (
+                  <ComboboxItem key={item} value={item}>
+                    <ComboboxItemIndicator />
+                    {item}
+                  </ComboboxItem>
+                ))}
+              </ComboboxList>
+            </ComboboxPopup>
+          </ComboboxPositioner>
+        </ComboboxPortal>
+        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+      </Combobox>
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/field.stories.tsx b/packages/propel/src/components/field/field.stories.tsx
new file mode 100644
index 0000000..88e9241
--- /dev/null
+++ b/packages/propel/src/components/field/field.stories.tsx
@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent } from "storybook/test";
+
+import { RadioGroup } from "../radio/index";
+import {
+  AutocompleteField,
+  CheckboxField,
+  CheckboxFieldControl,
+  CheckboxGroupField,
+  CheckboxGroupFieldOption,
+  ComboboxField,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldItem,
+  FieldLabel,
+  InputField,
+  InputFieldControl,
+  RadioFieldControl,
+  RadioGroupField,
+  RadioGroupFieldOption,
+  SelectField,
+  SwitchField,
+  SwitchFieldControl,
+  TextAreaField,
+  TextAreaFieldControl,
+} from "./index";
+
+const REGIONS = ["us-central-1", "us-east-1", "eu-central-1", "ap-west-1"];
+const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
+const SERVER_TYPES = [
+  { label: "General purpose", value: "general" },
+  { label: "Compute optimized", value: "compute" },
+  { label: "Memory optimized", value: "memory" },
+];
+
+const meta = {
+  title: "Components/Field",
+  component: Field,
+  subcomponents: {
+    FieldLabel,
+    FieldDescription,
+    FieldError,
+    FieldItem,
+    InputField,
+    CheckboxField,
+    CheckboxFieldControl,
+    CheckboxGroupField,
+    CheckboxGroupFieldOption,
+    ComboboxField,
+    AutocompleteField,
+    InputFieldControl,
+    RadioFieldControl,
+    RadioGroupField,
+    RadioGroupFieldOption,
+    SelectField,
+    SwitchField,
+    SwitchFieldControl,
+    TextAreaField,
+    TextAreaFieldControl,
+  },
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Field composes the Base UI labeling, description, and validation parts. */
+export const Default: Story = {
+  render: () => (
+    <Field name="displayName">
+      <FieldLabel magnitude="md" required>
+        Display name
+      </FieldLabel>
+      <InputFieldControl magnitude="md" required placeholder="Ada Lovelace" />
+      <FieldDescription magnitude="md">Shown anywhere your profile is visible.</FieldDescription>
+    </Field>
+  ),
+};
+
+/** Invalid fields expose `aria-invalid` and announce the matching error as a description. */
+export const Invalid: Story = {
+  render: () => (
+    <Field name="workspaceSlug" invalid>
+      <FieldLabel magnitude="md">Workspace slug</FieldLabel>
+      <InputFieldControl magnitude="md" defaultValue="Already taken" />
+      <FieldError magnitude="md" match={true}>
+        Choose a different workspace slug.
+      </FieldError>
+    </Field>
+  ),
+};
+
+/** Field-owned control subclasses provide Propel's text-entry styling for custom compositions. */
+export const ControlSubclasses: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <Field name="title">
+        <FieldLabel magnitude="md">Title</FieldLabel>
+        <InputFieldControl magnitude="md" placeholder="Issue title" />
+      </Field>
+      <Field name="description">
+        <FieldLabel magnitude="md">Description</FieldLabel>
+        <TextAreaFieldControl
+          magnitude="md"
+          surface="embedded"
+          placeholder="Add details"
+          rows={3}
+        />
+      </Field>
+    </div>
+  ),
+};
+
+/** Field-owned choice control subclasses let custom layouts keep Propel styling. */
+export const ChoiceControlSubclasses: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <Field name="emailUpdates">
+        <FieldLabel magnitude="md">
+          <CheckboxFieldControl tone="neutral" value="email" />
+          Email updates
+        </FieldLabel>
+      </Field>
+      <Field name="priority">
+        <RadioGroup density="comfortable" defaultValue="high">
+          <FieldLabel magnitude="md">
+            <RadioFieldControl value="high" />
+            High priority
+          </FieldLabel>
+        </RadioGroup>
+      </Field>
+      <Field name="restartOnFailure">
+        <FieldLabel magnitude="md">
+          <SwitchFieldControl magnitude="md" defaultChecked />
+          Restart on failure
+        </FieldLabel>
+      </Field>
+    </div>
+  ),
+};
+
+/** Ready-to-use choice fields compose the field root, label, control, and helper text. */
+export const ReadyMadeChoiceFields: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <CheckboxField
+        name="emailUpdates"
+        label="Email updates"
+        description="Send a message when the deployment status changes."
+        hint="You can change this later."
+        magnitude="md"
+        tone="neutral"
+        value="enabled"
+        defaultChecked
+      />
+      <SwitchField
+        name="restartOnFailure"
+        label="Restart on failure"
+        description="Automatically restart the service after a crash."
+        magnitude="md"
+        defaultChecked
+      />
+    </div>
+  ),
+};
+
+/** Ready-to-use group fields compose labels, helper text, options, and Base UI group behavior. */
+export const ReadyMadeGroupFields: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <CheckboxGroupField
+        name="notifications"
+        label="Notifications"
+        description="Choose every update channel you want."
+        hint="At least one channel is recommended."
+        density="comfortable"
+        magnitude="md"
+        defaultValue={["email"]}
+      >
+        <CheckboxGroupFieldOption value="email" label="Email" tone="neutral" />
+        <CheckboxGroupFieldOption
+          value="slack"
+          label="Slack"
+          description="Workspace alerts."
+          tone="neutral"
+        />
+      </CheckboxGroupField>
+      <RadioGroupField
+        name="priority"
+        label="Priority"
+        description="Pick one default priority."
+        density="comfortable"
+        magnitude="md"
+        defaultValue="medium"
+      >
+        <RadioGroupFieldOption value="low" label="Low" />
+        <RadioGroupFieldOption value="medium" label="Medium" description="Recommended." />
+        <RadioGroupFieldOption value="high" label="High" />
+      </RadioGroupField>
+    </div>
+  ),
+};
+
+/** Ready-to-use popup fields compose the field chrome with the Base UI popup primitives. */
+export const ReadyMadePopupFields: Story = {
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      <SelectField
+        name="serverType"
+        label="Server type"
+        description="Choose the machine class."
+        magnitude="md"
+        options={SERVER_TYPES}
+        defaultValue="general"
+      />
+      <ComboboxField
+        name="region"
+        label="Region"
+        description="Filter the deployment region."
+        controlLabel="region"
+        emptyLabel="No regions found"
+        magnitude="md"
+        items={REGIONS}
+        placeholder="e.g. eu-central-1"
+      />
+      <AutocompleteField
+        name="containerImage"
+        label="Container image"
+        description="Type or choose an image tag."
+        controlLabel="container image"
+        emptyLabel="No images found"
+        magnitude="md"
+        items={IMAGES}
+        placeholder="e.g. node:22-slim"
+      />
+    </div>
+  ),
+};
+
+export const LabelAndDescription: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Field name="customField">
+      <FieldLabel magnitude="md" required>
+        Custom field
+      </FieldLabel>
+      <InputFieldControl magnitude="md" placeholder="Custom value" required />
+      <FieldDescription magnitude="md">Use this for custom form controls.</FieldDescription>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("textbox", { name: "Custom field" });
+    await expect(input).toBeRequired();
+    await expect(input).toHaveAttribute("name", "customField");
+    await expect(input).toHaveAccessibleDescription("Use this for custom form controls.");
+  },
+};
+
+export const ErrorAssociation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Field name="email" invalid>
+      <FieldLabel magnitude="md">Email</FieldLabel>
+      <InputFieldControl magnitude="md" defaultValue="not-an-email" />
+      <FieldError magnitude="md" match={true}>
+        Enter a valid email address.
+      </FieldError>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("textbox", { name: "Email" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(input).toHaveAccessibleDescription("Enter a valid email address.");
+  },
+};
+
+export const TypingUpdatesValue: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Field name="nickname">
+      <FieldLabel magnitude="md">Nickname</FieldLabel>
+      <InputFieldControl magnitude="md" />
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Nickname" });
+    await userEvent.type(input, "Grace");
+    await expect(input).toHaveValue("Grace");
+  },
+};
diff --git a/packages/propel/src/components/field/index.tsx b/packages/propel/src/components/field/index.tsx
new file mode 100644
index 0000000..bb73975
--- /dev/null
+++ b/packages/propel/src/components/field/index.tsx
@@ -0,0 +1,45 @@
+export {
+  Field,
+  type FieldProps,
+  FieldDescription,
+  type FieldDescriptionProps,
+  FieldError,
+  type FieldErrorProps,
+  FieldItem,
+  type FieldItemProps,
+  FieldLabel,
+  type FieldLabelProps,
+  CheckboxFieldControl,
+  type CheckboxFieldControlProps,
+  InputFieldControl,
+  type InputFieldControlProps,
+  TextAreaFieldControl,
+  type TextAreaFieldControlMagnitude,
+  type TextAreaFieldControlProps,
+  type TextAreaFieldControlSurface,
+} from "../../ui/field/index";
+export { AutocompleteField, type AutocompleteFieldProps } from "./autocomplete-field";
+export { CheckboxField, type CheckboxFieldProps } from "./checkbox-field";
+export { CheckboxGroupField, type CheckboxGroupFieldProps } from "./checkbox-group-field";
+export {
+  CheckboxGroupFieldOption,
+  type CheckboxGroupFieldOptionProps,
+} from "./checkbox-group-field-option";
+export { ComboboxField, type ComboboxFieldProps } from "./combobox-field";
+export {
+  InputField,
+  type InputFieldProps,
+  type InputMagnitude,
+  type InputTone,
+} from "./input-field";
+export { RadioFieldControl, type RadioFieldControlProps } from "./radio-field-control";
+export { RadioGroupField, type RadioGroupFieldProps } from "./radio-group-field";
+export { RadioGroupFieldOption, type RadioGroupFieldOptionProps } from "./radio-group-field-option";
+export { SelectField, type SelectFieldOption, type SelectFieldProps } from "./select-field";
+export {
+  SwitchFieldControl,
+  type SwitchFieldControlMagnitude,
+  type SwitchFieldControlProps,
+} from "./switch-field-control";
+export { SwitchField, type SwitchFieldProps } from "./switch-field";
+export { TextAreaField, type TextAreaFieldProps } from "./text-area-field";
diff --git a/packages/propel/src/components/field/input-field.stories.tsx b/packages/propel/src/components/field/input-field.stories.tsx
new file mode 100644
index 0000000..abd6c31
--- /dev/null
+++ b/packages/propel/src/components/field/input-field.stories.tsx
@@ -0,0 +1,359 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Mail, Search } from "lucide-react";
+import { expect, fn, userEvent } from "storybook/test";
+
+import { iconControl } from "../../storybook/icon-control";
+import { InputField, type InputMagnitude } from "./index";
+
+const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
+
+const meta = {
+  title: "Components/InputField",
+  component: InputField,
+  // Icon picker controls for the inline start/end slots.
+  argTypes: { inlineStartNode: iconControl, inlineEndNode: iconControl },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1582-168",
+    },
+  },
+} satisfies Meta<typeof InputField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Vertical layout: the `description` sits directly below the label, and the `hint` (helper text)
+ * sits below the control.
+ */
+export const Default: Story = {
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "vertical",
+    label: "Email",
+    placeholder: "you@example.com",
+    description: "We'll use this to send you receipts.",
+    hint: "We'll never share your email.",
+  },
+};
+
+/** Horizontal layout: the label sits beside the control. */
+export const Horizontal: Story = {
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "horizontal",
+    label: "Email",
+    placeholder: "you@example.com",
+  },
+};
+
+/**
+ * The horizontal layout across every magnitude. The `description` stacks below the label in the
+ * left column, the `hint` sits below the control, and the error state (which overrides the hint)
+ * shows in danger.
+ */
+export const HorizontalShowcase: Story = {
+  // Required axes for the args table; the custom `render` ignores them.
+  args: { magnitude: "md", tone: "neutral", orientation: "horizontal" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-110 flex-col gap-4">
+      <InputField
+        orientation="horizontal"
+        magnitude="md"
+        tone="neutral"
+        label="Email"
+        placeholder="md"
+      />
+      <InputField
+        orientation="horizontal"
+        magnitude="lg"
+        tone="neutral"
+        label="Email"
+        placeholder="lg"
+        hint="Use your work email."
+      />
+      <InputField
+        orientation="horizontal"
+        magnitude="xl"
+        tone="neutral"
+        label="Email"
+        placeholder="xl"
+        description="We never share your email with anyone."
+      />
+      <InputField
+        orientation="horizontal"
+        magnitude="md"
+        label="Email"
+        tone="danger"
+        error="Enter a valid email address"
+        defaultValue="not-an-email"
+      />
+    </div>
+  ),
+};
+
+/** Inline start/end 16px icon slots wrap the control. */
+export const WithIcons: Story = {
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "vertical",
+    label: "Search",
+    placeholder: "Search…",
+    inlineStartNode: <Search />,
+    inlineEndNode: <Mail />,
+  },
+};
+
+/**
+ * The element-driven states side by side. Hover/focus/filled aren't props — they come from
+ * interacting with the control; `disabled` and the error treatment (`tone="danger"`) are shown
+ * statically.
+ */
+export const States: Story = {
+  // Required axes for the args table; the custom `render` ignores them.
+  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-72 flex-col gap-4">
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Default"
+        placeholder="Placeholder"
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Focus / hover (interact)"
+        placeholder="Click me"
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Filled"
+        defaultValue="Ada Lovelace"
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Disabled"
+        placeholder="Placeholder"
+        disabled
+      />
+      <InputField
+        magnitude="md"
+        tone="danger"
+        orientation="vertical"
+        label="Error"
+        defaultValue="not-an-email"
+        error="Enter a valid email."
+      />
+    </div>
+  ),
+};
+
+/** Every magnitude (`md` / `lg` / `xl`) stacked. */
+export const Magnitudes: Story = {
+  args: { magnitude: "md", tone: "neutral", orientation: "vertical", placeholder: "Placeholder" },
+  argTypes: { magnitude: { control: false }, label: { control: false } },
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <InputField key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
+/** The error treatment: danger border, danger helper text, and `aria-invalid`. */
+export const Error: Story = {
+  args: {
+    magnitude: "md",
+    orientation: "vertical",
+    label: "Email",
+    tone: "danger",
+    defaultValue: "not-an-email",
+    error: "Enter a valid email address.",
+    required: true,
+  },
+};
+
+/**
+ * RTL smoke check: the same stories rendered inside `dir="rtl"`. Text aligns to the right, the
+ * leading (start) icon sits on the right edge and the trailing (end) icon on the left, and the
+ * horizontal label sits to the right of its control. Excluded from autodocs/manifest — it exists
+ * for visual review.
+ */
+export const RtlVerify: Story = {
+  name: "RTL Verify",
+  tags: ["!autodocs", "!manifest"],
+  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div dir="rtl" className="flex w-80 flex-col gap-6">
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="البريد الإلكتروني"
+        placeholder="you@example.com"
+        description="سنستخدمه لإرسال الإيصالات."
+        hint="لن نشارك بريدك الإلكتروني."
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="horizontal"
+        label="البريد"
+        placeholder="you@example.com"
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="بحث"
+        placeholder="Search…"
+        inlineStartNode={<Search />}
+        inlineEndNode={<Mail />}
+      />
+      <InputField
+        magnitude="md"
+        orientation="vertical"
+        tone="danger"
+        label="البريد الإلكتروني"
+        required
+        defaultValue="not-an-email"
+        error="أدخل بريدًا إلكترونيًا صالحًا."
+      />
+    </div>
+  ),
+};
+
+/** LTR counterpart of {@link RtlVerify} for side-by-side comparison. */
+export const LtrVerify: Story = {
+  name: "LTR Verify",
+  tags: ["!autodocs", "!manifest"],
+  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div dir="ltr" className="flex w-80 flex-col gap-6">
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Email"
+        placeholder="you@example.com"
+        description="We'll use this to send you receipts."
+        hint="We'll never share your email."
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="horizontal"
+        label="Email"
+        placeholder="you@example.com"
+      />
+      <InputField
+        magnitude="md"
+        tone="neutral"
+        orientation="vertical"
+        label="Search"
+        placeholder="Search…"
+        inlineStartNode={<Search />}
+        inlineEndNode={<Mail />}
+      />
+      <InputField
+        magnitude="md"
+        orientation="vertical"
+        tone="danger"
+        label="Email"
+        required
+        defaultValue="not-an-email"
+        error="Enter a valid email address."
+      />
+    </div>
+  ),
+};
+
+/**
+ * Typing into the control updates its value. Query by role (`textbox`) and drive it with
+ * `userEvent`; an `onChange` spy proves the change handler fires.
+ */
+export const TypingUpdatesValue: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "vertical",
+    label: "Name",
+    placeholder: "Your name",
+    onChange: fn(),
+  },
+  play: async ({ args, canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Name" });
+    await userEvent.type(input, "Grace");
+    await expect(input).toHaveValue("Grace");
+    await expect(args.onChange).toHaveBeenCalled();
+  },
+};
+
+/** A `disabled` control rejects input — the value stays empty after typing. */
+export const DisabledBlocksInput: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "vertical",
+    label: "Name",
+    placeholder: "Your name",
+    disabled: true,
+  },
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Name" });
+    await expect(input).toBeDisabled();
+    await userEvent.type(input, "Grace");
+    await expect(input).toHaveValue("");
+  },
+};
+
+/** `tone="danger"` sets `aria-invalid` and renders the announced error text. */
+export const ErrorAnnouncesInvalid: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    orientation: "vertical",
+    label: "Email",
+    tone: "danger",
+    defaultValue: "x",
+    error: "Enter a valid email address.",
+  },
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Email" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(canvas.getByText("Enter a valid email address.")).toBeInTheDocument();
+  },
+};
+
+/** Consumers can omit propel's generated label group when a native accessible name is provided. */
+export const NativeAriaLabel: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    orientation: "vertical",
+    "aria-label": "Search projects",
+    placeholder: "Search",
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("textbox", { name: "Search projects" })).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/field/input-field.tsx b/packages/propel/src/components/field/input-field.tsx
new file mode 100644
index 0000000..2f85b7f
--- /dev/null
+++ b/packages/propel/src/components/field/input-field.tsx
@@ -0,0 +1,81 @@
+import type * as React from "react";
+
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldLabelGroup } from "../../ui/field/field-label-group";
+import { InputFieldBox } from "../../ui/field/input-field-box";
+import { InputFieldContent } from "../../ui/field/input-field-content";
+import { InputFieldControl } from "../../ui/field/input-field-control";
+import { InputFieldIconSlot } from "../../ui/field/input-field-icon-slot";
+import { InputFieldRoot } from "../../ui/field/input-field-root";
+import type { InputMagnitude, InputTone } from "../../ui/field/variants";
+import type { InputProps } from "../../ui/input/index";
+
+export type { InputMagnitude, InputTone } from "../../ui/field/variants";
+
+export type InputFieldProps = Omit<InputProps, "magnitude"> & {
+  /** Magnitude scale. `md` | `lg` | `xl`. */
+  magnitude: InputMagnitude;
+  /** Resting treatment. `neutral` | `danger` (the Figma "error" state). */
+  tone: InputTone;
+  /** Label text shown above (or beside) the control. */
+  label?: React.ReactNode;
+  /** Marks the field required: adds a `*` asterisk and sets `required`. */
+  required?: boolean;
+  /** Supporting text shown directly below the label. */
+  description?: React.ReactNode;
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Error text shown below the control. Overrides `hint`; pair with `tone="danger"`. */
+  error?: React.ReactNode;
+  /** Label placement: `vertical` (label above) | `horizontal` (label beside). */
+  orientation: "vertical" | "horizontal";
+  /** A 16px node rendered at the inline start of the control. */
+  inlineStartNode?: React.ReactNode;
+  /** A 16px node rendered at the inline end of the control. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * Single-line text field built on Base UI `Field`. Supports inline start/end slots and a
+ * `horizontal` orientation where the label sits beside the control.
+ */
+export function InputField({
+  magnitude,
+  tone,
+  orientation,
+  name,
+  label,
+  required,
+  description,
+  hint,
+  error,
+  inlineStartNode,
+  inlineEndNode,
+  disabled,
+  ...controlProps
+}: InputFieldProps) {
+  return (
+    <InputFieldRoot
+      name={name}
+      disabled={disabled}
+      invalid={tone === "danger" || undefined}
+      orientation={orientation}
+    >
+      <FieldLabelGroup
+        magnitude={magnitude}
+        required={required}
+        label={label}
+        description={description}
+        orientation={orientation}
+      />
+      <InputFieldContent orientation={orientation}>
+        <InputFieldBox magnitude={magnitude} tone={tone}>
+          {inlineStartNode ? <InputFieldIconSlot>{inlineStartNode}</InputFieldIconSlot> : null}
+          <InputFieldControl required={required} magnitude={magnitude} {...controlProps} />
+          {inlineEndNode ? <InputFieldIconSlot>{inlineEndNode}</InputFieldIconSlot> : null}
+        </InputFieldBox>
+        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+      </InputFieldContent>
+    </InputFieldRoot>
+  );
+}
diff --git a/packages/propel/src/components/field/radio-field-control.tsx b/packages/propel/src/components/field/radio-field-control.tsx
new file mode 100644
index 0000000..d7858b4
--- /dev/null
+++ b/packages/propel/src/components/field/radio-field-control.tsx
@@ -0,0 +1,2 @@
+export { Radio as RadioFieldControl } from "../radio/radio";
+export type { RadioProps as RadioFieldControlProps } from "../radio/radio";
diff --git a/packages/propel/src/components/field/radio-group-field-option.tsx b/packages/propel/src/components/field/radio-group-field-option.tsx
new file mode 100644
index 0000000..1486c48
--- /dev/null
+++ b/packages/propel/src/components/field/radio-group-field-option.tsx
@@ -0,0 +1,35 @@
+import type * as React from "react";
+
+import { FieldItem } from "../../ui/field/field-item";
+import { FieldItemContent } from "../../ui/field/field-item-content";
+import { useFieldOptionMagnitude } from "../../ui/field/use-field-option-magnitude";
+import type { FieldMagnitude } from "../../ui/field/variants";
+import { RadioFieldControl, type RadioFieldControlProps } from "./radio-field-control";
+
+export type RadioGroupFieldOptionProps = RadioFieldControlProps & {
+  /** Visible option label. */
+  label: React.ReactNode;
+  /** Optional supporting text announced as the radio description. */
+  description?: React.ReactNode;
+  /** Label and description size. Inherited from `RadioGroupField` when omitted. */
+  magnitude?: FieldMagnitude;
+};
+
+/** A radio option row for use inside `RadioGroupField` or a custom `RadioGroup`. */
+export function RadioGroupFieldOption({
+  label,
+  description,
+  magnitude: magnitudeProp,
+  ...props
+}: RadioGroupFieldOptionProps) {
+  const magnitude = useFieldOptionMagnitude(magnitudeProp);
+
+  return (
+    <FieldItem disabled={props.disabled}>
+      <RadioFieldControl {...props} />
+      <FieldItemContent magnitude={magnitude} description={description}>
+        {label}
+      </FieldItemContent>
+    </FieldItem>
+  );
+}
diff --git a/packages/propel/src/components/field/radio-group-field.tsx b/packages/propel/src/components/field/radio-group-field.tsx
new file mode 100644
index 0000000..9b3595e
--- /dev/null
+++ b/packages/propel/src/components/field/radio-group-field.tsx
@@ -0,0 +1,70 @@
+import type * as React from "react";
+
+import { Field } from "../../ui/field/field";
+import { FieldDescription } from "../../ui/field/field-description";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldOptionMagnitudeProvider } from "../../ui/field/field-option-magnitude-provider";
+import type { FieldMagnitude } from "../../ui/field/variants";
+import { Fieldset, FieldsetLegend } from "../../ui/fieldset/index";
+import { RadioGroup, type RadioGroupProps } from "../../ui/radio/index";
+
+export type RadioGroupFieldProps<Value = string> = Omit<
+  RadioGroupProps<Value>,
+  "children" | "density" | "name"
+> & {
+  /** Radio option rows, usually `RadioGroupFieldOption`. */
+  children: React.ReactNode;
+  /** Spacing between radio options. */
+  density: RadioGroupProps<Value>["density"];
+  /** Supporting text shown below the legend. */
+  description?: React.ReactNode;
+  /** Error text shown below the group. */
+  error?: React.ReactNode;
+  /** Helper text shown below the group. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Visible fieldset legend. */
+  label: React.ReactNode;
+  /** Legend and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Submitted field name. */
+  name: string;
+};
+
+/** Ready-to-use radio group field with legend, description, and helper/error text. */
+export function RadioGroupField<Value = string>({
+  children,
+  density,
+  description,
+  disabled,
+  error,
+  hint,
+  label,
+  magnitude,
+  name,
+  required,
+  ...groupProps
+}: RadioGroupFieldProps<Value>) {
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <Fieldset
+        render={
+          <RadioGroup<Value>
+            density={density}
+            disabled={disabled}
+            required={required}
+            {...groupProps}
+          />
+        }
+      >
+        <FieldsetLegend magnitude={magnitude}>{label}</FieldsetLegend>
+        {description != null ? (
+          <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+        ) : null}
+        <FieldOptionMagnitudeProvider magnitude={magnitude}>
+          {children}
+        </FieldOptionMagnitudeProvider>
+      </Fieldset>
+      <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/select-field.tsx b/packages/propel/src/components/field/select-field.tsx
new file mode 100644
index 0000000..b3e8f1b
--- /dev/null
+++ b/packages/propel/src/components/field/select-field.tsx
@@ -0,0 +1,84 @@
+import type * as React from "react";
+
+import { Field } from "../../ui/field/field";
+import { FieldDescription } from "../../ui/field/field-description";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import type { FieldMagnitude } from "../../ui/field/variants";
+import {
+  Select,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  type SelectProps,
+  SelectTrigger,
+  SelectValue,
+} from "../../ui/select/index";
+
+export type SelectFieldOption = {
+  label: React.ReactNode;
+  value: string;
+};
+
+export type SelectFieldProps = Omit<SelectProps<string>, "children" | "items"> & {
+  /** Supporting text shown below the trigger. */
+  description?: React.ReactNode;
+  /** Error text shown below the control. */
+  error?: React.ReactNode;
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Visible field label. */
+  label: React.ReactNode;
+  /** Label and helper text size. */
+  magnitude: FieldMagnitude;
+  /** Options rendered in the popup. */
+  options: readonly SelectFieldOption[];
+};
+
+/** Ready-to-use select field with label, trigger, popup options, and helper/error text. */
+export function SelectField({
+  description,
+  disabled,
+  error,
+  hint,
+  label,
+  magnitude,
+  name,
+  options,
+  ...selectProps
+}: SelectFieldProps) {
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <Select disabled={disabled} items={options} {...selectProps}>
+        <SelectLabel>{label}</SelectLabel>
+        <SelectTrigger>
+          <SelectValue />
+          <SelectIcon />
+        </SelectTrigger>
+        {description != null ? (
+          <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+        ) : null}
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectList>
+                {options.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    <SelectItemIndicator />
+                    <SelectItemText>{option.label}</SelectItemText>
+                  </SelectItem>
+                ))}
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+      </Select>
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/switch-field-control.tsx b/packages/propel/src/components/field/switch-field-control.tsx
new file mode 100644
index 0000000..7c7b45d
--- /dev/null
+++ b/packages/propel/src/components/field/switch-field-control.tsx
@@ -0,0 +1,5 @@
+export { Switch as SwitchFieldControl } from "../switch/index";
+export type {
+  SwitchMagnitude as SwitchFieldControlMagnitude,
+  SwitchProps as SwitchFieldControlProps,
+} from "../switch/index";
diff --git a/packages/propel/src/components/field/switch-field.tsx b/packages/propel/src/components/field/switch-field.tsx
new file mode 100644
index 0000000..b9c5dc8
--- /dev/null
+++ b/packages/propel/src/components/field/switch-field.tsx
@@ -0,0 +1,55 @@
+import type * as React from "react";
+
+import { Field } from "../../ui/field/field";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldItem } from "../../ui/field/field-item";
+import { FieldItemContent } from "../../ui/field/field-item-content";
+import type { FieldMagnitude } from "../../ui/field/variants";
+import {
+  SwitchFieldControl,
+  type SwitchFieldControlMagnitude,
+  type SwitchFieldControlProps,
+} from "./switch-field-control";
+
+const switchFieldTextMagnitude = {
+  sm: "md",
+  md: "md",
+  lg: "lg",
+} satisfies Record<SwitchFieldControlMagnitude, FieldMagnitude>;
+
+export type SwitchFieldProps = Omit<SwitchFieldControlProps, "aria-label"> & {
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Error text shown below the control. */
+  error?: React.ReactNode;
+  /** Visible field label. */
+  label: React.ReactNode;
+  /** Optional supporting text announced as the switch description. */
+  description?: React.ReactNode;
+};
+
+/** Ready-to-use switch field with label, description, and helper/error text. */
+export function SwitchField({
+  label,
+  description,
+  hint,
+  error,
+  magnitude,
+  name,
+  disabled,
+  ...controlProps
+}: SwitchFieldProps) {
+  const textMagnitude = switchFieldTextMagnitude[magnitude];
+
+  return (
+    <Field name={name} disabled={disabled} invalid={error != null || undefined}>
+      <FieldItem disabled={disabled}>
+        <SwitchFieldControl magnitude={magnitude} disabled={disabled} {...controlProps} />
+        <FieldItemContent magnitude={textMagnitude} description={description}>
+          {label}
+        </FieldItemContent>
+      </FieldItem>
+      <FieldHelperText magnitude={textMagnitude} hint={hint} error={error} />
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/field/text-area-field.stories.tsx b/packages/propel/src/components/field/text-area-field.stories.tsx
new file mode 100644
index 0000000..cbee99c
--- /dev/null
+++ b/packages/propel/src/components/field/text-area-field.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn } from "storybook/test";
+
+import { type InputMagnitude, TextAreaField } from "./index";
+
+const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
+
+const meta = {
+  title: "Components/TextAreaField",
+  component: TextAreaField,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1582-168",
+    },
+  },
+} satisfies Meta<typeof TextAreaField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Ready-to-go multi-line field built from Field, label/helper parts, and TextAreaFieldControl. */
+export const Default: Story = {
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    label: "Comment",
+    placeholder: "Leave a comment...",
+    description: "Share your thoughts on the proposal.",
+    hint: "Markdown is supported.",
+  },
+  render: (args) => (
+    <div className="w-80">
+      <TextAreaField {...args} />
+    </div>
+  ),
+};
+
+/**
+ * `TextAreaField` across every magnitude (`md` / `lg` / `xl`). Magnitude steps the value font-size
+ * and the field min-height; padding and radius stay fixed.
+ */
+export const Magnitudes: Story = {
+  args: { magnitude: "md", tone: "neutral", label: "Comment", placeholder: "Leave a comment..." },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-80 flex-col gap-4">
+      {MAGNITUDES.map((magnitude) => (
+        <TextAreaField
+          key={magnitude}
+          magnitude={magnitude}
+          tone="neutral"
+          label={magnitude}
+          placeholder="Leave a comment..."
+        />
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Overflowing `TextAreaField` content scrolls with a native scrollbar only once the text exceeds
+ * the field box, rather than reserving a permanent gutter.
+ */
+export const Scroll: Story = {
+  args: { magnitude: "md", tone: "neutral", label: "Comment" },
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="w-80">
+      <TextAreaField
+        magnitude="md"
+        tone="neutral"
+        label="Comment"
+        defaultValue={Array.from({ length: 12 }, (_, i) => `Line ${i + 1} of a long comment.`).join(
+          "\n",
+        )}
+      />
+    </div>
+  ),
+};
+
+/** The error treatment: danger border, danger helper text, and `aria-invalid`. */
+export const Error: Story = {
+  args: {
+    magnitude: "md",
+    tone: "danger",
+    label: "Comment",
+    defaultValue: "No",
+    error: "Add a little more detail.",
+    required: true,
+  },
+  render: (args) => (
+    <div className="w-80">
+      <TextAreaField {...args} />
+    </div>
+  ),
+};
+
+/** Typing into the textarea updates its value and fires the native change handler. */
+export const TypingUpdatesValue: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    tone: "neutral",
+    label: "Comment",
+    placeholder: "Leave a comment...",
+    onChange: fn(),
+  },
+  render: (args) => (
+    <div className="w-80">
+      <TextAreaField {...args} />
+    </div>
+  ),
+  play: async ({ args, canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    await userEvent.type(textarea, "Looks good");
+    await expect(textarea).toHaveValue("Looks good");
+    await expect(args.onChange).toHaveBeenCalled();
+  },
+};
+
+/** `tone="danger"` sets `aria-invalid` and renders the announced error text. */
+export const ErrorAnnouncesInvalid: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    magnitude: "md",
+    tone: "danger",
+    label: "Comment",
+    defaultValue: "No",
+    error: "Add a little more detail.",
+  },
+  render: (args) => (
+    <div className="w-80">
+      <TextAreaField {...args} />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByRole("textbox", { name: "Comment" });
+    await expect(textarea).toHaveAttribute("aria-invalid", "true");
+    await expect(textarea).toHaveAccessibleDescription("Add a little more detail.");
+  },
+};
diff --git a/packages/propel/src/components/field/text-area-field.tsx b/packages/propel/src/components/field/text-area-field.tsx
new file mode 100644
index 0000000..3110e3a
--- /dev/null
+++ b/packages/propel/src/components/field/text-area-field.tsx
@@ -0,0 +1,68 @@
+import type * as React from "react";
+
+import { Field } from "../../ui/field/field";
+import { FieldHelperText } from "../../ui/field/field-helper-text";
+import { FieldLabelGroup } from "../../ui/field/field-label-group";
+import { TextAreaFieldBox } from "../../ui/field/text-area-field-box";
+import {
+  TextAreaFieldControl,
+  type TextAreaFieldControlProps,
+} from "../../ui/field/text-area-field-control";
+import type { InputMagnitude, InputTone } from "../../ui/field/variants";
+
+export type TextAreaFieldProps = Omit<TextAreaFieldControlProps, "magnitude" | "surface"> & {
+  /** Magnitude scale. `md` | `lg` | `xl`. */
+  magnitude: InputMagnitude;
+  /** Resting treatment. `neutral` | `danger` (the Figma "error" state). */
+  tone: InputTone;
+  /** Label text shown above the control. */
+  label?: React.ReactNode;
+  /** Marks the field required: adds a `*` asterisk and sets `required`. */
+  required?: boolean;
+  /** Supporting text shown directly below the label. */
+  description?: React.ReactNode;
+  /** Helper text shown below the control. Replaced by `error` when an error is set. */
+  hint?: React.ReactNode;
+  /** Error text shown below the control. Overrides `hint`; pair with `tone="danger"`. */
+  error?: React.ReactNode;
+};
+
+/**
+ * Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
+ * layout only.
+ */
+export function TextAreaField({
+  magnitude,
+  tone,
+  name,
+  label,
+  required,
+  description,
+  hint,
+  error,
+  disabled,
+  ...controlProps
+}: TextAreaFieldProps) {
+  return (
+    <Field name={name} disabled={disabled} invalid={tone === "danger" || undefined}>
+      <FieldLabelGroup
+        magnitude={magnitude}
+        required={required}
+        label={label}
+        description={description}
+        orientation="vertical"
+      />
+      <div className="flex w-full flex-col gap-1.5">
+        <TextAreaFieldBox tone={tone}>
+          <TextAreaFieldControl
+            required={required}
+            magnitude={magnitude}
+            surface="field"
+            {...controlProps}
+          />
+        </TextAreaFieldBox>
+        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
+      </div>
+    </Field>
+  );
+}
diff --git a/packages/propel/src/components/fieldset/fieldset.stories.tsx b/packages/propel/src/components/fieldset/fieldset.stories.tsx
new file mode 100644
index 0000000..a02edb3
--- /dev/null
+++ b/packages/propel/src/components/fieldset/fieldset.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { InputField } from "../field/index";
+import { Fieldset } from "./index";
+
+// Components-tier story: the ready-made `<Fieldset legend=…>` plus same-tier field controls.
+const meta = {
+  title: "Components/Fieldset",
+  component: Fieldset,
+  args: { legendMagnitude: "md" },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=2053-281",
+    },
+  },
+} satisfies Meta<typeof Fieldset>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Fieldset groups related fields under one accessible legend. */
+export const Default: Story = {
+  args: {
+    legend: "Billing details",
+    children: (
+      <div className="flex w-80 flex-col gap-4">
+        <InputField
+          magnitude="md"
+          tone="neutral"
+          orientation="vertical"
+          name="company"
+          label="Company"
+          placeholder="Acme Inc."
+        />
+        <InputField
+          magnitude="md"
+          tone="neutral"
+          orientation="vertical"
+          name="taxId"
+          label="Tax ID"
+          placeholder="US-123"
+        />
+      </div>
+    ),
+  },
+};
+
+/** The legend names the group landmark for assistive tech. */
+export const GroupSemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    legend: "Shipping address",
+    children: (
+      <div className="w-80">
+        <InputField magnitude="md" tone="neutral" orientation="vertical" name="city" label="City" />
+      </div>
+    ),
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("group", { name: "Shipping address" })).toBeInTheDocument();
+    await expect(canvas.getByRole("textbox", { name: "City" })).toHaveAttribute("name", "city");
+  },
+};
diff --git a/packages/propel/src/components/fieldset/fieldset.tsx b/packages/propel/src/components/fieldset/fieldset.tsx
new file mode 100644
index 0000000..45f4f6b
--- /dev/null
+++ b/packages/propel/src/components/fieldset/fieldset.tsx
@@ -0,0 +1,31 @@
+import type * as React from "react";
+
+import {
+  Fieldset as FieldsetRoot,
+  type FieldsetProps as FieldsetRootProps,
+  FieldsetLegend,
+  type FieldsetLegendProps,
+} from "../../ui/fieldset";
+
+export type FieldsetProps = FieldsetRootProps & {
+  /** The legend text labelling the group. */
+  legend: React.ReactNode;
+  /** Legend text size. */
+  legendMagnitude: FieldsetLegendProps["magnitude"];
+  /** The grouped controls. */
+  children: React.ReactNode;
+};
+
+/**
+ * The ready-made fieldset: groups a `legend` with its related controls for the 90% case. Pass the
+ * legend text and `legendMagnitude`; everything else flows through to the underlying fieldset
+ * root.
+ */
+export function Fieldset({ legend, legendMagnitude, children, ...props }: FieldsetProps) {
+  return (
+    <FieldsetRoot {...props}>
+      <FieldsetLegend magnitude={legendMagnitude}>{legend}</FieldsetLegend>
+      {children}
+    </FieldsetRoot>
+  );
+}
diff --git a/packages/propel/src/components/fieldset/index.tsx b/packages/propel/src/components/fieldset/index.tsx
new file mode 100644
index 0000000..34692cb
--- /dev/null
+++ b/packages/propel/src/components/fieldset/index.tsx
@@ -0,0 +1,3 @@
+export { Fieldset, type FieldsetProps } from "./fieldset";
+// Re-export the atomic legend so a custom fieldset is importable from this convenience.
+export { FieldsetLegend, type FieldsetLegendProps } from "../../ui/fieldset";
diff --git a/packages/propel/src/components/form/form.stories.tsx b/packages/propel/src/components/form/form.stories.tsx
new file mode 100644
index 0000000..c1c4998
--- /dev/null
+++ b/packages/propel/src/components/form/form.stories.tsx
@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
+
+import { Button } from "../button/index";
+import {
+  CheckboxGroupField,
+  CheckboxGroupFieldOption,
+  InputField,
+  RadioGroupField,
+  RadioGroupFieldOption,
+  SelectField,
+  SwitchField,
+} from "../field/index";
+import { Form } from "./index";
+
+// Components-tier story: the ready-made `Form` composed with same-tier field controls.
+const meta = {
+  title: "Components/Form",
+  component: Form,
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SERVER_TYPES = [
+  { label: "General purpose", value: "general" },
+  { label: "Compute optimized", value: "compute" },
+  { label: "Memory optimized", value: "memory" },
+];
+
+type LaunchServerValues = {
+  allowedProtocols: string[];
+  homepage: string;
+  restartOnFailure: boolean;
+  serverType: string;
+  storageType: string;
+};
+
+type ExampleFormProps = {
+  onFormSubmit?: (values: LaunchServerValues) => void;
+};
+
+function ExampleForm({ onFormSubmit }: ExampleFormProps) {
+  const [homepage, setHomepage] = React.useState("https://example.com");
+  const [errors, setErrors] = React.useState<Record<string, string | string[]>>({});
+  const homepageError = errors.homepage;
+
+  return (
+    <Form<LaunchServerValues>
+      errors={errors}
+      onFormSubmit={(values) => {
+        if (values.homepage.includes("example.com")) {
+          setErrors({ homepage: "The example domain is not allowed." });
+          return;
+        }
+
+        setErrors({});
+        onFormSubmit?.(values);
+      }}
+    >
+      <InputField
+        magnitude="md"
+        tone={homepageError ? "danger" : "neutral"}
+        orientation="vertical"
+        name="homepage"
+        label="Homepage"
+        type="url"
+        required
+        placeholder="https://plane.so"
+        value={homepage}
+        onValueChange={(nextHomepage) => {
+          setHomepage(nextHomepage);
+          if (homepageError) {
+            setErrors({});
+          }
+        }}
+        error={Array.isArray(homepageError) ? homepageError.join(" ") : homepageError}
+      />
+      <SelectField
+        name="serverType"
+        label="Server type"
+        magnitude="md"
+        options={SERVER_TYPES}
+        defaultValue="general"
+        required
+        description="Select the resource profile for this server."
+      />
+      <RadioGroupField
+        name="storageType"
+        label="Storage type"
+        magnitude="md"
+        density="comfortable"
+        defaultValue="ssd"
+        required
+      >
+        <RadioGroupFieldOption value="ssd" label="SSD" />
+        <RadioGroupFieldOption value="hdd" label="HDD" />
+      </RadioGroupField>
+      <CheckboxGroupField
+        name="allowedProtocols"
+        label="Allowed protocols"
+        magnitude="md"
+        density="comfortable"
+        defaultValue={["https"]}
+      >
+        <CheckboxGroupFieldOption tone="neutral" value="http" label="HTTP" />
+        <CheckboxGroupFieldOption tone="neutral" value="https" label="HTTPS" />
+        <CheckboxGroupFieldOption tone="neutral" value="ssh" label="SSH" />
+      </CheckboxGroupField>
+      <SwitchField
+        name="restartOnFailure"
+        label="Restart on failure"
+        magnitude="md"
+        defaultChecked
+      />
+      <Button type="submit" variant="secondary" tone="neutral" magnitude="md">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+
+/** Form coordinates field values and server-style field errors. */
+export const Default: Story = {
+  render: () => <ExampleForm />,
+};
+
+/** Submitting with the disallowed domain surfaces the server error on the homepage field. */
+export const SubmitWithErrors: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => <ExampleForm onFormSubmit={fn()} />,
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Homepage" });
+    const hdd = canvas.getByRole("radio", { name: "HDD" });
+    const ssh = canvas.getByRole("checkbox", { name: "SSH" });
+    const submit = canvas.getByRole("button", { name: "Submit" });
+
+    await userEvent.click(hdd);
+    await userEvent.click(ssh);
+    await userEvent.click(submit);
+    await expect(input).toHaveAccessibleDescription("The example domain is not allowed.");
+
+    await userEvent.clear(input);
+    await userEvent.type(input, "https://plane.so");
+    await userEvent.click(submit);
+
+    await waitFor(async () => {
+      await expect(input).not.toHaveAccessibleDescription("The example domain is not allowed.");
+    });
+  },
+};
diff --git a/packages/propel/src/components/form/index.tsx b/packages/propel/src/components/form/index.tsx
new file mode 100644
index 0000000..ab0023d
--- /dev/null
+++ b/packages/propel/src/components/form/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/form` only
+// when you need the lower-level parts.
+export * from "../../ui/form";
diff --git a/packages/propel/src/components/icon-button/icon-button.stories.tsx b/packages/propel/src/components/icon-button/icon-button.stories.tsx
index 495a7bb..89e90f0 100644
--- a/packages/propel/src/components/icon-button/icon-button.stories.tsx
+++ b/packages/propel/src/components/icon-button/icon-button.stories.tsx
@@ -11,7 +11,6 @@ const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
 const meta = {
   title: "Components/IconButton",
   component: IconButton,
-  // Icon picker control for the single glyph (the button's `children`).
   argTypes: { children: iconControl },
   parameters: {
     design: {
@@ -34,7 +33,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 /**
- * Every Figma "Type" side by side. The neutral fills are `primary`/`secondary`/ `tertiary`/`ghost`;
+ * Every Figma "Type" side by side. The neutral fills are `primary`/`secondary`/`tertiary`/`ghost`;
  * the two Error types are the `danger` tone of `primary` (Error fill) and `secondary` (Error
  * outline) — see {@link Tones}.
  */
@@ -112,9 +111,8 @@ export const Disabled: Story = {
 };
 
 /**
- * An IconButton exposes its `aria-label` as the accessible name. Tagged
- * `!dev`/`!autodocs`/`!manifest` so it's hidden from the sidebar, docs, and AI manifest — it's a
- * behavior test, not an example — but still runs under `test`.
+ * An IconButton exposes its `aria-label` as the accessible name. Tagged out of the
+ * sidebar/docs/manifest but still runs under `test`.
  */
 export const HasAccessibleName: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -128,10 +126,7 @@ export const HasAccessibleName: Story = {
   },
 };
 
-/**
- * Tab moves focus onto the icon button (queryable by its `aria-label`), then **Enter** activates it
- * (fires `onClick`).
- */
+/** Tab moves focus onto the icon button, then **Enter** activates it (fires `onClick`). */
 export const EnterActivates: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { onClick: fn() },
@@ -175,3 +170,21 @@ export const DisabledNotKeyboardActivatable: Story = {
     await expect(args.onClick).not.toHaveBeenCalled();
   },
 };
+
+/** A `loading` icon button remains focusable with `aria-busy`, but Base UI suppresses activation. */
+export const LoadingBlocksInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn(), loading: true },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Add item" });
+    await expect(button).toHaveAttribute("aria-busy", "true");
+    await expect(button).not.toBeDisabled();
+
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("[Space]");
+    await userEvent.click(button);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
diff --git a/packages/propel/src/components/icon-button/index.tsx b/packages/propel/src/components/icon-button/index.tsx
index c8a96a1..9095c9a 100644
--- a/packages/propel/src/components/icon-button/index.tsx
+++ b/packages/propel/src/components/icon-button/index.tsx
@@ -1,113 +1,3 @@
-import { cx } from "class-variance-authority";
-import { LoaderCircle } from "lucide-react";
-import * as React from "react";
-
-import { getLoadingButtonProps } from "../../internal/loading-button";
-import { nodeSlotClass } from "../../internal/node-slot";
-import {
-  type ButtonMagnitude,
-  type ButtonProps,
-  type ButtonTone,
-  type ButtonVariant,
-  buttonVariants,
-} from "../button/index";
-
-// IconButton is its own component, but it shares Button's cva chrome
-// (`buttonVariants`). Its box geometry and glyph scale differ from a text button:
-// icon buttons are square (a fixed `size-N` box) rather than label-driven, and
-// Figma's icon-button glyph sizes run a step larger than the text-button icon at md
-// and xl. Both differences live here.
-
-// Icon-only square sizes per magnitude. Figma's "Icon button" Size scale ships
-// S/Base/L/XL at 20/24/28/32px, mapped to sm/md/lg/xl. `size-N` fixes both width
-// and height so the button is always square; the base `items-center justify-center`
-// centers the glyph (no padding needed, the gap falls out of size minus glyph).
-const iconButtonSizeByMagnitude: Record<ButtonMagnitude, string> = {
-  sm: "size-5",
-  md: "size-6",
-  lg: "size-7",
-  xl: "size-8",
-};
-
-// `--node-size` per magnitude, from Figma's "Icon button" spec: 14 / 16 / 16 / 20px
-// for sm/md/lg/xl. This is the icon-button's own glyph scale, a step larger than the
-// text-button node at md (16 vs 14) and xl (20 vs 16). It is set on the button root so
-// the node slot and the loading spinner size to it.
-const iconButtonNodeSizeByMagnitude: Record<ButtonMagnitude, string> = {
-  sm: "[--node-size:0.875rem]", // 14px
-  md: "[--node-size:1rem]", // 16px
-  lg: "[--node-size:1rem]", // 16px
-  xl: "[--node-size:1.25rem]", // 20px
-};
-
-// Figma "Icon button" Type axis: Primary/Secondary/Tertiary/Error/Error outline/
-// Ghost. There is no link icon button, so IconButton drops Button's `link`
-// variant (and the link-only `emphasis` axis) — its visual axes are
-// `variant` + `tone`, the same compound tokens Button uses for everything but link.
-export type IconButtonVariant = Exclude<ButtonVariant, "link">;
-export type IconButtonTone = ButtonTone;
-export type IconButtonMagnitude = ButtonMagnitude;
-
-export type IconButtonProps = Omit<
-  ButtonProps,
-  "inlineStartNode" | "inlineEndNode" | "variant" | "emphasis"
-> & {
-  variant: IconButtonVariant;
-  /**
-   * The single node to render (an icon, an avatar, ...), sized to the button's `--node-size`. It is
-   * the button's only content, so it is `children`; decorative, the accessible name comes from
-   * `aria-label`.
-   */
-  children: React.ReactNode;
-  /** Required: icon-only buttons have no visible text, so they must be labeled. */
-  "aria-label": string;
-};
-
-/**
- * The icon-only form of {@link Button}: a square button with a single glyph and no label. It shares
- * Button's design tokens (`variant`/`tone`/`magnitude`) but is its own component/export. There is
- * no `link` icon button, so `variant` excludes it. An `aria-label` is REQUIRED for the accessible
- * name.
- */
-export function IconButton({
-  children,
-  variant,
-  tone,
-  magnitude,
-  loading = false,
-  disabled,
-  type = "button",
-  onClick,
-  ...props
-}: IconButtonProps) {
-  // `loading` mirrors Button: a soft-disabled busy state that shows a spinner and
-  // blocks clicks but stays a real, focusable button (`aria-busy`/`aria-disabled`).
-  // `disabled` is the hard, non-focusable native state. The spinner and the node slot
-  // size to `--node-size`, set per magnitude below.
-  return (
-    <button
-      type={type}
-      {...getLoadingButtonProps({ loading, disabled, onClick })}
-      className={cx(
-        // Pass only variant/tone so Button's chrome (background, border, text/icon
-        // color, radius) applies, but NOT its text-button geometry. `magnitude` would
-        // add a height, min-width and horizontal padding meant for labelled buttons;
-        // since cx does not dedupe conflicting utilities, those would beat the square
-        // size below and leave the button rectangular. The square `size-N` is the icon
-        // button's own geometry, and `--node-size` sizes its glyph.
-        buttonVariants({ variant, tone }),
-        iconButtonSizeByMagnitude[magnitude],
-        iconButtonNodeSizeByMagnitude[magnitude],
-      )}
-      {...props}
-    >
-      {loading ? (
-        <LoaderCircle aria-hidden className="size-(--node-size) animate-spin" />
-      ) : (
-        <span aria-hidden className={nodeSlotClass}>
-          {children}
-        </span>
-      )}
-    </button>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/icon-button` only
+// when you need the lower-level parts.
+export * from "../../ui/icon-button";
diff --git a/packages/propel/src/components/input/index.tsx b/packages/propel/src/components/input/index.tsx
index 620b9bb..0ba1abb 100644
--- a/packages/propel/src/components/input/index.tsx
+++ b/packages/propel/src/components/input/index.tsx
@@ -1,455 +1,7 @@
-import { Field as BaseField } from "@base-ui/react/field";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-// Shared scale across Input + TextArea, taken from the Figma "Input fields"
-// component (node 1582-168). The box has 12px horizontal padding at every
-// magnitude; label/helper text and the Input's value text + vertical padding
-// step up with `magnitude`.
-//   md → label text-13 / helper text-12; Input value text-14, v-padding 6px
-//   lg → label text-14 / helper text-13; Input value text-14, v-padding 8px
-//   xl → label text-14 / helper text-13; Input value text-16, v-padding 12px
-// TextArea value text differs at md (text-13 vs Input's text-14) — see
-// `textAreaTextVariants` — and TextArea keeps a constant 8px v-padding.
-
-// The label text. `magnitude` drives the size. `inset` is the horizontal layout's
-// alignment for a lone label (no description): it adds a magnitude-matched top
-// padding equal to the box's top padding + border (md 6+1, lg 8+1, xl 12+1 px) so
-// the single label line sits level with the control's value instead of hugging the
-// top of the box. It is a `Field.Label` so it never accepts styling from a consumer.
-const labelVariants = cva("font-medium text-primary", {
-  variants: {
-    magnitude: {
-      md: "text-13",
-      lg: "text-14",
-      xl: "text-14",
-    },
-    inset: {
-      true: "",
-      false: "",
-    },
-  },
-  compoundVariants: [
-    { magnitude: "md", inset: true, class: "pt-[7px]" },
-    { magnitude: "lg", inset: true, class: "pt-[9px]" },
-    { magnitude: "xl", inset: true, class: "pt-[13px]" },
-  ],
-});
-
-// The supporting text size for the `description` (below the label) and the
-// `hint`/`error` (below the control). Figma: md text-12, lg/xl text-13.
-const helperVariants = cva("", {
-  variants: {
-    magnitude: {
-      md: "text-12",
-      lg: "text-13",
-      xl: "text-13",
-    },
-  },
-});
-
-// The control's text size for the single-line `Input`. The placeholder/value
-// colors live on the element so they react to the empty/filled state without a
-// prop. (Figma: md value text-14, lg text-14, xl text-16.)
-const controlTextVariants = cva("", {
-  variants: {
-    magnitude: {
-      md: "text-14",
-      lg: "text-14",
-      xl: "text-16",
-    },
-  },
-});
-
-// The control's text size for the multi-line `TextArea`. This differs from
-// `Input` at `md`: the Figma "Text area" component (node 1582-168) uses a
-// text-13 value at md, text-14 at lg, text-16 at xl.
-const textAreaTextVariants = cva("", {
-  variants: {
-    magnitude: {
-      md: "text-13",
-      lg: "text-14",
-      xl: "text-16",
-    },
-  },
-});
-
-export type InputMagnitude = NonNullable<VariantProps<typeof labelVariants>["magnitude"]>;
-
-// All field tones. `danger` is the Figma "error" treatment — it only changes
-// the border + helper color; the rest of the chrome is shared.
-export type InputTone = "neutral" | "danger";
-
-/**
- * The box chrome shared by `Input` and `TextArea`: background and 1px border. Horizontal padding is
- * not part of the shared chrome -> each component adds it itself (`Input` pads the box, `TextArea`
- * pads the control; see the class comment below). The border color is owned entirely by the `tone`
- * variant (rather than overriding a base color, which is order-fragile in Tailwind) so the error
- * treatment always wins:
- *
- * Neutral → subtle border; hover darkens it; on `:focus-within` it becomes `accent-strong` plus a
- * 2px accent ring at 20% opacity (Figma's "active" state: border-accent-strong + 0 0 0 2px
- * rgba(accent,.2)). Hovering the active field must NOT change the chrome, so the accent border +
- * resting background are re-asserted at the higher `:focus-within:hover` specificity, which beats
- * the plain `:hover` styles when both apply (the ring is focus-only, so it already holds). danger →
- * `danger-strong` border at ALL times — resting, hover, and focus — with no accent ring (Figma's
- * "error" state).
- *
- * Disabled resets the border to subtle and removes hover/ring affordances. The radius and vertical
- * rhythm differ between Input and TextArea, so they are passed in by each component rather than
- * baked in here.
- */
-const boxVariants = cva(
-  cx(
-    // Horizontal padding is added per component: the single-line `Input` pads the box
-    // (`px-3`) so its value + icons sit inset, while the `TextArea` leaves the box
-    // edge-to-edge and pads the control instead, so its scrollbar sits flush with the
-    // container's right border rather than 12px in.
-    "flex w-full items-center gap-1.5 bg-layer-2 transition-[color,background-color,border-color,box-shadow]",
-    "border-sm",
-    // Disabled chrome: muted border, no hover/ring, not-allowed cursor.
-    "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-subtle has-[:disabled]:bg-layer-2 has-[:disabled]:ring-0 has-[:disabled]:hover:border-subtle",
-  ),
-  {
-    variants: {
-      tone: {
-        neutral: cx(
-          "border-subtle hover:border-subtle-1 hover:bg-layer-2-hover",
-          // Figma "active": accent border + 2px accent ring at 20% opacity.
-          "focus-within:border-accent-strong focus-within:bg-layer-2 focus-within:ring-2 focus-within:ring-accent-strong/20",
-          // Hovering while active keeps the active chrome: re-assert the accent border
-          // + resting background at the higher `:focus-within:hover` specificity so
-          // they win over the plain `:hover` styles above.
-          "focus-within:hover:border-accent-strong focus-within:hover:bg-layer-2",
-        ),
-        // Error border persists regardless of hover/focus, with no accent ring.
-        danger: "border-danger-strong",
-      },
-    },
-  },
-);
-
-// 16px lucide icons in the leading/trailing slots, muted to the Figma
-// `icon/secondary` color.
-const iconSlotClass = cx(
-  "flex shrink-0 items-center justify-center text-icon-secondary",
-  "[&_svg]:size-4",
-);
-
-/**
- * The label row: the label text and the required `*` asterisk in danger. Rendered by
- * `Input`/`TextArea`, but also usable directly when composing a field by hand.
- */
-function FieldLabelRow({
-  children,
-  magnitude,
-  required,
-  inset,
-}: {
-  children: React.ReactNode;
-  magnitude: InputMagnitude;
-  required?: boolean;
-  inset?: boolean;
-}) {
-  return (
-    <BaseField.Label
-      className={cx("inline-flex items-center gap-0.5", labelVariants({ magnitude, inset }))}
-    >
-      {children}
-      {required ? (
-        // Decorative: `required` on the control carries the real semantics.
-        <span aria-hidden className="text-danger-primary">
-          *
-        </span>
-      ) : null}
-    </BaseField.Label>
-  );
-}
-
-// The label column: the label row with its supporting `description` stacked
-// directly below it (Figma stacks them with a 4px gap, then a 12px gap to the
-// control). `orientation` sizes the column to its layout — full width when the label
-// sits above the control (`vertical`), a flex column when it sits beside it
-// (`horizontal`).
-const labelGroupVariants = cva("flex flex-col gap-1", {
-  variants: {
-    orientation: {
-      vertical: "w-full",
-      horizontal: "min-w-0 flex-1",
-    },
-  },
-});
-
-function FieldLabelGroup({
-  magnitude,
-  required,
-  label,
-  description,
-  orientation,
-}: {
-  magnitude: InputMagnitude;
-  required?: boolean;
-  label?: React.ReactNode;
-  description?: React.ReactNode;
-  orientation: NonNullable<VariantProps<typeof labelGroupVariants>["orientation"]>;
-}) {
-  if (label == null && description == null) {
-    return null;
-  }
-  // Horizontal with no description: a lone label should sit on the control's value
-  // line, so it gets the magnitude-matched top inset. With a description the
-  // label + description block top-aligns with the box, so no inset.
-  const inset = orientation === "horizontal" && description == null;
-  return (
-    <div className={labelGroupVariants({ orientation })}>
-      {label != null ? (
-        <FieldLabelRow magnitude={magnitude} required={required} inset={inset}>
-          {label}
-        </FieldLabelRow>
-      ) : null}
-      {description != null ? (
-        <BaseField.Description className={cx("text-tertiary", helperVariants({ magnitude }))}>
-          {description}
-        </BaseField.Description>
-      ) : null}
-    </div>
-  );
-}
-
-// The helper line below the control: the `error` text in danger when present,
-// otherwise the `hint` in the muted tertiary color. `error` overrides `hint`,
-// matching the Figma "error" state where the helper text turns red.
-function FieldHelperText({
-  magnitude,
-  hint,
-  error,
-}: {
-  magnitude: InputMagnitude;
-  hint?: React.ReactNode;
-  error?: React.ReactNode;
-}) {
-  if (error != null) {
-    return (
-      <BaseField.Error match className={cx("text-danger-primary", helperVariants({ magnitude }))}>
-        {error}
-      </BaseField.Error>
-    );
-  }
-  if (hint != null) {
-    return (
-      <BaseField.Description className={cx("text-tertiary", helperVariants({ magnitude }))}>
-        {hint}
-      </BaseField.Description>
-    );
-  }
-  return null;
-}
-
-/**
- * The shared field chrome, exposed as a compound so callers can build custom controls (e.g. a
- * Select) with the same label/helper/error treatment that `Input` and `TextArea` use. `Field`
- * itself is `Field.Root` (it groups the parts); the label/control/helper/error parts hang off it
- * and map onto Base UI's `Field` parts.
- */
-export const Field = Object.assign(
-  // The component is `Field.Root`, so `<Field>…</Field>` groups a custom field.
-  (props: React.ComponentProps<typeof BaseField.Root>) => <BaseField.Root {...props} />,
-  {
-    /** Groups the label, control, and helper/error. Renders a `<div>`. */
-    Root: BaseField.Root,
-    /** The label row primitive (label text + asterisk). */
-    Label: FieldLabelRow,
-    /** Supporting / helper text (`text-tertiary`); used below the label and below the control. */
-    Description: BaseField.Description,
-    /** Error text, shown when the field is invalid (`text-danger`). */
-    Error: BaseField.Error,
-    /** The control slot — renders an `<input>` by default. */
-    Control: BaseField.Control,
-  },
-);
-
-type FieldControlProps = React.ComponentProps<typeof BaseField.Control>;
-
-// Props every text field shares. `className`/`style` are intentionally omitted:
-// the components own their styling so every field looks the same.
-type SharedFieldProps = {
-  /** Magnitude scale. `md` | `lg` | `xl`. */
-  magnitude: InputMagnitude;
-  /** Resting treatment. `neutral` | `danger` (the Figma "error" state). */
-  tone: InputTone;
-  /** Label text shown above (or beside) the control. */
-  label?: React.ReactNode;
-  /** Marks the field required: adds a `*` asterisk and sets `required`. */
-  required?: boolean;
-  /** Supporting text shown directly below the label. */
-  description?: React.ReactNode;
-  /** Helper text shown below the control. Replaced by `error` when an error is set. */
-  hint?: React.ReactNode;
-  /** Error text shown below the control. Overrides `hint`; pair with `tone="danger"`. */
-  error?: React.ReactNode;
-};
-
-export type InputProps = Omit<FieldControlProps, "className" | "render" | "style"> &
-  SharedFieldProps & {
-    /** Label placement: `vertical` (label above) | `horizontal` (label beside). */
-    orientation: "vertical" | "horizontal";
-    /** A 16px lucide icon rendered before the control. */
-    leadingIcon?: React.ReactNode;
-    /** A 16px lucide icon rendered after the control. */
-    trailingIcon?: React.ReactNode;
-  };
-
-/**
- * Single-line text field built on Base UI `Field`. Supports leading/trailing icon slots and a
- * `horizontal` orientation where the label sits beside the control. States are element-driven
- * (hover / focus / filled / disabled / invalid), not props — only `tone="danger"` forces the error
- * treatment.
- */
-export function Input({
-  magnitude,
-  tone,
-  orientation,
-  label,
-  required,
-  description,
-  hint,
-  error,
-  leadingIcon,
-  trailingIcon,
-  disabled,
-  ...controlProps
-}: InputProps) {
-  const horizontal = orientation === "horizontal";
-  return (
-    <BaseField.Root
-      disabled={disabled}
-      // `tone="danger"` mirrors the error treatment even without HTML validity.
-      invalid={tone === "danger" || undefined}
-      className={cx(
-        // The label column sits beside (horizontal) or above (vertical) the control
-        // column with an 8px gap, top-aligned (`items-start`).
-        "flex gap-2",
-        horizontal ? "flex-row items-start" : "flex-col items-start",
-      )}
-    >
-      <FieldLabelGroup
-        magnitude={magnitude}
-        required={required}
-        label={label}
-        description={description}
-        orientation={orientation}
-      />
-      <div className={cx("flex flex-col", horizontal ? "min-w-0 flex-1 gap-2" : "w-full gap-1.5")}>
-        <div
-          className={cx(
-            boxVariants({ tone }),
-            "rounded-md px-3",
-            // Vertical padding per Figma: md 6px, lg 8px, xl 12px.
-            // (Side padding is a constant 12px via `px-3`.)
-            magnitude === "md" ? "py-1.5" : magnitude === "lg" ? "py-2" : "py-3",
-          )}
-        >
-          {leadingIcon ? (
-            <span aria-hidden className={iconSlotClass}>
-              {leadingIcon}
-            </span>
-          ) : null}
-          <BaseField.Control
-            required={required}
-            className={cx(
-              "min-w-0 flex-1 bg-transparent text-primary outline-none",
-              "placeholder:text-placeholder",
-              "disabled:cursor-not-allowed disabled:text-disabled",
-              controlTextVariants({ magnitude }),
-            )}
-            {...controlProps}
-          />
-          {trailingIcon ? (
-            <span aria-hidden className={iconSlotClass}>
-              {trailingIcon}
-            </span>
-          ) : null}
-        </div>
-        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
-      </div>
-    </BaseField.Root>
-  );
-}
-
-export type TextAreaProps = Omit<FieldControlProps, "className" | "render" | "style"> &
-  SharedFieldProps;
-
-// Min-height of the control per magnitude. The Figma "Text area" component
-// (node 1582-168) sizes the *box* to 82px at md and 100px at lg/xl; subtracting
-// the box's 16px vertical padding (8px top + 8px bottom) gives the control's
-// min-height below, so the rendered box matches Figma.
-const textAreaMinHeight: Record<InputMagnitude, string> = {
-  md: "min-h-[66px]",
-  lg: "min-h-[84px]",
-  xl: "min-h-[84px]",
-};
-
-/**
- * Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical
- * layout only (no `orientation`); `resize-none` by default with a magnitude-driven min-height.
- */
-export function TextArea({
-  magnitude,
-  tone,
-  label,
-  required,
-  description,
-  hint,
-  error,
-  disabled,
-  ...controlProps
-}: TextAreaProps) {
-  return (
-    <BaseField.Root
-      disabled={disabled}
-      invalid={tone === "danger" || undefined}
-      className="flex w-full flex-col items-start gap-2"
-    >
-      <FieldLabelGroup
-        magnitude={magnitude}
-        required={required}
-        label={label}
-        description={description}
-        orientation="vertical"
-      />
-      <div className="flex w-full flex-col gap-1.5">
-        <div
-          className={cx(
-            boxVariants({ tone }),
-            // TextArea uses the larger radius and a FIXED 8px vertical padding at
-            // every magnitude (Figma: `py spacing/2` for md/lg/xl). Unlike the
-            // single-line Input, magnitude does NOT change the box's vertical
-            // padding here — it drives the control's font-size + min-height. The box
-            // gets no horizontal padding: the control spans edge-to-edge and pads
-            // itself (`px-3`) so the native scrollbar sits flush with the right border.
-            "items-stretch rounded-lg py-2",
-          )}
-        >
-          <BaseField.Control
-            required={required}
-            render={<textarea />}
-            className={cx(
-              // A `<textarea>` scrolls its own content natively, so it can't be wrapped
-              // in a `ScrollArea` like other overflow surfaces. `scrollbar-sm` re-skins
-              // its native scrollbar with the propel scrollbar tokens instead. The
-              // control owns the 12px horizontal padding (the box has none) so the
-              // scrollbar is flush against the container edge with no gap.
-              "scrollbar-sm min-w-0 flex-1 resize-none overflow-y-auto bg-transparent px-3 text-primary outline-none",
-              "placeholder:text-placeholder",
-              "disabled:cursor-not-allowed disabled:text-disabled",
-              textAreaMinHeight[magnitude],
-              textAreaTextVariants({ magnitude }),
-            )}
-            {...controlProps}
-          />
-        </div>
-        <FieldHelperText magnitude={magnitude} hint={hint} error={error} />
-      </div>
-    </BaseField.Root>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/input` only
+// when you need the lower-level parts.
+export * from "../../ui/input";
+// Re-export the field-box surface helper so a consumer (or the components-tier story)
+// can frame a bare `Input` without dropping to `ui/field`. `InputMagnitude` already
+// comes through from `ui/input` above.
+export { type InputTone, inputFieldBoxVariants } from "../../ui/field/variants";
diff --git a/packages/propel/src/components/input/input.stories.tsx b/packages/propel/src/components/input/input.stories.tsx
index 1289cf4..40b6728 100644
--- a/packages/propel/src/components/input/input.stories.tsx
+++ b/packages/propel/src/components/input/input.stories.tsx
@@ -1,414 +1,103 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Mail, Search } from "lucide-react";
-import { expect, fn, userEvent } from "storybook/test";
+import type * as React from "react";
+import { expect, userEvent } from "storybook/test";
 
-import { iconControl } from "../../storybook/icon-control";
-import { Field, Input, type InputMagnitude, TextArea } from "./index";
+import { Field, FieldError, FieldLabel } from "../field/index";
+import { Input, type InputMagnitude, inputFieldBoxVariants } from "./index";
 
 const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
 
 const meta = {
   title: "Components/Input",
   component: Input,
-  // Input / TextArea / Field share the same chrome, so document the sibling
-  // primitives alongside Input (adds their tabs to the args table + records the
-  // relationship in the manifest).
-  subcomponents: { Input, TextArea, Field },
-  // Icon picker controls for the leading/trailing slots.
-  argTypes: { leadingIcon: iconControl, trailingIcon: iconControl },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1582-168",
-    },
-  },
 } satisfies Meta<typeof Input>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * Vertical layout: the `description` sits directly below the label, and the `hint` (helper text)
- * sits below the control.
- */
-export const Default: Story = {
-  args: {
-    magnitude: "md",
-    tone: "neutral",
-    orientation: "vertical",
-    label: "Email",
-    placeholder: "you@example.com",
-    description: "We'll use this to send you receipts.",
-    hint: "We'll never share your email.",
-  },
-};
+function InputSurface({
+  children,
+  magnitude = "md",
+}: {
+  children: React.ReactNode;
+  magnitude?: InputMagnitude;
+}) {
+  return (
+    <div className="w-72">
+      <div className={inputFieldBoxVariants({ magnitude, tone: "neutral" })}>{children}</div>
+    </div>
+  );
+}
 
-/** Horizontal layout: the label sits beside the control. */
-export const Horizontal: Story = {
+/** Single native input element. Compose it with `Field` for labels, names, and validation. */
+export const Default: Story = {
   args: {
     magnitude: "md",
-    tone: "neutral",
-    orientation: "horizontal",
-    label: "Email",
-    placeholder: "you@example.com",
+    "aria-label": "Name",
+    placeholder: "Ada Lovelace",
   },
-};
-
-/**
- * The horizontal layout across every magnitude. The `description` stacks below the label in the
- * left column, the `hint` sits below the control, and the error state (which overrides the hint)
- * shows in danger.
- */
-export const HorizontalShowcase: Story = {
-  // Required axes for the args table; the custom `render` ignores them.
-  args: { magnitude: "md", tone: "neutral", orientation: "horizontal" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-[440px] flex-col gap-4">
-      <Input
-        orientation="horizontal"
-        magnitude="md"
-        tone="neutral"
-        label="Email"
-        placeholder="md"
-      />
-      <Input
-        orientation="horizontal"
-        magnitude="lg"
-        tone="neutral"
-        label="Email"
-        placeholder="lg"
-        hint="Use your work email."
-      />
-      <Input
-        orientation="horizontal"
-        magnitude="xl"
-        tone="neutral"
-        label="Email"
-        placeholder="xl"
-        description="We never share your email with anyone."
-      />
-      <Input
-        orientation="horizontal"
-        magnitude="md"
-        label="Email"
-        tone="danger"
-        error="Enter a valid email address"
-        defaultValue="not-an-email"
-      />
-    </div>
+  render: (args) => (
+    <InputSurface>
+      <Input {...args} />
+    </InputSurface>
   ),
 };
 
-/** Leading and trailing 16px icon slots wrap the control. */
-export const WithIcons: Story = {
+/** Every input text magnitude. */
+export const Magnitudes: Story = {
   args: {
     magnitude: "md",
-    tone: "neutral",
-    orientation: "vertical",
-    label: "Search",
-    placeholder: "Search…",
-    leadingIcon: <Search />,
-    trailingIcon: <Mail />,
+    "aria-label": "Name",
+    placeholder: "Ada Lovelace",
   },
-};
-
-/**
- * The element-driven states side by side. Hover/focus/filled aren't props — they come from
- * interacting with the control; `disabled` and the error treatment (`tone="danger"`) are shown
- * statically.
- */
-export const States: Story = {
-  // Required axes for the args table; the custom `render` ignores them.
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
   parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-72 flex-col gap-4">
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Default"
-        placeholder="Placeholder"
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Focus / hover (interact)"
-        placeholder="Click me"
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Filled"
-        defaultValue="Ada Lovelace"
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Disabled"
-        placeholder="Placeholder"
-        disabled
-      />
-      <Input
-        magnitude="md"
-        tone="danger"
-        orientation="vertical"
-        label="Error"
-        defaultValue="not-an-email"
-        error="Enter a valid email."
-      />
-    </div>
-  ),
-};
-
-/** Every magnitude (`md` / `lg` / `xl`) stacked. */
-export const Magnitudes: Story = {
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical", placeholder: "Placeholder" },
-  argTypes: { magnitude: { control: false }, label: { control: false } },
   render: (args) => (
-    <div className="flex w-72 flex-col gap-4">
-      {MAGNITUDES.map((magnitude) => (
-        <Input key={magnitude} {...args} magnitude={magnitude} label={magnitude} />
-      ))}
-    </div>
-  ),
-};
-
-/** Multi-line `TextArea` — the primitive the Comment composer builds on. */
-export const TextAreaStory: Story = {
-  name: "TextArea",
-  // Required axes for the args table; the custom `render` ignores them.
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80">
-      <TextArea
-        magnitude="md"
-        tone="neutral"
-        label="Comment"
-        placeholder="Leave a comment…"
-        description="Share your thoughts on the proposal."
-        hint="Markdown is supported."
-      />
-    </div>
-  ),
-};
-
-/**
- * `TextArea` across every magnitude (`md` / `lg` / `xl`). Magnitude steps the value font-size (13 /
- * 14 / 16) and the box min-height (82 / 100 / 100px); the 12px side / 8px vertical padding and 8px
- * radius stay constant (Figma).
- */
-export const TextAreaMagnitudes: Story = {
-  name: "TextArea Magnitudes",
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex w-80 flex-col gap-4">
+    <div className="flex flex-col gap-3">
       {MAGNITUDES.map((magnitude) => (
-        <TextArea
-          key={magnitude}
-          magnitude={magnitude}
-          tone="neutral"
-          label={magnitude}
-          placeholder="Leave a comment…"
-        />
+        <InputSurface key={magnitude} magnitude={magnitude}>
+          <Input {...args} magnitude={magnitude} aria-label={magnitude} placeholder={magnitude} />
+        </InputSurface>
       ))}
     </div>
   ),
 };
 
-/**
- * Overflowing `TextArea` content scrolls with a native scrollbar that only appears once the text
- * exceeds the box (matching the Dropdown popup), rather than reserving a permanent gutter.
- */
-export const TextAreaScroll: Story = {
-  name: "TextArea Scroll",
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80">
-      <TextArea
-        magnitude="md"
-        tone="neutral"
-        label="Comment"
-        defaultValue={Array.from({ length: 12 }, (_, i) => `Line ${i + 1} of a long comment.`).join(
-          "\n",
-        )}
-      />
-    </div>
-  ),
-};
-
-/** The error treatment: danger border, danger helper text, and `aria-invalid`. */
-export const Error: Story = {
-  args: {
-    magnitude: "md",
-    orientation: "vertical",
-    label: "Email",
-    tone: "danger",
-    defaultValue: "not-an-email",
-    error: "Enter a valid email address.",
-    required: true,
-  },
-};
-
-/**
- * RTL smoke check: the same stories rendered inside `dir="rtl"`. Text aligns to the right, the
- * leading (start) icon sits on the right edge and the trailing (end) icon on the left, and the
- * horizontal label sits to the right of its control. Excluded from autodocs/manifest — it exists
- * for visual review.
- */
-export const RtlVerify: Story = {
-  name: "RTL Verify",
-  tags: ["!autodocs", "!manifest"],
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div dir="rtl" className="flex w-80 flex-col gap-6">
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="البريد الإلكتروني"
-        placeholder="you@example.com"
-        description="سنستخدمه لإرسال الإيصالات."
-        hint="لن نشارك بريدك الإلكتروني."
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="horizontal"
-        label="البريد"
-        placeholder="you@example.com"
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="بحث"
-        placeholder="Search…"
-        leadingIcon={<Search />}
-        trailingIcon={<Mail />}
-      />
-      <Input
-        magnitude="md"
-        orientation="vertical"
-        tone="danger"
-        label="البريد الإلكتروني"
-        required
-        defaultValue="not-an-email"
-        error="أدخل بريدًا إلكترونيًا صالحًا."
-      />
-    </div>
-  ),
-};
-
-/** LTR counterpart of {@link RtlVerify} for side-by-side comparison. */
-export const LtrVerify: Story = {
-  name: "LTR Verify",
-  tags: ["!autodocs", "!manifest"],
-  args: { magnitude: "md", tone: "neutral", orientation: "vertical" },
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div dir="ltr" className="flex w-80 flex-col gap-6">
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Email"
-        placeholder="you@example.com"
-        description="We'll use this to send you receipts."
-        hint="We'll never share your email."
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="horizontal"
-        label="Email"
-        placeholder="you@example.com"
-      />
-      <Input
-        magnitude="md"
-        tone="neutral"
-        orientation="vertical"
-        label="Search"
-        placeholder="Search…"
-        leadingIcon={<Search />}
-        trailingIcon={<Mail />}
-      />
-      <Input
-        magnitude="md"
-        orientation="vertical"
-        tone="danger"
-        label="Email"
-        required
-        defaultValue="not-an-email"
-        error="Enter a valid email address."
-      />
-    </div>
-  ),
-};
-
-/**
- * Typing into the control updates its value. Query by role (`textbox`) and drive it with
- * `userEvent`; an `onChange` spy proves the change handler fires.
- */
-export const TypingUpdatesValue: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: {
-    magnitude: "md",
-    tone: "neutral",
-    orientation: "vertical",
-    label: "Name",
-    placeholder: "Your name",
-    onChange: fn(),
-  },
-  play: async ({ args, canvas }) => {
-    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Name" });
-    await userEvent.type(input, "Grace");
-    await expect(input).toHaveValue("Grace");
-    await expect(args.onChange).toHaveBeenCalled();
-  },
-};
-
-/** A `disabled` control rejects input — the value stays empty after typing. */
-export const DisabledBlocksInput: Story = {
+export const FieldComposition: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  args: {
-    magnitude: "md",
-    tone: "neutral",
-    orientation: "vertical",
-    label: "Name",
-    placeholder: "Your name",
-    disabled: true,
-  },
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Field name="displayName">
+      <FieldLabel magnitude="md">Display name</FieldLabel>
+      <InputSurface>
+        <Input {...args} placeholder="Ada Lovelace" />
+      </InputSurface>
+    </Field>
+  ),
   play: async ({ canvas }) => {
-    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Name" });
-    await expect(input).toBeDisabled();
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Display name" });
     await userEvent.type(input, "Grace");
-    await expect(input).toHaveValue("");
+    await expect(input).toHaveAttribute("name", "displayName");
+    await expect(input).toHaveValue("Grace");
   },
 };
 
-/** `tone="danger"` sets `aria-invalid` and renders the announced error text. */
-export const ErrorAnnouncesInvalid: Story = {
+export const FieldErrorAssociation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  args: {
-    magnitude: "md",
-    orientation: "vertical",
-    label: "Email",
-    tone: "danger",
-    defaultValue: "x",
-    error: "Enter a valid email address.",
-  },
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Field name="email" invalid>
+      <FieldLabel magnitude="md">Email</FieldLabel>
+      <InputSurface>
+        <Input {...args} defaultValue="not-an-email" />
+      </InputSurface>
+      <FieldError magnitude="md" match={true}>
+        Enter a valid email address.
+      </FieldError>
+    </Field>
+  ),
   play: async ({ canvas }) => {
-    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Email" });
+    const input = canvas.getByRole("textbox", { name: "Email" });
     await expect(input).toHaveAttribute("aria-invalid", "true");
-    await expect(canvas.getByText("Enter a valid email address.")).toBeInTheDocument();
+    await expect(input).toHaveAccessibleDescription("Enter a valid email address.");
   },
 };
diff --git a/packages/propel/src/components/menu/index.tsx b/packages/propel/src/components/menu/index.tsx
new file mode 100644
index 0000000..e8d3238
--- /dev/null
+++ b/packages/propel/src/components/menu/index.tsx
@@ -0,0 +1,44 @@
+export { MenuCheckboxItem, type MenuCheckboxItemProps } from "./menu-checkbox-item";
+export { MenuContent, type MenuContentProps } from "./menu-content";
+export { MenuFooter, type MenuFooterProps } from "./menu-footer";
+export { MenuItem, type MenuItemProps } from "./menu-item";
+export { MenuLinkItem, type MenuLinkItemProps } from "./menu-link-item";
+export { MenuSearch, type MenuSearchProps } from "./menu-search";
+export { MenuSubContent, type MenuSubContentProps } from "./menu-sub-content";
+export { MenuSubTrigger, type MenuSubTriggerProps } from "./menu-sub-trigger";
+// Re-export the atomic menu parts so a full menu can be assembled from one entry.
+export {
+  Menu,
+  type MenuProps,
+  MenuArrow,
+  type MenuArrowProps,
+  MenuBackdrop,
+  type MenuBackdropProps,
+  MenuCheckboxItemIndicator,
+  type MenuCheckboxItemIndicatorProps,
+  MenuGroup,
+  type MenuGroupProps,
+  MenuGroupLabel,
+  type MenuGroupLabelProps,
+  MenuLabel,
+  type MenuLabelProps,
+  MenuPopup,
+  type MenuPopupProps,
+  MenuPortal,
+  MenuPositioner,
+  type MenuPositionerProps,
+  MenuRadioGroup,
+  type MenuRadioGroupProps,
+  MenuRadioItem,
+  type MenuRadioItemProps,
+  MenuRadioItemIndicator,
+  type MenuRadioItemIndicatorProps,
+  MenuSeparator,
+  type MenuSeparatorProps,
+  MenuSub,
+  type MenuSubProps,
+  MenuTrigger,
+  type MenuTriggerProps,
+  MenuViewport,
+  type MenuViewportProps,
+} from "../../ui/menu";
diff --git a/packages/propel/src/components/menu/menu-checkbox-item.tsx b/packages/propel/src/components/menu/menu-checkbox-item.tsx
new file mode 100644
index 0000000..6db5787
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-checkbox-item.tsx
@@ -0,0 +1,59 @@
+import type * as React from "react";
+
+import { useControllableState } from "../../hooks/use-controllable-state/index";
+import { NodeSlot } from "../../internal/node-slot";
+import { CheckboxVisual } from "../../ui/checkbox/index";
+import {
+  MenuCheckboxItem as MenuCheckboxItemRoot,
+  type MenuCheckboxItemProps as MenuCheckboxItemRootProps,
+} from "../../ui/menu";
+
+export type MenuCheckboxItemProps = MenuCheckboxItemRootProps & {
+  /** Leading content shown after the checkbox. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made toggleable multi-select menu row: composes the atomic `MenuCheckboxItem` and lays
+ * out the propel `CheckboxVisual`, optional leading/trailing nodes, and the label.
+ */
+export function MenuCheckboxItem({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  children,
+  ...props
+}: MenuCheckboxItemProps) {
+  const [isChecked, setChecked] = useControllableState<boolean>({
+    value: checked,
+    defaultValue: defaultChecked ?? false,
+  });
+
+  return (
+    <MenuCheckboxItemRoot
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onCheckedChange={(next, details) => {
+        setChecked(next);
+        onCheckedChange?.(next, details);
+      }}
+      {...props}
+    >
+      <span className="flex shrink-0 items-center">
+        <CheckboxVisual tone="neutral" checked={isChecked} disabled={props.disabled} />
+      </span>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? (
+        <span className="shrink-0 text-12 text-tertiary">{inlineEndNode}</span>
+      ) : null}
+    </MenuCheckboxItemRoot>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-content.shared.tsx b/packages/propel/src/components/menu/menu-content.shared.tsx
new file mode 100644
index 0000000..69c6394
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-content.shared.tsx
@@ -0,0 +1,56 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
+
+export type MenuContentWidth = OverlayPanelWidth;
+
+export type MenuContentProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Popup>,
+  "className" | "style"
+> & {
+  /** Which side of the trigger the menu opens toward. @default "bottom" */
+  side?: React.ComponentProps<typeof BaseMenu.Positioner>["side"];
+  /** Distance in px between the trigger and the menu. @default 4 */
+  sideOffset?: React.ComponentProps<typeof BaseMenu.Positioner>["sideOffset"];
+  /** Alignment of the menu relative to the trigger along `side`. @default "start" */
+  align?: React.ComponentProps<typeof BaseMenu.Positioner>["align"];
+  /** Fixed menu width. @default "anchor" */
+  width?: MenuContentWidth;
+  /** Sticky chrome pinned above the role="menu" popup. */
+  search?: React.ReactNode;
+  /** Sticky chrome pinned below the role="menu" popup. */
+  footer?: React.ReactNode;
+};
+
+export function MenuContentSurface({
+  children,
+  side,
+  sideOffset,
+  align,
+  width,
+  search,
+  footer,
+  ...props
+}: MenuContentProps & {
+  side: React.ComponentProps<typeof BaseMenu.Positioner>["side"];
+  sideOffset: React.ComponentProps<typeof BaseMenu.Positioner>["sideOffset"];
+  align: React.ComponentProps<typeof BaseMenu.Positioner>["align"];
+}) {
+  return (
+    <BaseMenu.Portal>
+      <BaseMenu.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        className="outline-none"
+      >
+        <OverlayPanel elevation="overlay" radius="lg" width={width} header={search} footer={footer}>
+          <BaseMenu.Popup className="p-1 outline-none" {...props}>
+            {children}
+          </BaseMenu.Popup>
+        </OverlayPanel>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-content.tsx b/packages/propel/src/components/menu/menu-content.tsx
new file mode 100644
index 0000000..f4ceb46
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-content.tsx
@@ -0,0 +1,13 @@
+import { MenuContentSurface, type MenuContentProps } from "./menu-content.shared";
+
+export type { MenuContentProps } from "./menu-content.shared";
+
+/** The menu surface: portal + positioner + popup with Propel overlay styling. */
+export function MenuContent({
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: MenuContentProps) {
+  return <MenuContentSurface side={side} sideOffset={sideOffset} align={align} {...props} />;
+}
diff --git a/packages/propel/src/components/menu/menu-footer.tsx b/packages/propel/src/components/menu/menu-footer.tsx
new file mode 100644
index 0000000..66ba7c8
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-footer.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+export type MenuFooterProps = Omit<React.ComponentProps<"div">, "className" | "style">;
+
+/** A non-interactive footer pinned below a `MenuContent` menu popup. */
+export function MenuFooter(props: MenuFooterProps) {
+  return (
+    <div
+      className="shrink-0 border-t border-subtle bg-layer-2 px-3 py-2 text-12 text-tertiary"
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-item.tsx b/packages/propel/src/components/menu/menu-item.tsx
new file mode 100644
index 0000000..2eaa2d2
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-item.tsx
@@ -0,0 +1,62 @@
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { MenuItem as MenuItemRoot, type MenuItemProps as MenuItemRootProps } from "../../ui/menu";
+
+export type MenuItemProps = MenuItemRootProps & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Muted secondary line under the label. */
+  description?: React.ReactNode;
+  /** Muted text shown inline after the label. */
+  secondaryText?: React.ReactNode;
+  /** Trailing content after the label. */
+  inlineEndNode?: React.ReactNode;
+  /** Single-select selected state. */
+  selected?: boolean;
+};
+
+/**
+ * The ready-made selectable menu row: composes the atomic `MenuItem` and lays out optional
+ * leading/trailing nodes, the label, a secondary line, and the single-select check indicator.
+ */
+export function MenuItem({
+  inlineStartNode,
+  label,
+  description,
+  secondaryText,
+  inlineEndNode,
+  selected,
+  children,
+  ...props
+}: MenuItemProps) {
+  return (
+    <MenuItemRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className="flex min-w-0 items-baseline gap-1.5">
+          <span className="truncate">{label ?? children}</span>
+          {secondaryText != null ? (
+            <span className="shrink-0 truncate text-12 text-tertiary group-data-disabled/item:text-disabled">
+              {secondaryText}
+            </span>
+          ) : null}
+        </span>
+        {description != null ? (
+          <span className="truncate text-12 text-tertiary group-data-disabled/item:text-disabled">
+            {description}
+          </span>
+        ) : null}
+      </span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      {selected ? (
+        <span className="flex h-5 w-4 shrink-0 items-center justify-center">
+          <Check className="size-4 text-icon-accent-primary" aria-hidden="true" />
+        </span>
+      ) : null}
+    </MenuItemRoot>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-link-item.tsx b/packages/propel/src/components/menu/menu-link-item.tsx
new file mode 100644
index 0000000..1021fe0
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-link-item.tsx
@@ -0,0 +1,36 @@
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  MenuLinkItem as MenuLinkItemRoot,
+  type MenuLinkItemProps as MenuLinkItemRootProps,
+} from "../../ui/menu";
+
+export type MenuLinkItemProps = MenuLinkItemRootProps & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content after the label. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made navigational `<a>` menu row: composes the atomic `MenuLinkItem` and lays out
+ * optional leading/trailing nodes and the label.
+ */
+export function MenuLinkItem({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  children,
+  ...props
+}: MenuLinkItemProps) {
+  return (
+    <MenuLinkItemRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+    </MenuLinkItemRoot>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-search.tsx b/packages/propel/src/components/menu/menu-search.tsx
new file mode 100644
index 0000000..494a1a3
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-search.tsx
@@ -0,0 +1,37 @@
+import { Search } from "lucide-react";
+import type * as React from "react";
+
+export type MenuSearchProps = Omit<
+  React.ComponentProps<"input">,
+  "className" | "style" | "onChange" | "value" | "type"
+> & {
+  /** Current search text. */
+  value?: string;
+  /** Called with the new text on each keystroke. */
+  onValueChange?: (value: string) => void;
+  /** Placeholder text. @default "Search" */
+  placeholder?: string;
+};
+
+/** A sticky search input pinned above a `MenuContent` menu popup. */
+export function MenuSearch({
+  value,
+  onValueChange,
+  placeholder = "Search",
+  ...props
+}: MenuSearchProps) {
+  return (
+    <div className="flex shrink-0 items-center gap-1.5 border-b border-subtle bg-surface-1 px-3 py-2">
+      <Search className="size-4 shrink-0 text-icon-tertiary" aria-hidden="true" />
+      <input
+        type="text"
+        onKeyDown={(event) => event.stopPropagation()}
+        value={value}
+        onChange={(event) => onValueChange?.(event.target.value)}
+        placeholder={placeholder}
+        className="min-w-0 flex-1 bg-transparent text-13 text-secondary outline-none placeholder:text-placeholder"
+        {...props}
+      />
+    </div>
+  );
+}
diff --git a/packages/propel/src/components/menu/menu-sub-content.tsx b/packages/propel/src/components/menu/menu-sub-content.tsx
new file mode 100644
index 0000000..ca9330a
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-sub-content.tsx
@@ -0,0 +1,13 @@
+import { MenuContentSurface, type MenuContentProps } from "./menu-content.shared";
+
+export type MenuSubContentProps = MenuContentProps;
+
+/** The floating surface for a submenu. */
+export function MenuSubContent({
+  side = "right",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: MenuSubContentProps) {
+  return <MenuContentSurface side={side} sideOffset={sideOffset} align={align} {...props} />;
+}
diff --git a/packages/propel/src/components/menu/menu-sub-trigger.tsx b/packages/propel/src/components/menu/menu-sub-trigger.tsx
new file mode 100644
index 0000000..11de0d2
--- /dev/null
+++ b/packages/propel/src/components/menu/menu-sub-trigger.tsx
@@ -0,0 +1,41 @@
+import { ChevronRight } from "lucide-react";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  MenuSubTrigger as MenuSubTriggerRoot,
+  type MenuSubTriggerProps as MenuSubTriggerRootProps,
+} from "../../ui/menu";
+
+export type MenuSubTriggerProps = MenuSubTriggerRootProps & {
+  /** Leading content before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** The primary text of the row. */
+  label?: React.ReactNode;
+  /** Trailing content before the chevron. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made submenu trigger row: composes the atomic `MenuSubTrigger` and lays out optional
+ * leading/trailing nodes, the label, and the chevron.
+ */
+export function MenuSubTrigger({
+  inlineStartNode,
+  label,
+  inlineEndNode,
+  children,
+  ...props
+}: MenuSubTriggerProps) {
+  return (
+    <MenuSubTriggerRoot {...props}>
+      {inlineStartNode != null ? <NodeSlot>{inlineStartNode}</NodeSlot> : null}
+      <span className="min-w-0 flex-1 truncate">{label ?? children}</span>
+      {inlineEndNode != null ? <NodeSlot>{inlineEndNode}</NodeSlot> : null}
+      <ChevronRight
+        className="size-4 shrink-0 text-icon-tertiary group-data-disabled/item:text-icon-disabled rtl:-scale-x-100"
+        aria-hidden="true"
+      />
+    </MenuSubTriggerRoot>
+  );
+}
diff --git a/packages/propel/src/components/dropdown/dropdown.stories.tsx b/packages/propel/src/components/menu/menu.stories.tsx
similarity index 83%
rename from packages/propel/src/components/dropdown/dropdown.stories.tsx
rename to packages/propel/src/components/menu/menu.stories.tsx
index 4cfcb23..712c8be 100644
--- a/packages/propel/src/components/dropdown/dropdown.stories.tsx
+++ b/packages/propel/src/components/menu/menu.stories.tsx
@@ -25,53 +25,53 @@ import { expect, userEvent, waitFor, within } from "storybook/test";
 import { Avatar } from "../avatar/index";
 import { Badge } from "../badge/index";
 import {
-  Dropdown,
-  DropdownCheckboxItem,
-  DropdownContent,
-  DropdownFooter,
-  DropdownGroup,
-  DropdownItem,
-  DropdownLabel,
-  DropdownSearch,
-  DropdownSeparator,
-  DropdownSub,
-  DropdownSubContent,
-  DropdownSubTrigger,
-  DropdownTrigger,
+  Menu,
+  MenuCheckboxItem,
+  MenuContent,
+  MenuFooter,
+  MenuGroup,
+  MenuItem,
+  MenuLabel,
+  MenuSearch,
+  MenuSeparator,
+  MenuSub,
+  MenuSubContent,
+  MenuSubTrigger,
+  MenuTrigger,
 } from "./index";
 
 const meta = {
-  title: "Components/Dropdown",
-  component: Dropdown,
+  title: "Components/Menu",
+  component: Menu,
   parameters: {
     design: {
       type: "figma",
       url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=30-1078",
     },
   },
-  // Dropdown is a compound component; document every menu part alongside the root so
+  // Menu is a compound component; document every menu part alongside the root so
   // their props appear in the args table and the relationship is recorded in the
   // manifest (the same pattern AvatarGroup uses for Avatar).
   subcomponents: {
-    DropdownTrigger,
-    DropdownContent,
-    DropdownItem,
-    DropdownCheckboxItem,
-    DropdownSeparator,
-    DropdownGroup,
-    DropdownLabel,
-    DropdownSearch,
-    DropdownFooter,
-    DropdownSub,
-    DropdownSubTrigger,
-    DropdownSubContent,
+    MenuTrigger,
+    MenuContent,
+    MenuItem,
+    MenuCheckboxItem,
+    MenuSeparator,
+    MenuGroup,
+    MenuLabel,
+    MenuSearch,
+    MenuFooter,
+    MenuSub,
+    MenuSubTrigger,
+    MenuSubContent,
   },
-} satisfies Meta<typeof Dropdown>;
+} satisfies Meta<typeof Menu>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// A plain trigger button styled with propel tokens — the dropdown itself doesn't
+// A plain trigger button styled with propel tokens — the menu itself doesn't
 // ship a trigger style, so stories provide one to keep the focus on the menu.
 const triggerClass =
   "inline-flex h-8 items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
@@ -123,7 +123,7 @@ function checkboxBoxBgColor(row: HTMLElement) {
 // Small demo-only fixtures. Where a demo needs a propel primitive that does not
 // exist yet (a selectable pill/chip, a sort-direction button group), a minimal
 // local version is defined inline and flagged in the PR — it is NOT part of the
-// Dropdown API.
+// Menu API.
 // ---------------------------------------------------------------------------
 
 // Status glyphs (Figma "Status" demo).
@@ -203,16 +203,13 @@ export const Status: Story = {
     const [query, setQuery] = React.useState("");
     const visible = STATUSES.filter((s) => s.label.toLowerCase().includes(query.toLowerCase()));
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           {STATUSES.find((s) => s.key === selected)?.label ?? "Status"}
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+        </MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {visible.map((s) => (
-            <DropdownItem
+            <MenuItem
               key={s.key}
               variant="default"
               inlineStartNode={s.icon}
@@ -222,8 +219,8 @@ export const Status: Story = {
               onClick={() => setSelected(s.key)}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -239,8 +236,8 @@ export const Status: Story = {
 };
 
 /**
- * Demo 2 — **Labels**. Multi-select: each row is a `DropdownCheckboxItem` (the propel `Checkbox` as
- * the leading control) plus a color swatch, with a search header. When the typed query has no exact
+ * Demo 2 — **Labels**. Multi-select: each row is a `MenuCheckboxItem` (the propel `Checkbox` as the
+ * leading control) plus a color swatch, with a search header. When the typed query has no exact
  * match, an "Add label" option (Figma `64-626`) appears, separated from the search by a single
  * divider line.
  */
@@ -254,19 +251,14 @@ export const Labels: Story = {
     const canAdd =
       trimmed.length > 0 && !LABELS.some((l) => l.label.toLowerCase() === trimmed.toLowerCase());
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
-          Labels
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>Labels</MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {canAdd ? (
             // A single horizontal divider separates the search from the new-label item
-            // (Figma 64-626): the sticky DropdownSearch already draws its own bottom
+            // (Figma 64-626): the sticky MenuSearch already draws its own bottom
             // rule, so the "Add label" row mounts directly beneath it with no extra line.
-            <DropdownItem
+            <MenuItem
               variant="default"
               inlineStartNode={<Plus className="text-icon-secondary" />}
               label={`Add label "${trimmed}"`}
@@ -274,7 +266,7 @@ export const Labels: Story = {
             />
           ) : null}
           {visible.map((l) => (
-            <DropdownCheckboxItem
+            <MenuCheckboxItem
               key={l.key}
               inlineStartNode={<ColorSwatch className={l.color} />}
               label={l.label}
@@ -282,8 +274,8 @@ export const Labels: Story = {
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [l.key]: next }))}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -312,40 +304,34 @@ export const Labels: Story = {
  */
 export const ActionMenu: Story = {
   render: () => (
-    <Dropdown>
-      <DropdownTrigger render={<button type="button" className={triggerClass} />}>
-        Actions
-      </DropdownTrigger>
-      <DropdownContent width="sm">
-        <DropdownItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
-        <DropdownItem variant="default" inlineStartNode={<Copy />} label="Make a copy" />
-        <DropdownItem
-          variant="default"
-          inlineStartNode={<ExternalLink />}
-          label="Open in new tab"
-        />
-        <DropdownItem
+    <Menu>
+      <MenuTrigger render={<button type="button" className={triggerClass} />}>Actions</MenuTrigger>
+      <MenuContent width="sm">
+        <MenuItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
+        <MenuItem variant="default" inlineStartNode={<Copy />} label="Make a copy" />
+        <MenuItem variant="default" inlineStartNode={<ExternalLink />} label="Open in new tab" />
+        <MenuItem
           variant="default"
           inlineStartNode={<Link2 />}
           label="Copy link"
           inlineEndNode={<span className="text-12 text-tertiary">⌘L</span>}
         />
-        <DropdownSeparator />
-        <DropdownItem
+        <MenuSeparator />
+        <MenuItem
           inlineStartNode={<Trash2 />}
           label="Archive"
           variant="with-description"
           description="Only completed or cancelled work items can be archived"
           disabled
         />
-        <DropdownSeparator />
-        <DropdownItem
+        <MenuSeparator />
+        <MenuItem
           variant="default"
           inlineStartNode={<Trash2 className="text-danger-primary" />}
           label={<span className="text-danger-primary">Delete</span>}
         />
-      </DropdownContent>
-    </Dropdown>
+      </MenuContent>
+    </Menu>
   ),
   play: async ({ canvas, step }) => {
     await step("open and confirm the disabled Archive row", async () => {
@@ -402,12 +388,12 @@ export const Description: Story = {
   render: function DescriptionStory() {
     const [selected, setSelected] = React.useState("private");
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Visibility
-        </DropdownTrigger>
-        <DropdownContent width="lg">
-          <DropdownItem
+        </MenuTrigger>
+        <MenuContent width="lg">
+          <MenuItem
             inlineStartNode={<Lock />}
             label="Private"
             variant="with-description"
@@ -416,7 +402,7 @@ export const Description: Story = {
             closeOnClick={false}
             onClick={() => setSelected("private")}
           />
-          <DropdownItem
+          <MenuItem
             inlineStartNode={<Globe />}
             label="Public"
             variant="with-description"
@@ -425,8 +411,8 @@ export const Description: Story = {
             closeOnClick={false}
             onClick={() => setSelected("public")}
           />
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -442,7 +428,35 @@ export const Description: Story = {
 };
 
 /**
- * Demo 5 — **Assignees**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`) with a propel
+ * `MenuLabel` titles a grouped section and can carry inline-end metadata; `MenuFooter` renders
+ * sticky non-menu chrome outside the `role="menu"` list.
+ */
+export const LabelAndFooterSemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Menu>
+      <MenuTrigger render={<button type="button" className={triggerClass} />}>
+        Grouped menu
+      </MenuTrigger>
+      <MenuContent width="sm" footer={<MenuFooter>Type to add another item.</MenuFooter>}>
+        <MenuGroup>
+          <MenuLabel inlineEndNode={<span>3</span>}>Section</MenuLabel>
+          <MenuItem variant="default" label="First item" />
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
+  ),
+  play: async ({ canvas }) => {
+    await openMenu(canvas, "Grouped menu");
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("Section");
+    await expect(document.body).toHaveTextContent("3");
+    await expect(document.body).toHaveTextContent("Type to add another item.");
+  },
+};
+
+/**
+ * Demo 5 — **Assignees**. Multi-select: a `MenuCheckboxItem` (propel `Checkbox`) with a propel
  * `Avatar` as the leading content, a search header, and a disabled row.
  */
 export const Assignees: Story = {
@@ -451,16 +465,16 @@ export const Assignees: Story = {
     const [query, setQuery] = React.useState("");
     const visible = ASSIGNEES.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()));
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Assignees
-        </DropdownTrigger>
-        <DropdownContent
+        </MenuTrigger>
+        <MenuContent
           width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} placeholder="Search" />}
+          search={<MenuSearch value={query} onValueChange={setQuery} placeholder="Search" />}
         >
           {visible.map((a) => (
-            <DropdownCheckboxItem
+            <MenuCheckboxItem
               key={a.key}
               inlineStartNode={<Avatar magnitude="2xs" fallback={initials(a.name)} alt={a.name} />}
               label={a.name}
@@ -469,8 +483,8 @@ export const Assignees: Story = {
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [a.key]: next }))}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -501,16 +515,13 @@ export const LanguagePicker: Story = {
       `${l.label} ${l.secondary}`.toLowerCase().includes(query.toLowerCase()),
     );
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           {LANGUAGES.find((l) => l.key === selected)?.label ?? "Language"}
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+        </MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {visible.map((l) => (
-            <DropdownItem
+            <MenuItem
               key={l.key}
               variant="default"
               label={l.label}
@@ -520,8 +531,8 @@ export const LanguagePicker: Story = {
               onClick={() => setSelected(l.key)}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -541,7 +552,7 @@ export const LanguagePicker: Story = {
 };
 
 /**
- * Demo 7 — **Priority**. Multi-select: a `DropdownCheckboxItem` (propel `Checkbox`) with a leading
+ * Demo 7 — **Priority**. Multi-select: a `MenuCheckboxItem` (propel `Checkbox`) with a leading
  * priority glyph, plus a search header.
  */
 export const Priority: Story = {
@@ -550,16 +561,13 @@ export const Priority: Story = {
     const [query, setQuery] = React.useState("");
     const visible = PRIORITIES.filter((p) => p.label.toLowerCase().includes(query.toLowerCase()));
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Priority
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+        </MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {visible.map((p) => (
-            <DropdownCheckboxItem
+            <MenuCheckboxItem
               key={p.key}
               inlineStartNode={p.icon}
               label={p.label}
@@ -567,8 +575,8 @@ export const Priority: Story = {
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -587,9 +595,9 @@ const VIEW_ALL_PREVIEW = 2;
 
 /**
  * Regression — **CheckedFillVisible**. Locks in the fix for the invisible checked checkbox: a
- * tone-less `CheckboxVisual` (as rendered by `DropdownCheckboxItem`) used to inherit no fill, so
- * the white check sat on a transparent box and disappeared. Toggling a row to CHECKED must give its
- * box a VISIBLE `bg-accent-primary` fill — a non-transparent background-color equal to the
+ * tone-less `CheckboxVisual` (as rendered by `MenuCheckboxItem`) used to inherit no fill, so the
+ * white check sat on a transparent box and disappeared. Toggling a row to CHECKED must give its box
+ * a VISIBLE `bg-accent-primary` fill — a non-transparent background-color equal to the
  * accent-primary token. Not a documented demo; this is a test-only fixture.
  */
 export const CheckedFillVisible: Story = {
@@ -597,13 +605,13 @@ export const CheckedFillVisible: Story = {
   render: function CheckedFillVisibleStory() {
     const [checked, setChecked] = React.useState<Record<string, boolean>>({});
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Priority
-        </DropdownTrigger>
-        <DropdownContent width="sm">
+        </MenuTrigger>
+        <MenuContent width="sm">
           {PRIORITIES.map((p) => (
-            <DropdownCheckboxItem
+            <MenuCheckboxItem
               key={p.key}
               inlineStartNode={p.icon}
               label={p.label}
@@ -611,8 +619,8 @@ export const CheckedFillVisible: Story = {
               onCheckedChange={(next) => setChecked((c) => ({ ...c, [p.key]: next }))}
             />
           ))}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -689,14 +697,11 @@ export const Filters: Story = {
       },
     ];
     return (
-      <Dropdown>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>
           Filters
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+        </MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {sections.map((section, index) => {
             const items = section.items.filter((i) => match(i.label));
             if (items.length === 0) return null;
@@ -710,13 +715,13 @@ export const Filters: Story = {
             return (
               <React.Fragment key={section.title}>
                 {/* Divider between categories. */}
-                {index > 0 ? <DropdownSeparator /> : null}
-                <DropdownGroup>
+                {index > 0 ? <MenuSeparator /> : null}
+                <MenuGroup>
                   {/* The category heading is itself a menuitem (valid `role="menu"`
                       child) so its collapse chevron stays interactive without breaking
                       ARIA. The label is the section title; the chevron is the
                       inlineEndNode. */}
-                  <DropdownItem
+                  <MenuItem
                     variant="default"
                     label={section.title}
                     aria-expanded={!isCollapsed}
@@ -732,7 +737,7 @@ export const Filters: Story = {
                   />
                   {!isCollapsed
                     ? visibleItems.map((i) => (
-                        <DropdownCheckboxItem
+                        <MenuCheckboxItem
                           key={i.key}
                           inlineStartNode={i.icon}
                           label={i.label}
@@ -746,7 +751,7 @@ export const Filters: Story = {
                       it reveals the remaining rows inline; once expanded it becomes
                       "Show less". `aria-expanded` reflects the inline-expansion state. */}
                   {!isCollapsed && hasOverflow ? (
-                    <DropdownItem
+                    <MenuItem
                       variant="default"
                       emphasis="link"
                       aria-expanded={isExpandedAll}
@@ -761,12 +766,12 @@ export const Filters: Story = {
                       }
                     />
                   ) : null}
-                </DropdownGroup>
+                </MenuGroup>
               </React.Fragment>
             );
           })}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ canvas, step }) => {
@@ -814,28 +819,18 @@ export const EmptyState: Story = {
     const [query, setQuery] = React.useState("Product");
     const visible = STATUSES.filter((s) => s.label.toLowerCase().includes(query.toLowerCase()));
     return (
-      <Dropdown defaultOpen>
-        <DropdownTrigger render={<button type="button" className={triggerClass} />}>
-          Status
-        </DropdownTrigger>
-        <DropdownContent
-          width="sm"
-          search={<DropdownSearch value={query} onValueChange={setQuery} />}
-        >
+      <Menu defaultOpen>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>Status</MenuTrigger>
+        <MenuContent width="sm" search={<MenuSearch value={query} onValueChange={setQuery} />}>
           {visible.length > 0 ? (
             visible.map((s) => (
-              <DropdownItem
-                key={s.key}
-                variant="default"
-                inlineStartNode={s.icon}
-                label={s.label}
-              />
+              <MenuItem key={s.key} variant="default" inlineStartNode={s.icon} label={s.label} />
             ))
           ) : (
             <div className="px-2 py-2 text-13 text-tertiary">No matching results</div>
           )}
-        </DropdownContent>
-      </Dropdown>
+        </MenuContent>
+      </Menu>
     );
   },
   play: async ({ step }) => {
@@ -855,7 +850,7 @@ export const EmptyState: Story = {
 
 /**
  * Demo 10 — **Submenu**. Rows carry a trailing count `Badge` and a chevron; hovering one opens a
- * nested submenu of options (built on `DropdownSub`).
+ * nested submenu of options (built on `MenuSub`).
  */
 export const Submenu: Story = {
   parameters: {
@@ -874,13 +869,13 @@ export const Submenu: Story = {
     },
   },
   render: () => (
-    <Dropdown>
-      <DropdownTrigger render={<button type="button" className={triggerClass} />}>
+    <Menu>
+      <MenuTrigger render={<button type="button" className={triggerClass} />}>
         Filter by
-      </DropdownTrigger>
-      <DropdownContent width="sm">
-        <DropdownSub>
-          <DropdownSubTrigger
+      </MenuTrigger>
+      <MenuContent width="sm">
+        <MenuSub>
+          <MenuSubTrigger
             label="Priority"
             inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
@@ -888,9 +883,9 @@ export const Submenu: Story = {
               </Badge>
             }
           />
-          <DropdownSubContent width="sm">
+          <MenuSubContent width="sm">
             {PRIORITIES.map((p) => (
-              <DropdownItem
+              <MenuItem
                 key={p.key}
                 variant="default"
                 inlineStartNode={p.icon}
@@ -898,10 +893,10 @@ export const Submenu: Story = {
                 closeOnClick={false}
               />
             ))}
-          </DropdownSubContent>
-        </DropdownSub>
-        <DropdownSub>
-          <DropdownSubTrigger
+          </MenuSubContent>
+        </MenuSub>
+        <MenuSub>
+          <MenuSubTrigger
             label="State"
             inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
@@ -909,9 +904,9 @@ export const Submenu: Story = {
               </Badge>
             }
           />
-          <DropdownSubContent width="sm">
+          <MenuSubContent width="sm">
             {STATUSES.map((s) => (
-              <DropdownItem
+              <MenuItem
                 key={s.key}
                 variant="default"
                 inlineStartNode={s.icon}
@@ -919,10 +914,10 @@ export const Submenu: Story = {
                 closeOnClick={false}
               />
             ))}
-          </DropdownSubContent>
-        </DropdownSub>
-        <DropdownSub>
-          <DropdownSubTrigger
+          </MenuSubContent>
+        </MenuSub>
+        <MenuSub>
+          <MenuSubTrigger
             label="Assignee"
             inlineEndNode={
               <Badge magnitude="sm" tone="neutral">
@@ -930,9 +925,9 @@ export const Submenu: Story = {
               </Badge>
             }
           />
-          <DropdownSubContent width="sm">
+          <MenuSubContent width="sm">
             {ASSIGNEES.map((a) => (
-              <DropdownItem
+              <MenuItem
                 key={a.key}
                 variant="default"
                 inlineStartNode={
@@ -942,10 +937,10 @@ export const Submenu: Story = {
                 closeOnClick={false}
               />
             ))}
-          </DropdownSubContent>
-        </DropdownSub>
-      </DropdownContent>
-    </Dropdown>
+          </MenuSubContent>
+        </MenuSub>
+      </MenuContent>
+    </Menu>
   ),
   play: async ({ canvas, step }) => {
     await step("open the menu and reveal a submenu", async () => {
diff --git a/packages/propel/src/components/menubar/index.tsx b/packages/propel/src/components/menubar/index.tsx
new file mode 100644
index 0000000..5802874
--- /dev/null
+++ b/packages/propel/src/components/menubar/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/menubar` only
+// when you need the lower-level parts.
+export * from "../../ui/menubar";
diff --git a/packages/propel/src/components/menubar/menubar.stories.tsx b/packages/propel/src/components/menubar/menubar.stories.tsx
new file mode 100644
index 0000000..67aa615
--- /dev/null
+++ b/packages/propel/src/components/menubar/menubar.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Copy, FilePlus, FolderOpen, Redo2, Save, Scissors, Undo2 } from "lucide-react";
+import { expect, userEvent, waitFor } from "storybook/test";
+
+import { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from "../menu/index";
+import { Menubar } from "./index";
+
+// Components-tier story: the `Menubar` container hosts a row of `Menu` roots, each
+// using the ready-made `MenuContent` surface plus the rich `MenuItem` rows
+// (icon + label). The UI-tier story assembles the popup parts by hand.
+const meta = {
+  title: "Components/Menubar",
+  component: Menubar,
+  subcomponents: { Menu, MenuTrigger, MenuContent, MenuItem },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const triggerClass =
+  "inline-flex h-7 items-center rounded-sm px-2.5 text-13 text-secondary outline-none data-popup-open:bg-layer-transparent-hover";
+
+/** A row of menus, each opening a ready-made `MenuContent` of icon rows. */
+export const Default: Story = {
+  parameters: {
+    a11y: {
+      // With a menu open, Base UI's Menubar treats each menu as a submenu and emits a
+      // visually-hidden `aria-owns` owner `<span>` to reparent the portaled popup into
+      // the correct place in the accessibility tree. In the DOM that span lands inside
+      // the `role="menubar"`, which axe's aria-required-children flags as a disallowed
+      // child — a static-analysis false-positive (same as the Menu Submenu story; see
+      // dequelabs/axe-core#4048 and floating-ui/floating-ui#3424). Suppress just this rule.
+      config: { rules: [{ id: "aria-required-children", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Menubar>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>File</MenuTrigger>
+        <MenuContent width="sm">
+          <MenuItem variant="default" inlineStartNode={<FilePlus />} label="New file" />
+          <MenuItem variant="default" inlineStartNode={<FolderOpen />} label="Open…" />
+          <MenuSeparator />
+          <MenuItem variant="default" inlineStartNode={<Save />} label="Save" />
+        </MenuContent>
+      </Menu>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>Edit</MenuTrigger>
+        <MenuContent width="sm">
+          <MenuItem variant="default" inlineStartNode={<Undo2 />} label="Undo" />
+          <MenuItem variant="default" inlineStartNode={<Redo2 />} label="Redo" />
+          <MenuSeparator />
+          <MenuItem variant="default" inlineStartNode={<Scissors />} label="Cut" />
+          <MenuItem variant="default" inlineStartNode={<Copy />} label="Copy" />
+        </MenuContent>
+      </Menu>
+    </Menubar>
+  ),
+  play: async ({ canvas }) => {
+    // Inside a Menubar, each menu trigger is a `role="menuitem"` (not a plain button).
+    await userEvent.click(canvas.getByRole("menuitem", { name: "Edit" }));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("Undo");
+    await expect(document.body).toHaveTextContent("Redo");
+  },
+};
diff --git a/packages/propel/src/components/meter/index.tsx b/packages/propel/src/components/meter/index.tsx
new file mode 100644
index 0000000..08dac2c
--- /dev/null
+++ b/packages/propel/src/components/meter/index.tsx
@@ -0,0 +1,11 @@
+export { Meter, type MeterProps } from "./meter";
+export {
+  MeterIndicator,
+  type MeterIndicatorProps,
+  MeterLabel,
+  type MeterLabelProps,
+  MeterTrack,
+  type MeterTrackProps,
+  MeterValue,
+  type MeterValueProps,
+} from "../../ui/meter";
diff --git a/packages/propel/src/components/meter/meter.stories.tsx b/packages/propel/src/components/meter/meter.stories.tsx
new file mode 100644
index 0000000..3bc229a
--- /dev/null
+++ b/packages/propel/src/components/meter/meter.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Meter } from "./index";
+
+// Components-tier story: the ready-made `<Meter value label />`, which composes the
+// `ui/meter` parts (root + label + track › indicator + value). The UI-tier story
+// assembles those parts by hand.
+const meta = {
+  title: "Components/Meter",
+  component: Meter,
+  args: { value: 64, label: "Disk usage" },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Meter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Drive the gauge with `value`; the fill and the formatted readout follow. */
+export const Default: Story = {};
+
+/** Several fill levels of the ready-made meter. */
+export const Levels: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {[15, 50, 90].map((value) => (
+        <Meter key={value} value={value} label="Storage" />
+      ))}
+    </div>
+  ),
+};
+
+/** `format` (an `Intl.NumberFormatOptions`) formats the readout — here as a percentage. */
+export const Formatted: Story = {
+  args: { value: 0.42, label: "Quota", format: { style: "percent" }, max: 1 },
+  parameters: { controls: { disable: true } },
+};
+
+/**
+ * Behavior: the ready-made meter exposes `role="meter"` with the current value via `aria-valuenow`.
+ * Tagged out of the sidebar/docs/manifest but still runs under `test`.
+ */
+export const HasMeterRole: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { value: 42, label: undefined, "aria-label": "Quota" },
+  play: async ({ canvas }) => {
+    const meter = canvas.getByRole("meter", { name: "Quota" });
+    await expect(meter).toHaveAttribute("aria-valuenow", "42");
+  },
+};
diff --git a/packages/propel/src/components/meter/meter.tsx b/packages/propel/src/components/meter/meter.tsx
new file mode 100644
index 0000000..4f19eff
--- /dev/null
+++ b/packages/propel/src/components/meter/meter.tsx
@@ -0,0 +1,40 @@
+import type * as React from "react";
+
+import {
+  Meter as MeterRoot,
+  MeterIndicator,
+  MeterLabel,
+  MeterTrack,
+  MeterValue,
+  type MeterProps as MeterRootProps,
+} from "../../ui/meter";
+
+export type MeterProps = MeterRootProps & {
+  /**
+   * Optional visible label rendered above the track (e.g. "Disk usage"). When omitted, provide an
+   * `aria-label` so the gauge is still named for assistive tech.
+   */
+  label?: React.ReactNode;
+};
+
+/**
+ * The ready-made meter: a static gauge that graphs a numeric `value` within a known range
+ * (`min`/`max`, default 0–100) — disk usage, quota consumption, password strength. Drive it with
+ * `value`; the fill and the formatted readout follow. Pass `format` (an `Intl.NumberFormatOptions`)
+ * to format the value, and either `label` (visible) or `aria-label` to name it.
+ *
+ * Composed from the `ui/meter` parts (`Meter` root + `MeterLabel` + `MeterTrack` + `MeterIndicator`
+ * + `MeterValue`), which are built on Base UI `Meter` (it owns the `meter` role +
+ * `aria-valuenow`).
+ */
+export function Meter({ label, ...props }: MeterProps) {
+  return (
+    <MeterRoot {...props}>
+      {label == null ? null : <MeterLabel>{label}</MeterLabel>}
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+      <MeterValue />
+    </MeterRoot>
+  );
+}
diff --git a/packages/propel/src/components/nav-item/index.tsx b/packages/propel/src/components/nav-item/index.tsx
index ea24811..6a60edf 100644
--- a/packages/propel/src/components/nav-item/index.tsx
+++ b/packages/propel/src/components/nav-item/index.tsx
@@ -1,336 +1,5 @@
-import { useRender } from "@base-ui/react/use-render";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { useControllableState } from "../../hooks/use-controllable-state/index";
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// The Figma "Nav item" component (node 1329-396) is a single clickable sidebar row:
-// a leading icon, a flexible label that truncates, and an optional trailing slot
-// (a count chip and/or a disclosure chevron). It has three axes:
-//
-//   • magnitude — the Figma `magnitude` axis. `lg` uses text/14 (the default sidebar
-//     row); `md` uses text/13 (the compact variant). Both are 32px tall.
-//   • level     — the Figma `Level` axis (1–5): the nesting depth, which only adds
-//     inline-start padding so children indent under their parent (8px per level).
-//   • active    — the Figma `Selected` state, driven as a boolean prop rather than a
-//     variant because it is a runtime selection, not a static style.
-//
-// The remaining Figma states are interaction states, expressed with CSS, not props:
-//   - Default  → transparent surface, `text/secondary` label, `icon/placeholder` icons
-//   - Hover    → `background/layer/transparent-hover`
-//   - Pressed  → `background/layer/transparent-active`, `text/primary`
-//   - Selected → `background/layer/transparent-selected`, `text/primary` (the `active` prop)
-//
-// It is polymorphic: it renders a `<button>` by default but accepts `render` (Base UI's
-// `useRender`) so it can be an `<a>` link while staying accessible. The selected row is
-// marked with `aria-current="page"`.
-
-const navItemVariants = cva(
-  cx(
-    "group/nav-item flex h-8 w-full items-center gap-2 rounded-lg ps-2 pe-2 text-start",
-    "bg-layer-transparent text-secondary transition-colors outline-none",
-    "cursor-pointer select-none",
-    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active active:text-primary",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    // Selected (Figma "Selected" state): filled surface + primary text.
-    "data-active:bg-layer-transparent-selected data-active:text-primary",
-    // Disabled: dimmed and non-interactive.
-    "disabled:pointer-events-none disabled:text-disabled aria-disabled:pointer-events-none aria-disabled:text-disabled",
-  ),
-  {
-    variants: {
-      // The Figma `magnitude` axis. Only the label type size changes (lg 14px / md
-      // 13px); both rows keep the 32px height and 8px spacing.
-      magnitude: {
-        lg: "text-14",
-        md: "text-13",
-      },
-      // The Figma `Level` axis. Deeper levels add inline-start padding (8px per level)
-      // so nested rows indent under their parent. Level 1 keeps the base `ps-2` (8px).
-      level: {
-        1: "",
-        2: "ps-4", // 16px
-        3: "ps-6", // 24px
-        4: "ps-8", // 32px
-        5: "ps-10", // 40px
-      },
-    },
-  },
-);
-
-export type NavItemMagnitude = NonNullable<VariantProps<typeof navItemVariants>["magnitude"]>;
-export type NavItemLevel = NonNullable<VariantProps<typeof navItemVariants>["level"]>;
-
-export type NavItemProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> & {
-  /** The row label. Truncates with an ellipsis when it overflows. */
-  children: React.ReactNode;
-  /** Size of the row label: `lg` (14px, default sidebar) or `md` (13px, compact). */
-  magnitude: NavItemMagnitude;
-  /**
-   * Nesting depth (1–5). Higher levels indent the row further from the inline-start so children sit
-   * under their parent. Defaults to `1`.
-   */
-  level?: NavItemLevel;
-  /**
-   * Whether this row is the current/selected item. Applies the selected surface and marks the
-   * element with `aria-current="page"` for assistive tech.
-   */
-  active?: boolean;
-  /**
-   * Leading content at the inline-start (e.g. a lucide icon), sized to 16px and `aria-hidden` (the
-   * label is the accessible name). Logical node slot, matching Button/IconButton's
-   * `inlineStartNode`.
-   */
-  inlineStartNode?: React.ReactNode;
-  /**
-   * Optional trailing content at the inline-end — typically a `NavItemCount` and/or a
-   * `NavItemChevron`. Logical node slot, matching Button's `inlineEndNode`.
-   */
-  inlineEndNode?: React.ReactNode;
-};
-
-/**
- * A single sidebar navigation row — a leading icon, a label, and an optional trailing slot (count /
- * chevron). Renders a `<button>` by default; pass `render={<a href=… />}` to make it a link while
- * keeping it keyboard- and screen-reader-accessible. Mark the current page with `active` (sets
- * `aria-current="page"`). Faithful to Figma node 1329-396.
- */
-export function NavItem({
-  children,
-  magnitude,
-  level = 1,
-  active = false,
-  inlineStartNode,
-  inlineEndNode,
-  render,
-  ...props
-}: NavItemProps) {
-  return useRender({
-    render: render ?? <button type="button" />,
-    props: {
-      ...props,
-      "aria-current": active ? "page" : undefined,
-      className: navItemVariants({ magnitude, level }),
-      children: (
-        <>
-          {inlineStartNode ? (
-            <span
-              aria-hidden
-              className={cx(
-                "flex size-4 shrink-0 items-center justify-center text-icon-placeholder [&>svg]:size-full",
-                // Selected/pressed pull the leading icon up to the primary tone.
-                "group-active/nav-item:text-icon-primary group-data-active/nav-item:text-icon-primary",
-                // Disabled dims the icon to match the dimmed label.
-                "group-disabled/nav-item:text-icon-disabled group-aria-disabled/nav-item:text-icon-disabled",
-              )}
-            >
-              {inlineStartNode}
-            </span>
-          ) : null}
-          <span className="min-w-0 flex-1 truncate leading-snug font-medium">{children}</span>
-          {inlineEndNode ? (
-            <span className="flex shrink-0 items-center gap-2">{inlineEndNode}</span>
-          ) : null}
-        </>
-      ),
-    },
-    // The `active` prop is surfaced as `data-active` so the variants above (and the
-    // leading-icon tone) can react to the selected state.
-    state: { active },
-    stateAttributesMapping: {
-      active: (value) => (value ? { "data-active": "" } : null),
-    },
-  });
-}
-
-/**
- * A small count chip for a nav row's trailing slot (e.g. unread / item counts). Uses the Figma
- * count style: `layer-3` surface, `radius/sm` corners, `text/11`.
- */
-export function NavItemCount({
-  children,
-  ...props
-}: Omit<React.ComponentProps<"span">, "className" | "style">) {
-  return (
-    <span
-      className={cx(
-        "inline-flex min-w-4 items-center justify-center rounded-sm px-0.5",
-        "bg-layer-3 text-11 leading-tight text-secondary",
-      )}
-      {...props}
-    >
-      {children}
-    </span>
-  );
-}
-
-// The Figma "Nav item / Header" component (node 2487-3138 default, 2487-3137 hover) is
-// a section-title row that sits above a group of nav items: an emphasized group-title
-// label, a small disclosure chevron that toggles the group open/closed, and an optional
-// trailing action (e.g. an "add" icon button) at the inline-end.
-//
-//   • height   — 32px, matching NavItem.
-//   • padding  — 8px (`spacing/2`) all round, `radius/lg` (8px) corners.
-//   • label    — `font/body-xs/semibold` (text/13, weight 600), `text/tertiary` tone;
-//                truncates with an ellipsis when it overflows.
-//   • chevron  — a 16px filled caret-down glyph (the Figma "Accordion-open" toggle, a
-//                solid triangle — not a stroked chevron) in `icon/secondary`, pointing
-//                down when the group is expanded. It is a real collapse toggle, so it sits
-//                next to the label inside the toggle button.
-//   • action   — an optional `inlineEndNode` at the row's inline-end, for an IconButton
-//                like "add". Because that control is interactive and the label/chevron are
-//                a toggle button, the two cannot nest (a button inside a button is a
-//                `nested-interactive` a11y violation), so the row is a plain container that
-//                holds the toggle button and the action as siblings.
-//   • surface  — transparent by default; `background/layer/transparent-hover` on hover.
-//
-// The label/chevron toggle renders as a `<button>` carrying `aria-expanded`. It supports
-// both controlled (`expanded` + `onExpandedChange`) and uncontrolled (`defaultExpanded`)
-// use, like other disclosure widgets. The label is the accessible name; the chevron is
-// `aria-hidden` and mirrors under RTL.
-
-// The row container. It is NOT interactive itself — it only lays out the toggle button and
-// the optional inline-end action side by side and owns the hover surface so hovering
-// anywhere on the row (including over the action) tints the whole row, matching Figma.
-const navItemHeaderVariants = cva(
-  cx(
-    "group/nav-item-header flex h-8 w-full items-center gap-1 rounded-lg ps-2 pe-1 text-start",
-    "bg-layer-transparent text-tertiary transition-colors",
-    "select-none",
-    // Tint the row on hover — but not when the *toggle* is disabled, so a disabled
-    // header doesn't look interactive. Scoped to the direct-child toggle `<button>`
-    // (via `>button`) so a disabled `inlineEndNode` action doesn't suppress it too.
-    "hover:bg-layer-transparent-hover",
-    "has-[>button:disabled]:hover:bg-transparent has-[>button[aria-disabled=true]]:hover:bg-transparent",
-  ),
-);
-
-// The toggle button inside the row: it carries the label and the chevron, grows to fill
-// the row so the whole title area is clickable, and owns the focus ring + disabled chrome.
-const navItemHeaderToggleClass = cx(
-  "flex min-w-0 flex-1 items-center gap-1 rounded-md py-2 text-start outline-none",
-  "cursor-pointer text-inherit select-none",
-  "focus-visible:ring-2 focus-visible:ring-accent-strong",
-  "disabled:pointer-events-none disabled:text-disabled aria-disabled:pointer-events-none aria-disabled:text-disabled",
-);
-
-export type NavItemHeaderProps = Omit<
-  React.ComponentPropsWithoutRef<"button">,
-  "className" | "style" | "children"
-> & {
-  /** The section title. Truncates with an ellipsis when it overflows. */
-  children: React.ReactNode;
-  /**
-   * The disclosure chevron glyph, sized to 16px. Figma uses a filled caret-down (a solid triangle),
-   * so pass that glyph rather than a stroked chevron. Points down when the section is expanded and
-   * rotates to point at the inline-start when collapsed. Mirrored under RTL.
-   */
-  chevron: React.ReactNode;
-  /**
-   * Optional trailing action at the row's inline-end — typically an `IconButton` such as an "add"
-   * control. Rendered as a sibling of the toggle button (never nested) so the interactive action
-   * does not sit inside the toggle `<button>`. Logical node slot, matching Button's
-   * `inlineEndNode`.
-   */
-  inlineEndNode?: React.ReactNode;
-  /**
-   * Whether the section is expanded (controlled). Drives `aria-expanded` and the chevron rotation.
-   * Pair with `onExpandedChange`. Omit to run uncontrolled via `defaultExpanded`.
-   */
-  expanded?: boolean;
-  /** Initial expanded state when uncontrolled. Defaults to `true` (sections start open). */
-  defaultExpanded?: boolean;
-  /** Called with the next expanded state when the header is toggled. */
-  onExpandedChange?: (expanded: boolean) => void;
-};
-
-/**
- * A sidebar section header row — an emphasized group title, a disclosure chevron that collapses the
- * section below it, and an optional inline-end action (e.g. an "add" IconButton). The title +
- * chevron are a `<button>` with `aria-expanded` (controlled via `expanded` + `onExpandedChange`, or
- * uncontrolled via `defaultExpanded`); the action is a sibling so it never nests inside that
- * button. The title is the accessible name. Faithful to Figma node 2487-3138.
- */
-export function NavItemHeader({
-  children,
-  chevron,
-  inlineEndNode,
-  expanded,
-  defaultExpanded = true,
-  onExpandedChange,
-  onClick,
-  ...props
-}: NavItemHeaderProps) {
-  const [isExpanded, setExpanded] = useControllableState<boolean>({
-    value: expanded,
-    defaultValue: defaultExpanded,
-    onChange: onExpandedChange,
-  });
-
-  return (
-    // `--node-size` (16px) sizes any raw glyph dropped into the inline-end action slot, the
-    // same channel Button/IconButton use.
-    <div className={cx(navItemHeaderVariants(), "[--node-size:1rem]")}>
-      <button
-        {...props}
-        type="button"
-        aria-expanded={isExpanded}
-        className={navItemHeaderToggleClass}
-        onClick={(event) => {
-          // `disabled` already blocks the pointer; `aria-disabled` does not stop
-          // keyboard activation, so bail explicitly to keep the section from toggling.
-          if (event.currentTarget.getAttribute("aria-disabled") === "true") return;
-          onClick?.(event);
-          if (event.defaultPrevented) return;
-          setExpanded(!isExpanded);
-        }}
-      >
-        <span className="min-w-0 truncate text-body-xs-semibold">{children}</span>
-        <span
-          aria-hidden
-          data-expanded={isExpanded ? "" : undefined}
-          className={cx(
-            "flex size-4 shrink-0 items-center justify-center text-icon-secondary [&>svg]:size-full",
-            // The Figma glyph is a filled caret-down. Collapsed rotates it a quarter turn
-            // so it points at the inline-start; RTL mirrors so it still points inward.
-            "rotate-90 transition-transform data-expanded:rotate-0 rtl:-rotate-90 rtl:data-expanded:rotate-0",
-          )}
-        >
-          {chevron}
-        </span>
-      </button>
-      {inlineEndNode != null ? (
-        <span className={cx(nodeSlotClass, "text-icon-secondary")}>{inlineEndNode}</span>
-      ) : null}
-    </div>
-  );
-}
-
-/**
- * The disclosure chevron for an expandable nav row. Decorative (`aria-hidden`); mirror any
- * directional rotation with the writing direction via the `open` prop. As a directional glyph it is
- * flipped under RTL with `rtl:-scale-x-100`.
- */
-export function NavItemChevron({
-  open = false,
-  icon,
-}: {
-  /** Whether the row is expanded; rotates the chevron 180° when true. */
-  open?: boolean;
-  /** The chevron glyph (e.g. a lucide `ChevronDown`), sized to 16px. */
-  icon: React.ReactNode;
-}) {
-  return (
-    <span
-      aria-hidden
-      data-open={open ? "" : undefined}
-      className={cx(
-        "flex size-4 shrink-0 items-center justify-center text-icon-placeholder [&>svg]:size-full",
-        "transition-transform data-open:rotate-180 rtl:-scale-x-100",
-      )}
-    >
-      {icon}
-    </span>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitives. The NavItem part set (NavItem, NavItemHeader,
+// NavItemChevron, NavItemCount, NavItemGroup, NavItemPanel) is already an ergonomic, fully-composed
+// Plane component set assembled per nav structure, so a single wrapper would add no value. Drop down
+// to `@plane/propel/ui/nav-item` for the same parts.
+export * from "../../ui/nav-item";
diff --git a/packages/propel/src/components/nav-item/nav-item.stories.tsx b/packages/propel/src/components/nav-item/nav-item.stories.tsx
index 5f92840..8ef0dbe 100644
--- a/packages/propel/src/components/nav-item/nav-item.stories.tsx
+++ b/packages/propel/src/components/nav-item/nav-item.stories.tsx
@@ -1,31 +1,29 @@
-import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ChevronDown, Inbox } from "lucide-react";
-import { expect, fn, userEvent, within } from "storybook/test";
-
-import { iconControl } from "../../storybook/icon-control";
-import { NavItem, NavItemChevron, NavItemCount, type NavItemMagnitude } from "./index";
-
-const MAGNITUDES: NavItemMagnitude[] = ["lg", "md"];
-
+import { ChevronDown, Inbox, LayoutGrid } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  NavItem,
+  NavItemChevron,
+  NavItemCount,
+  NavItemGroup,
+  NavItemHeader,
+  NavItemPanel,
+} from "./index";
+
+// Components-tier story: the ready-made NavItem part set assembled into a sidebar nav tree.
 const meta = {
   title: "Components/NavItem",
   component: NavItem,
-  subcomponents: { NavItemCount, NavItemChevron },
-  // Icon picker control for the leading icon.
-  argTypes: { inlineStartNode: iconControl },
+  subcomponents: { NavItemGroup, NavItemHeader, NavItemPanel, NavItemCount, NavItemChevron },
+  args: { children: "Inbox", magnitude: "lg" },
   parameters: {
     design: {
       type: "figma",
       url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1329-396",
     },
   },
-  args: {
-    children: "Inbox",
-    magnitude: "lg",
-    inlineStartNode: <Inbox />,
-  },
-  // The row stretches to its container; constrain it to a sidebar-like width.
+  // The rows stretch to their container; constrain to a sidebar-like width.
   decorators: [
     (Story) => (
       <div className="w-64">
@@ -38,140 +36,74 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
-
-/** A row with a trailing count chip and a disclosure chevron, like a collapsible group. */
-export const WithTrailing: Story = {
-  args: {
-    inlineEndNode: (
-      <>
-        <NavItemCount>6</NavItemCount>
-        <NavItemChevron icon={<ChevronDown />} />
-      </>
-    ),
-  },
-};
-
-/** The current page: filled surface, primary-tone label, and `aria-current="page"`. */
-export const Active: Story = {
-  args: { active: true },
-  play: async ({ canvasElement }) => {
-    const item = within(canvasElement).getByRole("button", { name: "Inbox" });
-    await expect(item).toHaveAttribute("aria-current", "page");
-  },
-};
-
-/** Rendered as a link via `render`, while keeping the selected semantics. */
-export const AsLink: Story = {
-  args: {
-    active: true,
-    render: <a href="#inbox" />,
-  },
-  play: async ({ canvasElement }) => {
-    const link = within(canvasElement).getByRole("link", { name: "Inbox" });
-    await expect(link).toHaveAttribute("href", "#inbox");
-    await expect(link).toHaveAttribute("aria-current", "page");
-  },
-};
-
-/**
- * Keyboard ARIA pattern: NavItem renders a native `<button>`, so Tab moves focus to the row and
- * both **Enter** and **Space** activate it (fire its click handler). The active row also exposes
- * `aria-current="page"`. Tagged out of the sidebar/docs/manifest while still running under the
- * default `test` tag.
- */
-export const KeyboardActivation: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  args: { active: true, onClick: fn() },
-  play: async ({ canvasElement, args }) => {
-    const item = within(canvasElement).getByRole("button", { name: "Inbox" });
-
-    // The selected row exposes aria-current for assistive tech.
-    await expect(item).toHaveAttribute("aria-current", "page");
-
-    // Tab moves focus onto the row.
-    await userEvent.tab();
-    await expect(item).toHaveFocus();
-
-    // Enter activates the row (native button behavior).
-    await userEvent.keyboard("{Enter}");
-    await expect(args.onClick).toHaveBeenCalledTimes(1);
-
-    // Space activates it too.
-    await userEvent.keyboard(" ");
-    await expect(args.onClick).toHaveBeenCalledTimes(2);
-  },
-};
-
-/**
- * The prop-driven states side by side at both magnitudes. Hover and pressed are CSS-driven
- * (`hover:` / `active:`) — interact with the rows above to see them.
- */
-export const States: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <div className="flex flex-col gap-6">
-      {MAGNITUDES.map((magnitude) => (
-        <div key={magnitude} className="flex flex-col gap-1">
-          <p className="text-11 text-tertiary uppercase">{magnitude}</p>
-          <NavItem {...args} magnitude={magnitude} inlineEndNode={<NavItemCount>6</NavItemCount>}>
-            Default
+/** A small sidebar: a flat row, the active row, and a collapsible section of child rows. */
+export const Default: Story = {
+  render: () => (
+    <nav className="flex flex-col gap-1">
+      <NavItem
+        magnitude="lg"
+        inlineStartNode={<Inbox />}
+        inlineEndNode={<NavItemCount>6</NavItemCount>}
+      >
+        Inbox
+      </NavItem>
+      <NavItem magnitude="lg" active inlineStartNode={<LayoutGrid />}>
+        Projects
+      </NavItem>
+      <NavItemGroup>
+        <NavItemHeader chevron={<ChevronDown />}>Your teams</NavItemHeader>
+        <NavItemPanel>
+          <NavItem magnitude="lg" level={2}>
+            Design
           </NavItem>
-          <NavItem
-            {...args}
-            magnitude={magnitude}
-            active
-            inlineEndNode={<NavItemCount>6</NavItemCount>}
-          >
-            Selected
+          <NavItem magnitude="lg" level={2}>
+            Engineering
           </NavItem>
-          <NavItem {...args} magnitude={magnitude} disabled>
-            Disabled
-          </NavItem>
-        </div>
-      ))}
-    </div>
+        </NavItemPanel>
+      </NavItemGroup>
+    </nav>
   ),
 };
 
-/** The Figma `Level` axis: each step indents the row 8px further from the inline-start. */
-export const Levels: Story = {
-  argTypes: { level: { control: false }, children: { control: false } },
-  render: (args) => (
-    <div className="flex flex-col gap-1">
-      {([1, 2, 3, 4, 5] as const).map((level) => (
-        <NavItem key={level} {...args} level={level}>
-          {`Level ${level}`}
+/** Behavior test: the section header toggles `aria-expanded` and shows/hides its child rows. */
+export const ToggleSection: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <NavItemGroup>
+      <NavItemHeader chevron={<ChevronDown />}>Your teams</NavItemHeader>
+      <NavItemPanel>
+        <NavItem magnitude="lg" level={2}>
+          Design
         </NavItem>
-      ))}
-    </div>
+      </NavItemPanel>
+    </NavItemGroup>
   ),
+  play: async ({ canvas, userEvent }) => {
+    const header = canvas.getByRole("button", { name: "Your teams" });
+    const child = canvas.getByRole("button", { name: "Design" });
+
+    // Sections start expanded by default.
+    await expect(header).toHaveAttribute("aria-expanded", "true");
+    await expect(child).toBeVisible();
+
+    await userEvent.click(header);
+    await expect(header).toHaveAttribute("aria-expanded", "false");
+    await expect(child).not.toBeVisible();
+  },
 };
 
-/**
- * RTL: the leading icon moves to the inline-start (visually the right edge) and the disclosure
- * chevron mirrors. Wrapped in Base UI's `DirectionProvider`.
- */
-export const RightToLeft: Story = {
-  parameters: { controls: { disable: true } },
-  render: (args) => (
-    <DirectionProvider direction="rtl">
-      <div dir="rtl" className="flex flex-col gap-1">
-        <NavItem
-          {...args}
-          inlineEndNode={
-            <>
-              <NavItemCount>6</NavItemCount>
-              <NavItemChevron icon={<ChevronDown />} />
-            </>
-          }
-        >
-          الوارد
-        </NavItem>
-        <NavItem {...args} level={2}>
-          مستوى ٢
-        </NavItem>
-      </div>
-    </DirectionProvider>
+/** The current page exposes `aria-current="page"`. */
+export const Active: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <NavItem magnitude="lg" active inlineStartNode={<Inbox />}>
+      Inbox
+    </NavItem>
   ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Inbox" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  },
 };
diff --git a/packages/propel/src/components/navigation-menu/index.tsx b/packages/propel/src/components/navigation-menu/index.tsx
new file mode 100644
index 0000000..2360a7e
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/index.tsx
@@ -0,0 +1,22 @@
+export { NavigationMenuPanel, type NavigationMenuPanelProps } from "./navigation-menu-panel";
+// Re-export the atomic navigation menu parts so a full menu can be assembled from one entry.
+export {
+  NavigationMenu,
+  type NavigationMenuProps,
+  NavigationMenuArrow,
+  type NavigationMenuArrowProps,
+  NavigationMenuContent,
+  type NavigationMenuContentProps,
+  NavigationMenuIcon,
+  type NavigationMenuIconProps,
+  NavigationMenuItem,
+  type NavigationMenuItemProps,
+  NavigationMenuLink,
+  type NavigationMenuLinkProps,
+  NavigationMenuList,
+  type NavigationMenuListProps,
+  NavigationMenuTrigger,
+  type NavigationMenuTriggerProps,
+  NavigationMenuViewport,
+  type NavigationMenuViewportProps,
+} from "../../ui/navigation-menu";
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx b/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx
new file mode 100644
index 0000000..20e8722
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu-panel.tsx
@@ -0,0 +1,39 @@
+import {
+  NavigationMenuPopup,
+  type NavigationMenuPopupProps,
+} from "../../ui/navigation-menu/navigation-menu-popup";
+import { NavigationMenuPortal } from "../../ui/navigation-menu/navigation-menu-portal";
+import {
+  NavigationMenuPositioner,
+  type NavigationMenuPositionerProps,
+} from "../../ui/navigation-menu/navigation-menu-positioner";
+
+export type NavigationMenuPanelProps = NavigationMenuPopupProps & {
+  /** Which side of the trigger the panel opens toward. @default "bottom" */
+  side?: NavigationMenuPositionerProps["side"];
+  /** Distance in px between the trigger and the panel. @default 4 */
+  sideOffset?: NavigationMenuPositionerProps["sideOffset"];
+  /** Alignment of the panel relative to the trigger along `side`. @default "start" */
+  align?: NavigationMenuPositionerProps["align"];
+};
+
+/**
+ * The navigation menu surface: portal + positioner + popup with Propel overlay styling. Named
+ * `Panel` to avoid clashing with the atomic per-item `NavigationMenuContent` part. The viewport and
+ * per-item content remain children.
+ */
+export function NavigationMenuPanel({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: NavigationMenuPanelProps) {
+  return (
+    <NavigationMenuPortal>
+      <NavigationMenuPositioner side={side} sideOffset={sideOffset} align={align}>
+        <NavigationMenuPopup {...props}>{children}</NavigationMenuPopup>
+      </NavigationMenuPositioner>
+    </NavigationMenuPortal>
+  );
+}
diff --git a/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
new file mode 100644
index 0000000..6d1e224
--- /dev/null
+++ b/packages/propel/src/components/navigation-menu/navigation-menu.stories.tsx
@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+import { expect, waitFor } from "storybook/test";
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIcon,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPanel,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "./index";
+
+// Components-tier story: the ready-made `NavigationMenuPanel` collapses the Portal › Positioner ›
+// Popup surface into one part, so the consumer only nests `NavigationMenuViewport` inside it. The
+// UI-tier story assembles that portal chain by hand.
+const meta = {
+  title: "Components/NavigationMenu",
+  component: NavigationMenu,
+  subcomponents: {
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuContent,
+    NavigationMenuLink,
+    NavigationMenuPanel,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=2053-281",
+    },
+  },
+} satisfies Meta<typeof NavigationMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PRODUCT_LINKS = [
+  { href: "#issues", title: "Issues", description: "Track work items across projects." },
+  { href: "#cycles", title: "Cycles", description: "Time-boxed sprints for your team." },
+  { href: "#modules", title: "Modules", description: "Group related work into modules." },
+  { href: "#pages", title: "Pages", description: "Rich documents that live with your work." },
+];
+
+const RESOURCE_LINKS = [
+  { href: "#docs", title: "Documentation", description: "Guides and API references." },
+  { href: "#changelog", title: "Changelog", description: "What shipped recently." },
+];
+
+/** Two dropdown items plus a bare top-level link, opening into the shared `NavigationMenuPanel`. */
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <TriggerRow>Product</TriggerRow>
+          <NavigationMenuContent>
+            <ul className="grid w-[28rem] grid-cols-2 gap-1 p-2">
+              {PRODUCT_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    <span className="block text-14 font-medium text-primary">{item.title}</span>
+                    <span className="block text-12 text-tertiary">{item.description}</span>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <TriggerRow>Resources</TriggerRow>
+          <NavigationMenuContent>
+            <ul className="flex w-72 flex-col gap-1 p-2">
+              {RESOURCE_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    <span className="block text-14 font-medium text-primary">{item.title}</span>
+                    <span className="block text-12 text-tertiary">{item.description}</span>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink render={<a href="#pricing" />}>Pricing</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <NavigationMenuPanel>
+        <NavigationMenuViewport />
+      </NavigationMenuPanel>
+    </NavigationMenu>
+  ),
+};
+
+/**
+ * Behavior test: clicking a trigger opens its content into the portaled panel; the content's links
+ * become reachable by their unique text once open.
+ */
+export const OpenContent: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: {
+    a11y: {
+      // While the popup is open Base UI's NavigationMenu emits two internal patterns that axe flags
+      // as static-analysis false-positives:
+      //   * `aria-hidden-focus`: the visually-hidden focus-guard `<span tabindex="0" aria-hidden>`
+      //     sentinels that bracket the popup to wrap focus — intentional, not author markup.
+      //   * `landmark-unique`: the portaled popup renders a second `<nav>` landmark alongside the
+      //     root menu's `<nav>`; both are Base UI internals with no author-supplied label.
+      // Suppress just these two rules for this open-popup story.
+      config: {
+        rules: [
+          { id: "aria-hidden-focus", enabled: false },
+          { id: "landmark-unique", enabled: false },
+        ],
+      },
+    },
+  },
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <TriggerRow>Product</TriggerRow>
+          <NavigationMenuContent>
+            <ul className="flex w-72 flex-col gap-1 p-2">
+              {PRODUCT_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    {item.title}
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <NavigationMenuPanel>
+        <NavigationMenuViewport />
+      </NavigationMenuPanel>
+    </NavigationMenu>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /Product/ });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    // The popup is portaled, so query the document body after opening.
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await waitFor(async () => {
+      await expect(document.body).toHaveTextContent("Cycles");
+    });
+  },
+};
+
+/** A trigger row that pairs the label with the rotating disclosure caret. */
+function TriggerRow({ children }: { children: React.ReactNode }) {
+  return (
+    <NavigationMenuTrigger>
+      {children}
+      <NavigationMenuIcon>
+        <ChevronDown aria-hidden className="size-3.5" />
+      </NavigationMenuIcon>
+    </NavigationMenuTrigger>
+  );
+}
diff --git a/packages/propel/src/components/number-field/index.tsx b/packages/propel/src/components/number-field/index.tsx
new file mode 100644
index 0000000..7b6eeed
--- /dev/null
+++ b/packages/propel/src/components/number-field/index.tsx
@@ -0,0 +1,11 @@
+export { NumberField, type NumberFieldProps } from "./number-field";
+export {
+  NumberFieldDecrement,
+  type NumberFieldDecrementProps,
+  NumberFieldGroup,
+  type NumberFieldGroupProps,
+  NumberFieldIncrement,
+  type NumberFieldIncrementProps,
+  NumberFieldInput,
+  type NumberFieldInputProps,
+} from "../../ui/number-field";
diff --git a/packages/propel/src/components/number-field/number-field.stories.tsx b/packages/propel/src/components/number-field/number-field.stories.tsx
new file mode 100644
index 0000000..4dc5553
--- /dev/null
+++ b/packages/propel/src/components/number-field/number-field.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { NumberField } from "./index";
+
+// Components-tier story: the ready-made `NumberField` — a numeric input flanked by
+// −/+ buttons, wired for you. Drive it with `value`/`defaultValue`, bound it with
+// `min`/`max`/`step`. The UI-tier story shows how to compose the parts with custom
+// button icons or labels.
+const meta = {
+  title: "Components/NumberField",
+  component: NumberField,
+  args: { "aria-label": "Number of instances" },
+} satisfies Meta<typeof NumberField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A bounded numeric input with stepper buttons. */
+export const Default: Story = {
+  args: { defaultValue: 2, min: 1, max: 64 },
+};
+
+/** Clicking the +/- buttons steps the value within `min`/`max`. */
+export const IncrementAndDecrement: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { defaultValue: 2, min: 1, max: 64 },
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("textbox", { name: "Number of instances" });
+    await expect(input).toHaveDisplayValue("2");
+    await userEvent.click(canvas.getByRole("button", { name: "Increase" }));
+    await expect(input).toHaveDisplayValue("3");
+    await userEvent.click(canvas.getByRole("button", { name: "Decrease" }));
+    await expect(input).toHaveDisplayValue("2");
+  },
+};
diff --git a/packages/propel/src/components/number-field/number-field.tsx b/packages/propel/src/components/number-field/number-field.tsx
new file mode 100644
index 0000000..b063828
--- /dev/null
+++ b/packages/propel/src/components/number-field/number-field.tsx
@@ -0,0 +1,42 @@
+import { Minus, Plus } from "lucide-react";
+
+import {
+  NumberField as NumberFieldRoot,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+  type NumberFieldProps as NumberFieldRootProps,
+} from "../../ui/number-field";
+
+export type NumberFieldProps = NumberFieldRootProps;
+
+/**
+ * The ready-made number field: a numeric input flanked by decrement / increment buttons. Drive it
+ * with `value`/`defaultValue` + `onValueChange`, bound it with `min`/`max`/`step`, and pass
+ * `format` (an `Intl.NumberFormatOptions`) to format the displayed value.
+ *
+ * Composed from the `ui/number-field` parts (`NumberField` root + `NumberFieldGroup` +
+ * `NumberFieldDecrement` + `NumberFieldInput` + `NumberFieldIncrement`), which are built on Base UI
+ * `NumberField`.
+ */
+export function NumberField({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  ...props
+}: NumberFieldProps) {
+  return (
+    <NumberFieldRoot {...props}>
+      <NumberFieldGroup>
+        <NumberFieldDecrement aria-label="Decrease">
+          <Minus aria-hidden className="size-4" />
+        </NumberFieldDecrement>
+        {/* The accessible name belongs on the input, not the root div. */}
+        <NumberFieldInput aria-label={ariaLabel} aria-labelledby={ariaLabelledby} />
+        <NumberFieldIncrement aria-label="Increase">
+          <Plus aria-hidden className="size-4" />
+        </NumberFieldIncrement>
+      </NumberFieldGroup>
+    </NumberFieldRoot>
+  );
+}
diff --git a/packages/propel/src/components/otp-field/index.tsx b/packages/propel/src/components/otp-field/index.tsx
new file mode 100644
index 0000000..e7a2211
--- /dev/null
+++ b/packages/propel/src/components/otp-field/index.tsx
@@ -0,0 +1,7 @@
+export { OTPField, type OTPFieldProps } from "./otp-field";
+export {
+  OTPFieldInput,
+  type OTPFieldInputProps,
+  OTPFieldSeparator,
+  type OTPFieldSeparatorProps,
+} from "../../ui/otp-field";
diff --git a/packages/propel/src/components/otp-field/otp-field.stories.tsx b/packages/propel/src/components/otp-field/otp-field.stories.tsx
new file mode 100644
index 0000000..9584df3
--- /dev/null
+++ b/packages/propel/src/components/otp-field/otp-field.stories.tsx
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { OTPField } from "./index";
+
+// Components-tier story: the ready-made `OTPField` — pass `length` and it renders that
+// many slots, owning focus movement, paste, and completion. The UI-tier story shows how
+// to compose the parts (e.g. a grouped `123-456` layout with a separator).
+const meta = {
+  title: "Components/OTPField",
+  component: OTPField,
+  args: { length: 6, "aria-label": "Verification code" },
+} satisfies Meta<typeof OTPField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A six-digit verification code. */
+export const Default: Story = {
+  play: async ({ canvas }) => {
+    await expect(canvas.getAllByRole("textbox")).toHaveLength(6);
+  },
+};
+
+/** Typing fills slots left to right and advances focus. */
+export const TypingFillsSlots: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { length: 4 },
+  play: async ({ canvas, userEvent }) => {
+    const inputs = canvas.getAllByRole("textbox");
+    await expect(inputs).toHaveLength(4);
+    await userEvent.click(inputs[0]);
+    await userEvent.keyboard("12");
+    await expect(inputs[0]).toHaveDisplayValue("1");
+    await expect(inputs[1]).toHaveDisplayValue("2");
+  },
+};
+
+/** `mask` obscures the entered characters. */
+export const Masked: Story = {
+  parameters: { controls: { disable: true } },
+  args: { length: 6, mask: true, defaultValue: "123456" },
+};
diff --git a/packages/propel/src/components/otp-field/otp-field.tsx b/packages/propel/src/components/otp-field/otp-field.tsx
new file mode 100644
index 0000000..462d545
--- /dev/null
+++ b/packages/propel/src/components/otp-field/otp-field.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import {
+  OTPField as OTPFieldRoot,
+  OTPFieldInput,
+  type OTPFieldProps as OTPFieldRootProps,
+} from "../../ui/otp-field";
+
+export type OTPFieldProps = OTPFieldRootProps;
+
+/**
+ * The ready-made one-time-password / verification-code field: a row of `length` character slots.
+ * Drive it with `value`/`defaultValue` + `onValueChange`; the root owns focus movement, paste, and
+ * completion across the slots. Pass `mask` to obscure entered characters.
+ *
+ * Composed from the `ui/otp-field` parts (`OTPField` root + `OTPFieldInput`), which are built on
+ * Base UI `OTPFieldPreview`. Each `OTPFieldInput` resolves its slot index from the root context, so
+ * the ready-made simply renders one per slot. For grouped layouts with separators (e.g. `123-456`),
+ * compose the `ui/otp-field` parts directly.
+ */
+export function OTPField({ length, ...props }: OTPFieldProps) {
+  // Base UI ignores `aria-label` on the first slot and names it from the root's `aria-labelledby`
+  // instead, so a visually-hidden label backs the first slot while the rest carry an `aria-label`.
+  // Without this the slot inputs fail axe's "Form elements must have labels".
+  const firstSlotLabelId = React.useId();
+  return (
+    <OTPFieldRoot length={length} {...props}>
+      <span id={firstSlotLabelId} className="sr-only">
+        Character 1
+      </span>
+      {Array.from({ length }, (_, index) =>
+        // Base UI ignores `aria-label` on the first slot, so name it via `aria-labelledby`
+        // (pointing at the hidden label); the rest carry an `aria-label`.
+        index === 0 ? (
+          <OTPFieldInput key={index} aria-labelledby={firstSlotLabelId} />
+        ) : (
+          <OTPFieldInput key={index} aria-label={`Character ${index + 1}`} />
+        ),
+      )}
+    </OTPFieldRoot>
+  );
+}
diff --git a/packages/propel/src/components/pagination/index.tsx b/packages/propel/src/components/pagination/index.tsx
index da1dc89..cb0f4b0 100644
--- a/packages/propel/src/components/pagination/index.tsx
+++ b/packages/propel/src/components/pagination/index.tsx
@@ -1,327 +1 @@
-import { cva, cx } from "class-variance-authority";
-import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle, MoreHorizontal } from "lucide-react";
-import * as React from "react";
-
-import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "../dropdown/index";
-
-// Pagination is a single composite navigation control rather than a variant matrix:
-// the Figma "variant" axis (All pages visible / Near start / Middle / Near end) is
-// purely a function of where the current page sits within the total, so it's derived
-// at render time from `page`/`pageCount` — never a prop. What designers can toggle is
-// genuinely additive: an optional per-page selector and an optional range label.
-//
-// Tokens (Figma node 4762-503):
-// - page-number button: 24px square, radius/sm (4px), text/13, transparent bg that
-//   fills to `layer-transparent-hover` on hover and `layer-transparent-active` when
-//   it is the current page; disabled/loading dim to the placeholder/disabled colors.
-// - prev/next: 24px square icon buttons, radius/md (6px), 16px arrows. The arrows are
-//   directional, so they mirror in RTL via `rtl:-scale-x-100`.
-// - ellipsis: a non-interactive 24px slot holding a 14px more-horizontal glyph.
-// - per-page selector: a `layer-3` pill, 24px tall, radius/md, "50" + chevron-down,
-//   followed by "per page" tertiary text. The pill is the trigger for a propel
-//   Dropdown (single-select) whose menu lists the page-size options; picking one
-//   reports it through `pageSize.onChange`.
-
-// Shared 24px slot used by page numbers, the prev/next buttons and the ellipsis.
-// 24px tall with a 24px minimum width so single digits stay square (per Figma),
-// but the slot grows for wider content — multi-digit page numbers like `100` get
-// their own width plus horizontal padding rather than clipping a fixed square.
-// `radius/sm` for page numbers, `radius/md` for the arrow buttons.
-const slotBase = cx(
-  "inline-flex h-6 w-auto min-w-6 shrink-0 items-center justify-center px-1",
-  "text-13 text-primary outline-none",
-);
-
-const pageButtonVariants = cva(
-  cx(
-    slotBase,
-    "rounded-sm bg-layer-transparent",
-    "hover:bg-layer-transparent-hover",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "disabled:pointer-events-none disabled:text-disabled",
-  ),
-  {
-    variants: {
-      // The current page reads as pressed: it sits on the `transparent-active` fill
-      // (Figma "Selected") and is not interactive. It's marked `disabled` to block
-      // re-navigation, but the Figma "Selected" state keeps `text/primary` — so it
-      // must override the `disabled:text-disabled` dim that the base applies.
-      current: {
-        true: "bg-layer-transparent-active disabled:text-primary",
-        false: "",
-      },
-    },
-  },
-);
-
-const arrowButtonVariants = cva(
-  cx(
-    slotBase,
-    "rounded-md bg-layer-transparent text-icon-secondary",
-    "hover:bg-layer-transparent-hover",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "disabled:pointer-events-none disabled:text-icon-disabled",
-    // Prev/next arrows are directional — mirror them under RTL so "previous" always
-    // points toward the start of the run.
-    "[&_svg]:size-4 [&_svg]:shrink-0 rtl:[&_svg]:-scale-x-100",
-  ),
-);
-
-// The per-page selector trigger (Figma `4762-503`): a `layer-3` pill, 24px tall,
-// `radius/md`, holding the current size + a chevron-down. It's the trigger for the
-// page-size Dropdown, so it gets a focus ring and rotates its chevron while the menu
-// is open.
-const perPageTriggerClass = cx(
-  "inline-flex h-6 min-w-10 cursor-default items-center justify-center gap-1 rounded-md px-2",
-  "bg-layer-3 text-13 font-medium text-secondary outline-none",
-  "hover:bg-layer-3-hover",
-  "focus-visible:ring-2 focus-visible:ring-accent-strong",
-  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-icon-secondary",
-  "[&[data-popup-open]_svg]:rotate-180",
-);
-
-/** A non-interactive gap marker between distant page numbers. */
-function PaginationEllipsis() {
-  return (
-    <li aria-hidden className={cx(slotBase, "text-icon-placeholder")}>
-      <MoreHorizontal className="size-3.5 shrink-0" />
-    </li>
-  );
-}
-
-// Builds the sequence of visible page tokens. Always shows the first and last page;
-// shows up to one neighbour either side of the current page; inserts an ellipsis
-// only where the run skips 2+ pages. A gap of exactly one page renders that page
-// number instead, since a `…` standing in for a single page just hides a reachable
-// page. This reproduces the four Figma layouts:
-//   1 2 3 4              (all visible)
-//   1 2 3 … 100          (near start)
-//   1 … 44 45 46 … 100   (middle)
-//   1 … 98 99 100        (near end)
-type PageToken = number | "ellipsis-start" | "ellipsis-end";
-
-function buildPageTokens(page: number, pageCount: number): PageToken[] {
-  // Few enough pages to show them all.
-  if (pageCount <= 7) {
-    return Array.from({ length: pageCount }, (_, i) => i + 1);
-  }
-  // A window of three consecutive pages around the current one (current ± 1). When
-  // that window butts up against an end, it shifts inward so the end side always
-  // shows three numbers — reproducing Figma's `1 2 3 … 100` / `1 … 98 99 100`.
-  let windowStart = page - 1;
-  let windowEnd = page + 1;
-  if (windowStart < 2) {
-    // Near the start: the run abuts the `1` anchor, so show `1 2 3 … last`.
-    windowStart = 2;
-    windowEnd = 3;
-  }
-  if (windowEnd > pageCount - 1) {
-    // Near the end: the run abuts the `last` anchor, so show `1 … last-2 last-1 last`.
-    windowEnd = pageCount - 1;
-    windowStart = pageCount - 2;
-  }
-  const tokens: PageToken[] = [1];
-  // Bridge the gap between the `1` anchor and the window. An ellipsis is only worth
-  // it when 2+ pages are hidden; a lone skipped page (here, page 2) is rendered as
-  // its own number so it isn't buried under `…` — `1 2 3 4 5 …` instead of `1 … 3 …`.
-  if (windowStart === 3) tokens.push(2);
-  else if (windowStart > 3) tokens.push("ellipsis-start");
-  for (let p = windowStart; p <= windowEnd; p++) tokens.push(p);
-  // Likewise on the trailing side: a single skipped page (pageCount - 1) is shown
-  // rather than hidden behind a trailing ellipsis.
-  if (windowEnd === pageCount - 2) tokens.push(pageCount - 1);
-  else if (windowEnd < pageCount - 2) tokens.push("ellipsis-end");
-  tokens.push(pageCount);
-  return tokens;
-}
-
-export type PaginationLabels = {
-  /** Accessible name for the `<nav>` landmark. */
-  root: string;
-  /** Accessible name for the previous-page button. */
-  previous: string;
-  /** Accessible name for the next-page button. */
-  next: string;
-  /**
-   * Accessible name for a page button, given its number. Defaults to e.g. `"Go to page 3"`; the
-   * current page is additionally marked `aria-current`.
-   */
-  page: (page: number) => string;
-  /** Visible text on the per-page selector trigger, given the size. Defaults to `"50"`. */
-  perPageValue: (pageSize: number) => React.ReactNode;
-  /** Trailing text after the per-page selector. Defaults to `"per page"`. */
-  perPage: React.ReactNode;
-};
-
-const DEFAULT_LABELS: PaginationLabels = {
-  root: "Pagination",
-  previous: "Go to previous page",
-  next: "Go to next page",
-  page: (page) => `Go to page ${page}`,
-  perPageValue: (pageSize) => String(pageSize),
-  perPage: "per page",
-};
-
-export type PaginationProps = Omit<
-  React.ComponentProps<"nav">,
-  "className" | "style" | "children" | "aria-label" | "onChange"
-> & {
-  /** The current page, 1-based. */
-  page: number;
-  /** Total number of pages. */
-  pageCount: number;
-  /** Called with the target page (1-based) when a control is activated. */
-  onPageChange: (page: number) => void;
-  /**
-   * The current page is rendered as a loading spinner instead of its number — for when navigating
-   * to that page is in flight.
-   */
-  loading?: boolean;
-  /**
-   * Optional per-page size selector (Figma `50 v per page`). Provide `value`, the `options`, and
-   * `onChange`; omit to hide the selector entirely.
-   */
-  pageSize?: {
-    /** Currently selected page size. */
-    value: number;
-    /** Selectable page sizes. */
-    options: number[];
-    /** Called with the chosen page size. */
-    onChange: (pageSize: number) => void;
-  };
-  /**
-   * Optional range label shown before the controls (Figma `1-50 of 250`). Provide the
-   * already-formatted `current` range and `total`.
-   */
-  range?: {
-    /** The visible range, e.g. `"1-50"` (rendered in the primary text color). */
-    current: React.ReactNode;
-    /** The total count, e.g. `250` (rendered after `of` in the tertiary color). */
-    total: React.ReactNode;
-  };
-  /** Override the default English accessible names / visible selector text. */
-  labels?: Partial<PaginationLabels>;
-};
-
-/**
- * Page navigation for a paginated list or table. Renders a `<nav>` landmark holding an optional
- * per-page selector and range label plus an ordered list of page controls: a previous button,
- * first/last anchors with ellipses around a window of pages near the current one, and a next
- * button. The current page is marked `aria-current="page"`; the prev/next ends disable at the
- * bounds and their arrows mirror under RTL.
- */
-export function Pagination({
-  page,
-  pageCount,
-  onPageChange,
-  loading = false,
-  pageSize,
-  range,
-  labels,
-  ...props
-}: PaginationProps) {
-  const l = { ...DEFAULT_LABELS, ...labels };
-  const tokens = buildPageTokens(page, pageCount);
-  const atStart = page <= 1;
-  const atEnd = page >= pageCount;
-
-  return (
-    <nav aria-label={l.root} className="flex items-center gap-4" {...props}>
-      {pageSize ? (
-        <div className="flex min-w-0 flex-1 items-center gap-2">
-          {/*
-            The selector is the propel Dropdown (single-select): the `layer-3` pill is
-            its trigger and the menu lists the page sizes, the current one marked with a
-            trailing check. The trigger carries the accessible name (the visible size +
-            the visually-hidden "per page"), and picking a size reports it through
-            `pageSize.onChange`. Keyboard works via the Dropdown (Enter/ArrowDown opens,
-            arrows move, Enter selects).
-          */}
-          <Dropdown>
-            <DropdownTrigger render={<button type="button" className={perPageTriggerClass} />}>
-              <span>{l.perPageValue(pageSize.value)}</span>
-              <span className="sr-only">{l.perPage}</span>
-              <ChevronDown aria-hidden className="transition-transform" />
-            </DropdownTrigger>
-            <DropdownContent width="anchor" align="center">
-              {pageSize.options.map((option) => (
-                <DropdownItem
-                  key={option}
-                  variant="default"
-                  label={l.perPageValue(option)}
-                  selected={option === pageSize.value}
-                  onClick={() => pageSize.onChange(option)}
-                />
-              ))}
-            </DropdownContent>
-          </Dropdown>
-          <span aria-hidden className="text-13 whitespace-nowrap text-tertiary">
-            {l.perPage}
-          </span>
-        </div>
-      ) : null}
-
-      {range ? (
-        <p className="text-12 whitespace-nowrap text-tertiary">
-          <span className="text-primary">{range.current}</span>
-          <span>{" of "}</span>
-          <span>{range.total}</span>
-        </p>
-      ) : null}
-
-      <ul className="flex items-center gap-1.5">
-        <li>
-          <button
-            type="button"
-            aria-label={l.previous}
-            disabled={atStart}
-            onClick={() => onPageChange(page - 1)}
-            className={arrowButtonVariants()}
-          >
-            <ArrowLeft aria-hidden />
-          </button>
-        </li>
-
-        {tokens.map((token) => {
-          if (token === "ellipsis-start" || token === "ellipsis-end") {
-            return <PaginationEllipsis key={token} />;
-          }
-          const isCurrent = token === page;
-          return (
-            <li key={token}>
-              <button
-                type="button"
-                aria-label={l.page(token)}
-                aria-current={isCurrent ? "page" : undefined}
-                disabled={isCurrent}
-                onClick={() => onPageChange(token)}
-                className={pageButtonVariants({ current: isCurrent })}
-              >
-                {isCurrent && loading ? (
-                  <LoaderCircle
-                    aria-hidden
-                    className="size-3.5 shrink-0 animate-spin text-icon-placeholder"
-                  />
-                ) : (
-                  token
-                )}
-              </button>
-            </li>
-          );
-        })}
-
-        <li>
-          <button
-            type="button"
-            aria-label={l.next}
-            disabled={atEnd}
-            onClick={() => onPageChange(page + 1)}
-            className={arrowButtonVariants()}
-          >
-            <ArrowRight aria-hidden />
-          </button>
-        </li>
-      </ul>
-    </nav>
-  );
-}
+export * from "./pagination";
diff --git a/packages/propel/src/components/pagination/pagination.stories.tsx b/packages/propel/src/components/pagination/pagination.stories.tsx
index bc7308a..761bb29 100644
--- a/packages/propel/src/components/pagination/pagination.stories.tsx
+++ b/packages/propel/src/components/pagination/pagination.stories.tsx
@@ -37,15 +37,15 @@ export const WithSelectorAndRange: Story = {
   args: {
     page: 1,
     pageCount: 5,
-    pageSize: { value: 50, options: [25, 50, 100], onChange: () => {} },
+    pageSize: { value: 50, options: [25, 50, 100], onValueChange: () => {} },
     range: { current: "1-50", total: 250 },
   },
 };
 
 /**
- * The page-size selector is a propel Dropdown: its `layer-3` pill trigger is labeled "50 per page";
+ * The page-size selector is a propel Menu: its `layer-3` pill trigger is labeled "50 per page";
  * clicking it opens the portaled menu of sizes (the current one marked with a check), and picking
- * one reports it through `pageSize.onChange` and updates the trigger. Keyboard works too —
+ * one reports it through `pageSize.onValueChange` and updates the trigger. Keyboard works too —
  * ArrowDown opens the menu and arrow+Enter selects.
  */
 export const PageSizeSelector: Story = {
@@ -53,21 +53,21 @@ export const PageSizeSelector: Story = {
   args: {
     page: 1,
     pageCount: 5,
-    pageSize: { value: 50, options: [25, 50, 100], onChange: fn() },
+    pageSize: { value: 50, options: [25, 50, 100], onValueChange: fn() },
     range: { current: "1-50", total: 250 },
   },
   // Drive `pageSize.value` from state so selecting an option visibly updates the
-  // trigger, while still spying on the provided `onChange`.
+  // trigger, while still spying on the provided `onValueChange`.
   render: function Render(args) {
     const [value, setValue] = React.useState(args.pageSize?.value ?? 50);
-    const spy = args.pageSize?.onChange;
+    const spy = args.pageSize?.onValueChange;
     return (
       <Pagination
         {...args}
         pageSize={{
           value,
           options: args.pageSize?.options ?? [25, 50, 100],
-          onChange: (next) => {
+          onValueChange: (next) => {
             spy?.(next);
             setValue(next);
           },
@@ -78,7 +78,7 @@ export const PageSizeSelector: Story = {
   play: async ({ args, canvas, step }) => {
     // The portaled menu renders outside the story canvas, so query the document body.
     const body = within(document.body);
-    const onChange = args.pageSize?.onChange as ReturnType<typeof fn>;
+    const onValueChange = args.pageSize?.onValueChange as ReturnType<typeof fn>;
 
     await step("the trigger is a labeled button showing the current size", async () => {
       const trigger = canvas.getByRole("button", { name: /50 per page/i });
@@ -96,7 +96,7 @@ export const PageSizeSelector: Story = {
 
     await step("selecting a size reports it and updates the trigger", async () => {
       await userEvent.click(body.getByRole("menuitem", { name: "100" }));
-      await expect(onChange).toHaveBeenLastCalledWith(100);
+      await expect(onValueChange).toHaveBeenLastCalledWith(100);
       await waitFor(() =>
         expect(canvas.getByRole("button", { name: /100 per page/i })).toBeInTheDocument(),
       );
@@ -116,7 +116,7 @@ export const PageSizeSelector: Story = {
         expect(body.getByRole("menuitem", { name: "50" })).toHaveAttribute("data-highlighted"),
       );
       await userEvent.keyboard("{Enter}");
-      await expect(onChange).toHaveBeenLastCalledWith(50);
+      await expect(onValueChange).toHaveBeenLastCalledWith(50);
       await waitFor(() =>
         expect(canvas.getByRole("button", { name: /50 per page/i })).toBeInTheDocument(),
       );
@@ -137,7 +137,7 @@ export const Variants: Story = {
         page={1}
         pageCount={5}
         onPageChange={() => {}}
-        pageSize={{ value: 50, options: [25, 50, 100], onChange: () => {} }}
+        pageSize={{ value: 50, options: [25, 50, 100], onValueChange: () => {} }}
         range={{ current: "1-50", total: 250 }}
         labels={{ root: "All pages visible" }}
       />
@@ -145,7 +145,7 @@ export const Variants: Story = {
         page={1}
         pageCount={100}
         onPageChange={() => {}}
-        pageSize={{ value: 50, options: [25, 50, 100], onChange: () => {} }}
+        pageSize={{ value: 50, options: [25, 50, 100], onValueChange: () => {} }}
         range={{ current: "1-50", total: 5000 }}
         labels={{ root: "Near start" }}
       />
@@ -153,7 +153,7 @@ export const Variants: Story = {
         page={45}
         pageCount={100}
         onPageChange={() => {}}
-        pageSize={{ value: 50, options: [25, 50, 100], onChange: () => {} }}
+        pageSize={{ value: 50, options: [25, 50, 100], onValueChange: () => {} }}
         range={{ current: "2000-2050", total: 5000 }}
         labels={{ root: "Middle" }}
       />
@@ -161,7 +161,7 @@ export const Variants: Story = {
         page={100}
         pageCount={100}
         onPageChange={() => {}}
-        pageSize={{ value: 50, options: [25, 50, 100], onChange: () => {} }}
+        pageSize={{ value: 50, options: [25, 50, 100], onValueChange: () => {} }}
         range={{ current: "4951-5000", total: 5000 }}
         labels={{ root: "Near end" }}
       />
@@ -204,6 +204,23 @@ export const SingleGap: Story = {
   },
 };
 
+/**
+ * Symmetric single-gap case on the trailing side: the lone skipped page before the final anchor is
+ * rendered as a number rather than hidden behind an ellipsis.
+ */
+export const SingleTrailingGap: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { page: 5, pageCount: 8 },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Go to page 7" })).toBeInTheDocument();
+    await expect(canvas.queryByRole("button", { name: "Go to page 2" })).not.toBeInTheDocument();
+
+    for (const n of [1, 4, 5, 6, 7, 8]) {
+      await expect(canvas.getByRole("button", { name: `Go to page ${n}` })).toBeInTheDocument();
+    }
+  },
+};
+
 /**
  * Behavioral checks: the nav landmark is named, the current page is marked `aria-current` and
  * disabled, the previous button is disabled at the first page, and activating a page number reports
@@ -302,8 +319,19 @@ export const KeyboardNavigation: Story = {
       await expect(onPageChange).toHaveBeenLastCalledWith(25);
     });
 
+    await step("Prev moves back from an enabled page", async () => {
+      const prev = canvas.getByRole("button", { name: "Go to previous page" });
+      await expect(prev).toBeEnabled();
+      await userEvent.click(prev);
+      await expect(onPageChange).toHaveBeenLastCalledWith(24);
+      await expect(canvas.getByRole("button", { name: "Go to page 24" })).toHaveAttribute(
+        "aria-current",
+        "page",
+      );
+    });
+
     await step("Next is disabled at the last page and never fires", async () => {
-      // Space took us to the last page (25), so Next is now at its bound.
+      await userEvent.click(canvas.getByRole("button", { name: "Go to page 25" }));
       const next = canvas.getByRole("button", { name: "Go to next page" });
       await expect(next).toBeDisabled();
       onPageChange.mockClear();
diff --git a/packages/propel/src/components/pagination/pagination.tsx b/packages/propel/src/components/pagination/pagination.tsx
new file mode 100644
index 0000000..013845b
--- /dev/null
+++ b/packages/propel/src/components/pagination/pagination.tsx
@@ -0,0 +1,261 @@
+import { ArrowLeft, ArrowRight, ChevronDown, LoaderCircle } from "lucide-react";
+import * as React from "react";
+
+import { Menu, MenuTrigger } from "../../ui/menu/index";
+import {
+  PaginationArrowButton,
+  PaginationEllipsis,
+  PaginationPageButton,
+  PaginationPerPageTrigger,
+} from "../../ui/pagination/index";
+import { MenuContent, MenuItem } from "../menu/index";
+
+// Pagination is a single composite navigation control rather than a variant matrix:
+// the Figma "variant" axis (All pages visible / Near start / Middle / Near end) is
+// purely a function of where the current page sits within the total, so it's derived
+// at render time from `page`/`pageCount` — never a prop. What designers can toggle is
+// genuinely additive: an optional per-page selector and an optional range label.
+//
+// Tokens (Figma node 4762-503):
+// - page-number button: 24px square, radius/sm (4px), text/13, transparent bg that
+//   fills to `layer-transparent-hover` on hover and `layer-transparent-active` when
+//   it is the current page; disabled/loading dim to the placeholder/disabled colors.
+// - prev/next: 24px square icon buttons, radius/md (6px), 16px arrows. The arrows are
+//   directional, so they mirror in RTL via `rtl:-scale-x-100`.
+// - ellipsis: a non-interactive 24px slot holding a 14px more-horizontal glyph.
+// - per-page selector: a `layer-3` pill, 24px tall, radius/md, "50" + chevron-down,
+//   followed by "per page" tertiary text. The pill is the trigger for a propel
+//   Menu (single-select) whose menu lists the page-size options; picking one
+//   reports it through `pageSize.onValueChange`.
+
+// Builds the sequence of visible page tokens. Always shows the first and last page;
+// shows up to one neighbour either side of the current page; inserts an ellipsis
+// only where the run skips 2+ pages. A gap of exactly one page renders that page
+// number instead, since a `…` standing in for a single page just hides a reachable
+// page. This reproduces the four Figma layouts:
+//   1 2 3 4              (all visible)
+//   1 2 3 … 100          (near start)
+//   1 … 44 45 46 … 100   (middle)
+//   1 … 98 99 100        (near end)
+type PageToken = number | "ellipsis-start" | "ellipsis-end";
+
+function buildPageTokens(page: number, pageCount: number): PageToken[] {
+  // Few enough pages to show them all.
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1);
+  }
+  // A window of three consecutive pages around the current one (current ± 1). When
+  // that window butts up against an end, it shifts inward so the end side always
+  // shows three numbers — reproducing Figma's `1 2 3 … 100` / `1 … 98 99 100`.
+  let windowStart = page - 1;
+  let windowEnd = page + 1;
+  if (windowStart < 2) {
+    // Near the start: the run abuts the `1` anchor, so show `1 2 3 … last`.
+    windowStart = 2;
+    windowEnd = 3;
+  }
+  if (windowEnd > pageCount - 1) {
+    // Near the end: the run abuts the `last` anchor, so show `1 … last-2 last-1 last`.
+    windowEnd = pageCount - 1;
+    windowStart = pageCount - 2;
+  }
+  const tokens: PageToken[] = [1];
+  // Bridge the gap between the `1` anchor and the window. An ellipsis is only worth
+  // it when 2+ pages are hidden; a lone skipped page (here, page 2) is rendered as
+  // its own number so it isn't buried under `…` — `1 2 3 4 5 …` instead of `1 … 3 …`.
+  if (windowStart === 3) tokens.push(2);
+  else if (windowStart > 3) tokens.push("ellipsis-start");
+  for (let p = windowStart; p <= windowEnd; p++) tokens.push(p);
+  // Likewise on the trailing side: a single skipped page (pageCount - 1) is shown
+  // rather than hidden behind a trailing ellipsis.
+  if (windowEnd === pageCount - 2) tokens.push(pageCount - 1);
+  else if (windowEnd < pageCount - 2) tokens.push("ellipsis-end");
+  tokens.push(pageCount);
+  return tokens;
+}
+
+export type PaginationLabels = {
+  /** Accessible name for the `<nav>` landmark. */
+  root: string;
+  /** Accessible name for the previous-page button. */
+  previous: string;
+  /** Accessible name for the next-page button. */
+  next: string;
+  /**
+   * Accessible name for a page button, given its number. Defaults to e.g. `"Go to page 3"`; the
+   * current page is additionally marked `aria-current`.
+   */
+  page: (page: number) => string;
+  /** Visible text on the per-page selector trigger, given the size. Defaults to `"50"`. */
+  perPageValue: (pageSize: number) => React.ReactNode;
+  /** Trailing text after the per-page selector. Defaults to `"per page"`. */
+  perPage: React.ReactNode;
+};
+
+const DEFAULT_LABELS: PaginationLabels = {
+  root: "Pagination",
+  previous: "Go to previous page",
+  next: "Go to next page",
+  page: (page) => `Go to page ${page}`,
+  perPageValue: (pageSize) => String(pageSize),
+  perPage: "per page",
+};
+
+export type PaginationProps = Omit<
+  React.ComponentProps<"nav">,
+  "className" | "style" | "children" | "aria-label" | "onChange"
+> & {
+  /** The current page, 1-based. */
+  page: number;
+  /** Total number of pages. */
+  pageCount: number;
+  /** Called with the target page (1-based) when a control is activated. */
+  onPageChange: (page: number) => void;
+  /**
+   * The current page is rendered as a loading spinner instead of its number — for when navigating
+   * to that page is in flight.
+   */
+  loading?: boolean;
+  /**
+   * Optional per-page size selector (Figma `50 v per page`). Provide `value`, the `options`, and
+   * `onValueChange`; omit to hide the selector entirely.
+   */
+  pageSize?: {
+    /** Currently selected page size. */
+    value: number;
+    /** Selectable page sizes. */
+    options: number[];
+    /** Called with the chosen page size. */
+    onValueChange: (pageSize: number) => void;
+  };
+  /**
+   * Optional range label shown before the controls (Figma `1-50 of 250`). Provide the
+   * already-formatted `current` range and `total`.
+   */
+  range?: {
+    /** The visible range, e.g. `"1-50"` (rendered in the primary text color). */
+    current: React.ReactNode;
+    /** The total count, e.g. `250` (rendered after `of` in the tertiary color). */
+    total: React.ReactNode;
+  };
+  /** Override the default English accessible names / visible selector text. */
+  labels?: Partial<PaginationLabels>;
+};
+
+/**
+ * Page navigation for a paginated list or table. Renders a `<nav>` landmark holding an optional
+ * per-page selector and range label plus an ordered list of page controls: a previous button,
+ * first/last anchors with ellipses around a window of pages near the current one, and a next
+ * button. The current page is marked `aria-current="page"`; the prev/next ends disable at the
+ * bounds and their arrows mirror under RTL.
+ */
+export function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  loading = false,
+  pageSize,
+  range,
+  labels,
+  ...props
+}: PaginationProps) {
+  const l = { ...DEFAULT_LABELS, ...labels };
+  const tokens = buildPageTokens(page, pageCount);
+  const atStart = page <= 1;
+  const atEnd = page >= pageCount;
+
+  return (
+    <nav aria-label={l.root} className="flex items-center gap-4" {...props}>
+      {pageSize ? (
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {/*
+            The selector is the propel Menu (single-select): the `layer-3` pill is
+            its trigger and the menu lists the page sizes, the current one marked with a
+            trailing check. The trigger carries the accessible name (the visible size +
+            the visually-hidden "per page"), and picking a size reports it through
+            `pageSize.onValueChange`. Keyboard works via the Menu (Enter/ArrowDown opens,
+            arrows move, Enter selects).
+          */}
+          <Menu>
+            <MenuTrigger render={<PaginationPerPageTrigger />}>
+              <span>{l.perPageValue(pageSize.value)}</span>
+              <span className="sr-only">{l.perPage}</span>
+              <ChevronDown aria-hidden className="transition-transform" />
+            </MenuTrigger>
+            <MenuContent width="anchor" align="center">
+              {pageSize.options.map((option) => (
+                <MenuItem
+                  key={option}
+                  variant="default"
+                  label={l.perPageValue(option)}
+                  selected={option === pageSize.value}
+                  onClick={() => pageSize.onValueChange(option)}
+                />
+              ))}
+            </MenuContent>
+          </Menu>
+          <span aria-hidden className="text-13 whitespace-nowrap text-tertiary">
+            {l.perPage}
+          </span>
+        </div>
+      ) : null}
+
+      {range ? (
+        <p className="text-12 whitespace-nowrap text-tertiary">
+          <span className="text-primary">{range.current}</span>
+          <span>{" of "}</span>
+          <span>{range.total}</span>
+        </p>
+      ) : null}
+
+      <ul className="flex items-center gap-1.5">
+        <li>
+          <PaginationArrowButton
+            aria-label={l.previous}
+            disabled={atStart}
+            onClick={() => onPageChange(page - 1)}
+          >
+            <ArrowLeft aria-hidden />
+          </PaginationArrowButton>
+        </li>
+
+        {tokens.map((token) => {
+          if (token === "ellipsis-start" || token === "ellipsis-end") {
+            return <PaginationEllipsis key={token} />;
+          }
+          const isCurrent = token === page;
+          return (
+            <li key={token}>
+              <PaginationPageButton
+                aria-label={l.page(token)}
+                aria-current={isCurrent ? "page" : undefined}
+                current={isCurrent}
+                disabled={isCurrent}
+                onClick={() => onPageChange(token)}
+              >
+                {isCurrent && loading ? (
+                  <LoaderCircle
+                    aria-hidden
+                    className="size-3.5 shrink-0 animate-spin text-icon-placeholder"
+                  />
+                ) : (
+                  token
+                )}
+              </PaginationPageButton>
+            </li>
+          );
+        })}
+
+        <li>
+          <PaginationArrowButton
+            aria-label={l.next}
+            disabled={atEnd}
+            onClick={() => onPageChange(page + 1)}
+          >
+            <ArrowRight aria-hidden />
+          </PaginationArrowButton>
+        </li>
+      </ul>
+    </nav>
+  );
+}
diff --git a/packages/propel/src/components/pill/index.tsx b/packages/propel/src/components/pill/index.tsx
index 4017e7b..daebbdd 100644
--- a/packages/propel/src/components/pill/index.tsx
+++ b/packages/propel/src/components/pill/index.tsx
@@ -1,237 +1,3 @@
-import { Toggle } from "@base-ui/react/toggle";
-import { cva, cx } from "class-variance-authority";
-import { LoaderCircle } from "lucide-react";
-import * as React from "react";
-
-import { getLoadingButtonProps } from "../../internal/loading-button";
-import { nodeSlotClass } from "../../internal/node-slot";
-
-// The Figma "Pills" family (node 1121-11) is three small, 6px-rounded chips that share
-// one chrome: a 1px-bordered `layer-2` rectangle that darkens its background + border
-// on interaction. `PillButton` and `IconPill` are buttons (hover / active / disabled /
-// loading); `PillSwitch` is a toggle (default / hover / selected). All three take the
-// `magnitude` axis (`sm` / `md` / `lg`).
-//
-// Despite the name they are NOT fully-rounded — `radius/md` (6px). Per Figma the icon
-// and text colors are the same token per state, so the slots inherit the chip's text
-// color through `currentColor` (a single channel) rather than carrying their own.
-export type PillMagnitude = "sm" | "md" | "lg";
-
-// Shared chip chrome. The interaction colors are applied by each component (they differ
-// between the button states and the toggle's selected state), so the base is only
-// layout + the focus ring. The focus ring is a propel a11y addition (the Figma frames
-// show no focus state). `transition-colors` covers the bg/border/text shifts.
-const pillBase = cx(
-  "inline-flex shrink-0 items-center justify-center rounded-md border-sm outline-none",
-  "transition-colors focus-visible:ring-2 focus-visible:ring-accent-strong",
-);
-
-// The label chips (`PillButton`, `PillSwitch`) share their box metrics: 20/24/28px tall
-// with 6/6/8px inline padding, a 4px gap, a 14px node at every magnitude, and a 120px
-// cap so a long label truncates. The font size is layered on separately: `sm` is the
-// 12px text, `md` the 13px text, and `lg` the `body-sm/regular` composite (14px size,
-// regular weight, and its line-height/letter-spacing all in one utility).
-const labelPillSize = cva(cx(pillBase, "max-w-[120px] gap-1 py-1 [--node-size:0.875rem]"), {
-  variants: {
-    magnitude: {
-      sm: "h-5 px-1.5",
-      md: "h-6 px-1.5",
-      lg: "h-7 px-2",
-    },
-  },
-});
-
-const labelFontByMagnitude: Record<PillMagnitude, string> = {
-  sm: "text-12",
-  md: "text-13",
-  lg: "text-body-sm-regular",
-};
-
-// The slotted node (a 14px leading/trailing icon) and the spinner. Icons inherit the
-// chip's `currentColor`; the spinner matches the node size.
-function PillNode({ children }: { children: React.ReactNode }) {
-  return (
-    <span aria-hidden className={nodeSlotClass}>
-      {children}
-    </span>
-  );
-}
-
-function PillSpinner() {
-  return <LoaderCircle aria-hidden className="size-(--node-size) shrink-0 animate-spin" />;
-}
-
-// The truncating label. `min-w-0` lets it shrink so the 120px cap can ellipsize it.
-function PillLabel({ children }: { children: React.ReactNode }) {
-  return <span className="min-w-0 truncate">{children}</span>;
-}
-
-const pillButtonColors = cx(
-  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
-  "hover:border-strong hover:bg-layer-2-hover",
-  "active:border-strong active:bg-layer-2-active active:text-primary",
-  // Disabled + loading drop to a transparent fill with the disabled text/icon color.
-  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
-  "aria-busy:cursor-default aria-busy:border-subtle-1 aria-busy:bg-layer-transparent aria-busy:text-disabled",
-);
-
-export type PillButtonProps = Omit<React.ComponentProps<"button">, "className" | "style"> & {
-  /** Box scale. `sm` 20px / `md` 24px / `lg` 28px. */
-  magnitude: PillMagnitude;
-  /** A 14px node (icon/avatar) before the label. */
-  inlineStartNode?: React.ReactNode;
-  /** A 14px node (icon/avatar) after the label. */
-  inlineEndNode?: React.ReactNode;
-  /**
-   * Busy state: swaps the leading node for a spinner, dims the label, and blocks clicks while
-   * staying a real, focusable button (`aria-busy`/`aria-disabled`).
-   */
-  loading?: boolean;
-};
-
-/**
- * A pill-shaped button — a compact, low-emphasis action chip (e.g. a filter or a "+ Add"
- * affordance). Holds a label with optional leading/trailing nodes. Hover and active are CSS states;
- * `disabled` and `loading` are props.
- */
-export function PillButton({
-  magnitude,
-  inlineStartNode,
-  inlineEndNode,
-  loading = false,
-  children,
-  type = "button",
-  disabled,
-  onClick,
-  ...props
-}: PillButtonProps) {
-  return (
-    <button
-      type={type}
-      {...getLoadingButtonProps({ loading, disabled, onClick })}
-      className={cx(
-        labelPillSize({ magnitude }),
-        labelFontByMagnitude[magnitude],
-        pillButtonColors,
-      )}
-      {...props}
-    >
-      {loading ? <PillSpinner /> : inlineStartNode ? <PillNode>{inlineStartNode}</PillNode> : null}
-      <PillLabel>{children}</PillLabel>
-      {!loading && inlineEndNode ? <PillNode>{inlineEndNode}</PillNode> : null}
-    </button>
-  );
-}
-
-const pillSwitchColors = cx(
-  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
-  "hover:border-strong hover:bg-layer-2-hover",
-  // Selected (the toggle's pressed state) is the darker `-selected` fill + strong
-  // border + primary label.
-  "data-pressed:border-strong data-pressed:bg-layer-2-selected data-pressed:text-primary",
-  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
-);
-
-export type PillSwitchProps = Omit<
-  React.ComponentProps<typeof Toggle>,
-  "className" | "render" | "style"
-> & {
-  /** Box scale. `sm` 20px / `md` 24px / `lg` 28px. */
-  magnitude: PillMagnitude;
-  /** A 14px node (icon/avatar) before the label. */
-  inlineStartNode?: React.ReactNode;
-  /** A 14px node (icon/avatar) after the label. */
-  inlineEndNode?: React.ReactNode;
-};
-
-/**
- * A toggle pill — a selectable chip for segmented, on/off choices (e.g. the display properties in a
- * settings menu). Built on Base UI `Toggle`, so it reports `aria-pressed` and is keyboard-operable;
- * the selected look is its pressed state. Control it with `pressed` + `onPressedChange`, or leave
- * it uncontrolled with `defaultPressed`. Compose several inside a Base UI `ToggleGroup` for a
- * single-select set.
- */
-export function PillSwitch({
-  magnitude,
-  inlineStartNode,
-  inlineEndNode,
-  children,
-  ...props
-}: PillSwitchProps) {
-  return (
-    <Toggle
-      className={cx(
-        labelPillSize({ magnitude }),
-        labelFontByMagnitude[magnitude],
-        pillSwitchColors,
-      )}
-      {...props}
-    >
-      {inlineStartNode ? <PillNode>{inlineStartNode}</PillNode> : null}
-      <PillLabel>{children}</PillLabel>
-      {inlineEndNode ? <PillNode>{inlineEndNode}</PillNode> : null}
-    </Toggle>
-  );
-}
-
-// The icon-only square chip. Fixed square boxes (the icon centers inside) with a 14px
-// icon at `sm` and 16px at `md`/`lg`. Same button states as `PillButton`; the icon
-// color is the only foreground, so it carries the icon tokens directly.
-const iconPillVariants = cva(
-  cx(
-    pillBase,
-    "cursor-pointer border-subtle-1 bg-layer-2 text-icon-secondary",
-    "hover:border-strong hover:bg-layer-2-hover",
-    "active:border-strong active:bg-layer-2-active",
-    "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-icon-disabled",
-    "aria-busy:cursor-default aria-busy:border-subtle-1 aria-busy:bg-layer-transparent aria-busy:text-icon-disabled",
-  ),
-  {
-    variants: {
-      magnitude: {
-        sm: "size-5 [--node-size:0.875rem]",
-        md: "size-6 [--node-size:1rem]",
-        lg: "size-7 [--node-size:1rem]",
-      },
-    },
-  },
-);
-
-export type IconPillProps = Omit<
-  React.ComponentProps<"button">,
-  "className" | "style" | "children"
-> & {
-  /** Box scale. `sm` 20px (14px icon) / `md` 24px / `lg` 28px (16px icon). */
-  magnitude: PillMagnitude;
-  /** The icon (a 14/16px lucide icon), sized and tinted by the pill. Required. */
-  children: React.ReactNode;
-  /** Accessible name — required because the content is an icon (icons are hidden). */
-  "aria-label": string;
-  /** Busy state: swaps the icon for a spinner and blocks clicks (stays focusable). */
-  loading?: boolean;
-};
-
-/**
- * An icon-only square pill — a compact icon action chip. Requires an `aria-label` because its
- * content is an icon. Hover and active are CSS states; `disabled` and `loading` are props.
- */
-export function IconPill({
-  magnitude,
-  loading = false,
-  children,
-  type = "button",
-  disabled,
-  onClick,
-  ...props
-}: IconPillProps) {
-  return (
-    <button
-      type={type}
-      {...getLoadingButtonProps({ loading, disabled, onClick })}
-      className={iconPillVariants({ magnitude })}
-      {...props}
-    >
-      {loading ? <PillSpinner /> : <PillNode>{children}</PillNode>}
-    </button>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/pill` only
+// when you need the lower-level parts.
+export * from "../../ui/pill";
diff --git a/packages/propel/src/components/pill/pill.stories.tsx b/packages/propel/src/components/pill/pill.stories.tsx
index 48d51bf..5cb3a92 100644
--- a/packages/propel/src/components/pill/pill.stories.tsx
+++ b/packages/propel/src/components/pill/pill.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Check, Plus, Tag, X } from "lucide-react";
-import { expect, fn, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 
 import { IconPill, PillButton, PillSwitch } from "./index";
 
@@ -26,7 +26,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/** A pill-shaped button. Holds a label with optional leading/trailing nodes. */
+/** A pill-shaped button. Holds a label with optional inline-start/end nodes. */
 export const Button: Story = {
   args: { magnitude: "md", inlineStartNode: <Plus />, children: "Add label" },
 };
@@ -46,9 +46,9 @@ export const Magnitudes: Story = {
 };
 
 /**
- * `PillButton` states. Default / hover / active are the chip darkening its fill + border (hover and
- * active are forced here via the pseudo-states addon); `disabled` and `loading` drop to a
- * transparent fill with a dimmed label, and `loading` swaps the leading node for a spinner.
+ * `PillButton` states. Default / hover / active darken the chip's fill + border (hover and active
+ * forced via the pseudo-states addon); `disabled` and `loading` drop to a transparent fill with a
+ * dimmed label, and `loading` swaps the inline-start node for a spinner.
  */
 export const States: Story = {
   parameters: {
@@ -96,8 +96,7 @@ export const Switch: Story = {
 
 /**
  * Icon-only square pills. Require an `aria-label`. `disabled` drops to a transparent fill with the
- * disabled icon color, and `loading` swaps the icon for a spinner tinted with that same disabled
- * icon color.
+ * disabled icon color, and `loading` swaps the icon for a spinner tinted with that same color.
  */
 export const Icons: Story = {
   parameters: { controls: { disable: true } },
@@ -120,8 +119,7 @@ export const Icons: Story = {
 
 /**
  * Clicking a `PillButton` fires its handler, and a `loading` pill blocks the click while staying
- * focusable (`aria-busy`). Tagged out of the sidebar/docs/manifest but still run under the default
- * `test` tag.
+ * focusable (`aria-busy`). Tagged out of the sidebar/docs/manifest but still run under `test`.
  */
 export const ButtonClicks: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -135,19 +133,17 @@ export const ButtonClicks: Story = {
       </PillButton>
     </div>
   ),
-  play: async ({ canvasElement }) => {
+  play: async ({ canvas }) => {
     const { onClick, onLoadingClick } = clickSpies;
     onClick.mockClear();
     onLoadingClick.mockClear();
 
-    const canvas = within(canvasElement);
     const button = canvas.getByRole("button", { name: "Click me" });
     await userEvent.click(button);
     await expect(onClick).toHaveBeenCalledTimes(1);
 
     const busy = canvas.getByRole("button", { name: "Busy" });
     await expect(busy).toHaveAttribute("aria-busy", "true");
-    // The busy pill is focusable but does not act on click.
     await userEvent.click(busy);
     await expect(onLoadingClick).not.toHaveBeenCalled();
   },
@@ -155,7 +151,7 @@ export const ButtonClicks: Story = {
 
 /**
  * `PillSwitch` reports `aria-pressed` and flips it on click (Base UI `Toggle`). Tagged out of the
- * sidebar/docs/manifest but still run under the default `test` tag.
+ * sidebar/docs/manifest but still run under `test`.
  */
 export const SwitchToggles: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -164,8 +160,7 @@ export const SwitchToggles: Story = {
       Toggle me
     </PillSwitch>
   ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas }) => {
     const toggle = canvas.getByRole("button", { name: "Toggle me" });
     await expect(toggle).toHaveAttribute("aria-pressed", "false");
     await userEvent.click(toggle);
diff --git a/packages/propel/src/components/popover/index.tsx b/packages/propel/src/components/popover/index.tsx
index cd67e80..bfe82af 100644
--- a/packages/propel/src/components/popover/index.tsx
+++ b/packages/propel/src/components/popover/index.tsx
@@ -1,119 +1,8 @@
-import { Popover as BasePopover } from "@base-ui/react/popover";
-import * as React from "react";
-
-import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
-
-/**
- * The popover root — a Base UI `Popover.Root`. Holds open state and wires the trigger to the
- * floating panel. Compose it with `PopoverTrigger` + `PopoverContent`:
- *
- * ```tsx
- * <Popover>
- *   <PopoverTrigger>Display</PopoverTrigger>
- *   <PopoverContent>
- *     <RadioGroup>…</RadioGroup>
- *     <Checkbox label="Show empty groups" />
- *   </PopoverContent>
- * </Popover>;
- * ```
- *
- * Unlike `Dropdown`, the surface is a generic floating panel (NOT a `role="menu"`), so it can host
- * arbitrary settings-panel content — radios, checkboxes, pills, forms — as valid children. Reach
- * for `Dropdown` when you need an actual ARIA menu of actions.
- */
-type BasePopoverRootProps = React.ComponentProps<typeof BasePopover.Root>;
-
-export type PopoverProps = Omit<
-  BasePopoverRootProps,
-  "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"
-> & {
-  /** Whether the popover is open. Controlled; pair with `onOpenChange`. */
-  open?: boolean;
-  /** Whether the popover is open on mount. Uncontrolled. @default false */
-  defaultOpen?: boolean;
-  /** Called with the next open state when the popover opens or closes. */
-  onOpenChange?: BasePopoverRootProps["onOpenChange"];
-  /**
-   * Modal behavior while open: `true` locks page scroll and blocks outside pointer interaction;
-   * `'trap-focus'` only traps focus. @default false
-   */
-  modal?: BasePopoverRootProps["modal"];
-  /** The popover's trigger and panel (`PopoverTrigger`, `PopoverContent`). */
-  children?: React.ReactNode;
-};
-
-export function Popover(props: PopoverProps) {
-  return <BasePopover.Root {...props} />;
-}
-
-export type PopoverTriggerProps = Omit<
-  React.ComponentProps<typeof BasePopover.Trigger>,
-  "className" | "style"
->;
-
-/**
- * The element that opens the popover. Renders a `<button>` by default; pass `render` to project the
- * trigger onto your own element (e.g. an icon button).
- */
-export function PopoverTrigger(props: PopoverTriggerProps) {
-  return <BasePopover.Trigger {...props} />;
-}
-
-// The panel surface is the shared `OverlayPanel` — the same `overlay` shadow at `lg`
-// radius the dropdown uses, capped at the available height, with its body scrolling
-// inside a `ScrollArea` — so popovers read as the same family of overlays.
-type PopoverContentWidth = OverlayPanelWidth;
-
-export type PopoverContentProps = Omit<
-  React.ComponentProps<typeof BasePopover.Popup>,
-  "className" | "style"
-> & {
-  /** Which side of the trigger the panel opens toward. @default "bottom" */
-  side?: React.ComponentProps<typeof BasePopover.Positioner>["side"];
-  /** Distance in px between the trigger and the panel. @default 4 */
-  sideOffset?: React.ComponentProps<typeof BasePopover.Positioner>["sideOffset"];
-  /** Alignment of the panel relative to the trigger along `side`. @default "start" */
-  align?: React.ComponentProps<typeof BasePopover.Positioner>["align"];
-  /**
-   * Fixed panel width. `anchor` matches the trigger; `sm`/`md`/`lg` are the panel widths from Figma
-   * (256 / 288 / 384px). @default "anchor"
-   */
-  width?: PopoverContentWidth;
-};
-
-/**
- * The floating panel surface. Bundles Base UI's `Portal` + `Positioner` + `Popup` so the panel
- * renders in a portal, positioned against the trigger, with propel's overlay styling. Place
- * arbitrary content inside — radios, checkboxes, pills, forms — it is a generic container (no
- * `role="menu"`), so those controls are valid children and the surface stays ARIA-clean. Give it an
- * accessible name with `aria-label` / `aria-labelledby` when the panel needs one.
- *
- * Base UI handles the a11y wiring: focus moves into the panel on open and returns to the trigger on
- * close, `Esc` and outside-clicks dismiss it, and the positioner uses logical sides so it is
- * RTL-safe out of the box.
- */
-export function PopoverContent({
-  children,
-  side = "bottom",
-  sideOffset = 4,
-  align = "start",
-  width = "anchor",
-  ...props
-}: PopoverContentProps) {
-  return (
-    <BasePopover.Portal>
-      <BasePopover.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        className="outline-none"
-      >
-        <OverlayPanel elevation="overlay" radius="lg" width={width}>
-          <BasePopover.Popup className="p-1 outline-none" {...props}>
-            {children}
-          </BasePopover.Popup>
-        </OverlayPanel>
-      </BasePopover.Positioner>
-    </BasePopover.Portal>
-  );
-}
+export { PopoverContent, type PopoverContentProps } from "./popover-content";
+// Re-export the atomic root + trigger so a popover can be assembled from one entry.
+export {
+  Popover,
+  type PopoverProps,
+  PopoverTrigger,
+  type PopoverTriggerProps,
+} from "../../ui/popover";
diff --git a/packages/propel/src/components/popover/popover-content.tsx b/packages/propel/src/components/popover/popover-content.tsx
new file mode 100644
index 0000000..98f9333
--- /dev/null
+++ b/packages/propel/src/components/popover/popover-content.tsx
@@ -0,0 +1,47 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { OverlayPanel, type OverlayPanelWidth } from "../../internal/overlay-panel";
+
+type PopoverContentWidth = OverlayPanelWidth;
+
+export type PopoverContentProps = Omit<
+  React.ComponentProps<typeof BasePopover.Popup>,
+  "className" | "style"
+> & {
+  /** Which side of the trigger the panel opens toward. @default "bottom" */
+  side?: React.ComponentProps<typeof BasePopover.Positioner>["side"];
+  /** Distance in px between the trigger and the panel. @default 4 */
+  sideOffset?: React.ComponentProps<typeof BasePopover.Positioner>["sideOffset"];
+  /** Alignment of the panel relative to the trigger along `side`. @default "start" */
+  align?: React.ComponentProps<typeof BasePopover.Positioner>["align"];
+  /** Fixed panel width. @default "anchor" */
+  width?: PopoverContentWidth;
+};
+
+/** A generic floating panel surface for arbitrary controls and form content. */
+export function PopoverContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  width = "anchor",
+  ...props
+}: PopoverContentProps) {
+  return (
+    <BasePopover.Portal>
+      <BasePopover.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        className="outline-none"
+      >
+        <OverlayPanel elevation="overlay" radius="lg" width={width}>
+          <BasePopover.Popup className="p-1 outline-none" {...props}>
+            {children}
+          </BasePopover.Popup>
+        </OverlayPanel>
+      </BasePopover.Positioner>
+    </BasePopover.Portal>
+  );
+}
diff --git a/packages/propel/src/components/popover/popover.stories.tsx b/packages/propel/src/components/popover/popover.stories.tsx
index 9414a0a..f7b787e 100644
--- a/packages/propel/src/components/popover/popover.stories.tsx
+++ b/packages/propel/src/components/popover/popover.stories.tsx
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // A plain trigger button styled with propel tokens — the popover itself doesn't ship a
-// trigger style, so stories provide one (the same one the Dropdown stories use).
+// trigger style, so stories provide one (the same one the Menu stories use).
 const triggerClass =
   "inline-flex h-8 items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
 
@@ -123,7 +123,7 @@ export const Default: Story = {
 };
 
 /**
- * **DisplayProperties** — the settings panel that used to live in the Dropdown stories (and had to
+ * **DisplayProperties** — the settings panel that used to live in the Menu stories (and had to
  * disable `aria-allowed-attr`). On the non-menu Popover surface the pill group, single-select
  * `Radio` section, and checkbox-toggle footer are all valid children, so axe passes with no
  * suppressions.
@@ -200,8 +200,8 @@ export const DisplayProperties: Story = {
 
 /**
  * **DisplayAccordion** — the other settings panel that used to disable `aria-allowed-attr` in the
- * Dropdown stories. Collapsible sections with an expanded single-select `Radio` sort list and
- * checkbox toggles, all valid on the non-menu Popover surface.
+ * Menu stories. Collapsible sections with an expanded single-select `Radio` sort list and checkbox
+ * toggles, all valid on the non-menu Popover surface.
  */
 export const DisplayAccordion: Story = {
   render: function DisplayAccordionStory() {
@@ -313,7 +313,7 @@ export const RTL: Story = {
           </PopoverTrigger>
           <PopoverContent width="md" aria-label="Options">
             <PanelLabel>الترتيب حسب</PanelLabel>
-            <RadioGroup defaultValue="priority">
+            <RadioGroup density="comfortable" defaultValue="priority">
               <PanelRadioRow value="priority" label="الأولوية" />
               <PanelRadioRow value="created" label="تاريخ الإنشاء" />
               <PanelRadioRow value="updated" label="آخر تحديث" />
diff --git a/packages/propel/src/components/preview-card/index.tsx b/packages/propel/src/components/preview-card/index.tsx
new file mode 100644
index 0000000..db1417f
--- /dev/null
+++ b/packages/propel/src/components/preview-card/index.tsx
@@ -0,0 +1,10 @@
+export { PreviewCardContent, type PreviewCardContentProps } from "./preview-card-content";
+// Re-export the atomic parts so a full preview card can be assembled from one entry.
+export {
+  PreviewCard,
+  type PreviewCardProps,
+  PreviewCardArrow,
+  type PreviewCardArrowProps,
+  PreviewCardTrigger,
+  type PreviewCardTriggerProps,
+} from "../../ui/preview-card";
diff --git a/packages/propel/src/components/preview-card/preview-card-content.tsx b/packages/propel/src/components/preview-card/preview-card-content.tsx
new file mode 100644
index 0000000..77c39f9
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card-content.tsx
@@ -0,0 +1,39 @@
+import {
+  PreviewCardBackdrop,
+  PreviewCardPopup,
+  type PreviewCardPopupProps,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  type PreviewCardPositionerProps,
+} from "../../ui/preview-card";
+
+export type PreviewCardContentProps = PreviewCardPopupProps & {
+  /** Which side of the trigger the card opens toward. @default "bottom" */
+  side?: PreviewCardPositionerProps["side"];
+  /** Distance in px between the trigger and the card. @default 4 */
+  sideOffset?: PreviewCardPositionerProps["sideOffset"];
+  /** Alignment of the card relative to the trigger along `side`. @default "center" */
+  align?: PreviewCardPositionerProps["align"];
+};
+
+/**
+ * Convenience that composes the anchored preview card boilerplate — portal, backdrop, positioner,
+ * and popup — so a consumer only writes the trigger and the card body. Pass `side`/`sideOffset`/
+ * `align` through to the positioner.
+ */
+export function PreviewCardContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  ...props
+}: PreviewCardContentProps) {
+  return (
+    <PreviewCardPortal>
+      <PreviewCardBackdrop />
+      <PreviewCardPositioner side={side} sideOffset={sideOffset} align={align}>
+        <PreviewCardPopup {...props}>{children}</PreviewCardPopup>
+      </PreviewCardPositioner>
+    </PreviewCardPortal>
+  );
+}
diff --git a/packages/propel/src/components/preview-card/preview-card.stories.tsx b/packages/propel/src/components/preview-card/preview-card.stories.tsx
new file mode 100644
index 0000000..6366a1e
--- /dev/null
+++ b/packages/propel/src/components/preview-card/preview-card.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import { PreviewCard, PreviewCardArrow, PreviewCardContent, PreviewCardTrigger } from "./index";
+
+// Components-tier story: uses the ready-made `PreviewCardContent`, which composes
+// the portal/backdrop/positioner/popup so a consumer only writes the trigger and
+// the card body (and may drop in the re-exported `PreviewCardArrow`).
+
+const meta = {
+  title: "Components/PreviewCard",
+  component: PreviewCard,
+  subcomponents: { PreviewCardTrigger, PreviewCardContent, PreviewCardArrow },
+} satisfies Meta<typeof PreviewCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A hovered link reveals a rich preview card. `PreviewCardContent` handles the overlay plumbing. */
+export const Default: Story = {
+  render: () => (
+    <p className="max-w-prose text-14 text-secondary">
+      The open-source project tracker{" "}
+      <PreviewCard>
+        <PreviewCardTrigger
+          render={<a href="https://plane.so" className="text-accent-strong underline" />}
+        >
+          Plane
+        </PreviewCardTrigger>
+        <PreviewCardContent side="top">
+          <div className="flex w-56 flex-col gap-1">
+            <span className="text-14 font-semibold text-primary">Plane</span>
+            <span className="text-13 text-secondary">
+              Open-source project management for issues, sprints, and roadmaps.
+            </span>
+          </div>
+          <PreviewCardArrow />
+        </PreviewCardContent>
+      </PreviewCard>{" "}
+      makes planning simple.
+    </p>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.hover(canvas.getByRole("link", { name: "Plane" }));
+    await waitFor(() =>
+      expect(within(document.body).getByText(/Open-source project management/)).toBeInTheDocument(),
+    );
+  },
+};
diff --git a/packages/propel/src/components/progress/index.tsx b/packages/propel/src/components/progress/index.tsx
index 852b8c5..f06ae21 100644
--- a/packages/propel/src/components/progress/index.tsx
+++ b/packages/propel/src/components/progress/index.tsx
@@ -1,149 +1,6 @@
-import { Progress as BaseProgress } from "@base-ui/react/progress";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-const trackVariants = cva(
-  "relative min-w-0 flex-1 overflow-hidden rounded-full bg-layer-3-selected",
-  {
-    variants: {
-      magnitude: {
-        sm: "h-[5px]",
-        md: "h-2",
-      },
-    },
-  },
-);
-
-const ringVariants = cva("shrink-0", {
-  variants: {
-    magnitude: {
-      sm: "size-4",
-      md: "size-5",
-    },
-  },
-});
-
-// Circle geometry per magnitude. The Figma circular variant (nodes 5736-3457 / 5736-3460)
-// is a 16px (sm) / 20px (md) box holding a 2px-stroke ring: a 14px circle (sm) or 18px
-// circle (md). The centerline radius is therefore (diameter - stroke) / 2 -> 6 (sm) / 8
-// (md). The viewBox matches the box so 1 SVG user unit == 1px.
-const RING_GEOMETRY = {
-  sm: { box: 16, radius: 6 },
-  md: { box: 20, radius: 8 },
-} as const;
-const RING_STROKE = 2;
-
-// The Figma "Progress" component has two variants:
-//  - linear (node 1990-51): a pill-shaped track (`layer-3-selected`) with an
-//    accent-filled indicator and an optional trailing percentage label
-//    (`text/accent/primary`, 12px medium). `magnitude` only changes the track
-//    thickness — `sm` 5px, `md` 8px.
-//  - circular (node 5736-3457): a small determinate ring — a subtle track circle
-//    (`layer-3-selected`, the same surface the linear track uses) plus an accent arc
-//    (`background/accent/primary`) proportional to the value, with rounded caps and no
-//    label. `magnitude` changes the diameter — `sm` 16px, `md` 20px.
-// Both are built on Base UI `Progress`, which owns the `progressbar` role +
-// `aria-valuenow` for us.
-export type ProgressMagnitude = NonNullable<VariantProps<typeof trackVariants>["magnitude"]>;
-export type ProgressVariant = "linear" | "circular";
-
-export type ProgressProps = Omit<
-  React.ComponentProps<typeof BaseProgress.Root>,
-  "className" | "render" | "style" | "value"
-> & {
-  /** `linear` = a horizontal bar. `circular` = a determinate ring. */
-  variant: ProgressVariant;
-  /** Completion from 0 to `max` (default max 100). */
-  value: number;
-  /** `linear`: track thickness (`sm` 5px / `md` 8px). `circular`: diameter (`sm` 16px / `md` 20px). */
-  magnitude: ProgressMagnitude;
-  /**
-   * Show the trailing percentage label. Only applies to `variant="linear"` — the circular rings are
-   * too small for a label, so this is ignored when `circular`.
-   *
-   * @default true
-   */
-  showValue?: boolean;
-  /**
-   * Accessible name for the bar. Required: a progress bar needs a name for assistive tech (the
-   * visible percentage is not a substitute).
-   */
-  "aria-label": string;
-};
-
-/**
- * A determinate progress indicator — task completion over time (uploads, imports, the Toast
- * auto-dismiss countdown). Drive it with `value` (0–`max`, default max 100); the fill and
- * `aria-valuenow` follow.
- *
- * `variant="linear"` is a horizontal bar with an optional trailing `%` label (shown by default;
- * hide it with `showValue={false}`). `variant="circular"` is a small ring with no label
- * (`showValue` is ignored).
- */
-export function Progress({ variant, value, magnitude, showValue = true, ...props }: ProgressProps) {
-  if (variant === "circular") {
-    const { box, radius } = RING_GEOMETRY[magnitude];
-    const circumference = 2 * Math.PI * radius;
-    const max = props.max ?? 100;
-    // Clamp once and feed the same value to the SVG arc and the Root, so the arc
-    // and `aria-valuenow` never disagree for out-of-range input.
-    const clampedValue = Math.min(Math.max(value, 0), max);
-    const fraction = max > 0 ? clampedValue / max : 0;
-    const dashOffset = circumference * (1 - fraction);
-    const center = box / 2;
-    return (
-      <BaseProgress.Root value={clampedValue} {...props}>
-        <svg
-          className={ringVariants({ magnitude })}
-          viewBox={`0 0 ${box} ${box}`}
-          fill="none"
-          aria-hidden="true"
-        >
-          {/* Track: the full subtle ring. Strokes with the same `layer-3-selected`
-              surface token the linear track fills with, so both variants read as the
-              same low-emphasis track and re-tint together in every theme. (The old
-              `icon-disabled` icon token sat too bright in dark mode — its track lightness
-              landed right next to the accent arc, so the indicator stopped reading.) */}
-          <circle
-            className="[stroke:var(--bg-layer-3-selected)]"
-            cx={center}
-            cy={center}
-            r={radius}
-            strokeWidth={RING_STROKE}
-          />
-          {/* Indicator arc: accent stroke proportional to the value, using the same
-              `accent-primary` token the linear indicator fills with (Figma binds both to
-              `background/accent/primary`). Rotated -90deg so the arc starts at 12 o'clock;
-              the dash offset shrinks it toward `value`. `transform-origin: center` keeps
-              the rotation about the circle's center regardless of direction (the visual
-              sweep stays clockwise in RTL too). */}
-          <circle
-            className="origin-center -rotate-90 [stroke:var(--bg-accent-primary)] transition-[stroke-dashoffset] duration-300 ease-out"
-            cx={center}
-            cy={center}
-            r={radius}
-            strokeWidth={RING_STROKE}
-            strokeLinecap="round"
-            strokeDasharray={circumference}
-            strokeDashoffset={dashOffset}
-          />
-        </svg>
-      </BaseProgress.Root>
-    );
-  }
-
-  return (
-    <BaseProgress.Root value={value} className="flex w-full items-center gap-2" {...props}>
-      <BaseProgress.Track className={trackVariants({ magnitude })}>
-        {/* Base UI sets the indicator's `width` (and `inset-inline-start: 0`) from the
-            value; we own its fill, pill radius, and the fill transition. */}
-        <BaseProgress.Indicator className="absolute inset-y-0 rounded-full bg-accent-primary transition-[width] duration-300 ease-out" />
-      </BaseProgress.Track>
-      {showValue ? (
-        <BaseProgress.Value className="shrink-0 text-12 font-medium text-accent-primary tabular-nums">
-          {(_, currentValue) => (currentValue == null ? "" : `${Math.round(currentValue)}%`)}
-        </BaseProgress.Value>
-      ) : null}
-    </BaseProgress.Root>
-  );
-}
+export {
+  Progress,
+  type ProgressProps,
+  type ProgressMagnitude,
+  type ProgressVariant,
+} from "./progress";
diff --git a/packages/propel/src/components/progress/progress.stories.tsx b/packages/propel/src/components/progress/progress.stories.tsx
index b216ccd..aabb5bd 100644
--- a/packages/propel/src/components/progress/progress.stories.tsx
+++ b/packages/propel/src/components/progress/progress.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, within } from "storybook/test";
+import { expect } from "storybook/test";
 
 import { Progress } from "./index";
 
@@ -89,8 +89,7 @@ export const CircularMagnitudes: Story = {
 export const Semantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { variant: "linear", value: 32, magnitude: "md", "aria-label": "Upload progress" },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas }) => {
     const bar = canvas.getByRole("progressbar", { name: "Upload progress" });
     await expect(bar).toHaveAttribute("aria-valuenow", "32");
     await expect(canvas.getByText("32%")).toBeInTheDocument();
@@ -105,10 +104,29 @@ export const Semantics: Story = {
 export const CircularSemantics: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
   args: { variant: "circular", value: 32, magnitude: "md", "aria-label": "Sync progress" },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas }) => {
     const bar = canvas.getByRole("progressbar", { name: "Sync progress" });
     await expect(bar).toHaveAttribute("aria-valuenow", "32");
     await expect(canvas.queryByText("32%")).not.toBeInTheDocument();
   },
 };
+
+/**
+ * Circular progress clamps values against `max`; `max={0}` is treated as an empty ring instead of
+ * dividing by zero, while the accessible value remains clamped to `0`.
+ */
+export const CircularZeroMax: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    variant: "circular",
+    value: 32,
+    max: 0,
+    magnitude: "md",
+    "aria-label": "Zero max progress",
+  },
+  play: async ({ canvas }) => {
+    const bar = canvas.getByRole("progressbar", { name: "Zero max progress" });
+    await expect(bar).toHaveAttribute("aria-valuemax", "0");
+    await expect(bar).toHaveAttribute("aria-valuenow", "0");
+  },
+};
diff --git a/packages/propel/src/components/progress/progress.tsx b/packages/propel/src/components/progress/progress.tsx
new file mode 100644
index 0000000..ebadc05
--- /dev/null
+++ b/packages/propel/src/components/progress/progress.tsx
@@ -0,0 +1,83 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import * as React from "react";
+
+import {
+  Progress as ProgressRoot,
+  ProgressCircle,
+  ProgressIndicator,
+  ProgressTrack,
+  ProgressValue,
+  type ProgressTrackProps,
+} from "../../ui/progress";
+
+// The Figma "Progress" component has two variants:
+//  - linear (node 1990-51): a pill-shaped track (`layer-3-selected`) with an
+//    accent-filled indicator and an optional trailing percentage label
+//    (`text/accent/primary`, 12px medium). `magnitude` only changes the track
+//    thickness — `sm` 5px, `md` 8px.
+//  - circular (node 5736-3457): a small determinate ring — a subtle track circle
+//    (`layer-3-selected`, the same surface the linear track uses) plus an accent arc
+//    (`background/accent/primary`) proportional to the value, with rounded caps and no
+//    label. `magnitude` changes the diameter — `sm` 16px, `md` 20px.
+// Both are built on Base UI `Progress`, which owns the `progressbar` role +
+// `aria-valuenow` for us.
+export type ProgressMagnitude = NonNullable<ProgressTrackProps["magnitude"]>;
+export type ProgressVariant = "linear" | "circular";
+
+export type ProgressProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Root>,
+  "className" | "style" | "value"
+> & {
+  /** `linear` = a horizontal bar. `circular` = a determinate ring. */
+  variant: ProgressVariant;
+  /** Completion from 0 to `max` (default max 100). */
+  value: number;
+  /** `linear`: track thickness (`sm` 5px / `md` 8px). `circular`: diameter (`sm` 16px / `md` 20px). */
+  magnitude: ProgressMagnitude;
+  /**
+   * Show the trailing percentage label. Only applies to `variant="linear"` — the circular rings are
+   * too small for a label, so this is ignored when `circular`.
+   *
+   * @default true
+   */
+  showValue?: boolean;
+  /**
+   * Accessible name for the bar. Required: a progress bar needs a name for assistive tech (the
+   * visible percentage is not a substitute).
+   */
+  "aria-label": string;
+};
+
+/**
+ * A determinate progress indicator — task completion over time (uploads, imports, the Toast
+ * auto-dismiss countdown). Drive it with `value` (0–`max`, default max 100); the fill and
+ * `aria-valuenow` follow.
+ *
+ * `variant="linear"` is a horizontal bar with an optional trailing `%` label (shown by default;
+ * hide it with `showValue={false}`). `variant="circular"` is a small ring with no label
+ * (`showValue` is ignored).
+ *
+ * Composed from the `ui/progress` primitives (`Progress` root, `ProgressTrack`,
+ * `ProgressIndicator`, `ProgressValue`, `ProgressCircle`), which are built on Base UI `Progress`
+ * (it owns the `progressbar` role + `aria-valuenow`).
+ */
+export function Progress({ variant, value, magnitude, showValue = true, ...props }: ProgressProps) {
+  if (variant === "circular") {
+    return <ProgressCircle value={value} magnitude={magnitude} {...props} />;
+  }
+
+  return (
+    <ProgressRoot layout="linear" value={value} {...props}>
+      <ProgressTrack magnitude={magnitude}>
+        {/* Base UI sets the indicator's `width` (and `inset-inline-start: 0`) from the
+            value; the ui primitive owns its fill, pill radius, and the fill transition. */}
+        <ProgressIndicator />
+      </ProgressTrack>
+      {showValue ? (
+        <ProgressValue>
+          {(_, currentValue) => (currentValue == null ? "" : `${Math.round(currentValue)}%`)}
+        </ProgressValue>
+      ) : null}
+    </ProgressRoot>
+  );
+}
diff --git a/packages/propel/src/components/radio/index.tsx b/packages/propel/src/components/radio/index.tsx
index 5f186e3..9844c15 100644
--- a/packages/propel/src/components/radio/index.tsx
+++ b/packages/propel/src/components/radio/index.tsx
@@ -1,90 +1,10 @@
-import { Radio as BaseRadio } from "@base-ui/react/radio";
-import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-// The Figma "Radiobutton" component (node 2159-4535) defines a single 16px control
-// with three states — Default (empty ring), Selected (accent ring + 8px inner dot),
-// and a non-editable state (muted grey dot). States come from the Base UI primitive's
-// data attributes (`data-checked` / `data-disabled`), not from variants.
-//
-// Note on "read only": Base UI's `readOnly` stamps `aria-readonly` onto the
-// `role="radio"` element, which ARIA does not allow on that role (axe
-// `aria-allowed-attr`). The non-editable state is therefore expressed via `disabled`,
-// which maps to the ARIA-valid `aria-disabled` and keeps the control non-interactive.
-//
-// Color strategy: the ring stroke and the inner dot both inherit `currentColor`, so
-// flipping the Root's text color in one place recolors the whole control.
-//   - resting    → `icon/tertiary` (the muted grey from Figma)
-//   - selected   → `icon/accent/primary` (the brand accent from Figma)
-//   - disabled   → dimmed `icon/disabled`, non-interactive
-const radioVariants = cva(
-  cx(
-    "flex size-4 shrink-0 items-center justify-center rounded-full border-sm border-current bg-layer-1",
-    "text-icon-tertiary transition-colors outline-none",
-    // Selected uses the accent color for both the ring and the dot.
-    "data-checked:text-icon-accent-primary",
-    // Keyboard focus ring, drawn outside the control so it never clips the dot.
-    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-2",
-    // Disabled is dimmed and non-interactive.
-    "data-disabled:cursor-not-allowed data-disabled:text-icon-disabled data-disabled:opacity-60",
-  ),
-);
-
-// Row spacing is a property of the group, not something a consumer should reach in and
-// override from outside. `comfortable` is the default 8px rhythm; `compact` sits the rows
-// flush (e.g. a settings panel where options read like menu items).
-const radioGroupVariants = cva("flex flex-col", {
-  variants: {
-    density: {
-      comfortable: "gap-2",
-      compact: "gap-0",
-    },
-  },
-});
-
-export type RadioGroupDensity = NonNullable<VariantProps<typeof radioGroupVariants>["density"]>;
-
-export type RadioGroupProps = Omit<
-  React.ComponentProps<typeof BaseRadioGroup>,
-  "className" | "render" | "style"
-> & {
-  /** Spacing between options: `comfortable` (default, 8px) or `compact` (flush). */
-  density?: RadioGroupDensity;
-};
-
-/**
- * Groups a set of `Radio` options so at most one can be selected at a time (none is selected until
- * a `value`/`defaultValue` is set). Wrap `Radio` children in it and drive the selection with
- * `value`/`defaultValue` + `onValueChange`. Renders a `<div>` with `role="radiogroup"`.
- *
- * @param density - Row spacing; `comfortable` (default) or `compact` (flush).
- */
-export function RadioGroup({ density = "comfortable", ...props }: RadioGroupProps) {
-  return <BaseRadioGroup className={radioGroupVariants({ density })} {...props} />;
-}
-
-export type RadioProps = Omit<
-  React.ComponentProps<typeof BaseRadio.Root>,
-  "className" | "render" | "style"
->;
-
-/**
- * A single radio option (Base UI `Radio.Root` + `Radio.Indicator`). The 16px ring and 8px inner dot
- * follow Figma node 2159-4535; the selected and disabled states come from the primitive. Use
- * `disabled` for a non-editable (read-only) option — see the module comment above for why
- * `readOnly` is avoided. Must be rendered inside a `RadioGroup`.
- *
- * @param value - The unique value this option contributes to its `RadioGroup`.
- */
-export function Radio(props: RadioProps) {
-  return (
-    <BaseRadio.Root className={radioVariants()} {...props}>
-      <BaseRadio.Indicator
-        // The inner dot: 8px (`size-2`) filled with the Root's `currentColor`, only
-        // present while selected (Base UI mounts the Indicator when checked).
-        className="size-2 rounded-full bg-current"
-      />
-    </BaseRadio.Root>
-  );
-}
+export { Radio, type RadioProps } from "./radio";
+// Re-export the group wrapper and atomic parts so the full radio surface is importable here.
+export {
+  Radio as RadioRing,
+  RadioGroup,
+  type RadioGroupDensity,
+  type RadioGroupProps,
+  RadioIndicator,
+  type RadioIndicatorProps,
+} from "../../ui/radio";
diff --git a/packages/propel/src/components/radio/radio.stories.tsx b/packages/propel/src/components/radio/radio.stories.tsx
index cbe6cda..1f066df 100644
--- a/packages/propel/src/components/radio/radio.stories.tsx
+++ b/packages/propel/src/components/radio/radio.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect } from "storybook/test";
 
+import { Field, RadioGroupField, RadioGroupFieldOption } from "../field/index";
+import { Fieldset } from "../fieldset/index";
 import { Radio, RadioGroup } from "./index";
 
 const meta = {
@@ -8,7 +10,7 @@ const meta = {
   component: RadioGroup,
   // RadioGroup is composed of Radios, so document Radio's props alongside it
   // (adds a Radio tab to the args table + records the relationship in the manifest).
-  subcomponents: { Radio },
+  subcomponents: { Radio, RadioGroupField, RadioGroupFieldOption },
   parameters: {
     design: {
       type: "figma",
@@ -22,22 +24,33 @@ type Story = StoryObj<typeof meta>;
 
 /** A `RadioGroup` with three options; the first is selected by default. */
 export const Default: Story = {
-  args: { defaultValue: "low" },
+  args: { density: "comfortable", defaultValue: "low" },
   render: (args) => (
-    <RadioGroup {...args}>
-      <label className="flex items-center gap-2 text-13 text-primary">
-        <Radio value="low" />
-        Low
-      </label>
-      <label className="flex items-center gap-2 text-13 text-primary">
-        <Radio value="medium" />
-        Medium
-      </label>
-      <label className="flex items-center gap-2 text-13 text-primary">
-        <Radio value="high" />
-        High
-      </label>
-    </RadioGroup>
+    <Field name="priority">
+      <Fieldset legend="Priority" legendMagnitude="md" render={<RadioGroup {...args} />}>
+        <RadioGroupFieldOption magnitude="md" value="low" label="Low" />
+        <RadioGroupFieldOption magnitude="md" value="medium" label="Medium" />
+        <RadioGroupFieldOption magnitude="md" value="high" label="High" />
+      </Fieldset>
+    </Field>
+  ),
+};
+
+/** The ready-to-use field composition owns the legend, options, and helper text. */
+export const FieldComposition: Story = {
+  args: { density: "comfortable", defaultValue: "low" },
+  render: (args) => (
+    <RadioGroupField
+      {...args}
+      name="priority"
+      label="Priority"
+      magnitude="md"
+      hint="Only one priority can be active."
+    >
+      <RadioGroupFieldOption value="low" label="Low" />
+      <RadioGroupFieldOption value="medium" label="Medium" />
+      <RadioGroupFieldOption value="high" label="High" />
+    </RadioGroupField>
   ),
 };
 
@@ -47,29 +60,30 @@ export const Default: Story = {
  * the component rather than overriding the gap from the outside.
  */
 export const Density: Story = {
+  args: { density: "comfortable" },
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-start gap-10">
-      <RadioGroup density="comfortable" defaultValue="low">
-        <label className="flex items-center gap-2 text-13 text-primary">
-          <Radio value="low" />
-          Comfortable
-        </label>
-        <label className="flex items-center gap-2 text-13 text-primary">
-          <Radio value="medium" />
-          8px gap
-        </label>
-      </RadioGroup>
-      <RadioGroup density="compact" defaultValue="low">
-        <label className="flex items-center gap-2 text-13 text-primary">
-          <Radio value="low" />
-          Compact
-        </label>
-        <label className="flex items-center gap-2 text-13 text-primary">
-          <Radio value="medium" />
-          Flush rows
-        </label>
-      </RadioGroup>
+      <Field name="comfortableDensity">
+        <Fieldset
+          legend="Comfortable density"
+          legendMagnitude="md"
+          render={<RadioGroup density="comfortable" defaultValue="low" />}
+        >
+          <RadioGroupFieldOption magnitude="md" value="low" label="Comfortable" />
+          <RadioGroupFieldOption magnitude="md" value="medium" label="8px gap" />
+        </Fieldset>
+      </Field>
+      <Field name="compactDensity">
+        <Fieldset
+          legend="Compact density"
+          legendMagnitude="md"
+          render={<RadioGroup density="compact" defaultValue="low" />}
+        >
+          <RadioGroupFieldOption magnitude="md" value="low" label="Compact" />
+          <RadioGroupFieldOption magnitude="md" value="medium" label="Flush rows" />
+        </Fieldset>
+      </Field>
     </div>
   ),
 };
@@ -84,19 +98,20 @@ export const Density: Story = {
  * ARIA-valid `aria-disabled` while keeping the control non-interactive.
  */
 export const States: Story = {
+  args: { density: "comfortable" },
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex items-center gap-6">
-      <RadioGroup defaultValue="b">
+      <RadioGroup density="comfortable" defaultValue="b">
         <Radio value="a" aria-label="Unselected" />
       </RadioGroup>
-      <RadioGroup defaultValue="b">
+      <RadioGroup density="comfortable" defaultValue="b">
         <Radio value="b" aria-label="Selected" />
       </RadioGroup>
-      <RadioGroup defaultValue="b" disabled>
+      <RadioGroup density="comfortable" defaultValue="b" disabled>
         <Radio value="a" aria-label="Disabled" />
       </RadioGroup>
-      <RadioGroup defaultValue="b" disabled>
+      <RadioGroup density="comfortable" defaultValue="b" disabled>
         <Radio value="b" aria-label="Read only" />
       </RadioGroup>
     </div>
@@ -111,8 +126,9 @@ export const States: Story = {
  */
 export const SelectionBehavior: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
+  args: { density: "comfortable" },
   render: () => (
-    <RadioGroup>
+    <RadioGroup density="comfortable">
       <Radio value="low" aria-label="Low" />
       <Radio value="medium" aria-label="Medium" />
       <Radio value="high" aria-label="High" />
@@ -150,8 +166,9 @@ export const SelectionBehavior: Story = {
  */
 export const KeyboardNavigation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
+  args: { density: "comfortable" },
   render: () => (
-    <RadioGroup defaultValue="low">
+    <RadioGroup density="comfortable" defaultValue="low">
       <Radio value="low" aria-label="Low" />
       <Radio value="medium" aria-label="Medium" />
       <Radio value="high" aria-label="High" />
diff --git a/packages/propel/src/components/radio/radio.tsx b/packages/propel/src/components/radio/radio.tsx
new file mode 100644
index 0000000..89d37c2
--- /dev/null
+++ b/packages/propel/src/components/radio/radio.tsx
@@ -0,0 +1,23 @@
+import {
+  Radio as RadioRoot,
+  RadioIndicator,
+  type RadioProps as RadioRootProps,
+} from "../../ui/radio";
+
+export type RadioProps = RadioRootProps;
+
+/**
+ * The ready-made radio option: composes the atomic `Radio` ring with its `RadioIndicator` dot. The
+ * 16px ring and 8px inner dot follow Figma node 2159-4535; the selected and disabled states come
+ * from the primitive. Use `disabled` for a non-editable (read-only) option. Must be rendered inside
+ * a `RadioGroup`.
+ *
+ * @param value - The unique value this option contributes to its `RadioGroup`.
+ */
+export function Radio(props: RadioProps) {
+  return (
+    <RadioRoot {...props}>
+      <RadioIndicator />
+    </RadioRoot>
+  );
+}
diff --git a/packages/propel/src/components/scroll-area/index.tsx b/packages/propel/src/components/scroll-area/index.tsx
index 90048ed..2730fd8 100644
--- a/packages/propel/src/components/scroll-area/index.tsx
+++ b/packages/propel/src/components/scroll-area/index.tsx
@@ -1,62 +1 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import * as React from "react";
-
-import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
-
-// propel's scroll container, built on Base UI ScrollArea. Unlike a re-skinned native
-// scrollbar it paints a real DOM thumb, so it renders consistently across browsers
-// (including Firefox and touch), insets the thumb from the edge, and reveals only on
-// interaction. The thumb uses propel's `--scrollbar-thumb*` tokens: shown while the
-// area is hovered or scrolling, darker on thumb hover, darkest while dragging, over a
-// transparent track. It fills its parent, so constrain the parent's height (or width)
-// to make the content scroll. The scrollbar + thumb styling is shared with components
-// that compose Base UI ScrollArea directly (e.g. Tabs) via `internal/scrollbar`.
-
-/** Which axes scroll. Drives which scrollbars (and the corner) are rendered. */
-export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
-
-export type ScrollAreaProps = {
-  /**
-   * Which axes scroll (required, no silent default like the other essential axes).
-   * `vertical`/`horizontal` render a single scrollbar; `both` renders both plus the corner. Render
-   * only the axes the content can actually overflow so an unused scrollbar never reserves space or
-   * reveals.
-   */
-  orientation: ScrollAreaOrientation;
-  /** The scrollable content. */
-  children: React.ReactNode;
-};
-
-/**
- * A scroll container with propel's overlay scrollbar, built on Base UI `ScrollArea`. Use it to wrap
- * any overflowing content (menus, panels, long lists). Place it as a child of a height-constrained
- * flex column: it grows to fill the column and its viewport scrolls when the content overflows. The
- * scrollbar shows only on hover/scroll and uses the propel scrollbar tokens.
- */
-export function ScrollArea({ orientation, children }: ScrollAreaProps) {
-  const showVertical = orientation !== "horizontal";
-  const showHorizontal = orientation !== "vertical";
-  return (
-    // Sizing is a flex chain, not a percentage-height chain (which does not resolve
-    // through flex). The Root is a flex item that also lays its viewport out as a flex
-    // column; the Viewport is a `flex-1` child whose `overflow: scroll` (set by Base UI)
-    // gives it an automatic min-height of 0, so it bounds to the column and scrolls. The
-    // scrollbars are positioned absolutely by Base UI, so they never take flex space.
-    <BaseScrollArea.Root className="relative flex min-h-0 flex-1 flex-col">
-      <BaseScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none">
-        {children}
-      </BaseScrollArea.Viewport>
-      {showVertical ? (
-        <BaseScrollArea.Scrollbar orientation="vertical" className={scrollbarClass}>
-          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
-        </BaseScrollArea.Scrollbar>
-      ) : null}
-      {showHorizontal ? (
-        <BaseScrollArea.Scrollbar orientation="horizontal" className={scrollbarClass}>
-          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
-        </BaseScrollArea.Scrollbar>
-      ) : null}
-      {orientation === "both" ? <BaseScrollArea.Corner /> : null}
-    </BaseScrollArea.Root>
-  );
-}
+export { ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps } from "./scroll-area";
diff --git a/packages/propel/src/components/scroll-area/scroll-area.stories.tsx b/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
index 93d32fb..abb7ed8 100644
--- a/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
+++ b/packages/propel/src/components/scroll-area/scroll-area.stories.tsx
@@ -67,7 +67,7 @@ export const BothAxes: Story = {
   args: {
     orientation: "both",
     children: (
-      <div className="flex w-[640px] flex-col gap-2 p-3">
+      <div className="flex w-160 flex-col gap-2 p-3">
         {Array.from({ length: 30 }, (_, i) => (
           <p key={i} className="text-13 whitespace-nowrap text-secondary">
             Line {i + 1} of wide content that overflows horizontally as well as down.
diff --git a/packages/propel/src/components/scroll-area/scroll-area.tsx b/packages/propel/src/components/scroll-area/scroll-area.tsx
new file mode 100644
index 0000000..0a09c47
--- /dev/null
+++ b/packages/propel/src/components/scroll-area/scroll-area.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+
+import {
+  ScrollArea as ScrollAreaRoot,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "../../ui/scroll-area";
+
+// propel's scroll container, built on Base UI ScrollArea. Unlike a re-skinned native
+// scrollbar it paints a real DOM thumb, so it renders consistently across browsers
+// (including Firefox and touch), insets the thumb from the edge, and reveals only on
+// interaction. The thumb uses propel's `--scrollbar-thumb*` tokens: shown while the
+// area is hovered or scrolling, darker on thumb hover, darkest while dragging, over a
+// transparent track. It fills its parent, so constrain the parent's height (or width)
+// to make the content scroll. The scrollbar + thumb styling is shared with components
+// that compose Base UI ScrollArea directly (e.g. Tabs) via `internal/scrollbar`.
+
+/** Which axes scroll. Drives which scrollbars (and the corner) are rendered. */
+export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
+
+export type ScrollAreaProps = {
+  /**
+   * Which axes scroll (required, no silent default like the other essential axes).
+   * `vertical`/`horizontal` render a single scrollbar; `both` renders both plus the corner. Render
+   * only the axes the content can actually overflow so an unused scrollbar never reserves space or
+   * reveals.
+   */
+  orientation: ScrollAreaOrientation;
+  /** The scrollable content. */
+  children: React.ReactNode;
+};
+
+/**
+ * A scroll container with propel's overlay scrollbar, built on Base UI `ScrollArea`. Use it to wrap
+ * any overflowing content (menus, panels, long lists). Place it as a child of a height-constrained
+ * flex column: it grows to fill the column and its viewport scrolls when the content overflows. The
+ * scrollbar shows only on hover/scroll and uses the propel scrollbar tokens.
+ */
+export function ScrollArea({ orientation, children }: ScrollAreaProps) {
+  const showVertical = orientation !== "horizontal";
+  const showHorizontal = orientation !== "vertical";
+  return (
+    // Sizing is a flex chain, not a percentage-height chain (which does not resolve
+    // through flex). The Root is a flex item that also lays its viewport out as a flex
+    // column; the Viewport is a `flex-1` child whose `overflow: scroll` (set by Base UI)
+    // gives it an automatic min-height of 0, so it bounds to the column and scrolls. The
+    // scrollbars are positioned absolutely by Base UI, so they never take flex space.
+    <ScrollAreaRoot>
+      <ScrollAreaViewport>{children}</ScrollAreaViewport>
+      {showVertical ? (
+        <ScrollAreaScrollbar orientation="vertical">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      ) : null}
+      {showHorizontal ? (
+        <ScrollAreaScrollbar orientation="horizontal">
+          <ScrollAreaThumb />
+        </ScrollAreaScrollbar>
+      ) : null}
+      {orientation === "both" ? <ScrollAreaCorner /> : null}
+    </ScrollAreaRoot>
+  );
+}
diff --git a/packages/propel/src/components/search/index.tsx b/packages/propel/src/components/search/index.tsx
index 60ee0d4..4300d8a 100644
--- a/packages/propel/src/components/search/index.tsx
+++ b/packages/propel/src/components/search/index.tsx
@@ -1,250 +1,4 @@
-import { Input as BaseInput } from "@base-ui/react/input";
-import { cx } from "class-variance-authority";
-import { Search as SearchIcon, X } from "lucide-react";
-import * as React from "react";
-
-import { useControllableState } from "../../hooks/use-controllable-state/index";
-
-// The Figma "Search" component (node 1393-45336) is a single-line search field: a
-// 32px-tall, 8px-radius box with a leading magnifier, the value, and a trailing clear
-// (✕) button that appears once there's text. Built on Base UI `Input` (the text-input
-// primitive). States are element-driven — hover darkens the fill, `:focus-within` swaps
-// the border to `accent-strong` with a 2px accent ring and darkens the magnifier — not
-// props, so the only inputs are the value + placeholder.
-
-// The box chrome. `group/search` lets the magnifier react to `:focus-within`. The 2px
-// accent ring is the Figma "active" treatment; hover darkens the fill while resting.
-// The ring opacity is 25% per the Search frame (rgba(0,99,153,0.25)) — Input uses 20%,
-// so this difference is intentional, not drift.
-const searchBoxClass = cx(
-  "group/search inline-flex h-8 w-full items-center gap-2 rounded-lg border-sm border-subtle-1 bg-layer-2 px-2",
-  "transition-colors hover:bg-layer-2-hover",
-  "focus-within:border-accent-strong focus-within:bg-layer-2 focus-within:ring-2 focus-within:ring-accent-strong/25",
-  // Disabled: muted, no hover/ring (the Figma frame has no disabled state, but the
-  // control is a real input and must degrade sensibly).
-  "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-layer-2 has-[:disabled]:hover:bg-layer-2",
-);
-
-export type SearchProps = Omit<
-  React.ComponentProps<typeof BaseInput>,
-  "className" | "render" | "style" | "type" | "value" | "defaultValue" | "onValueChange"
-> & {
-  /** Current text. Controlled; pair with `onValueChange`. */
-  value?: string;
-  /** Initial text. Uncontrolled. */
-  defaultValue?: string;
-  /** Called with the new text on each change (and on clear, with `""`). */
-  onValueChange?: (value: string) => void;
-  /** Placeholder text. @default "Search" */
-  placeholder?: string;
-  /** Accessible name for the field. @default "Search" */
-  "aria-label"?: string;
-};
-
-/**
- * A search field — a leading magnifier, a text input, and a clear (✕) button that appears once
- * there's text. Built on Base UI `Input`. Drive it with `value` + `onValueChange` (controlled) or
- * `defaultValue` (uncontrolled). It fills its container's width; wrap it to constrain.
- */
-export function Search({
-  value,
-  defaultValue,
-  onValueChange,
-  placeholder = "Search",
-  disabled,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  ...props
-}: SearchProps) {
-  const [currentValue, commit] = useControllableState<string>({
-    value,
-    defaultValue: defaultValue ?? "",
-    onChange: onValueChange,
-  });
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  const hasValue = currentValue != null && currentValue !== "";
-  // Only default to "Search" when the consumer gives the field no name of its own. An
-  // `aria-label` would override an `aria-labelledby`, so skip it when one is provided.
-  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledBy ? undefined : "Search");
-
-  return (
-    // A `<label>` forwards clicks anywhere in the box (magnifier, padding) to the input;
-    // the trailing clear button keeps its own onClick. It carries no text, so it adds
-    // association without an accessible name — the input's aria-label still names it.
-    <label className={searchBoxClass}>
-      <SearchIcon
-        aria-hidden
-        className="size-4 shrink-0 text-icon-placeholder transition-colors group-focus-within/search:text-icon-secondary"
-      />
-      <BaseInput
-        ref={inputRef}
-        // `search` gives the field its searchbox role; the native WebKit clear glyph is
-        // hidden in favor of propel's clear button.
-        type="search"
-        value={currentValue}
-        onValueChange={(next) => commit(next)}
-        placeholder={placeholder}
-        disabled={disabled}
-        aria-label={resolvedAriaLabel}
-        aria-labelledby={ariaLabelledBy}
-        className={cx(
-          "min-w-0 flex-1 bg-transparent text-14 text-primary outline-none",
-          "placeholder:text-placeholder disabled:cursor-not-allowed disabled:text-disabled",
-          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
-        )}
-        {...props}
-      />
-      {hasValue && !disabled ? (
-        <button
-          type="button"
-          aria-label="Clear search"
-          onClick={() => {
-            commit("");
-            inputRef.current?.focus();
-          }}
-          className={cx(
-            "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-icon-secondary outline-none",
-            "transition-colors hover:bg-layer-transparent-hover",
-            "focus-visible:ring-2 focus-visible:ring-accent-strong",
-          )}
-        >
-          <X aria-hidden className="size-3.5" />
-        </button>
-      ) : null}
-    </label>
-  );
-}
-
-// ExpandableSearch (Figma node 2509:6515) is a search field that collapses to a 28px
-// magnifier to save space and expands to a 204px input on demand — the toolbar/header
-// pattern where search hides until needed. It expands while the field is focused (and
-// whenever it holds a value, so a filled field never collapses out from under its text)
-// and collapses again when blurred empty. Expanded it reads as a search box: an accent
-// border + 1px accent ring on focus, a subtle border at rest with a value, and a clear
-// (✕) button once there's text.
-//
-// There is no separate toggle control: the `<input>` itself is the single focusable
-// element, so keyboard and screen-reader users always land on a real `searchbox` (the
-// magnifier is a decorative `aria-hidden` glyph) and pointer users focus it by clicking
-// anywhere in the box. Focus drives the open state, so the collapse/expand never adds a
-// dangling `aria-expanded` or a control that swaps roles mid-interaction.
-//
-// The open/close is animated, not an instant swap: the box stays mounted and transitions
-// its `width` between the 28px icon and the 204px field. It is pinned to the inline-end
-// of a fixed 28px wrapper and grows toward the inline-start, so it opens leftward (LTR) /
-// rightward (RTL) into the space beside it without reflowing its neighbors. `overflow-
-// hidden` clips the field while it grows, so the leading magnifier slides out with the
-// growing edge. Width, border, and fill transition together (and not at all under
-// `prefers-reduced-motion`).
-
-// Fixed collapsed footprint: the animated box is absolutely positioned within it, so
-// expanding overflows this 28px box instead of pushing siblings.
-const expandableWrapperClass = "relative inline-flex size-7 shrink-0";
-
-const expandableBoxClass = cx(
-  "group/search absolute end-0 top-0 inline-flex h-7 w-7 items-center gap-2 overflow-hidden rounded-md px-1.5",
-  "border-sm border-transparent bg-layer-transparent",
-  "transition-[width,border-color,background-color] duration-200 ease-out motion-reduce:transition-none",
-  // Collapsed it reads as an icon button (hover fill). It never rests focused — focusing
-  // the field expands it — so the focus ring lives on the expanded chrome below.
-  "not-data-expanded:hover:bg-layer-transparent-hover",
-  // Expanded: widen to the full field and show the search-box chrome (subtle border +
-  // layer-2 fill at rest, accent border + 1px accent ring on focus).
-  "data-expanded:w-[204px] data-expanded:border-subtle-1 data-expanded:bg-layer-2",
-  "data-expanded:focus-within:border-accent-strong data-expanded:focus-within:ring-1 data-expanded:focus-within:ring-accent-strong/35",
-);
-
-export type ExpandableSearchProps = SearchProps;
-
-/**
- * A search field that collapses to a magnifier icon and expands into a full `Search`-style input
- * while focused — the toolbar/header pattern where search hides until needed. Built on Base UI
- * `Input`. The input itself is the only control (no separate toggle button), so it stays a real
- * `searchbox` for keyboard and screen-reader users; pointer users focus it by clicking the
- * magnifier. It collapses when blurred empty (or on `Escape`) and stays expanded while it has a
- * value. Drive the value with `value` + `onValueChange` (controlled) or `defaultValue`
- * (uncontrolled).
- */
-export function ExpandableSearch({
-  value,
-  defaultValue,
-  onValueChange,
-  placeholder = "Search",
-  disabled,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  ...props
-}: ExpandableSearchProps) {
-  const [currentValue, commit] = useControllableState<string>({
-    value,
-    defaultValue: defaultValue ?? "",
-    onChange: onValueChange,
-  });
-  const hasValue = currentValue != null && currentValue !== "";
-  // Only default to "Search" when the consumer gives the field no name of its own. An
-  // `aria-label` would override an `aria-labelledby`, so skip it when one is provided.
-  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledBy ? undefined : "Search");
-  // Focus is the open trigger; the field also stays open whenever it has a value, so a
-  // filled field never collapses out from under its text.
-  const [focused, setFocused] = React.useState(false);
-  const showExpanded = focused || hasValue;
-  const inputRef = React.useRef<HTMLInputElement>(null);
-
-  return (
-    <div className={expandableWrapperClass}>
-      {/* The box animates its width between the icon and the field. A `<label>` forwards
-          clicks anywhere in the box (magnifier, padding) to the input; the trailing clear
-          button keeps its own onClick. It carries no text, so it adds association without
-          an accessible name — the input's aria-label still names it. */}
-      <label className={expandableBoxClass} data-expanded={showExpanded ? "" : undefined}>
-        <SearchIcon aria-hidden className="size-4 shrink-0 text-icon-secondary" />
-        <BaseInput
-          ref={inputRef}
-          type="search"
-          value={currentValue}
-          onValueChange={(next) => commit(next)}
-          // Focus opens the field; blurring it empty collapses it back to the icon.
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          // Escape clears the field, then (when already empty) blurs it shut — an explicit
-          // keyboard close to mirror the pointer affordance.
-          onKeyDown={(event) => {
-            if (event.key === "Escape") {
-              event.preventDefault();
-              if (hasValue) commit("");
-              else inputRef.current?.blur();
-            }
-          }}
-          placeholder={placeholder}
-          disabled={disabled}
-          aria-label={resolvedAriaLabel}
-          aria-labelledby={ariaLabelledBy}
-          className={cx(
-            "min-w-0 flex-1 bg-transparent text-14 text-primary outline-none",
-            "placeholder:text-placeholder disabled:cursor-not-allowed disabled:text-disabled",
-            "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
-          )}
-          {...props}
-        />
-        {hasValue && !disabled ? (
-          <button
-            type="button"
-            aria-label="Clear search"
-            onClick={() => {
-              commit("");
-              inputRef.current?.focus();
-            }}
-            className={cx(
-              "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-icon-secondary outline-none",
-              "transition-colors hover:bg-layer-transparent-hover",
-              "focus-visible:ring-2 focus-visible:ring-accent-strong",
-            )}
-          >
-            <X aria-hidden className="size-3.5" />
-          </button>
-        ) : null}
-      </label>
-    </div>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitives. `Search` and `ExpandableSearch` are already
+// complete single components, so there is nothing to compose. Drop down to
+// `@plane/propel/ui/search` only when you need the lower-level parts.
+export * from "../../ui/search";
diff --git a/packages/propel/src/components/search/search.stories.tsx b/packages/propel/src/components/search/search.stories.tsx
index 720008f..5a644f4 100644
--- a/packages/propel/src/components/search/search.stories.tsx
+++ b/packages/propel/src/components/search/search.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import * as React from "react";
-import { expect, userEvent, within } from "storybook/test";
+import { expect, userEvent } from "storybook/test";
 
 import { ExpandableSearch, Search } from "./index";
 
+// Components-tier story: the ready-made `Search` / `ExpandableSearch` single components.
 const meta = {
   title: "Components/Search",
   component: Search,
@@ -41,98 +41,23 @@ export const Disabled: Story = {
   args: { defaultValue: "Product", disabled: true },
 };
 
-/** Controlled: drive the value with `value` + `onValueChange`. */
-export const Controlled: Story = {
-  parameters: { controls: { disable: true } },
-  render: function ControlledStory() {
-    const [value, setValue] = React.useState("");
-    return (
-      <div className="flex flex-col gap-2">
-        <Search value={value} onValueChange={setValue} />
-        <p className="text-12 text-tertiary">Query: {value || "(empty)"}</p>
-      </div>
-    );
-  },
-};
-
-/**
- * `ExpandableSearch` collapses to a magnifier icon and expands into a full search input while
- * focused — the toolbar/header pattern. The input itself is the only control, so it stays a real
- * searchbox; it collapses again when blurred empty (or on `Escape`).
- */
+/** `ExpandableSearch` collapses to a magnifier and expands into a full field while focused. */
 export const Expandable: Story = {
   parameters: { controls: { disable: true } },
   render: () => <ExpandableSearch />,
 };
 
-/** `ExpandableSearch` with an initial value renders expanded (with the clear button). */
-export const ExpandableFilled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <ExpandableSearch defaultValue="Roadmap" />,
-};
-
-/**
- * `ExpandableSearch` is a single searchbox that renders collapsed and expands on focus — there is
- * no separate toggle button. Focusing it (clicking the magnifier focuses the field) expands it;
- * blurring it empty or pressing `Escape` collapses it, and a value keeps it open. Tagged out of the
- * sidebar/docs/manifest but still run under the default `test` tag.
- */
-export const ExpandAndCollapse: Story = {
-  tags: ["!dev", "!autodocs", "!manifest"],
-  render: () => (
-    <div className="flex flex-col gap-2">
-      <ExpandableSearch />
-      {/* A focusable sibling to blur onto, so the collapse-on-blur path is testable. */}
-      <button type="button">elsewhere</button>
-    </div>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    // The field is always a real searchbox (no separate toggle); it just renders collapsed
-    // until focused. `data-expanded` on its box reflects the open state.
-    const input = canvas.getByRole("searchbox", { name: "Search" });
-    const box = input.closest("label");
-    await expect(box).not.toHaveAttribute("data-expanded");
-
-    // Focus opens it (clicking the box focuses the input); blurring it empty collapses it.
-    await userEvent.click(input);
-    await expect(input).toHaveFocus();
-    await expect(box).toHaveAttribute("data-expanded");
-    await userEvent.click(canvas.getByRole("button", { name: "elsewhere" }));
-    await expect(box).not.toHaveAttribute("data-expanded");
-
-    // A value keeps it open; Escape clears the field first, then (empty) collapses it.
-    await userEvent.click(input);
-    await userEvent.type(input, "Roadmap");
-    await userEvent.keyboard("{Escape}");
-    await expect(input).toHaveValue("");
-    await expect(box).toHaveAttribute("data-expanded");
-    await userEvent.keyboard("{Escape}");
-    await expect(box).not.toHaveAttribute("data-expanded");
-
-    // The field is never removed from the document — it just collapses.
-    await expect(canvas.getByRole("searchbox", { name: "Search" })).toBeInTheDocument();
-  },
-};
-
-/**
- * Typing reveals the clear button; clicking it empties the field and returns focus to the input.
- * Tagged out of the sidebar/docs/manifest but still run under the default `test` tag.
- */
+/** Typing reveals the clear button; clicking it empties the field and refocuses the input. */
 export const TypeAndClear: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas }) => {
     const input = canvas.getByRole("searchbox", { name: "Search" });
 
-    // No clear button while empty.
     await expect(canvas.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
 
     await userEvent.type(input, "Roadmap");
     await expect(input).toHaveValue("Roadmap");
 
-    // The clear button now appears; clicking it empties the field and refocuses it.
     const clear = canvas.getByRole("button", { name: "Clear search" });
     await userEvent.click(clear);
     await expect(input).toHaveValue("");
diff --git a/packages/propel/src/components/select/index.tsx b/packages/propel/src/components/select/index.tsx
new file mode 100644
index 0000000..7d62e06
--- /dev/null
+++ b/packages/propel/src/components/select/index.tsx
@@ -0,0 +1,22 @@
+export { SelectContent, type SelectContentProps } from "./select-content";
+// Re-export the atomic select parts so a full select can be assembled from one entry.
+export {
+  Select,
+  type SelectProps,
+  SelectIcon,
+  type SelectIconProps,
+  SelectItem,
+  type SelectItemProps,
+  SelectItemIndicator,
+  type SelectItemIndicatorProps,
+  SelectItemText,
+  SelectLabel,
+  type SelectLabelProps,
+  SelectList,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectTrigger,
+  type SelectTriggerProps,
+  SelectValue,
+  type SelectValueProps,
+} from "../../ui/select";
diff --git a/packages/propel/src/components/select/select-content.tsx b/packages/propel/src/components/select/select-content.tsx
new file mode 100644
index 0000000..726fae9
--- /dev/null
+++ b/packages/propel/src/components/select/select-content.tsx
@@ -0,0 +1,29 @@
+import { SelectPopup, type SelectPopupProps } from "../../ui/select/select-popup";
+import { SelectPortal } from "../../ui/select/select-portal";
+import { SelectPositioner, type SelectPositionerProps } from "../../ui/select/select-positioner";
+
+export type SelectContentProps = SelectPopupProps & {
+  /** Which side of the trigger the list opens toward. @default "bottom" */
+  side?: SelectPositionerProps["side"];
+  /** Distance in px between the trigger and the list. @default 4 */
+  sideOffset?: SelectPositionerProps["sideOffset"];
+  /** Alignment of the list relative to the trigger along `side`. @default "start" */
+  align?: SelectPositionerProps["align"];
+};
+
+/** The select list surface: portal + positioner + popup with Propel overlay styling. */
+export function SelectContent({
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "start",
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectPortal>
+      <SelectPositioner side={side} sideOffset={sideOffset} align={align}>
+        <SelectPopup {...props}>{children}</SelectPopup>
+      </SelectPositioner>
+    </SelectPortal>
+  );
+}
diff --git a/packages/propel/src/components/select/select.stories.tsx b/packages/propel/src/components/select/select.stories.tsx
new file mode 100644
index 0000000..90805f0
--- /dev/null
+++ b/packages/propel/src/components/select/select.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldError } from "../field/index";
+import {
+  Select,
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectList,
+  SelectTrigger,
+  SelectValue,
+} from "./index";
+
+const SERVER_TYPES = [
+  { label: "General purpose", value: "general" },
+  { label: "Compute optimized", value: "compute" },
+  { label: "Memory optimized", value: "memory" },
+];
+
+// Components-tier story: the ready-made `SelectContent` collapses the
+// portal/positioner/popup boilerplate into one element. The UI-tier `Select`
+// story assembles those raw parts by hand.
+const meta = {
+  title: "Components/Select",
+  component: Select,
+  subcomponents: {
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+    SelectIcon,
+    SelectContent,
+    SelectList,
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Trigger-based select using the ready-made `SelectContent` surface inside a `Field`. */
+export const Default: Story = {
+  args: { items: SERVER_TYPES, defaultValue: "general", required: true },
+  render: (args) => (
+    <Field name="serverType">
+      <Select {...args}>
+        <div className="flex w-fit flex-col gap-1.5">
+          <SelectLabel>Server type</SelectLabel>
+          <SelectTrigger>
+            <SelectValue />
+            <SelectIcon />
+          </SelectTrigger>
+        </div>
+        <SelectContent>
+          <SelectList>
+            {SERVER_TYPES.map(({ label, value }) => (
+              <SelectItem key={value} value={value}>
+                <SelectItemIndicator />
+                <SelectItemText>{label}</SelectItemText>
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectContent>
+        <FieldError magnitude="md" />
+      </Select>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox", { name: "Server type" }));
+    const popup = within(document.body);
+    await expect(
+      await popup.findByRole("option", { name: "Compute optimized" }),
+    ).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/separator/index.tsx b/packages/propel/src/components/separator/index.tsx
new file mode 100644
index 0000000..cf0033f
--- /dev/null
+++ b/packages/propel/src/components/separator/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/separator` only
+// when you need the lower-level parts.
+export * from "../../ui/separator";
diff --git a/packages/propel/src/components/separator/separator.stories.tsx b/packages/propel/src/components/separator/separator.stories.tsx
new file mode 100644
index 0000000..15f7387
--- /dev/null
+++ b/packages/propel/src/components/separator/separator.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Separator } from "./index";
+
+// Separator is static — a thin rule with no interaction-state styling — so it gets no
+// pseudo-states story; its only axis is `orientation`, driven by Base UI.
+const meta = {
+  title: "Components/Separator",
+  component: Separator,
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The default horizontal rule, dividing stacked content. */
+export const Horizontal: Story = {
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-3">
+      <span className="text-13 text-secondary">Above</span>
+      <Separator {...args} />
+      <span className="text-13 text-secondary">Below</span>
+    </div>
+  ),
+};
+
+/** `orientation="vertical"` divides inline content; Base UI sets `aria-orientation`. */
+export const Vertical: Story = {
+  render: (args) => (
+    <div className="flex h-6 items-center gap-3">
+      <span className="text-13 text-secondary">Left</span>
+      <Separator {...args} orientation="vertical" />
+      <span className="text-13 text-secondary">Right</span>
+    </div>
+  ),
+};
+
+/**
+ * Behavior: the separator exposes `role="separator"` and reflects its orientation via
+ * `aria-orientation`. Tagged out of the sidebar/docs/manifest but still runs under `test`.
+ */
+export const HasSeparatorRole: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Separator />
+      <Separator orientation="vertical" />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const [horizontal, vertical] = canvas.getAllByRole("separator");
+    await expect(horizontal).toHaveAttribute("aria-orientation", "horizontal");
+    await expect(vertical).toHaveAttribute("aria-orientation", "vertical");
+  },
+};
diff --git a/packages/propel/src/components/slider/index.tsx b/packages/propel/src/components/slider/index.tsx
new file mode 100644
index 0000000..afd7c98
--- /dev/null
+++ b/packages/propel/src/components/slider/index.tsx
@@ -0,0 +1,15 @@
+export { Slider, type SliderProps } from "./slider";
+export {
+  SliderControl,
+  type SliderControlProps,
+  SliderIndicator,
+  type SliderIndicatorProps,
+  SliderLabel,
+  type SliderLabelProps,
+  SliderThumb,
+  type SliderThumbProps,
+  SliderTrack,
+  type SliderTrackProps,
+  SliderValue,
+  type SliderValueProps,
+} from "../../ui/slider";
diff --git a/packages/propel/src/components/slider/slider.stories.tsx b/packages/propel/src/components/slider/slider.stories.tsx
new file mode 100644
index 0000000..4d20ba8
--- /dev/null
+++ b/packages/propel/src/components/slider/slider.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Slider } from "./index";
+
+// Components-tier story: the ready-made single-thumb `Slider`. It composes the
+// `ui/slider` parts (label + value + control + track + indicator + thumb) for you —
+// pass `label` (or `aria-label`), `min`/`max`/`step`, and an optional `format`. The
+// UI-tier story shows how to assemble the parts (e.g. a two-thumb range).
+const meta = {
+  title: "Components/Slider",
+  component: Slider,
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A labelled single-thumb slider. */
+export const Default: Story = {
+  args: { label: "Volume", defaultValue: 40, min: 0, max: 100, step: 1 },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Volume" })).toBeInTheDocument();
+  },
+};
+
+/** `format` (Intl options) controls the readout — here a percentage. */
+export const Percentage: Story = {
+  args: {
+    label: "Opacity",
+    defaultValue: 0.6,
+    min: 0,
+    max: 1,
+    step: 0.01,
+    format: { style: "percent", maximumFractionDigits: 0 },
+  },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Opacity" })).toBeInTheDocument();
+  },
+};
+
+/** Without a visible `label`, name the thumb with `aria-label`. */
+export const WithoutLabel: Story = {
+  parameters: { controls: { disable: true } },
+  args: { "aria-label": "Brightness", defaultValue: 50, min: 0, max: 100, step: 1 },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Brightness" })).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/components/slider/slider.tsx b/packages/propel/src/components/slider/slider.tsx
new file mode 100644
index 0000000..46b6eef
--- /dev/null
+++ b/packages/propel/src/components/slider/slider.tsx
@@ -0,0 +1,47 @@
+import type * as React from "react";
+
+import {
+  Slider as SliderRoot,
+  SliderControl,
+  SliderIndicator,
+  SliderLabel,
+  type SliderProps as SliderRootProps,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from "../../ui/slider";
+
+export type SliderProps = SliderRootProps<number> & {
+  /**
+   * Optional visible label rendered above the track (e.g. "Volume"). When omitted, provide an
+   * `aria-label` for the thumb so the control is still named for assistive tech.
+   */
+  label?: React.ReactNode;
+  /** Accessible name for the thumb. Required when there is no visible `label`. */
+  "aria-label"?: string;
+};
+
+/**
+ * The ready-made slider: a single-thumb control for picking a number within a range. Drive it with
+ * `value`/`defaultValue` + `onValueChange`, and bound it with `min`/`max`/`step`. Pass `label`
+ * (visible) or `aria-label` to name the thumb, and `format` (an `Intl.NumberFormatOptions`) to
+ * format the readout.
+ *
+ * Composed from the `ui/slider` parts (`Slider` root + `SliderLabel` + `SliderValue` +
+ * `SliderControl` + `SliderTrack` + `SliderIndicator` + `SliderThumb`), which are built on Base UI
+ * `Slider`. For multiple thumbs or fully custom layout, compose the `ui/slider` parts directly.
+ */
+export function Slider({ label, "aria-label": ariaLabel, ...props }: SliderProps) {
+  return (
+    <SliderRoot {...props}>
+      {label == null ? null : <SliderLabel>{label}</SliderLabel>}
+      <SliderValue />
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb aria-label={ariaLabel} />
+        </SliderTrack>
+      </SliderControl>
+    </SliderRoot>
+  );
+}
diff --git a/packages/propel/src/components/switch/index.tsx b/packages/propel/src/components/switch/index.tsx
index 11fbbce..346990f 100644
--- a/packages/propel/src/components/switch/index.tsx
+++ b/packages/propel/src/components/switch/index.tsx
@@ -1,69 +1,3 @@
-import { Switch as BaseSwitch } from "@base-ui/react/switch";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-// Magnitudes follow the Figma "Toggle" Size scale (track w×h, px):
-//   L 30×18 → lg · M 27×16 → md · S 23×14 → sm.
-// The thumb is the track height minus a 1px gap top/bottom; on/off it travels
-// from the 1px gutter on one side to the 1px gutter on the other.
-const trackVariants = cva(
-  cx(
-    "relative inline-flex shrink-0 items-center rounded-full p-px transition-colors",
-    // Off track = Figma icon/placeholder; on track = accent/primary.
-    "bg-icon-placeholder data-checked:bg-accent-primary",
-    // Unchangeable (disabled or readonly) dims the whole control to 40%,
-    // matching Figma's "Unchangeable" states. Disabled also blocks the cursor.
-    "data-disabled:cursor-not-allowed data-disabled:opacity-40 data-readonly:opacity-40",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-strong",
-  ),
-  {
-    variants: {
-      magnitude: {
-        lg: "h-[18px] w-[30px]",
-        md: "h-4 w-[27px]",
-        sm: "h-[14px] w-[23px]",
-      },
-    },
-  },
-);
-
-// Thumb diameter per magnitude (track height − 2px gap) and the travel distance
-// when checked (track width − thumb − 2px of gutters).
-// The thumb stays white in every theme and in both on/off states. `surface-1`
-// is white in light mode but flips dark in dark mode, so the thumb pins to the
-// on-color token (the white-on-tone color) regardless of checked state.
-const thumbVariants = cva("rounded-full bg-on-color shadow-raised-100 transition-transform", {
-  variants: {
-    magnitude: {
-      lg: "size-4 data-checked:translate-x-[12px]",
-      md: "size-3.5 data-checked:translate-x-[11px]",
-      sm: "size-3 data-checked:translate-x-[9px]",
-    },
-  },
-});
-
-export type SwitchMagnitude = NonNullable<VariantProps<typeof trackVariants>["magnitude"]>;
-
-export type SwitchProps = Omit<
-  React.ComponentProps<typeof BaseSwitch.Root>,
-  "className" | "render" | "style"
-> & {
-  /** Track + thumb size, from the Figma "Toggle" Size scale: `lg` 30×18, `md` 27×16, `sm` 23×14. */
-  magnitude: SwitchMagnitude;
-};
-
-/**
- * A switch toggles a single setting on or off. Built on Base UI's `Switch` (so it carries
- * `role="switch"` and full keyboard/form support). Maps to Figma's "Toggle" component.
- *
- * On/off, `disabled`, and `readOnly` are control state from the primitive, not variants — pass them
- * as props (`checked`/`defaultChecked`, `disabled`, `readOnly`). Only the size axis (`magnitude`)
- * is a visual variant.
- */
-export function Switch({ magnitude, ...props }: SwitchProps) {
-  return (
-    <BaseSwitch.Root className={trackVariants({ magnitude })} {...props}>
-      <BaseSwitch.Thumb className={thumbVariants({ magnitude })} />
-    </BaseSwitch.Root>
-  );
-}
+export { Switch, type SwitchMagnitude, type SwitchProps } from "./switch";
+// Re-export the atomic parts so the full switch surface is importable from this convenience.
+export { Switch as SwitchTrack, SwitchThumb, type SwitchThumbProps } from "../../ui/switch";
diff --git a/packages/propel/src/components/switch/switch.tsx b/packages/propel/src/components/switch/switch.tsx
new file mode 100644
index 0000000..efe6f27
--- /dev/null
+++ b/packages/propel/src/components/switch/switch.tsx
@@ -0,0 +1,26 @@
+import {
+  Switch as SwitchRoot,
+  type SwitchProps as SwitchRootProps,
+  SwitchThumb,
+} from "../../ui/switch";
+
+export type { SwitchMagnitude } from "../../ui/switch";
+
+export type SwitchProps = SwitchRootProps;
+
+/**
+ * The ready-made switch: composes the atomic `Switch` track with its `SwitchThumb`, threading the
+ * required `magnitude` through to both. Built on Base UI's `Switch` (so it carries `role="switch"`
+ * and full keyboard/form support). Maps to Figma's "Toggle" component.
+ *
+ * On/off, `disabled`, and `readOnly` are control state from the primitive, not variants — pass them
+ * as props (`checked`/`defaultChecked`, `disabled`, `readOnly`). Only the size axis (`magnitude`)
+ * is a visual variant.
+ */
+export function Switch({ magnitude, ...props }: SwitchProps) {
+  return (
+    <SwitchRoot magnitude={magnitude} {...props}>
+      <SwitchThumb magnitude={magnitude} />
+    </SwitchRoot>
+  );
+}
diff --git a/packages/propel/src/components/table/index.tsx b/packages/propel/src/components/table/index.tsx
index cd186ec..58da758 100644
--- a/packages/propel/src/components/table/index.tsx
+++ b/packages/propel/src/components/table/index.tsx
@@ -1,482 +1,19 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { ChevronDown, ChevronsUpDown, ChevronUp, Ellipsis } from "lucide-react";
-import * as React from "react";
-
-import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
-import { Dropdown, DropdownTrigger } from "../dropdown/index";
-
-// Figma "Table" node 5196-4084 ships two layouts that share the same cell metrics
-// (38px header / 44px body, px-4 py-2, header on `background/layer/1`, rows on
-// `background/layer/2`) and differ only in their dividers:
-//   • `table`       — row dividers only (header underline + a hairline under each
-//                     body row); no vertical rules.
-//   • `spreadsheet` — a full grid: every header and body cell draws a 0.5px
-//                     `border/subtle` on all sides.
-// The whole table sits inside a rounded, `border/subtle`-bordered, scrollable frame.
-// The variant is owned by the root and read by the cells through context, so a
-// consumer only sets it once on `<Table>`.
-
-export type TableVariant = "table" | "spreadsheet";
-
-// Which edge a cell is pinned to while the table scrolls horizontally (the "make the
-// first / last column sticky" option). `start` sticks to the inline-start edge, `end`
-// to the inline-end edge. Set it on a column's header AND its body cells.
-export type TablePinned = "start" | "end";
-
-const TableVariantContext = React.createContext<TableVariant>("table");
-
-export type TableProps = Omit<React.ComponentProps<"table">, "className" | "style"> & {
-  /**
-   * Layout (required). `table` draws row dividers only; `spreadsheet` draws a full grid (every cell
-   * bordered on all sides). Both share the same cell metrics.
-   */
-  variant: TableVariant;
-};
-
-/**
- * Root `<table>`, wrapped in a rounded, hairline-bordered scroll frame. Compose with `TableHeader`,
- * `TableBody`, `TableRow`, `TableHead`, `TableCell`, `TableEditableCell`, and `TableActionCell`.
- * The frame scrolls when the table overflows it (constrain its parent's height to scroll
- * vertically); the header stays pinned to the top, and columns can be pinned with each cell's
- * `pinned` prop.
- *
- * Pass `variant="table"` for row dividers or `variant="spreadsheet"` for a full grid; the cells
- * read it via context.
- */
-export function Table({ variant, ...props }: TableProps) {
-  return (
-    <TableVariantContext.Provider value={variant}>
-      {/* The scroll frame is a Base UI ScrollArea: its Viewport is a real scroll
-          container (so sticky headers + pinned columns work relative to it) and its
-          scrollbar is an OVERLAY thumb positioned absolutely — it never reserves a
-          gutter, so the header isn't clipped and the table width stays constant whether
-          or not the scrollbar shows. The Root owns the outer `border/subtle`, the
-          `radius/lg` corners, and clips the overflow (a `<table>` can't clip its own
-          rounded corners). `max-h-full` caps it at a height-constrained parent so it
-          scrolls instead of growing. Base UI gives the Viewport `tabIndex=0` only while
-          it overflows, satisfying axe `scrollable-region-focusable` without a stray tab
-          stop when the table fits. */}
-      <BaseScrollArea.Root className="relative flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
-        <BaseScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-inset">
-          <table
-            className="w-full caption-bottom border-collapse text-13 text-primary"
-            {...props}
-          />
-        </BaseScrollArea.Viewport>
-        <BaseScrollArea.Scrollbar orientation="vertical" className={scrollbarClass}>
-          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
-        </BaseScrollArea.Scrollbar>
-        <BaseScrollArea.Scrollbar orientation="horizontal" className={scrollbarClass}>
-          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
-        </BaseScrollArea.Scrollbar>
-        <BaseScrollArea.Corner />
-      </BaseScrollArea.Root>
-    </TableVariantContext.Provider>
-  );
-}
-
-export type TableHeaderProps = Omit<React.ComponentProps<"thead">, "className" | "style">;
-
-/** Header section (`<thead>`). Holds a single `TableRow` of `TableHead` cells. */
-export function TableHeader(props: TableHeaderProps) {
-  return <thead {...props} />;
-}
-
-export type TableBodyProps = Omit<React.ComponentProps<"tbody">, "className" | "style">;
-
-/** Body section (`<tbody>`). Holds the data `TableRow`s. */
-export function TableBody(props: TableBodyProps) {
-  return <tbody {...props} />;
-}
-
-export type TableRowProps = Omit<React.ComponentProps<"tr">, "className" | "style">;
-
-/**
- * A table row (`<tr>`). Body rows sit on `layer-2` and tint to `layer-2-hover` on hover. Dividers
- * are drawn per-cell (so the `spreadsheet` grid works), so the row itself carries only the
- * background + hover.
- */
-export function TableRow(props: TableRowProps) {
-  // `group/body-row` so a `table`-variant cell can drop its bottom divider on the last
-  // row (`group-last/body-row:border-b-0`) and a pinned cell can follow the row's hover.
-  return <tr className="group/body-row bg-layer-2 hover:bg-layer-2-hover" {...props} />;
-}
-
-// Per-variant cell borders. The scroll frame already draws the single outer
-// `border/subtle` ring (and rounds the corners), so cells only ever draw INTERIOR
-// dividers — drawing a full border on the edge cells too would double the frame's ring
-// (a visible 1px-ish double line that squared off the rounded corners).
-//
-// In `table`, only a bottom hairline divides rows (header uses the 1px `border/sm`,
-// body cells the 0.5px `border/xs`). In `spreadsheet`, a full grid: each cell adds an
-// inline-end divider (logical `border-e`, RTL-safe) plus the bottom hairline; the last
-// column drops its end divider (`last:border-e-0`) and the last row drops its bottom
-// divider so the frame's ring stays single all the way around.
-const headBorder: Record<TableVariant, string> = {
-  table: "border-b border-subtle",
-  spreadsheet: "border-b-[0.5px] border-e-[0.5px] border-subtle last:border-e-0",
-};
-const cellBorder: Record<TableVariant, string> = {
-  // Last body row drops its bottom divider so the rounded table closes cleanly.
-  table: "border-b-[0.5px] border-subtle group-last/body-row:border-b-0",
-  spreadsheet:
-    "border-b-[0.5px] border-e-[0.5px] border-subtle last:border-e-0 group-last/body-row:border-b-0",
-};
-
-// Sticky-column pinning. A pinned cell sticks to the inline-start/end edge while the
-// table scrolls sideways. A `start` column draws a hairline on its inline-end edge and
-// an `end` column on its inline-start edge (logical, RTL-safe) so the pinned column
-// reads as separated from the content scrolling under it. Body cells get an opaque
-// background (matching the row, incl. its hover) so scrolled columns slide beneath them;
-// the header's pinned cell sits above both the sticky header row (z-20) and the pinned
-// body column (z-10).
-function pinnedEdgeBorder(pinned: TablePinned) {
-  return pinned === "start" ? "border-e-[0.5px] border-subtle" : "border-s-[0.5px] border-subtle";
-}
-function pinnedHeadClass(pinned: TablePinned | undefined) {
-  if (!pinned) return "z-20";
-  return cx("sticky z-30", pinned === "start" ? "start-0" : "end-0", pinnedEdgeBorder(pinned));
-}
-function pinnedCellClass(pinned: TablePinned | undefined) {
-  if (!pinned) return "";
-  return cx(
-    "sticky z-10 bg-layer-2 group-hover/body-row:bg-layer-2-hover",
-    pinned === "start" ? "start-0" : "end-0",
-    pinnedEdgeBorder(pinned),
-  );
-}
-
-// Header cells follow the Figma "Table header" component: 38px tall, `px-4 py-2`,
-// `text-12` semibold on `background/layer/1` in `text/tertiary` (the muted header
-// token from Figma). `sticky top-0` keeps the header in view while the body scrolls
-// (the `layer-1` fill is opaque, so rows pass under it).
-const tableHeadVariants = cva(
-  "sticky top-0 h-[38px] px-4 py-2 text-start align-middle text-12 font-semibold text-tertiary",
-  {
-    variants: {
-      variant: {
-        default: "bg-layer-1",
-        sortable: "bg-layer-1",
-      },
-    },
-  },
-);
-
-/** Sort direction of a sortable `TableHead`. `none` shows the neutral affordance. */
-export type TableHeadSort = "asc" | "desc" | "none";
-
-const sortIcon: Record<TableHeadSort, typeof ChevronsUpDown> = {
-  asc: ChevronUp,
-  desc: ChevronDown,
-  none: ChevronsUpDown,
-};
-
-const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
-  asc: "ascending",
-  desc: "descending",
-  none: "none",
-};
-
-export type TableHeadProps = Omit<React.ComponentProps<"th">, "className" | "style" | "aria-sort"> &
-  VariantProps<typeof tableHeadVariants> & {
-    /**
-     * Visual treatment. `sortable` renders a clickable button with a sort chevron; set it whenever
-     * you pass `sort`.
-     */
-    variant: NonNullable<VariantProps<typeof tableHeadVariants>["variant"]>;
-    /**
-     * Current sort state for a sortable header. Drives both the chevron icon (`asc`→up,
-     * `desc`→down, `none`→up/down) and the cell's `aria-sort`.
-     */
-    sort?: TableHeadSort;
-    /** Click handler for the sort control; only used when the header is sortable. */
-    onSort?: () => void;
-    /** Pin this header to the inline-start/end edge when the table scrolls sideways. */
-    pinned?: TablePinned;
-  };
-
-/**
- * A header cell (`<th>`). Pass `variant="sortable"` (with `sort`/`onSort`) to turn the label into
- * an interactive sort control: it renders a lucide chevron (aria-hidden) and reflects the order via
- * `aria-sort` for assistive tech. Pass `pinned` to make the column sticky on horizontal scroll (set
- * it on the body cells too).
- */
-export function TableHead({
-  variant,
-  sort = "none",
-  onSort,
-  pinned,
-  children,
-  ...props
-}: TableHeadProps) {
-  const tableVariant = React.useContext(TableVariantContext);
-  const isSortable = variant === "sortable";
-  // Only render the interactive sort control when there's a handler to drive it;
-  // a sortable-styled header without `onSort` falls back to a plain label so we
-  // never expose a focusable button that does nothing.
-  const hasSortControl = isSortable && onSort != null;
-  const SortGlyph = sortIcon[sort];
-  return (
-    <th
-      scope="col"
-      aria-sort={isSortable ? ariaSort[sort] : undefined}
-      className={cx(
-        tableHeadVariants({ variant }),
-        headBorder[tableVariant],
-        pinnedHeadClass(pinned),
-      )}
-      {...props}
-    >
-      {hasSortControl ? (
-        <button
-          type="button"
-          onClick={onSort}
-          className="-mx-1 inline-flex items-center gap-1.5 rounded-sm px-1 text-tertiary hover:text-secondary"
-        >
-          <span className="truncate">{children}</span>
-          <ChevronGlyphSlot Glyph={SortGlyph} />
-        </button>
-      ) : (
-        <div className="truncate">{children}</div>
-      )}
-    </th>
-  );
-}
-
-// Keeps the chevron a fixed 14px (Figma sort icon) with the muted icon color.
-function ChevronGlyphSlot({ Glyph }: { Glyph: typeof ChevronsUpDown }) {
-  return <Glyph aria-hidden className="size-3.5 shrink-0 text-icon-secondary" />;
-}
-
-// Shared `<td>` chrome for the plain, editable, and action cells: 44px tall,
-// `align-middle`, plus the per-variant border read from context. Padding is
-// intentionally NOT included here: the plain cell adds `px-4 py-2`, while the editable
-// and action cells stay `p-0` so their full-bleed button supplies the inset. (Baking
-// padding in and overriding it with `p-0` is order-fragile under `cx`, which is what
-// made editable rows render too tall.)
-function useTableCellClass() {
-  const tableVariant = React.useContext(TableVariantContext);
-  return cx("h-11 align-middle", cellBorder[tableVariant]);
-}
-
-// A leading/trailing slot inside a cell — an icon or an avatar that sits beside the
-// cell's content. It never shrinks and centers its node; the node sizes itself.
-function TableCellSlot({ children }: { children: React.ReactNode }) {
-  return <span className="flex shrink-0 items-center">{children}</span>;
-}
-
-export type TableCellProps = Omit<React.ComponentProps<"td">, "className" | "style"> & {
-  /** Leading content beside the cell text — an icon or an `Avatar`. */
-  inlineStartNode?: React.ReactNode;
-  /** Trailing content beside the cell text — an icon or an `Avatar`. */
-  inlineEndNode?: React.ReactNode;
-  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
-  pinned?: TablePinned;
-};
-
-/**
- * A data cell (`<td>`). 44px tall with `px-4 py-2` and `text-13` body text. Optional
- * `inlineStartNode` / `inlineEndNode` slots hold a leading/trailing icon or `Avatar` (e.g. an
- * avatar before a name). `pinned` keeps the column sticky on horizontal scroll.
- */
-export function TableCell({
-  inlineStartNode,
-  inlineEndNode,
-  pinned,
-  children,
-  ...props
-}: TableCellProps) {
-  const className = useTableCellClass();
-  return (
-    <td className={cx(className, "px-4 py-2", pinnedCellClass(pinned))} {...props}>
-      <div className="flex items-center gap-2">
-        {inlineStartNode != null ? <TableCellSlot>{inlineStartNode}</TableCellSlot> : null}
-        <div className="min-w-0 flex-1 truncate">{children}</div>
-        {inlineEndNode != null ? <TableCellSlot>{inlineEndNode}</TableCellSlot> : null}
-      </div>
-    </td>
-  );
-}
-
-// Shared chrome for the interactive cell triggers (editable + action). An actionable
-// cell is transparent so the row shows through, and tints with a `layer-transparent`
-// overlay on hover / keyboard focus / while its menu is open — distinct from the row's
-// own hover, matching the Figma "actionable cell" treatment.
-const actionableTriggerClass = cx(
-  "flex h-11 w-full items-center outline-none",
-  "bg-layer-transparent hover:bg-layer-transparent-hover focus-visible:bg-layer-transparent-hover",
-  "data-popup-open:bg-layer-transparent-active",
-  "disabled:pointer-events-none disabled:text-disabled",
-);
-
-// The persistent "this cell is the selected one" tint, a step stronger than hover, on
-// the `layer-transparent-selected` token. It stays under the open/hover overlays so an
-// open or hovered selected cell still reads its interaction state on top.
-const selectedTriggerClass = "bg-layer-transparent-selected";
-
-export type TableEditableCellProps = Omit<
-  React.ComponentProps<"td">,
-  "className" | "style" | "children"
-> & {
-  /**
-   * The current value shown in the cell (e.g. `"Admin"`). It sits before the trailing chevron and
-   * labels the trigger button.
-   */
-  value: React.ReactNode;
-  /**
-   * The dropdown menu shown when the cell is clicked. Pass a propel `Dropdown` composition —
-   * typically a `DropdownContent` with `DropdownItem`s. The cell owns the `Dropdown` root + the
-   * trigger; you only supply the menu surface.
-   */
-  children: React.ReactNode;
-  /**
-   * Whether the menu is open (controlled). Pair with `onOpenChange`; omit for an uncontrolled cell
-   * that manages its own open state.
-   */
-  open?: boolean;
-  /** Default open state for an uncontrolled cell. @default false */
-  defaultOpen?: boolean;
-  /** Called when the menu requests to open or close. */
-  onOpenChange?: (open: boolean) => void;
-  /** Disables the trigger so the cell can't be edited. */
-  disabled?: boolean;
-  /**
-   * Marks this as the actively-selected cell (e.g. the focused cell in a spreadsheet), giving it a
-   * persistent `layer-transparent-selected` tint a step stronger than hover.
-   */
-  selected?: boolean;
-  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
-  pinned?: TablePinned;
-  /** Accessible name for the trigger when the value alone isn't descriptive. */
-  "aria-label"?: string;
-};
-
-/**
- * An editable data cell (`<td>`). Renders the current `value` plus a trailing chevron as a single
- * button that opens the propel `Dropdown` passed as `children` to pick a new value (Figma "Account
- * type" cell). It owns the `Dropdown` root and trigger, so you only pass the menu surface:
- *
- * ```tsx
- * <TableEditableCell value={role} onOpenChange={…}>
- *   <DropdownContent>
- *     <DropdownItem variant="default" label="Admin" onClick={() => setRole("Admin")} />
- *     <DropdownItem variant="default" label="Member" onClick={() => setRole("Member")} />
- *   </DropdownContent>
- * </TableEditableCell>
- * ```
- */
-export function TableEditableCell({
-  value,
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  disabled,
-  selected,
-  pinned,
-  "aria-label": ariaLabel,
-  ...props
-}: TableEditableCellProps) {
-  const className = useTableCellClass();
-  return (
-    // The `<td>` keeps no padding so the full-bleed trigger button fills the cell
-    // (the button re-applies the px-4/py-2 inset). This keeps the click target the
-    // whole cell, matching the Figma editable cell.
-    <td className={cx(className, "p-0", pinnedCellClass(pinned))} {...props}>
-      <Dropdown open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-        <DropdownTrigger
-          disabled={disabled}
-          aria-label={ariaLabel}
-          render={
-            <button
-              type="button"
-              className={cx(
-                actionableTriggerClass,
-                "group/editable-cell justify-between gap-1 px-4 text-start",
-                selected ? selectedTriggerClass : null,
-              )}
-            />
-          }
-        >
-          <span className="min-w-0 truncate">{value}</span>
-          {/* 14px chevron in a 20px icon slot, mirroring the Figma trigger. */}
-          <span className="flex size-5 shrink-0 items-center justify-center">
-            <ChevronDown
-              aria-hidden
-              className="size-3.5 text-icon-secondary group-disabled/editable-cell:text-icon-disabled"
-            />
-          </span>
-        </DropdownTrigger>
-        {children}
-      </Dropdown>
-    </td>
-  );
-}
-
-export type TableActionCellProps = Omit<
-  React.ComponentProps<"td">,
-  "className" | "style" | "children"
-> & {
-  /**
-   * The dropdown menu of row actions. Pass a propel `Dropdown` composition (a `DropdownContent`
-   * with `DropdownItem`s). The cell owns the `Dropdown` root + the icon trigger; you only supply
-   * the menu surface.
-   */
-  children: React.ReactNode;
-  /** Accessible name for the trigger (e.g. "Row options"). Required (icon-only). */
-  "aria-label": string;
-  /** Trigger glyph. @default an ellipsis (`⋯`). */
-  icon?: React.ReactNode;
-  /** Whether the menu is open (controlled). Pair with `onOpenChange`. */
-  open?: boolean;
-  /** Default open state for an uncontrolled cell. @default false */
-  defaultOpen?: boolean;
-  /** Called when the menu requests to open or close. */
-  onOpenChange?: (open: boolean) => void;
-  /** Disables the trigger. */
-  disabled?: boolean;
-  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
-  pinned?: TablePinned;
-};
-
-/**
- * An icon-only action cell (`<td>`) — the trailing "⋯" that opens a menu of actions for the row
- * (Figma's row-options cell). Like `TableEditableCell` it owns the `Dropdown` root + trigger and
- * you pass only the menu surface; the trigger is an icon button with the actionable-cell hover
- * treatment.
- */
-export function TableActionCell({
-  children,
-  "aria-label": ariaLabel,
-  icon,
-  open,
-  defaultOpen,
-  onOpenChange,
-  disabled,
-  pinned,
-  ...props
-}: TableActionCellProps) {
-  const className = useTableCellClass();
-  return (
-    <td className={cx(className, "p-0", pinnedCellClass(pinned))} {...props}>
-      <Dropdown open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-        <DropdownTrigger
-          disabled={disabled}
-          aria-label={ariaLabel}
-          render={
-            <button
-              type="button"
-              className={cx(actionableTriggerClass, "group/action-cell justify-center px-4")}
-            />
-          }
-        >
-          <span className="flex size-5 shrink-0 items-center justify-center text-icon-secondary group-disabled/action-cell:text-icon-disabled">
-            {icon ?? <Ellipsis aria-hidden className="size-3.5" />}
-          </span>
-        </DropdownTrigger>
-        {children}
-      </Dropdown>
-    </td>
-  );
-}
+export {
+  Table,
+  type TablePinned,
+  type TableProps,
+  type TableVariant,
+  TableBody,
+  type TableBodyProps,
+  TableCell,
+  type TableCellProps,
+  TableHead,
+  type TableHeadProps,
+  type TableHeadSort,
+  TableHeader,
+  type TableHeaderProps,
+  TableRow,
+  type TableRowProps,
+} from "../../ui/table/index";
+export { TableActionCell, type TableActionCellProps } from "./table-action-cell";
+export { TableEditableCell, type TableEditableCellProps } from "./table-editable-cell";
diff --git a/packages/propel/src/components/table/table-action-cell.tsx b/packages/propel/src/components/table/table-action-cell.tsx
new file mode 100644
index 0000000..2c94777
--- /dev/null
+++ b/packages/propel/src/components/table/table-action-cell.tsx
@@ -0,0 +1,69 @@
+import { cx } from "class-variance-authority";
+import { Ellipsis } from "lucide-react";
+import type * as React from "react";
+
+import { Menu, MenuTrigger, type MenuProps } from "../../ui/menu/index";
+import {
+  actionableTriggerClass,
+  pinnedCellClass,
+  type TablePinned,
+  useTableCellClass,
+} from "../../ui/table/index";
+
+export type TableActionCellProps = Omit<
+  React.ComponentProps<"td">,
+  "className" | "style" | "children"
+> & {
+  /** The dropdown menu of row actions. */
+  children: React.ReactNode;
+  /** Accessible name for the trigger (e.g. "Row options"). Required (icon-only). */
+  "aria-label": string;
+  /** Trigger glyph. @default an ellipsis. */
+  icon?: React.ReactNode;
+  /** Whether the menu is open (controlled). Pair with `onOpenChange`. */
+  open?: boolean;
+  /** Default open state for an uncontrolled cell. @default false */
+  defaultOpen?: boolean;
+  /** Called when the menu requests to open or close. */
+  onOpenChange?: MenuProps["onOpenChange"];
+  /** Disables the trigger. */
+  disabled?: boolean;
+  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
+  pinned?: TablePinned;
+};
+
+/** An icon-only action cell (`<td>`) that opens a row-actions dropdown. */
+export function TableActionCell({
+  children,
+  "aria-label": ariaLabel,
+  icon,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  pinned,
+  ...props
+}: TableActionCellProps) {
+  const className = useTableCellClass();
+  return (
+    <td className={cx(className, "p-0", pinnedCellClass(pinned))} {...props}>
+      <Menu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+        <MenuTrigger
+          disabled={disabled}
+          aria-label={ariaLabel}
+          render={
+            <button
+              type="button"
+              className={cx(actionableTriggerClass, "group/action-cell justify-center px-4")}
+            />
+          }
+        >
+          <span className="flex size-5 shrink-0 items-center justify-center text-icon-secondary group-disabled/action-cell:text-icon-disabled">
+            {icon ?? <Ellipsis aria-hidden className="size-3.5" />}
+          </span>
+        </MenuTrigger>
+        {children}
+      </Menu>
+    </td>
+  );
+}
diff --git a/packages/propel/src/components/table/table-editable-cell.tsx b/packages/propel/src/components/table/table-editable-cell.tsx
new file mode 100644
index 0000000..9d1723a
--- /dev/null
+++ b/packages/propel/src/components/table/table-editable-cell.tsx
@@ -0,0 +1,81 @@
+import { cx } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+
+import { Menu, MenuTrigger, type MenuProps } from "../../ui/menu/index";
+import {
+  actionableTriggerClass,
+  pinnedCellClass,
+  selectedTriggerClass,
+  type TablePinned,
+  useTableCellClass,
+} from "../../ui/table/index";
+
+export type TableEditableCellProps = Omit<
+  React.ComponentProps<"td">,
+  "className" | "style" | "children"
+> & {
+  /** The current value shown in the cell. */
+  value: React.ReactNode;
+  /** The dropdown menu shown when the cell is clicked. */
+  children: React.ReactNode;
+  /** Whether the menu is open (controlled). */
+  open?: boolean;
+  /** Default open state for an uncontrolled cell. @default false */
+  defaultOpen?: boolean;
+  /** Called when the menu requests to open or close. */
+  onOpenChange?: MenuProps["onOpenChange"];
+  /** Disables the trigger so the cell can't be edited. */
+  disabled?: boolean;
+  /** Marks this as the actively-selected cell. */
+  selected?: boolean;
+  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
+  pinned?: TablePinned;
+  /** Accessible name for the trigger when the value alone isn't descriptive. */
+  "aria-label"?: string;
+};
+
+/** An editable data cell (`<td>`) with a full-cell dropdown trigger. */
+export function TableEditableCell({
+  value,
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  selected,
+  pinned,
+  "aria-label": ariaLabel,
+  ...props
+}: TableEditableCellProps) {
+  const className = useTableCellClass();
+  return (
+    <td className={cx(className, "p-0", pinnedCellClass(pinned))} {...props}>
+      <Menu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+        <MenuTrigger
+          disabled={disabled}
+          aria-label={ariaLabel}
+          render={
+            <button
+              type="button"
+              className={cx(
+                actionableTriggerClass,
+                "group/editable-cell justify-between gap-1 px-4 text-start",
+                selected ? selectedTriggerClass : null,
+              )}
+            />
+          }
+        >
+          <span className="min-w-0 truncate">{value}</span>
+          <span className="flex size-5 shrink-0 items-center justify-center">
+            <ChevronDown
+              aria-hidden
+              className="size-3.5 text-icon-secondary group-disabled/editable-cell:text-icon-disabled"
+            />
+          </span>
+        </MenuTrigger>
+        {children}
+      </Menu>
+    </td>
+  );
+}
diff --git a/packages/propel/src/components/table/table.stories.tsx b/packages/propel/src/components/table/table.stories.tsx
index 0b3b7a7..07927cd 100644
--- a/packages/propel/src/components/table/table.stories.tsx
+++ b/packages/propel/src/components/table/table.stories.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
 import { Avatar } from "../avatar/index";
-import { DropdownContent, DropdownItem } from "../dropdown/index";
+import { MenuContent, MenuItem } from "../menu/index";
 import { Pagination } from "../pagination/index";
 import {
   Table,
@@ -217,8 +217,8 @@ const ROLES = ["Admin", "Member", "Guest"];
 
 /**
  * **Editable cells.** Each "Account type" cell is a `TableEditableCell`: clicking it opens a propel
- * `Dropdown` to pick a new value, which updates the row in place (Figma "Account type" editable
- * cell). The cell tints on hover and while its menu is open; the last-clicked cell keeps a stronger
+ * `Menu` to pick a new value, which updates the row in place (Figma "Account type" editable cell).
+ * The cell tints on hover and while its menu is open; the last-clicked cell keeps a stronger
  * `selected` tint to mark the active cell. Works in both table variants.
  */
 export const EditableCells: Story = {
@@ -256,9 +256,9 @@ export const EditableCells: Story = {
                   if (next) setSelectedEmail(person.email);
                 }}
               >
-                <DropdownContent>
+                <MenuContent>
                   {ROLES.map((role) => (
-                    <DropdownItem
+                    <MenuItem
                       key={role}
                       variant="default"
                       label={role}
@@ -266,7 +266,7 @@ export const EditableCells: Story = {
                       onClick={() => setRole(person.email, role)}
                     />
                   ))}
-                </DropdownContent>
+                </MenuContent>
               </TableEditableCell>
             </TableRow>
           ))}
@@ -315,7 +315,7 @@ export const WithPagination: Story = {
       // A fixed width so the table does not resize as pages change: the table is
       // `w-full`, so without a constrained container it would shrink-to-fit each page's
       // content and jump in width when paginating.
-      <div className="flex w-[760px] flex-col gap-3">
+      <div className="flex w-190 flex-col gap-3">
         <Table {...args}>
           <TableHeader>
             <TableRow>
@@ -349,7 +349,7 @@ export const WithPagination: Story = {
           pageSize={{
             value: pageSize,
             options: [5, 10, 25],
-            onChange: (next) => {
+            onValueChange: (next) => {
               setPageSize(next);
               setPage(1);
             },
@@ -408,9 +408,9 @@ export const RichRows: Story = {
               </TableCell>
               <TableCell>{person.email}</TableCell>
               <TableEditableCell value={person.role} aria-label={`Account type for ${person.name}`}>
-                <DropdownContent>
+                <MenuContent>
                   {ROLES.map((role) => (
-                    <DropdownItem
+                    <MenuItem
                       key={role}
                       variant="default"
                       label={role}
@@ -418,13 +418,13 @@ export const RichRows: Story = {
                       onClick={() => setRole(person.email, role)}
                     />
                   ))}
-                </DropdownContent>
+                </MenuContent>
               </TableEditableCell>
               <TableActionCell aria-label={`Options for ${person.name}`}>
-                <DropdownContent>
-                  <DropdownItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
-                  <DropdownItem variant="default" inlineStartNode={<Trash2 />} label="Delete" />
-                </DropdownContent>
+                <MenuContent>
+                  <MenuItem variant="default" inlineStartNode={<Pencil />} label="Edit" />
+                  <MenuItem variant="default" inlineStartNode={<Trash2 />} label="Delete" />
+                </MenuContent>
               </TableActionCell>
             </TableRow>
           ))}
@@ -453,7 +453,7 @@ export const StickyHeaderAndColumns: Story = {
   args: { variant: "table" },
   parameters: { controls: { disable: true } },
   render: (args) => (
-    <div className="h-64 w-[460px]">
+    <div className="h-64 w-115">
       <Table {...args}>
         <TableHeader>
           <TableRow>
@@ -492,7 +492,7 @@ export const StickyHeaderAndColumns: Story = {
     // and the inline-start edge (pinned column).
     const nameHeader = canvas.getByRole("columnheader", { name: "Name" });
     await expect(nameHeader).toHaveClass("sticky");
-    await expect(nameHeader).toHaveClass("start-0");
+    await expect(nameHeader).toHaveClass("inset-s-0");
     await expect(nameHeader).toHaveClass("top-0");
   },
 };
@@ -564,11 +564,11 @@ export const SortableKeyboard: Story = {
 };
 
 /**
- * **Keyboard: editable cell.** Tab/Enter on the editable cell's trigger opens the portaled
- * `Dropdown`; Arrow Down moves the highlight onto the first item and Enter selects it, updating the
- * cell value in place; Escape closes the menu and returns focus to the cell trigger. The menu is
- * portaled, so it's queried from the document body by its unique item text. Tagged so it stays out
- * of the sidebar, docs, and AI manifest while still running under the default `test` tag.
+ * **Keyboard: editable cell.** Tab/Enter on the editable cell's trigger opens the portaled `Menu`;
+ * Arrow Down moves the highlight onto the first item and Enter selects it, updating the cell value
+ * in place; Escape closes the menu and returns focus to the cell trigger. The menu is portaled, so
+ * it's queried from the document body by its unique item text. Tagged so it stays out of the
+ * sidebar, docs, and AI manifest while still running under the default `test` tag.
  */
 export const EditableCellKeyboard: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
@@ -587,9 +587,9 @@ export const EditableCellKeyboard: Story = {
           <TableRow>
             <TableCell>Chargers</TableCell>
             <TableEditableCell value={role} aria-label="Account type for Chargers">
-              <DropdownContent>
+              <MenuContent>
                 {ROLES.map((r) => (
-                  <DropdownItem
+                  <MenuItem
                     key={r}
                     variant="default"
                     label={r}
@@ -597,7 +597,7 @@ export const EditableCellKeyboard: Story = {
                     onClick={() => setRole(r)}
                   />
                 ))}
-              </DropdownContent>
+              </MenuContent>
             </TableEditableCell>
           </TableRow>
         </TableBody>
diff --git a/packages/propel/src/components/tabs/index.tsx b/packages/propel/src/components/tabs/index.tsx
index 66ba1d5..01a45eb 100644
--- a/packages/propel/src/components/tabs/index.tsx
+++ b/packages/propel/src/components/tabs/index.tsx
@@ -1,245 +1,12 @@
-import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
-import { Tabs as BaseTabs } from "@base-ui/react/tabs";
-import { cva, cx } from "class-variance-authority";
-import * as React from "react";
-
-import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
-
-// The Figma "Tabs" component defines two visual treatments. `contained` wraps
-// the tabs in a pill and lifts the active tab onto a raised card; `underline`
-// keeps the tabs flat and slides a dark bar under the active one. Active / hover /
-// pressed are interaction states from the primitive, not variants.
-type TabsVariant = "contained" | "underline";
-
-// Shared so `TabsList`, `Tab`, and `TabsPanel` know which treatment to render
-// without each consumer threading `variant` through every part. `Tabs` (Root)
-// sets it; the parts read it.
-const TabsVariantContext = React.createContext<TabsVariant>("contained");
-
-// `inline-flex` (not block `flex`) so the root hugs its tabs instead of
-// spanning the full width of its parent — the tab set should be as wide as its
-// content, matching the Figma group which is an inline row. `items-start` stops
-// the column's default cross-axis stretch: without it a wide `TabsPanel` below
-// would pull the `TabsList` to the panel's width, leaving empty padding after
-// the last tab. With it the list hugs its tabs and the panel keeps its own
-// width, independent of each other. `max-w-full` caps the root at its parent so
-// that when there are more tabs than fit, the root stops growing at the parent's
-// width and the `TabsList` scrolls horizontally inside it (it must cap here, not
-// only on the list, for the list's own `max-w-full` to resolve against the parent
-// rather than the unbounded content width).
-const rootVariants = cva("inline-flex max-w-full flex-col items-start gap-3");
-
-export type TabsProps = Omit<
-  React.ComponentProps<typeof BaseTabs.Root>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Visual treatment (Figma variant). `contained` lifts the active tab onto a raised card inside a
-   * pill; `underline` slides a dark bar under it. Required, with no silent default, like the other
-   * essential axes (e.g. Switch `magnitude`).
-   */
-  variant: TabsVariant;
-};
-
-/**
- * Root of a tab set. Groups a `TabsList` of `Tab`s with their `TabsPanel`s and tracks which tab is
- * active. Build the compound API from its parts:
- *
- * ```tsx
- * <Tabs variant="contained" defaultValue="overview">
- *   <TabsList>
- *     <Tab value="overview">Overview</Tab>
- *     <Tab value="activity">Activity</Tab>
- *   </TabsList>
- *   <TabsPanel value="overview">…</TabsPanel>
- *   <TabsPanel value="activity">…</TabsPanel>
- * </Tabs>;
- * ```
- */
-export function Tabs({ variant, ...props }: TabsProps) {
-  return (
-    <TabsVariantContext.Provider value={variant}>
-      <BaseTabs.Root className={rootVariants()} {...props} />
-    </TabsVariantContext.Provider>
-  );
-}
-
-// `contained` is a pill: a neutral layer-3 fill with 2px inset padding (no
-// container border, per Figma `Contained Tab group` 1144:3856), `gap-px` (1px)
-// between tabs, rounded to 8px (`radius/lg`). The raised active tab sits within.
-// `underline` is a flat inline row that hugs its tabs (no baseline border per
-// Figma `Underline Tab group` 1162:321 — `gap-px px-0.5`). The active bar rides
-// under the active tab as the JS-measured `TabsIndicator`. `relative` lets that
-// indicator position against the list; `inline-flex` keeps the row sized to its
-// content. Underline uses `items-start` so every tab column shares a top edge.
-// `max-w-full` lets the list (which is also the scroll viewport) cap at the
-// width its `ScrollArea.Root` allows, so an overflowing tab set scrolls inside it
-// rather than stretching the row past the parent.
-const tabsListVariants = cva("relative inline-flex max-w-full", {
-  variants: {
-    variant: {
-      contained: "items-center gap-px rounded-lg bg-layer-3 p-0.5",
-      underline: "items-start gap-px px-0.5",
-    },
-  },
-});
-
-export type TabsListProps = Omit<
-  React.ComponentProps<typeof BaseTabs.List>,
-  "className" | "render" | "style"
->;
-
-/**
- * The row of tabs. Renders the active-tab `Tabs.Indicator` for the underline.
- *
- * The list is also a Base UI `ScrollArea.Viewport` (Base UI's documented Tabs + ScrollArea
- * render-merge): the `ScrollArea.Root` bounds the width, and when the tabs are wider than the space
- * they have, the row scrolls horizontally with propel's overlay scrollbar (hidden at rest, revealed
- * on hover/scroll) instead of overflowing its container. When the tabs fit, the row just hugs them.
- * This is what lets a long tab bar live inside a width-constrained header.
- */
-export function TabsList({ children, ...props }: TabsListProps) {
-  const variant = React.useContext(TabsVariantContext);
-  return (
-    <BaseScrollArea.Root className="relative max-w-full">
-      <BaseTabs.List
-        render={<BaseScrollArea.Viewport />}
-        className={cx(tabsListVariants({ variant }), "overscroll-x-contain outline-none")}
-        {...props}
-      >
-        {children}
-        {variant === "underline" ? <TabsIndicator /> : null}
-      </BaseTabs.List>
-      <BaseScrollArea.Scrollbar orientation="horizontal" className={scrollbarClass}>
-        <BaseScrollArea.Thumb className={scrollbarThumbClass} />
-      </BaseScrollArea.Scrollbar>
-    </BaseScrollArea.Root>
-  );
-}
-
-// Both variants share the inactive look (muted text) and flip to primary text
-// when active. `contained` lifts the active tab onto a raised layer-2 card; the
-// tab box is `h-6` (24px) with `px-1.5` (6px) and `gap-1` (4px) so the whole
-// container is 28px (24 + 2px padding top/bottom). `underline` is a vertical
-// column: a `h-7` (28px) label box with `px-2` (8px) / `py-0.5` (2px) /
-// `gap-1.5` (6px), then an 8px (`gap-2`) gap, then a 3px bar track — totaling
-// 40px. The per-tab bar handles the hover affordance (placeholder gray); the
-// active bar is the JS-measured `TabsIndicator` overlaid on top.
-const tabVariants = cva(
-  "cursor-pointer font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
-  {
-    variants: {
-      variant: {
-        contained:
-          "inline-flex h-6 items-center justify-center gap-1 rounded-md border-sm border-transparent px-1.5 text-13 text-secondary hover:text-primary data-active:border-subtle-1 data-active:bg-layer-2 data-active:text-primary data-active:shadow-raised-200",
-        underline: "group/tab inline-flex flex-col items-stretch gap-2 text-14",
-      },
-    },
-  },
-);
-
-// The label box inside an `underline` tab. Carries the interaction states
-// (hover/selected backgrounds + text color); the surrounding column owns the
-// layout and the bar track. `contained` renders its label inline, so this is
-// only used for `underline`.
-const underlineLabelVariants = cva(
-  "flex h-7 items-center justify-center gap-1.5 rounded-md px-2 py-0.5 text-tertiary transition-colors group-hover/tab:bg-layer-transparent-hover group-hover/tab:text-secondary group-data-active/tab:bg-layer-transparent-selected group-data-active/tab:text-primary",
-);
-
-// The 3px bar track under an `underline` tab. The track is inset `px-2` (8px)
-// from the tab box so the bar hugs the label rather than bleeding under the
-// horizontal padding, matching Figma `1162:321`. The bar uses `bg-current` with
-// transparent text by default and `text-icon-placeholder` on hover, so the
-// hover affordance is a gray bar. The active bar is drawn by `TabsIndicator`
-// (primary), so the active tab's own bar stays transparent to avoid doubling.
-const underlineBarTrackVariants = cva("flex px-2");
-const underlineBarVariants = cva(
-  "h-[3px] w-full rounded-full bg-current text-transparent transition-colors group-hover/tab:text-icon-placeholder group-data-active/tab:text-transparent",
-);
-
-// The leading-icon box. Sized to 16px (`Icon`) and tinted via `currentColor`,
-// matching the Figma `placeholder` slot present on both variants.
-const tabIconVariants = cva(
-  "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-full",
-);
-
-export type TabProps = Omit<
-  React.ComponentProps<typeof BaseTabs.Tab>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Optional leading icon (e.g. a lucide icon), sized to 16px and tinted to the tab's text color.
-   * Named `leadingIcon` (not `icon`) to match Button/Input and leave room for a future
-   * `trailingIcon`.
-   */
-  leadingIcon?: React.ReactNode;
-};
-
-/** A single tab button. `value` ties it to the `TabsPanel` of the same `value`. */
-export function Tab({ leadingIcon, children, ...props }: TabProps) {
-  const variant = React.useContext(TabsVariantContext);
-  const iconNode = leadingIcon ? (
-    <span aria-hidden className={tabIconVariants()}>
-      {leadingIcon}
-    </span>
-  ) : null;
-  if (variant === "underline") {
-    return (
-      <BaseTabs.Tab className={tabVariants({ variant })} {...props}>
-        <span className={underlineLabelVariants()}>
-          {iconNode}
-          {children}
-        </span>
-        <span className={underlineBarTrackVariants()}>
-          <span aria-hidden className={underlineBarVariants()} />
-        </span>
-      </BaseTabs.Tab>
-    );
-  }
-  return (
-    <BaseTabs.Tab className={tabVariants({ variant })} {...props}>
-      {iconNode}
-      {children}
-    </BaseTabs.Tab>
-  );
-}
-
-const tabsPanelVariants = cva("text-14 text-secondary outline-none");
-
-export type TabsPanelProps = Omit<
-  React.ComponentProps<typeof BaseTabs.Panel>,
-  "className" | "render" | "style"
->;
-
-/** Content shown when the `Tab` of the matching `value` is active. */
-export function TabsPanel(props: TabsPanelProps) {
-  return <BaseTabs.Panel className={tabsPanelVariants()} {...props} />;
-}
-
-// The active underline bar. Per Figma `1162:321` the bar sits 8px below the
-// 28px label box, so its `top` is pinned to `--active-tab-top + 28px label +
-// 8px gap` (`+ 1.75rem + 0.5rem`). The horizontal placement uses Base UI's
-// JS-measured `--active-tab-left` / `--active-tab-width` (the documented RTL
-// exception, kept physical) and is inset `px-2` (8px / 0.5rem each side) to
-// match the per-tab bar track: left = tab-left + 8px, width = tab-width - 16px.
-// The bar is 3px tall, fully rounded, `bg-inverse` (neutral-1200 =
-// icon/primary) to match the active-tab text.
-const tabsIndicatorVariants = cva(
-  cx(
-    "absolute top-[calc(var(--active-tab-top)+1.75rem+0.5rem)] left-[calc(var(--active-tab-left)+0.5rem)] h-[3px] w-[calc(var(--active-tab-width)-1rem)]",
-    "rounded-full bg-inverse transition-all duration-150",
-  ),
-);
-
-export type TabsIndicatorProps = Omit<
-  React.ComponentProps<typeof BaseTabs.Indicator>,
-  "className" | "render" | "style"
->;
-
-/**
- * The underline bar. Surfaced for callers composing a custom list; the built-in `TabsList` already
- * renders it for the `underline` variant.
- */
-export function TabsIndicator(props: TabsIndicatorProps) {
-  return <BaseTabs.Indicator className={tabsIndicatorVariants()} {...props} />;
-}
+export { Tab, type TabProps } from "./tab";
+export { TabsList, type TabsListProps } from "./tabs-list";
+// Re-export the atomic structural parts so a full tab set is importable from this convenience.
+export {
+  Tabs,
+  TabsIndicator,
+  type TabsIndicatorProps,
+  TabsPanel,
+  type TabsPanelProps,
+  type TabsProps,
+  type TabsVariant,
+} from "../../ui/tabs";
diff --git a/packages/propel/src/components/tabs/tab.tsx b/packages/propel/src/components/tabs/tab.tsx
new file mode 100644
index 0000000..0042146
--- /dev/null
+++ b/packages/propel/src/components/tabs/tab.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  Tab as TabRoot,
+  type TabProps as TabRootProps,
+  TabUnderlineBar,
+  TabUnderlineLabel,
+} from "../../ui/tabs";
+import { TabsVariantContext } from "../../ui/tabs/tabs-context";
+
+export type TabProps = TabRootProps & {
+  /**
+   * Node rendered before the label (inline-start). Sized to the tab's `--node-size` (16px) and
+   * tinted to the tab's text color. Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+};
+
+/**
+ * The ready-made tab button: composes the atomic `Tab` and lays out an optional `inlineStartNode`
+ * with the label. The `underline` variant additionally renders the sliding bar track beneath the
+ * label.
+ */
+export function Tab({ inlineStartNode, children, ...props }: TabProps) {
+  const variant = React.useContext(TabsVariantContext);
+  const iconNode = inlineStartNode ? (
+    <NodeSlot aria-hidden className="[--node-size:1rem]">
+      {inlineStartNode}
+    </NodeSlot>
+  ) : null;
+
+  if (variant === "underline") {
+    return (
+      <TabRoot {...props}>
+        <TabUnderlineLabel>
+          {iconNode}
+          {children}
+        </TabUnderlineLabel>
+        <TabUnderlineBar />
+      </TabRoot>
+    );
+  }
+
+  return (
+    <TabRoot {...props}>
+      {iconNode}
+      {children}
+    </TabRoot>
+  );
+}
diff --git a/packages/propel/src/components/tabs/tabs-list.tsx b/packages/propel/src/components/tabs/tabs-list.tsx
new file mode 100644
index 0000000..cd4de5a
--- /dev/null
+++ b/packages/propel/src/components/tabs/tabs-list.tsx
@@ -0,0 +1,25 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import * as React from "react";
+
+import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
+import { TabsList as TabsListRoot, type TabsListProps as TabsListRootProps } from "../../ui/tabs";
+
+export type TabsListProps = TabsListRootProps;
+
+/**
+ * The ready-made tab strip: composes the atomic `TabsList` inside a Base UI `ScrollArea` so a long
+ * row of tabs scrolls horizontally with propel's overlay scrollbar. The atomic `TabsList` renders
+ * as the scroll viewport.
+ */
+export function TabsList({ children, ...props }: TabsListProps) {
+  return (
+    <BaseScrollArea.Root className="relative max-w-full">
+      <TabsListRoot render={<BaseScrollArea.Viewport />} {...props}>
+        {children}
+      </TabsListRoot>
+      <BaseScrollArea.Scrollbar orientation="horizontal" className={scrollbarClass}>
+        <BaseScrollArea.Thumb className={scrollbarThumbClass} />
+      </BaseScrollArea.Scrollbar>
+    </BaseScrollArea.Root>
+  );
+}
diff --git a/packages/propel/src/components/tabs/tabs.stories.tsx b/packages/propel/src/components/tabs/tabs.stories.tsx
index 78bbc83..29e2cec 100644
--- a/packages/propel/src/components/tabs/tabs.stories.tsx
+++ b/packages/propel/src/components/tabs/tabs.stories.tsx
@@ -31,7 +31,7 @@ function TabsFixture({
     <Tabs {...props}>
       <TabsList>
         {TAB_ITEMS.map((t) => (
-          <Tab key={t.value} value={t.value} leadingIcon={withIcons ? t.icon : undefined}>
+          <Tab key={t.value} value={t.value} inlineStartNode={withIcons ? t.icon : undefined}>
             {t.label}
           </Tab>
         ))}
@@ -76,13 +76,13 @@ export const Underline: Story = {
   render: (args) => <TabsFixture {...args} />,
 };
 
-/** Both variants accept an optional `leadingIcon` (a 16px slot tinted to the tab's text color). */
+/** Both variants accept an optional `inlineStartNode` (a 16px slot tinted to the tab's text color). */
 export const WithIcons: Story = {
   args: { variant: "contained" },
   render: (args) => <TabsFixture {...args} withIcons />,
 };
 
-/** The `leadingIcon` slot on the underline variant. */
+/** The `inlineStartNode` slot on the underline variant. */
 export const UnderlineWithIcons: Story = {
   args: { variant: "underline" },
   render: (args) => <TabsFixture {...args} withIcons />,
diff --git a/packages/propel/src/components/text-area/index.tsx b/packages/propel/src/components/text-area/index.tsx
new file mode 100644
index 0000000..0447e70
--- /dev/null
+++ b/packages/propel/src/components/text-area/index.tsx
@@ -0,0 +1,6 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/text-area` only
+// when you need the lower-level parts.
+export * from "../../ui/text-area";
+// Re-export the field-box surface helper so a consumer (or the components-tier story)
+// can frame a bare `TextArea` without dropping to `ui/field`.
+export { textAreaFieldBoxVariants } from "../../ui/field/variants";
diff --git a/packages/propel/src/components/text-area/text-area.stories.tsx b/packages/propel/src/components/text-area/text-area.stories.tsx
new file mode 100644
index 0000000..51f17ca
--- /dev/null
+++ b/packages/propel/src/components/text-area/text-area.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import { Field, FieldError, FieldLabel } from "../field/index";
+import { TextArea, textAreaFieldBoxVariants } from "./index";
+
+const meta = {
+  title: "Components/TextArea",
+  component: TextArea,
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function TextAreaSurface({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-80">
+      <div className={textAreaFieldBoxVariants({ tone: "neutral" })}>{children}</div>
+    </div>
+  );
+}
+
+/** Styled textarea leaf. It uses the internal Base UI-backed textarea primitive for Field wiring. */
+export const Default: Story = {
+  args: {
+    magnitude: "md",
+    surface: "field",
+    "aria-label": "Comment",
+    placeholder: "Leave a comment...",
+    rows: 4,
+  },
+  render: (args) => (
+    <TextAreaSurface>
+      <TextArea {...args} />
+    </TextAreaSurface>
+  ),
+};
+
+export const FieldComposition: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md", surface: "field", rows: 3 },
+  render: (args) => (
+    <Field name="comment">
+      <FieldLabel magnitude="md">Comment</FieldLabel>
+      <TextAreaSurface>
+        <TextArea {...args} placeholder="Leave a comment..." />
+      </TextAreaSurface>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    await userEvent.type(textarea, "Looks good");
+    await expect(textarea).toHaveAttribute("name", "comment");
+    await expect(textarea).toHaveValue("Looks good");
+  },
+};
+
+export const FieldErrorAssociation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md", surface: "field", rows: 3 },
+  render: (args) => (
+    <Field name="comment" invalid>
+      <FieldLabel magnitude="md">Comment</FieldLabel>
+      <TextAreaSurface>
+        <TextArea {...args} defaultValue="No" />
+      </TextAreaSurface>
+      <FieldError magnitude="md" match={true}>
+        Add a little more detail.
+      </FieldError>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByRole("textbox", { name: "Comment" });
+    await expect(textarea).toHaveAttribute("aria-invalid", "true");
+    await expect(textarea).toHaveAccessibleDescription("Add a little more detail.");
+  },
+};
diff --git a/packages/propel/src/components/toast/index.tsx b/packages/propel/src/components/toast/index.tsx
index 3c53116..487cd6a 100644
--- a/packages/propel/src/components/toast/index.tsx
+++ b/packages/propel/src/components/toast/index.tsx
@@ -1,292 +1,34 @@
-import { Toast as BaseToast } from "@base-ui/react/toast";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-import * as React from "react";
-
-import { surfaceVariants } from "../../internal/surface";
-import { Progress } from "../progress/index";
-
-// Solid status icons. Figma's toast (node 1144-3158) uses *filled* status glyphs —
-// a tone-colored disc/triangle with the symbol knocked out of it — not lucide's
-// stroke-based outlines. lucide-react ships no filled equivalents (every status
-// icon is outline-only), so these are hand-authored on the same 24×24 grid lucide
-// uses. The shape fills with `currentColor` (set per-tone via `text-icon-*`) and
-// the inner symbol is a true cut-out (even-odd fill rule), so it shows the card
-// surface behind it — reading as white on light, dark on dark, with no hardcoded
-// color. Signature matches lucide so the rest of the component is unchanged.
-type StatusIconProps = React.SVGProps<SVGSVGElement>;
-
-function SolidIcon({ children, ...props }: StatusIconProps) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      {children}
-    </svg>
-  );
-}
-
-// Filled disc + white check (cut-out).
-function SolidCircleCheck(props: StatusIconProps) {
-  return (
-    <SolidIcon {...props}>
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm4.768 7.64a1 1 0 0 0-1.536-1.28l-4.3 5.159-2.225-2.226a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.475-.067l5-6Z" />
-    </SolidIcon>
-  );
-}
-
-// Filled disc + white cross (cut-out).
-function SolidCircleX(props: StatusIconProps) {
-  return (
-    <SolidIcon {...props}>
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm3.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293Z" />
-    </SolidIcon>
-  );
-}
-
-// Filled disc + white "i" (cut-out dot + stem).
-function SolidInfo(props: StatusIconProps) {
-  return (
-    <SolidIcon {...props}>
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 5a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 12 7Zm1 4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0v-5Z" />
-    </SolidIcon>
-  );
-}
-
-// Filled rounded triangle + white "!" (cut-out stem + dot).
-function SolidTriangleAlert(props: StatusIconProps) {
-  return (
-    <SolidIcon {...props}>
-      <path d="M10.23 3.16a2.06 2.06 0 0 1 3.54 0l8.02 13.78A2.06 2.06 0 0 1 20.02 20H3.98a2.06 2.06 0 0 1-1.77-3.06L10.23 3.16ZM13 9a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0V9Zm-1 6.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z" />
-    </SolidIcon>
-  );
-}
-
-// Filled disc + white "!" (cut-out stem + dot) — neutral fallback.
-function SolidCircleAlert(props: StatusIconProps) {
-  return (
-    <SolidIcon {...props}>
-      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 5a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0V7Zm-1 8.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z" />
-    </SolidIcon>
-  );
-}
-
-type StatusIcon = (props: StatusIconProps) => React.JSX.Element;
-
-// Re-export Base UI's toast manager hook + global manager factory so consumers can
-// queue toasts from anywhere (a button handler, a global store, outside React).
-// `useToast` is the idiomatic name for the in-component hook.
-export const createToastManager = BaseToast.createToastManager;
-export const useToast = BaseToast.useToastManager;
-
-// The semantic intent of a toast (Figma "Property 1": Default / Variant2 / Variant3
-// = success / danger / info). `warning` and `neutral` round out the standard set.
-// Each tone auto-selects a filled status icon and its color token — the caller never
-// passes an icon. `tone` is required and lives in the toast's `data` payload (see `ToastData`).
-const STATUS_ICON: Record<ToastTone, StatusIcon> = {
-  success: SolidCircleCheck,
-  danger: SolidCircleX,
-  info: SolidInfo,
-  warning: SolidTriangleAlert,
-  neutral: SolidCircleAlert,
-};
-
-// Status-icon color per tone, straight from propel's `icon/*` tokens. The icon is
-// the only tone-colored element; surface/border/text stay neutral, matching Figma.
-const statusIconVariants = cva("size-4 shrink-0", {
-  variants: {
-    tone: {
-      success: "text-icon-success-primary",
-      danger: "text-icon-danger-primary",
-      info: "text-icon-info-primary",
-      warning: "text-icon-warning-primary",
-      neutral: "text-icon-tertiary",
-    },
-  },
-});
-
-export type ToastTone = NonNullable<VariantProps<typeof statusIconVariants>["tone"]>;
-
-/**
- * A single action button rendered inside a toast. The toast is a portaled, auto-dismissing surface
- * with no `className`/`style` escape hatch, so an action is declared as data (label + handler)
- * rather than arbitrary markup — keeping the styling on-token and the API closed.
- */
-export type ToastAction = {
-  /** Visible button text — also its accessible name. */
-  label: string;
-  /** Invoked on click (and Enter/Space, since it's a real `<button>`). */
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-/**
- * Custom data carried on every toast queued through this component. `add({ ... data: { tone } })`
- * selects the status icon + color; `tone` is required so the caller always chooses the intent
- * explicitly. Action buttons are optional and map directly to Figma's toast `button`/`button2`
- * booleans (node 1146-61689): `actions` is the left cluster of 1–2 buttons, `primaryAction` is the
- * right-aligned button shown on the success treatment.
- */
-export type ToastData = {
-  /** Semantic intent — drives the status icon and its color. */
-  tone: ToastTone;
-  /**
-   * Completion (0–100) of a long-running task the toast is reporting. When set, a thin `Progress`
-   * bar with a `%` label renders between the description and the action row (Figma node
-   * 1146-61689). Omit it for a plain toast.
-   */
-  progress?: number;
-  /**
-   * Left-aligned action cluster (Figma's `button` / `button2`). One or two buttons; extras beyond
-   * two are ignored to stay faithful to the design.
-   */
-  actions?: ToastAction[];
-  /**
-   * Optional right-aligned action, rendered whenever it's provided (the component doesn't restrict
-   * it by tone). In Figma it appears on the success treatment. Wired through Base UI's
-   * `Toast.Action` so it takes part in the toast's focus management.
-   */
-  primaryAction?: ToastAction;
-};
-
-// Shared action-button styling, straight from Figma's "Buttons" sub-frame: a 24px-tall
-// pill with a 40px min width, `md` radius, 13px medium secondary text, transparent
-// background that fills on hover. Used for both the left cluster and the right action.
-const actionButtonClassName = cx(
-  "inline-flex h-6 min-w-10 shrink-0 items-center justify-center gap-1 rounded-md px-2",
-  "text-13 font-medium text-secondary outline-none",
-  "bg-layer-transparent transition-colors hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
-  "focus-visible:ring-2 focus-visible:ring-accent-strong",
-);
-
-export type ToastProviderProps = Omit<
-  React.ComponentProps<typeof BaseToast.Provider>,
-  "className" | "render" | "style"
->;
-
-/**
- * Wraps the app and renders the toast viewport. Mount it once near the root, then queue toasts with
- * `useToast().add({ title, description, data: { tone } })`. Bundles Base UI's `Toast.Provider`
- * (manager + context), a fixed-position `Viewport`, and a styled `Toast` for every queued item — so
- * consumers only manage content, never layout.
- */
-export function ToastProvider({ children, ...props }: ToastProviderProps) {
-  return (
-    <BaseToast.Provider {...props}>
-      {children}
-      <BaseToast.Portal>
-        <BaseToast.Viewport className="fixed end-4 bottom-4 z-50 flex w-[340px] max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-lg outline-none focus-visible:outline-md focus-visible:outline-offset-2 focus-visible:outline-accent-strong">
-          <ToastList />
-        </BaseToast.Viewport>
-      </BaseToast.Portal>
-    </BaseToast.Provider>
-  );
-}
-
-// Renders one styled `Toast` per queued item. Base UI keeps the live list; we map it.
-function ToastList() {
-  const { toasts } = useToast<ToastData>();
-  return toasts.map((toast) => <Toast key={toast.id} toast={toast} />);
-}
-
-export type ToastProps = Omit<
-  React.ComponentProps<typeof BaseToast.Root>,
-  "className" | "render" | "style"
->;
-
-/**
- * A single styled toast: status icon (auto-selected from `toast.data.tone`), title, description,
- * optional action buttons (from `toast.data.actions` / `primaryAction`), and a close button.
- * Rendered automatically by `ToastProvider` for each queued toast — you normally don't render this
- * directly.
- */
-export function Toast({ toast, ...props }: ToastProps) {
-  // `tone` is a required field of `ToastData`, supplied when the toast is queued.
-  // We intentionally have NO default tone — fail loud with guidance if it's missing.
-  const data = toast.data as ToastData | undefined;
-  if (data?.tone == null) {
-    throw new Error(
-      'propel Toast requires a `tone` in the toast\'s data payload, e.g. toast.add({ title, data: { tone: "info" } }).',
-    );
-  }
-  const StatusIcon = STATUS_ICON[data.tone];
-  // Action buttons, per Figma (node 1146-61689): a left cluster of up to two buttons
-  // plus an optional right-aligned primary action. The button row only renders when
-  // there's at least one of either, so an action-less toast keeps its tight layout.
-  const leftActions = (data.actions ?? []).slice(0, 2);
-  const primaryAction = data.primaryAction;
-  const hasActionRow = leftActions.length > 0 || primaryAction != null;
-  return (
-    <BaseToast.Root
-      toast={toast}
-      // Surface: the shared floating-card surface (white `surface-1`, subtle
-      // border) with `raised` overlay shadow and `lg` radius. `data-[ending]`
-      // fades the toast on dismiss.
-      className={cx(
-        surfaceVariants({ elevation: "raised", radius: "lg" }),
-        "relative flex w-full items-start gap-2 px-4 py-3",
-        "transition-opacity data-ending:opacity-0",
-      )}
-      {...props}
-    >
-      {/* Status icon sits in a 2px-padded column so it baselines with the title. */}
-      <span className="flex items-center py-0.5">
-        <StatusIcon aria-hidden className={statusIconVariants({ tone: data.tone })} />
-      </span>
-      <div className="flex min-w-0 flex-1 flex-col gap-3">
-        <div className="flex flex-col gap-1">
-          <BaseToast.Title className="text-14 font-medium text-primary" />
-          <BaseToast.Description className="text-13 text-tertiary" />
-        </div>
-        {data.progress != null ? (
-          <Progress
-            variant="linear"
-            value={data.progress}
-            magnitude="sm"
-            aria-label={typeof toast.title === "string" && toast.title ? toast.title : "Progress"}
-          />
-        ) : null}
-        {hasActionRow ? (
-          // The row already sits in the content column (past the icon), so the left
-          // cluster just needs `-ms-2` to pull each button's transparent px-2 pill back
-          // by its own padding — that lines the button label up with the title text
-          // while the hover fill bleeds left. The left cluster grows to fill so the
-          // primary action pins to the inline-end edge. RTL-safe via logical utilities.
-          <div className="flex w-full gap-1.5">
-            <div className="-ms-2 flex min-w-0 flex-1 items-center gap-1.5">
-              {leftActions.map((action, index) => (
-                <button
-                  // Actions are positional and have no stable id; index keys are fine
-                  // for this short, static-per-render list.
-                  key={index}
-                  type="button"
-                  className={actionButtonClassName}
-                  onClick={action.onClick}
-                >
-                  {action.label}
-                </button>
-              ))}
-            </div>
-            {primaryAction ? (
-              // The right-aligned action is wired through Base UI's `Toast.Action` so it
-              // takes part in the toast's focus management.
-              <BaseToast.Action className={actionButtonClassName} onClick={primaryAction.onClick}>
-                {primaryAction.label}
-              </BaseToast.Action>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      <BaseToast.Close
-        aria-label="Dismiss"
-        className="absolute end-1 top-1 inline-flex size-5 items-center justify-center rounded-sm text-icon-tertiary transition-colors hover:bg-layer-transparent-hover"
-      >
-        <X aria-hidden className="size-3.5" />
-      </BaseToast.Close>
-    </BaseToast.Root>
-  );
-}
+export {
+  Toast,
+  type ToastAction,
+  type ToastData,
+  type ToastProps,
+  type ToastTone,
+  createToastManager,
+  useToast,
+} from "./toast";
+export { ToastList } from "./toast-list";
+export { ToastProvider, type ToastProviderProps } from "./toast-provider";
+
+// Re-export the atomic parts + manager hooks so consumers can compose a custom
+// toast from one entry point if the ready-made `Toast` doesn't fit.
+export {
+  Toast as ToastRoot,
+  type ToastProps as ToastRootProps,
+  ToastAction as ToastActionPart,
+  type ToastActionProps,
+  ToastClose,
+  type ToastCloseProps,
+  ToastContent,
+  type ToastContentProps,
+  ToastDescription,
+  type ToastDescriptionProps,
+  ToastPortal,
+  ToastProvider as ToastProviderRoot,
+  type ToastProviderProps as ToastProviderRootProps,
+  ToastTitle,
+  type ToastTitleProps,
+  ToastViewport,
+  type ToastViewportProps,
+  useToastManager,
+} from "../../ui/toast/index";
diff --git a/packages/propel/src/components/toast/toast-list.tsx b/packages/propel/src/components/toast/toast-list.tsx
new file mode 100644
index 0000000..5cc64a8
--- /dev/null
+++ b/packages/propel/src/components/toast/toast-list.tsx
@@ -0,0 +1,10 @@
+import { Toast, type ToastData, useToast } from "./toast";
+
+/**
+ * Renders one styled {@link Toast} per queued toast from the manager. Mounted inside
+ * {@link ToastProvider}'s viewport — you normally don't render this directly.
+ */
+export function ToastList() {
+  const { toasts } = useToast<ToastData>();
+  return toasts.map((toast) => <Toast key={toast.id} toast={toast} />);
+}
diff --git a/packages/propel/src/components/toast/toast-provider.tsx b/packages/propel/src/components/toast/toast-provider.tsx
new file mode 100644
index 0000000..18317cc
--- /dev/null
+++ b/packages/propel/src/components/toast/toast-provider.tsx
@@ -0,0 +1,37 @@
+import type { Toast as BaseToast } from "@base-ui/react/toast";
+import type { ToastManager } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import {
+  ToastPortal,
+  ToastProvider as ToastProviderRoot,
+  ToastViewport,
+} from "../../ui/toast/index";
+import type { ToastData } from "./toast";
+import { ToastList } from "./toast-list";
+
+export type ToastProviderProps = Omit<
+  React.ComponentProps<typeof BaseToast.Provider>,
+  "className" | "style" | "toastManager"
+> & {
+  /** Optional external manager. Must queue Propel `ToastData` so every toast has a `tone`. */
+  toastManager?: ToastManager<ToastData>;
+};
+
+/**
+ * Wraps the app and renders the toast viewport. Mount it once near the root, then queue toasts with
+ * `useToast().add({ title, description, data: { tone } })`. Composes the atomic `ui/toast` parts
+ * (Provider + Portal + Viewport) and the manager-driven {@link ToastList}.
+ */
+export function ToastProvider({ children, ...props }: ToastProviderProps) {
+  return (
+    <ToastProviderRoot {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProviderRoot>
+  );
+}
diff --git a/packages/propel/src/components/toast/toast.stories.tsx b/packages/propel/src/components/toast/toast.stories.tsx
index 7f3e876..4760525 100644
--- a/packages/propel/src/components/toast/toast.stories.tsx
+++ b/packages/propel/src/components/toast/toast.stories.tsx
@@ -1,7 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
 import { expect, fn, waitFor, within } from "storybook/test";
 
-import { type ToastData, type ToastTone, ToastProvider, useToast } from "./index";
+import {
+  Toast,
+  type ToastData,
+  type ToastProps,
+  type ToastTone,
+  ToastProvider,
+  useToast,
+} from "./index";
 
 const TONES: ToastTone[] = ["success", "danger", "info", "warning", "neutral"];
 
@@ -15,11 +23,15 @@ const actionSpies = { onPrimary: fn(), onLeft: fn() };
 function Trigger({
   tone,
   label,
+  title = "Toast title",
+  description = "Description of the toast alert",
   data,
   onAdd,
 }: {
   tone: ToastTone;
   label?: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
   data?: Omit<ToastData, "tone">;
   onAdd?: () => void;
 }) {
@@ -30,8 +42,8 @@ function Trigger({
       className="inline-flex h-8 items-center rounded-md border-sm border-subtle-1 bg-layer-2 px-3 text-13 font-medium text-secondary"
       onClick={() => {
         add({
-          title: "Toast title",
-          description: "Description of the toast alert",
+          title,
+          description,
           data: { tone, ...data },
         });
         onAdd?.();
@@ -42,6 +54,25 @@ function Trigger({
   );
 }
 
+class ToastErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { message: string | null }
+> {
+  state = { message: null };
+
+  static getDerivedStateFromError(error: unknown) {
+    return { message: error instanceof Error ? error.message : String(error) };
+  }
+
+  render() {
+    if (this.state.message) {
+      return <div role="alert">{this.state.message}</div>;
+    }
+
+    return this.props.children;
+  }
+}
+
 const meta = {
   title: "Components/Toast",
   component: ToastProvider,
@@ -145,6 +176,75 @@ export const ProgressInteraction: Story = {
   },
 };
 
+/**
+ * Coverage-focused tone test: queue every supported tone in one story so each status icon function
+ * renders at least once. Hidden from docs/sidebar/manifest because Tones is the public showcase.
+ */
+export const ToneIconsInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      {TONES.map((tone) => (
+        <Trigger key={tone} tone={tone} />
+      ))}
+    </div>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const body = within(document.body);
+
+    for (const button of canvas.getAllByRole("button", { name: /show .* toast/i })) {
+      await userEvent.click(button);
+    }
+
+    await waitFor(async () => {
+      await expect(await body.findAllByRole("dialog", { name: "Toast title" })).toHaveLength(
+        TONES.length,
+      );
+    });
+  },
+};
+
+/**
+ * Accessibility fallback for progress: when a toast has no usable string title, the progressbar
+ * keeps a stable accessible name instead of becoming unnamed.
+ */
+export const ProgressFallbackName: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Trigger
+      tone="info"
+      label="Show unnamed progress toast"
+      title={<span>Progress task</span>}
+      data={{ progress: 64 }}
+    />
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: /show unnamed progress toast/i }));
+
+    const progressbar = await within(document.body).findByRole("progressbar", {
+      name: "Progress",
+    });
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "64");
+  },
+};
+
+/**
+ * Invalid toast data should fail loudly with guidance. The boundary makes that user-facing failure
+ * testable without weakening the production component's strict `tone` requirement.
+ */
+export const MissingToneThrows: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  decorators: [(Story) => <Story />],
+  render: () => (
+    <ToastErrorBoundary>
+      <Toast toast={{ id: "missing-tone", title: "Missing tone" } as ToastProps["toast"]} />
+    </ToastErrorBoundary>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("alert")).toHaveTextContent("propel Toast requires");
+  },
+};
+
 /**
  * Two left-aligned actions (Figma's `button` + `button2` on the danger/info/warning treatments).
  * The cluster sits inline-start; there is no right-aligned button.
diff --git a/packages/propel/src/components/toast/toast.tsx b/packages/propel/src/components/toast/toast.tsx
new file mode 100644
index 0000000..1e19773
--- /dev/null
+++ b/packages/propel/src/components/toast/toast.tsx
@@ -0,0 +1,153 @@
+import type { Toast as BaseToast } from "@base-ui/react/toast";
+import { X } from "lucide-react";
+
+import {
+  Toast as ToastRoot,
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastStatusIcon,
+  type ToastTone,
+  ToastTitle,
+  createToastManager as createBaseToastManager,
+  useToastManager,
+} from "../../ui/toast/index";
+import { Progress } from "../progress/index";
+
+// The semantic intent of a toast (Figma "Property 1": Default / Variant2 / Variant3
+// = success / danger / info). `warning` and `neutral` round out the standard set.
+// Each tone auto-selects a filled status icon and its color token (see `ToastStatusIcon`) —
+// the caller never passes an icon. `tone` is required and lives in the toast's `data`
+// payload (see `ToastData`).
+export type { ToastTone };
+
+/**
+ * A single action button rendered inside a toast. The toast is a portaled, auto-dismissing surface
+ * with no `className`/`style` escape hatch, so an action is declared as data (label + handler)
+ * rather than arbitrary markup — keeping the styling on-token and the API closed.
+ */
+export type ToastAction = {
+  /** Visible button text — also its accessible name. */
+  label: string;
+  /** Invoked on click (and Enter/Space, since it's a real `<button>`). */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+/**
+ * Custom data carried on every toast queued through this component. `add({ ... data: { tone } })`
+ * selects the status icon + color; `tone` is required so the caller always chooses the intent
+ * explicitly. Action buttons are optional and map directly to Figma's toast `button`/`button2`
+ * booleans (node 1146-61689): `actions` is the left cluster of 1–2 buttons, `primaryAction` is the
+ * right-aligned button shown on the success treatment.
+ */
+export type ToastData = {
+  /** Semantic intent — drives the status icon and its color. */
+  tone: ToastTone;
+  /**
+   * Completion (0–100) of a long-running task the toast is reporting. When set, a thin `Progress`
+   * bar with a `%` label renders between the description and the action row (Figma node
+   * 1146-61689). Omit it for a plain toast.
+   */
+  progress?: number;
+  /**
+   * Left-aligned action cluster (Figma's `button` / `button2`). One or two buttons; extras beyond
+   * two are ignored to stay faithful to the design.
+   */
+  actions?: ToastAction[];
+  /**
+   * Optional right-aligned action, rendered whenever it's provided (the component doesn't restrict
+   * it by tone). In Figma it appears on the success treatment. Wired through Base UI's
+   * `Toast.Action` so it takes part in the toast's focus management.
+   */
+  primaryAction?: ToastAction;
+};
+
+// Re-export Base UI's toast manager hook + global manager factory with Propel's
+// `ToastData` as the default payload. Consumers can still pass a narrower extension
+// type, but the default path requires the `tone` data this renderer needs.
+export function createToastManager<Data extends ToastData = ToastData>() {
+  return createBaseToastManager<Data>();
+}
+
+export function useToast<Data extends ToastData = ToastData>() {
+  return useToastManager<Data>();
+}
+
+export type ToastProps = Omit<React.ComponentProps<typeof BaseToast.Root>, "className" | "style">;
+
+/**
+ * A single styled toast: status icon (auto-selected from `toast.data.tone`), title, description,
+ * optional action buttons (from `toast.data.actions` / `primaryAction`), and a close button.
+ * Rendered automatically by `ToastProvider` for each queued toast — you normally don't render this
+ * directly.
+ */
+export function Toast({ toast, ...props }: ToastProps) {
+  // `tone` is a required field of `ToastData`, supplied when the toast is queued.
+  // We intentionally have NO default tone — fail loud with guidance if it's missing.
+  const data = toast.data as ToastData | undefined;
+  if (data?.tone == null) {
+    throw new Error(
+      'propel Toast requires a `tone` in the toast\'s data payload, e.g. toast.add({ title, data: { tone: "info" } }).',
+    );
+  }
+  // Action buttons, per Figma (node 1146-61689): a left cluster of up to two buttons
+  // plus an optional right-aligned primary action. The button row only renders when
+  // there's at least one of either, so an action-less toast keeps its tight layout.
+  const leftActions = (data.actions ?? []).slice(0, 2);
+  const primaryAction = data.primaryAction;
+  const hasActionRow = leftActions.length > 0 || primaryAction != null;
+  return (
+    <ToastRoot toast={toast} {...props}>
+      {/* Status icon sits in a 2px-padded column so it baselines with the title. */}
+      <span className="flex items-center py-0.5">
+        <ToastStatusIcon tone={data.tone} />
+      </span>
+      <ToastContent>
+        <div className="flex flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        {data.progress != null ? (
+          <Progress
+            variant="linear"
+            value={data.progress}
+            magnitude="sm"
+            aria-label={typeof toast.title === "string" && toast.title ? toast.title : "Progress"}
+          />
+        ) : null}
+        {hasActionRow ? (
+          // The row already sits in the content column (past the icon), so the left
+          // cluster just needs `-ms-2` to pull each button's transparent px-2 pill back
+          // by its own padding — that lines the button label up with the title text
+          // while the hover fill bleeds left. The left cluster grows to fill so the
+          // primary action pins to the inline-end edge. RTL-safe via logical utilities.
+          <div className="flex w-full gap-1.5">
+            <div className="-ms-2 flex min-w-0 flex-1 items-center gap-1.5">
+              {leftActions.map((action, index) => (
+                <button
+                  // Actions are positional and have no stable id; index keys are fine
+                  // for this short, static-per-render list.
+                  key={index}
+                  type="button"
+                  className="inline-flex h-6 min-w-10 shrink-0 items-center justify-center gap-1 rounded-md bg-layer-transparent px-2 text-13 font-medium text-secondary transition-colors outline-none hover:bg-layer-transparent-hover focus-visible:ring-2 focus-visible:ring-accent-strong active:bg-layer-transparent-active"
+                  onClick={action.onClick}
+                >
+                  {action.label}
+                </button>
+              ))}
+            </div>
+            {primaryAction ? (
+              // The right-aligned action is wired through Base UI's `Toast.Action` so it
+              // takes part in the toast's focus management.
+              <ToastAction onClick={primaryAction.onClick}>{primaryAction.label}</ToastAction>
+            ) : null}
+          </div>
+        ) : null}
+      </ToastContent>
+      <ToastClose aria-label="Dismiss">
+        <X aria-hidden className="size-3.5" />
+      </ToastClose>
+    </ToastRoot>
+  );
+}
diff --git a/packages/propel/src/components/toggle-group/index.tsx b/packages/propel/src/components/toggle-group/index.tsx
new file mode 100644
index 0000000..59397e8
--- /dev/null
+++ b/packages/propel/src/components/toggle-group/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/toggle-group` only
+// when you need the lower-level parts.
+export * from "../../ui/toggle-group";
diff --git a/packages/propel/src/components/toggle-group/toggle-group.stories.tsx b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
new file mode 100644
index 0000000..1e99207
--- /dev/null
+++ b/packages/propel/src/components/toggle-group/toggle-group.stories.tsx
@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { List, ListOrdered } from "lucide-react";
+import { expect, fn } from "storybook/test";
+
+import { Toggle } from "../toggle/index";
+import { ToggleGroup } from "./index";
+
+// Components-tier story: the ready-made `ToggleGroup` (a 1:1 re-export of the ui
+// primitive) holding ready-made `Toggle` items. The group sizes each toggle via
+// `magnitude` and tracks selection. The UI-tier story documents the same parts.
+const meta = {
+  title: "Components/ToggleGroup",
+  component: ToggleGroup,
+  subcomponents: { Toggle },
+  args: { magnitude: "md" },
+  parameters: {
+    a11y: {
+      // Base UI's ToggleGroup renders `role="group"` with `aria-orientation`, which axe's
+      // aria-allowed-attr flags because `aria-orientation` isn't in the allowed attribute
+      // set for `role="group"`. This is Base UI's intended roving-focus markup, not invalid
+      // intent, so suppress just this rule (mirrors the menu.stories aria-required-children
+      // precedent).
+      config: { rules: [{ id: "aria-allowed-attr", enabled: false }] },
+    },
+  },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single-select group; selecting one clears the other. */
+export const Default: Story = {
+  args: { magnitude: "md", defaultValue: ["bulleted"], onValueChange: fn() },
+  render: (args) => (
+    <ToggleGroup {...args} aria-label="List style">
+      <Toggle value="bulleted" aria-label="Bulleted list">
+        <List aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle value="numbered" aria-label="Numbered list">
+        <ListOrdered aria-hidden className="size-(--node-size)" />
+      </Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({ canvas, userEvent, args }) => {
+    const bulleted = canvas.getByRole("button", { name: "Bulleted list" });
+    const numbered = canvas.getByRole("button", { name: "Numbered list" });
+    await expect(bulleted).toHaveAttribute("aria-pressed", "true");
+
+    await userEvent.click(numbered);
+    await expect(numbered).toHaveAttribute("aria-pressed", "true");
+    await expect(bulleted).toHaveAttribute("aria-pressed", "false");
+    await expect(args.onValueChange).toHaveBeenCalled();
+  },
+};
diff --git a/packages/propel/src/components/toggle/index.tsx b/packages/propel/src/components/toggle/index.tsx
new file mode 100644
index 0000000..b73dd0f
--- /dev/null
+++ b/packages/propel/src/components/toggle/index.tsx
@@ -0,0 +1,3 @@
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/toggle` only
+// when you need the lower-level parts.
+export * from "../../ui/toggle";
diff --git a/packages/propel/src/components/toggle/toggle.stories.tsx b/packages/propel/src/components/toggle/toggle.stories.tsx
new file mode 100644
index 0000000..57a62e8
--- /dev/null
+++ b/packages/propel/src/components/toggle/toggle.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Star } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Toggle } from "./index";
+
+// Components-tier story: the ready-made `Toggle` (a 1:1 re-export of the ui primitive) —
+// a two-state icon button. The UI-tier story documents the same primitive's parts and
+// magnitudes.
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  args: { magnitude: "md", "aria-label": "Favorite" },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A toggle wrapping an icon; click flips pressed. */
+export const Default: Story = {
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Toggle {...args}>
+      <Star aria-hidden className="size-(--node-size)" />
+    </Toggle>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const toggle = canvas.getByRole("button", { name: "Favorite" });
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+  },
+};
+
+/** Start pressed via `defaultPressed`; disabled does not toggle. */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Toggle magnitude="md" aria-label="Off">
+        <Star aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle magnitude="md" defaultPressed aria-label="On">
+        <Star aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle magnitude="md" disabled aria-label="Disabled">
+        <Star aria-hidden className="size-(--node-size)" />
+      </Toggle>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/components/toolbar/index.tsx b/packages/propel/src/components/toolbar/index.tsx
index 7bce382..60b2df9 100644
--- a/packages/propel/src/components/toolbar/index.tsx
+++ b/packages/propel/src/components/toolbar/index.tsx
@@ -1,297 +1,30 @@
-import { Menu } from "@base-ui/react/menu";
-import { Toggle } from "@base-ui/react/toggle";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
-import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
-
-import { surfaceVariants } from "../../internal/surface";
-import {
-  Dropdown,
-  DropdownContent,
-  type DropdownContentProps,
-  DropdownItem,
-  type DropdownItemProps,
-  type DropdownProps,
-  DropdownSeparator,
-  type DropdownSeparatorProps,
-} from "../dropdown/index";
-
-// A toolbar is described by two orthogonal axes — `elevation` and `density` — named
-// for what they actually express rather than where the toolbar is placed (placement
-// is the consumer's job, not a primitive's). The Figma "Toolbar" component models
-// these as placements (Floater / Pages - Topbar / Comments bottom bar), but those
-// collapse to combinations of the two axes here.
-//
-// `elevation`: whether the toolbar draws its own surface. `raised` is a
-// self-contained card — a white `surface-1` fill with a subtle border, `radius/lg`
-// corners and an `Overlay-100` shadow — so it can hover over content (the Figma
-// floater). `flat` draws no surface and sits flush inside an existing bar (the Figma
-// topbar / bottom-bar, which were visually identical).
-const toolbarVariants = cva("flex w-fit items-center gap-2 p-1.5 text-secondary", {
-  variants: {
-    elevation: {
-      raised: surfaceVariants({ elevation: "raised", radius: "lg" }),
-      flat: "",
-    },
-  },
-});
-
-export type ToolbarElevation = NonNullable<VariantProps<typeof toolbarVariants>["elevation"]>;
-
-// `density`: how tightly the controls pack. `compact` is 24px hit targets (a 14px
-// chevron), `comfortable` is 28px (a 16px chevron). It's shared with the child
-// controls (buttons, toggles, dropdown trigger) through context so they size
-// themselves to match the root. Both axes share the root `p-1.5` (6px) padding and
-// `gap-2` (8px) item gap; clusters inside `ToolbarGroup`/`ToolbarToggleGroup` keep a
-// tight `gap-0.5` (2px).
-export type ToolbarDensity = "compact" | "comfortable";
-
-const ToolbarDensityContext = React.createContext<ToolbarDensity>("compact");
-
-export type ToolbarProps = Omit<
-  React.ComponentProps<typeof BaseToolbar.Root>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Whether the toolbar draws its own surface. `raised` is a self-contained card with a border +
-   * shadow that hovers over content; `flat` draws no surface and sits flush inside an existing bar.
-   * Independent of `density`.
-   */
-  elevation: ToolbarElevation;
-  /**
-   * How tightly the controls pack. `compact` is 24px hit targets, `comfortable` is 28px.
-   * Independent of `elevation`, so a flat bar can still be compact.
-   */
-  density: ToolbarDensity;
-};
-
-/**
- * A row of controls — toggle buttons, button groups, dropdowns — for acting on a selection or
- * document (e.g. a rich-text formatting toolbar). Built on Base UI's `Toolbar`, so arrow keys roam
- * between items as a single tab stop and the root carries `role="toolbar"`. Compose it from
- * `ToolbarGroup`, `ToolbarButton`, `ToolbarToggle`, `ToolbarSeparator` and `ToolbarDropdown`.
- */
-export function Toolbar({ elevation, density, ...props }: ToolbarProps) {
-  return (
-    <ToolbarDensityContext.Provider value={density}>
-      <BaseToolbar.Root className={toolbarVariants({ elevation })} {...props} />
-    </ToolbarDensityContext.Provider>
-  );
-}
-
-export type ToolbarGroupProps = Omit<
-  React.ComponentProps<typeof BaseToolbar.Group>,
-  "className" | "render" | "style"
->;
-
-/**
- * Groups related controls (e.g. bold / italic / underline) so they read as one cluster, with a
- * small gap between them. Disabling the group disables every control inside it.
- */
-export function ToolbarGroup(props: ToolbarGroupProps) {
-  return <BaseToolbar.Group className="flex items-center gap-0.5" {...props} />;
-}
-
-// Shared item styling: a square hit target with the secondary icon color, a
-// transparent default background that fills in on hover/active, and a selected
-// (pressed) background for the "on" state. `data-pressed` is set by Base UI's
-// Toggle; disabled items dim and stop reacting to the pointer. The square size and
-// the icon size follow the toolbar's density — `compact` is 24px with a 14px icon,
-// `comfortable` is 28px with a 16px icon (Figma).
-const itemVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center justify-center rounded-md",
-    "bg-layer-transparent text-icon-secondary outline-none",
-    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "data-pressed:bg-layer-transparent-selected data-pressed:text-icon-accent-primary",
-    "disabled:pointer-events-none disabled:text-icon-disabled",
-    "[&_svg]:shrink-0",
-  ),
-  {
-    variants: {
-      density: {
-        compact: "size-6 [&_svg]:size-3.5",
-        comfortable: "size-7 [&_svg]:size-4",
-      },
-    },
-  },
-);
-
-export type ToolbarButtonProps = Omit<
-  React.ComponentProps<typeof BaseToolbar.Button>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Accessible name for the button. Required because the button's content is an icon (icons are
-   * `aria-hidden`), so the control is still named for assistive tech.
-   */
-  "aria-label": string;
-};
-
-/**
- * A plain action button in the toolbar (e.g. insert link, insert image). Holds an icon and
- * therefore requires an `aria-label`. For an on/off control use `ToolbarToggle` instead.
- */
-export function ToolbarButton(props: ToolbarButtonProps) {
-  const density = React.useContext(ToolbarDensityContext);
-  return <BaseToolbar.Button className={itemVariants({ density })} {...props} />;
-}
-
-export type ToolbarToggleProps = Omit<
-  React.ComponentProps<typeof Toggle>,
-  "className" | "render" | "style"
-> & {
-  /**
-   * Accessible name for the toggle. Required because toggles hold an icon (`aria-hidden`); without
-   * it the control has no accessible name.
-   */
-  "aria-label": string;
-};
-
-/**
- * A two-state (pressed / not-pressed) button for formatting toggles like bold or italic. Renders
- * Base UI's `Toggle` inside a `Toolbar.Button`, so it both reports `aria-pressed` and participates
- * in toolbar keyboard navigation. Use `value` to make it a member of a `ToolbarToggleGroup`.
- */
-export function ToolbarToggle(props: ToolbarToggleProps) {
-  const density = React.useContext(ToolbarDensityContext);
-  return (
-    <BaseToolbar.Button render={<Toggle />} className={itemVariants({ density })} {...props} />
-  );
-}
-
-export type ToolbarToggleGroupProps = Omit<
-  React.ComponentProps<typeof ToggleGroup>,
-  "className" | "render" | "style"
-> & {
-  /** Allow more than one toggle in the group to be pressed at once. */
-  multiple?: boolean;
-};
-
-/**
- * A set of `ToolbarToggle`s that share state — e.g. text-alignment where only one of left / center
- * / right is active at a time. Pass `multiple` to allow several to be pressed simultaneously.
- */
-export function ToolbarToggleGroup(props: ToolbarToggleGroupProps) {
-  return <ToggleGroup className="flex items-center gap-0.5" {...props} />;
-}
-
-export type ToolbarSeparatorProps = Omit<
-  React.ComponentProps<typeof BaseToolbar.Separator>,
-  "className" | "render" | "style"
->;
-
-/**
- * A thin vertical rule that visually divides one cluster of controls from the next (Figma
- * `border/subtle-1`). Decorative; Base UI gives it the right role.
- */
-export function ToolbarSeparator(props: ToolbarSeparatorProps) {
-  return (
-    <BaseToolbar.Separator
-      className="mx-1 h-5 w-0 shrink-0 border-s-sm border-subtle-1"
-      {...props}
-    />
-  );
-}
-
-// The dropdown trigger height and chevron size also follow the toolbar's density:
-// `compact` is a 24px trigger with a 14px chevron, `comfortable` is a 28px trigger
-// with a 16px chevron (Figma).
-const dropdownTriggerVariants = cva(
-  cx(
-    "inline-flex shrink-0 items-center gap-1 rounded-md px-2",
-    "bg-layer-transparent text-13 text-secondary outline-none",
-    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
-    "focus-visible:ring-2 focus-visible:ring-accent-strong",
-    "data-popup-open:bg-layer-transparent-selected",
-    "disabled:pointer-events-none disabled:text-disabled",
-  ),
-  {
-    variants: {
-      density: {
-        compact: "h-6",
-        comfortable: "h-7",
-      },
-    },
-  },
-);
-
-const dropdownChevronVariants = cva("shrink-0 text-icon-secondary", {
-  variants: {
-    density: {
-      compact: "size-3.5",
-      comfortable: "size-4",
-    },
-  },
-});
-
-/**
- * The dropdown menu in a toolbar — the Figma "Text" / "Aa" style pickers. It IS propel's `Dropdown`
- * (Base UI `Menu`), so it composes from parts instead of a closed `items[]` config: a
- * `ToolbarDropdownTrigger` plus a `ToolbarDropdownContent` of `ToolbarDropdownItem`s. That means a
- * toolbar menu can do everything a `Dropdown` can — per-row icons, selected/disabled rows,
- * separators, submenus — and the trigger renders through `Toolbar.Button`, so it stays part of the
- * toolbar's roving keyboard navigation.
- *
- * ```tsx
- * <ToolbarDropdown>
- *   <ToolbarDropdownTrigger aria-label="Text style">Text</ToolbarDropdownTrigger>
- *   <ToolbarDropdownContent>
- *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("h1")}>
- *       Heading 1
- *     </ToolbarDropdownItem>
- *     <ToolbarDropdownItem variant="default" onClick={() => setBlock("p")}>
- *       Paragraph
- *     </ToolbarDropdownItem>
- *   </ToolbarDropdownContent>
- * </ToolbarDropdown>;
- * ```
- */
-export const ToolbarDropdown = Dropdown;
-export type ToolbarDropdownProps = DropdownProps;
-
-export type ToolbarDropdownTriggerProps = Omit<
-  React.ComponentProps<typeof Menu.Trigger>,
-  "className" | "render" | "style"
->;
-
-/**
- * The trigger that opens a `ToolbarDropdown`: a label + chevron. It renders through
- * `Toolbar.Button` (so it keeps the toolbar's roving focus) and `Menu.Trigger` (so it opens the
- * menu), and sizes to the toolbar's density. Pass an `aria-label` when the label isn't descriptive
- * on its own (e.g. the "Aa" font picker).
- */
-export function ToolbarDropdownTrigger({ children, ...props }: ToolbarDropdownTriggerProps) {
-  const density = React.useContext(ToolbarDensityContext);
-  return (
-    <BaseToolbar.Button
-      render={<Menu.Trigger />}
-      className={dropdownTriggerVariants({ density })}
-      {...props}
-    >
-      {children}
-      <ChevronDown aria-hidden className={dropdownChevronVariants({ density })} />
-    </BaseToolbar.Button>
-  );
-}
-
-/**
- * The menu surface for a `ToolbarDropdown` — propel's `DropdownContent`, portaled and positioned
- * under the trigger. Place `ToolbarDropdownItem`s inside it.
- */
-export const ToolbarDropdownContent = DropdownContent;
-export type ToolbarDropdownContentProps = DropdownContentProps;
-
-/**
- * A selectable row in a `ToolbarDropdown` — propel's `DropdownItem`. `variant` is required (the row
- * layout axis); use `"default"` for the single-line picker rows.
- */
-export const ToolbarDropdownItem = DropdownItem;
-export type ToolbarDropdownItemProps = DropdownItemProps;
-
-/** A divider between groups of `ToolbarDropdownItem`s — propel's `DropdownSeparator`. */
-export const ToolbarDropdownSeparator = DropdownSeparator;
-export type ToolbarDropdownSeparatorProps = DropdownSeparatorProps;
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarToggle,
+  ToolbarToggleGroup,
+  type ToolbarButtonProps,
+  type ToolbarDensity,
+  type ToolbarElevation,
+  type ToolbarGroupProps,
+  type ToolbarProps,
+  type ToolbarSeparatorProps,
+  type ToolbarToggleGroupProps,
+  type ToolbarToggleProps,
+} from "../../ui/toolbar/index";
+export { ToolbarDropdown, type ToolbarDropdownProps } from "./toolbar-dropdown";
+export {
+  ToolbarDropdownContent,
+  type ToolbarDropdownContentProps,
+} from "./toolbar-dropdown-content";
+export { ToolbarDropdownItem, type ToolbarDropdownItemProps } from "./toolbar-dropdown-item";
+export {
+  ToolbarDropdownSeparator,
+  type ToolbarDropdownSeparatorProps,
+} from "./toolbar-dropdown-separator";
+export {
+  ToolbarDropdownTrigger,
+  type ToolbarDropdownTriggerProps,
+} from "./toolbar-dropdown-trigger";
diff --git a/packages/propel/src/components/toolbar/toolbar-dropdown-content.tsx b/packages/propel/src/components/toolbar/toolbar-dropdown-content.tsx
new file mode 100644
index 0000000..5ae2ff7
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-dropdown-content.tsx
@@ -0,0 +1,5 @@
+import { MenuContent, type MenuContentProps } from "../menu/index";
+
+/** The menu surface for a `ToolbarDropdown`. */
+export const ToolbarDropdownContent = MenuContent;
+export type ToolbarDropdownContentProps = MenuContentProps;
diff --git a/packages/propel/src/components/toolbar/toolbar-dropdown-item.tsx b/packages/propel/src/components/toolbar/toolbar-dropdown-item.tsx
new file mode 100644
index 0000000..533effc
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-dropdown-item.tsx
@@ -0,0 +1,5 @@
+import { MenuItem, type MenuItemProps } from "../menu/index";
+
+/** A selectable row in a `ToolbarDropdown`. */
+export const ToolbarDropdownItem = MenuItem;
+export type ToolbarDropdownItemProps = MenuItemProps;
diff --git a/packages/propel/src/components/toolbar/toolbar-dropdown-separator.tsx b/packages/propel/src/components/toolbar/toolbar-dropdown-separator.tsx
new file mode 100644
index 0000000..f01ae4d
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-dropdown-separator.tsx
@@ -0,0 +1,5 @@
+import { MenuSeparator, type MenuSeparatorProps } from "../../ui/menu/index";
+
+/** A divider between groups of `ToolbarDropdownItem`s. */
+export const ToolbarDropdownSeparator = MenuSeparator;
+export type ToolbarDropdownSeparatorProps = MenuSeparatorProps;
diff --git a/packages/propel/src/components/toolbar/toolbar-dropdown-trigger.tsx b/packages/propel/src/components/toolbar/toolbar-dropdown-trigger.tsx
new file mode 100644
index 0000000..96742be
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-dropdown-trigger.tsx
@@ -0,0 +1,24 @@
+import { Menu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { ToolbarDropdownTriggerSurface } from "../../ui/toolbar/index";
+
+export type ToolbarDropdownTriggerProps = Omit<
+  React.ComponentProps<typeof Menu.Trigger>,
+  "className" | "style"
+>;
+
+/** The trigger that opens a `ToolbarDropdown`: a label plus chevron. */
+export function ToolbarDropdownTrigger({
+  children,
+  render,
+  ...props
+}: ToolbarDropdownTriggerProps) {
+  // The toolbar item renders as a `Menu.Trigger`; a consumer `render` customizes that
+  // inner element (not the wrapping `Toolbar.Button`), so it is nested onto the trigger.
+  return (
+    <ToolbarDropdownTriggerSurface render={<Menu.Trigger render={render} />} {...props}>
+      {children}
+    </ToolbarDropdownTriggerSurface>
+  );
+}
diff --git a/packages/propel/src/components/toolbar/toolbar-dropdown.tsx b/packages/propel/src/components/toolbar/toolbar-dropdown.tsx
new file mode 100644
index 0000000..6707a3a
--- /dev/null
+++ b/packages/propel/src/components/toolbar/toolbar-dropdown.tsx
@@ -0,0 +1,5 @@
+import { Menu, type MenuProps } from "../../ui/menu/index";
+
+/** The dropdown menu root in a toolbar. */
+export const ToolbarDropdown = Menu;
+export type ToolbarDropdownProps = MenuProps;
diff --git a/packages/propel/src/components/tooltip/index.tsx b/packages/propel/src/components/tooltip/index.tsx
index 5c1a2db..3953c99 100644
--- a/packages/propel/src/components/tooltip/index.tsx
+++ b/packages/propel/src/components/tooltip/index.tsx
@@ -1,152 +1,3 @@
-import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
-import { cx } from "class-variance-authority";
-import * as React from "react";
-
-/**
- * Shares a single open/close delay across every tooltip beneath it, so that once one tooltip has
- * opened, moving to an adjacent trigger shows its tooltip instantly (the usual "tooltip group"
- * feel). Optional — a `Tooltip` works on its own — but wrap an app or a toolbar in it when you want
- * that grouped timing. Thin re-export of Base UI's provider so consumers don't reach into
- * `@base-ui/react` directly.
- */
-type BaseTooltipProviderProps = React.ComponentProps<typeof BaseTooltip.Provider>;
-
-export type TooltipProviderProps = Omit<
-  BaseTooltipProviderProps,
-  "delay" | "closeDelay" | "children"
-> & {
-  /** How long to wait before opening a tooltip, in milliseconds. */
-  delay?: number;
-  /** How long to wait before closing a tooltip, in milliseconds. */
-  closeDelay?: number;
-  /** The subtree whose tooltips share this group's open/close timing. */
-  children?: React.ReactNode;
-};
-
-export function TooltipProvider(props: TooltipProviderProps) {
-  return <BaseTooltip.Provider {...props} />;
-}
-
-export type TooltipProps = Omit<
-  React.ComponentProps<typeof BaseTooltip.Root>,
-  "children" | "className" | "render" | "style"
-> & {
-  /** The text (or rich content) shown inside the tooltip popup. */
-  content: React.ReactNode;
-  /**
-   * Optional keyboard-shortcut hint shown to the right of `content`, dimmed (e.g. `"⌘ K"`). Maps to
-   * the Figma "Cmd + K" slot — omit it for a plain tooltip.
-   */
-  shortcut?: React.ReactNode;
-  /**
-   * The element the tooltip is attached to. Base UI renders the trigger as a `<button>` by default;
-   * pass a single element and it is used as the trigger via the `render` prop, so any focusable
-   * element (a real button, an icon button) can anchor the tooltip.
-   */
-  children: React.ReactElement;
-  /**
-   * Which side of the trigger to place the popup on. May flip automatically to stay in view.
-   *
-   * @default "top"
-   */
-  side?: React.ComponentProps<typeof BaseTooltip.Positioner>["side"];
-  /**
-   * Gap in pixels between the trigger and the popup. Leaves room for the arrow.
-   *
-   * @default 8
-   */
-  sideOffset?: number;
-  /**
-   * How long to wait (ms) before opening on hover. Focus opens immediately.
-   *
-   * @default 600
-   */
-  delay?: number;
-};
-
-/**
- * A small popup that describes the element it is attached to. Appears on hover or keyboard focus of
- * the trigger and is dismissed on blur, pointer-leave, or `Esc`.
- *
- * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed as
- * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the label as
- * `content`, and an optional `shortcut` for a dimmed keyboard hint.
- *
- * Colors come from propel's adaptive surface tokens (`bg-layer-2` / `text-primary` /
- * `border-subtle-1`), so the tooltip is light on light themes and dark on dark themes, matching the
- * Figma "Tooltip" component (node 1144-3159).
- */
-export function Tooltip({
-  content,
-  shortcut,
-  children,
-  side = "top",
-  sideOffset = 8,
-  delay = 600,
-  ...rootProps
-}: TooltipProps) {
-  return (
-    <BaseTooltip.Root {...rootProps}>
-      <BaseTooltip.Trigger delay={delay} render={children} />
-      <BaseTooltip.Portal>
-        <BaseTooltip.Positioner side={side} sideOffset={sideOffset}>
-          <BaseTooltip.Popup
-            // Base UI wires the popup to the trigger via `aria-describedby` but does
-            // not set a role; declare `role="tooltip"` so the popup matches the ARIA
-            // tooltip pattern and is queryable as one by assistive tech and tests.
-            role="tooltip"
-            // Inverse-adaptive surface: the popup uses `layer/2` + `text/primary`
-            // + `border/subtle-1`, which resolve to a light card on light themes and
-            // a dark card on dark themes (Figma's light/dark "Tooltip" modes).
-            // `caption-md/regular` text; `radius/md`; overlay shadow; padding
-            // 6px/8px and a 12px gap to the shortcut — all straight from the spec.
-            className={cx(
-              "flex items-center gap-3 rounded-md border-sm border-subtle-1 bg-layer-2 px-2 py-1.5",
-              "text-caption-md-regular text-primary shadow-overlay-200",
-            )}
-          >
-            {content}
-            {shortcut != null ? (
-              // The keyboard-shortcut hint: dimmed `text/disabled` at the smaller
-              // `caption-sm/regular` scale (Figma "Cmd + K" treatment).
-              <span className="text-caption-sm-regular text-disabled">{shortcut}</span>
-            ) : null}
-            <TooltipArrow />
-          </BaseTooltip.Popup>
-        </BaseTooltip.Positioner>
-      </BaseTooltip.Portal>
-    </BaseTooltip.Root>
-  );
-}
-
-/**
- * The little notch that points from the popup back to the trigger. A rotated square sharing the
- * popup's surface (`bg-layer-2`) and border (`border-subtle-1`), so it matches the popup in every
- * theme. Base UI positions it against the active edge and sets `data-side`; the per-side rules tuck
- * the square half-under the popup so only its two outer faces (the triangle) show, with the inner
- * faces hidden behind the popup body. Only surface/border tokens are used — no arbitrary colors.
- */
-function TooltipArrow() {
-  return (
-    <BaseTooltip.Arrow
-      className={cx(
-        "size-2 rotate-45 border-sm border-subtle-1 bg-layer-2",
-        // Pull the square halfway across the popup edge for each side and clip the
-        // adjacent borders so the visible part reads as a clean triangle.
-        "data-[side=bottom]:top-[-3px] data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
-        "data-[side=top]:bottom-[-3px] data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
-        "data-[side=left]:right-[-3px] data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
-        "data-[side=right]:left-[-3px] data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
-        // Base UI's Positioner also emits the logical sides `inline-start`/`inline-end`
-        // (the `side` prop accepts them), and Plane runs both LTR and RTL — so these
-        // must flip with writing direction. The edge offset uses logical insets
-        // (`end`/`start` = inset-inline-end/start), which flip automatically; the
-        // polygon clip is physical, so a `rtl:` variant mirrors the triangle. LTR:
-        // inline-start sits left (apex points right), inline-end sits right (apex
-        // points left); RTL swaps both. Physical left/right above stay fixed.
-        "data-[side=inline-start]:end-[-3px] data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)] rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
-        "data-[side=inline-end]:start-[-3px] data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)] rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
-      )}
-    />
-  );
-}
+export { Tooltip, type TooltipProps } from "./tooltip";
+// Re-export the shared-timing provider so tooltip groups can be assembled from one entry.
+export { TooltipProvider, type TooltipProviderProps } from "../../ui/tooltip";
diff --git a/packages/propel/src/components/tooltip/tooltip.stories.tsx b/packages/propel/src/components/tooltip/tooltip.stories.tsx
index 699234d..b8db38a 100644
--- a/packages/propel/src/components/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/components/tooltip/tooltip.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useLayoutEffect } from "react";
 import { expect, userEvent, waitFor, within } from "storybook/test";
 
-import { Tooltip } from "./index";
+import { Tooltip, TooltipProvider } from "./index";
 
 const sidesGridStyle = {
   display: "grid",
@@ -188,3 +188,36 @@ export const EscapeCloses: Story = {
     await expect(trigger).toHaveFocus();
   },
 };
+
+/**
+ * The provider shares open/close timing across tooltips in a group. This exercises the exported
+ * provider wrapper and keeps the accessibility assertion on the real portaled tooltip.
+ */
+export const SharedProviderTiming: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <TooltipProvider delay={0} closeDelay={0}>
+      <div className="flex gap-2">
+        <Tooltip content="First tooltip">
+          <button type="button">First trigger</button>
+        </Tooltip>
+        <Tooltip content="Second tooltip">
+          <button type="button">Second trigger</button>
+        </Tooltip>
+      </div>
+    </TooltipProvider>
+  ),
+  play: async ({ canvas }) => {
+    const body = within(document.body);
+
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "First trigger" })).toHaveFocus();
+    const firstTooltip = await body.findByRole("tooltip");
+    await expect(firstTooltip).toHaveTextContent("First tooltip");
+
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Second trigger" })).toHaveFocus();
+    await waitFor(() => expect(body.getByRole("tooltip")).toHaveTextContent("Second tooltip"));
+  },
+};
diff --git a/packages/propel/src/components/tooltip/tooltip.tsx b/packages/propel/src/components/tooltip/tooltip.tsx
new file mode 100644
index 0000000..b51fb66
--- /dev/null
+++ b/packages/propel/src/components/tooltip/tooltip.tsx
@@ -0,0 +1,96 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type { TooltipRoot } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+import {
+  Tooltip as TooltipRootPart,
+  TooltipArrow,
+  TooltipPopup,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipTrigger,
+} from "../../ui/tooltip";
+
+export type TooltipProps<Payload = unknown> = Omit<
+  TooltipRoot.Props<Payload>,
+  "children" | "className" | "style"
+> & {
+  /** The text (or rich content) shown inside the tooltip popup. */
+  content: React.ReactNode;
+  /**
+   * Optional keyboard-shortcut hint shown to the right of `content`, dimmed (e.g. `"⌘ K"`). Maps to
+   * the Figma "Cmd + K" slot — omit it for a plain tooltip.
+   */
+  shortcut?: React.ReactNode;
+  /**
+   * The element the tooltip is attached to. Base UI renders the trigger as a `<button>` by default;
+   * pass a single element and it is used as the trigger via the `render` prop, so any focusable
+   * element (a real button, an icon button) can anchor the tooltip.
+   */
+  children: React.ReactElement;
+  /**
+   * Which side of the trigger to place the popup on. May flip automatically to stay in view.
+   *
+   * @default "top"
+   */
+  side?: React.ComponentProps<typeof BaseTooltip.Positioner>["side"];
+  /**
+   * Gap in pixels between the trigger and the popup. Leaves room for the arrow.
+   *
+   * @default 8
+   */
+  sideOffset?: number;
+  /**
+   * How long to wait (ms) before opening on hover. Focus opens immediately.
+   *
+   * @default 600
+   */
+  delay?: number;
+};
+
+/**
+ * A small popup that describes the element it is attached to. Appears on hover or keyboard focus of
+ * the trigger and is dismissed on blur, pointer-leave, or `Esc`.
+ *
+ * Built on Base UI's tooltip, so it's accessible by default: the popup is exposed as
+ * `role="tooltip"` and wired to the trigger. Pass the trigger as `children`, the label as
+ * `content`, and an optional `shortcut` for a dimmed keyboard hint.
+ *
+ * Composes the `ui/tooltip` parts (`Tooltip` root + `TooltipTrigger` + `TooltipPortal` →
+ * `TooltipPositioner` → `TooltipPopup` + `TooltipArrow`). Colors come from propel's adaptive
+ * surface tokens (`bg-layer-2` / `text-primary` / `border-subtle-1`), so the tooltip is light on
+ * light themes and dark on dark themes, matching the Figma "Tooltip" component (node 1144-3159).
+ */
+export function Tooltip<Payload = unknown>({
+  content,
+  shortcut,
+  children,
+  side = "top",
+  sideOffset = 8,
+  delay = 600,
+  ...rootProps
+}: TooltipProps<Payload>) {
+  return (
+    <TooltipRootPart {...rootProps}>
+      <TooltipTrigger delay={delay} render={children} />
+      <TooltipPortal>
+        <TooltipPositioner side={side} sideOffset={sideOffset}>
+          {/* Base UI wires the popup to the trigger via `aria-describedby` but does
+              not set a role; declare `role="tooltip"` so the popup matches the ARIA
+              tooltip pattern and is queryable as one by assistive tech and tests. The
+              popup chrome (inverse-adaptive surface, caption text, radius, shadow,
+              padding, and the gap to the shortcut) lives on the atomic `TooltipPopup`. */}
+          <TooltipPopup role="tooltip">
+            {content}
+            {shortcut != null ? (
+              // The keyboard-shortcut hint: dimmed `text/disabled` at the smaller
+              // `caption-sm/regular` scale (Figma "Cmd + K" treatment).
+              <span className="text-caption-sm-regular text-disabled">{shortcut}</span>
+            ) : null}
+            <TooltipArrow />
+          </TooltipPopup>
+        </TooltipPositioner>
+      </TooltipPortal>
+    </TooltipRootPart>
+  );
+}
diff --git a/packages/propel/src/components/workspace-avatar/index.tsx b/packages/propel/src/components/workspace-avatar/index.tsx
index 3e516c0..35c9fc8 100644
--- a/packages/propel/src/components/workspace-avatar/index.tsx
+++ b/packages/propel/src/components/workspace-avatar/index.tsx
@@ -1,83 +1,3 @@
-import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
-import { cva, cx, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
-
-import { type AvatarTone, getAvatarTone, initialsToneClass } from "../avatar";
-
-// Magnitudes follow the same scale as Avatar (Figma "Workspace avatar"): 2xs 16
-// → 3xl 64. Square with a radius that grows with size: rounded-sm (16–24),
-// rounded-md (28–40), rounded-lg (56–64). Border 1px up to 32px, 2px from 40px up.
-const workspaceAvatarVariants = cva(
-  "relative inline-flex shrink-0 items-center justify-center overflow-clip border-subtle",
-  {
-    variants: {
-      magnitude: {
-        "2xs": "size-4 rounded-sm border-sm text-10",
-        xs: "size-5 rounded-sm border-sm text-10",
-        sm: "size-6 rounded-sm border-sm text-12",
-        md: "size-7 rounded-md border-sm text-13",
-        lg: "size-8 rounded-md border-sm text-16",
-        xl: "size-10 rounded-md border-lg text-18",
-        "2xl": "size-14 rounded-lg border-lg text-24",
-        "3xl": "size-16 rounded-lg border-lg text-28",
-      },
-    },
-  },
-);
-
-export type WorkspaceAvatarMagnitude = NonNullable<
-  VariantProps<typeof workspaceAvatarVariants>["magnitude"]
->;
-
-export type WorkspaceAvatarProps = Omit<
-  React.ComponentProps<typeof BaseAvatar.Root>,
-  "className" | "render" | "style"
-> & {
-  /** Workspace logo URL. Falls back to the initial when absent/loading/failed. */
-  src?: string;
-  /** Accessible name for the workspace avatar. */
-  alt?: string;
-  /** Shown when there is no logo — typically the workspace's initial. */
-  fallback?: React.ReactNode;
-  /** Initials background color. Defaults to a stable color derived from `alt`. */
-  tone?: AvatarTone;
-  /** Size of the avatar. Required — there is no default. */
-  magnitude: WorkspaceAvatarMagnitude;
-};
-
-export function WorkspaceAvatar({
-  magnitude,
-  src,
-  alt,
-  fallback,
-  tone,
-  ...props
-}: WorkspaceAvatarProps) {
-  // The fallback shows whenever the logo is absent, loading, or failed, so its
-  // styling lives on the Fallback element (not derived from `src`). Initials sit
-  // on a label tone color (same palette as Avatar), auto-derived from `alt`.
-  const hasInitials = fallback != null;
-  const resolvedTone = tone ?? getAvatarTone(alt ?? "");
-  return (
-    <BaseAvatar.Root
-      // One accessible name for the avatar in every state; the inner logo image is
-      // decorative. Consumers can override via spread props.
-      role="img"
-      aria-label={alt}
-      className={cx(workspaceAvatarVariants({ magnitude }), "bg-layer-1")}
-      {...props}
-    >
-      {src ? <BaseAvatar.Image src={src} alt="" className="size-full object-cover" /> : null}
-      <BaseAvatar.Fallback
-        className={cx(
-          "flex size-full items-center justify-center leading-none",
-          hasInitials
-            ? `${initialsToneClass[resolvedTone]} text-on-color`
-            : "bg-layer-1 text-primary",
-        )}
-      >
-        {fallback}
-      </BaseAvatar.Fallback>
-    </BaseAvatar.Root>
-  );
-}
+// Ready-made 1:1 re-export of the ui primitive. Drop down to `@plane/propel/ui/workspace-avatar` only
+// when you need the lower-level parts.
+export * from "../../ui/workspace-avatar";
diff --git a/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx b/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
index e9f24cd..5d48dfe 100644
--- a/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
+++ b/packages/propel/src/components/workspace-avatar/workspace-avatar.stories.tsx
@@ -5,6 +5,7 @@ import { WorkspaceAvatar, type WorkspaceAvatarMagnitude } from "./index";
 
 const MAGNITUDES: WorkspaceAvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
 
+// Components-tier story: the ready-made `WorkspaceAvatar` single component.
 const meta = {
   title: "Components/WorkspaceAvatar",
   component: WorkspaceAvatar,
diff --git a/packages/propel/src/hooks/use-controllable-state/index.ts b/packages/propel/src/hooks/use-controllable-state/index.ts
index 593490c..e58fec2 100644
--- a/packages/propel/src/hooks/use-controllable-state/index.ts
+++ b/packages/propel/src/hooks/use-controllable-state/index.ts
@@ -9,13 +9,13 @@ export type UseControllableStateParams<T> = {
   /** The initial value when uncontrolled. Seeds the internal state. */
   defaultValue?: T;
   /** Called with the next value on every change, in both controlled and uncontrolled mode. */
-  onChange?: (next: T) => void;
+  onValueChange?: (next: T) => void;
 };
 
 /**
  * Manages a value that may be either controlled (a `value` prop is supplied) or uncontrolled
  * (seeded from `defaultValue` and tracked internally). It returns the current value and a setter:
- * the setter updates internal state only when uncontrolled and always calls `onChange`, so the
+ * the setter updates internal state only when uncontrolled and always calls `onValueChange`, so the
  * consumer can mirror the value regardless of which mode it is in. A `value` of `undefined` is
  * treated as uncontrolled.
  *
@@ -24,7 +24,7 @@ export type UseControllableStateParams<T> = {
  *   const [isPressed, setPressed] = useControllableState({
  *     value: pressed,
  *     defaultValue: defaultPressed ?? false,
- *     onChange: onPressedChange,
+ *     onValueChange: onPressedChange,
  *   });
  *   return <button aria-pressed={isPressed} onClick={() => setPressed(!isPressed)} />;
  * }
@@ -42,7 +42,7 @@ export function useControllableState<T>(
 export function useControllableState<T>({
   value,
   defaultValue,
-  onChange,
+  onValueChange,
 }: UseControllableStateParams<T>): [T | undefined, (next: T) => void] {
   const isControlled = value !== undefined;
   const [internalValue, setInternalValue] = React.useState(defaultValue);
@@ -51,9 +51,9 @@ export function useControllableState<T>({
   const setValue = React.useCallback(
     (next: T) => {
       if (!isControlled) setInternalValue(next);
-      onChange?.(next);
+      onValueChange?.(next);
     },
-    [isControlled, onChange],
+    [isControlled, onValueChange],
   );
 
   return [current, setValue];
diff --git a/packages/propel/src/internal/loading-button.ts b/packages/propel/src/internal/loading-button.ts
deleted file mode 100644
index 5c2e727..0000000
--- a/packages/propel/src/internal/loading-button.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import type * as React from "react";
-
-// Shared "loading is a soft-disabled busy state" props for button-like components
-// (Button, IconButton). Both render a native <button> where:
-// - `disabled` is the hard, non-focusable native state — the only thing that sets
-//   the real `disabled` attribute.
-// - `loading` is the soft state: it shows a spinner and must NOT fire clicks, but
-//   the button stays a real, focusable element so screen readers announce the busy
-//   state. It maps to `aria-disabled` + `aria-busy` and guards `onClick`.
-//
-// This is NOT a component (no JSX): it only returns the shared loading button
-// props each call site spreads onto its own <button>. The spinner markup stays
-// in each component.
-// It is internal: it lives outside `components/`/`hooks/`, so the build does not
-// turn it into a published package subpath.
-
-type LoadingButtonInput<E> = {
-  /** Soft-disabled busy state: blocks clicks and sets `aria-busy`/`aria-disabled`. */
-  loading: boolean;
-  /** Hard, non-focusable native state: the only input that sets `disabled`. */
-  disabled?: boolean;
-  /** The consumer's click handler; suppressed while `loading`. */
-  onClick?: React.MouseEventHandler<E>;
-};
-
-type LoadingButtonProps<E> = {
-  disabled?: boolean;
-  "aria-disabled": true | undefined;
-  "aria-busy": true | undefined;
-  onClick: React.MouseEventHandler<E> | undefined;
-};
-
-/**
- * Returns the four shared `<button>` attributes (`disabled`, `aria-disabled`, `aria-busy`,
- * `onClick`) used by Button and IconButton for the loading/disabled/onClick behavior. `disabled`
- * passes through to the native attribute; `loading` adds `aria-disabled`/`aria-busy` and blocks
- * `onClick` while keeping the button focusable. Pure: it returns props to spread, never JSX.
- */
-export function getLoadingButtonProps<E = HTMLButtonElement>({
-  loading,
-  disabled,
-  onClick,
-}: LoadingButtonInput<E>): LoadingButtonProps<E> {
-  return {
-    disabled,
-    "aria-disabled": loading ? true : undefined,
-    "aria-busy": loading ? true : undefined,
-    onClick: loading ? undefined : onClick,
-  };
-}
diff --git a/packages/propel/src/internal/node-slot.ts b/packages/propel/src/internal/node-slot.ts
deleted file mode 100644
index 91c9001..0000000
--- a/packages/propel/src/internal/node-slot.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { cx } from "class-variance-authority";
-
-// A node slot: an inline-flex box that renders a node (an icon, an avatar, an image,
-// ...) at the size its parent dictates through the `--node-size` custom property. The
-// parent sets `--node-size` once on its own root, per magnitude (a literal value in the
-// parent's cva); raw `svg`/`img` nodes dropped into the slot are sized to it here.
-//
-// propel components that are meant to sit in a slot (e.g. Avatar) read
-// `var(--node-size)` themselves, with a fallback to their own size, so their box and
-// internals scale to the same value when slotted and keep their standalone size
-// otherwise. This is the single channel a parent uses to size whatever node it holds.
-export const nodeSlotClass = cx(
-  "inline-flex shrink-0 items-center justify-center",
-  "[&>img]:size-(--node-size) [&>svg]:size-(--node-size)",
-);
diff --git a/packages/propel/src/internal/node-slot.tsx b/packages/propel/src/internal/node-slot.tsx
new file mode 100644
index 0000000..8e9c511
--- /dev/null
+++ b/packages/propel/src/internal/node-slot.tsx
@@ -0,0 +1,13 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+export const nodeSlotClass = cx(
+  "inline-flex shrink-0 items-center justify-center",
+  "[&>img]:size-(--node-size) [&>svg]:size-(--node-size)",
+);
+
+export type NodeSlotProps = React.ComponentPropsWithoutRef<"span">;
+
+export function NodeSlot({ className, ...props }: NodeSlotProps) {
+  return <span className={cx(nodeSlotClass, className)} {...props} />;
+}
diff --git a/packages/propel/src/internal/overlay-panel.tsx b/packages/propel/src/internal/overlay-panel.tsx
index 5ac78d9..4b110e5 100644
--- a/packages/propel/src/internal/overlay-panel.tsx
+++ b/packages/propel/src/internal/overlay-panel.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { ScrollArea } from "../components/scroll-area/index";
 import { surfaceVariants, type SurfaceVariantProps } from "./surface";
 
-// The shared scrollable-overlay shell. Dropdown menus, the popover panel, the
+// The shared scrollable-overlay shell. Menu surfaces, the popover panel, the
 // breadcrumb overflow menu and the toolbar picker all render the same thing: an
 // elevated surface capped at the positioner's available height, whose body scrolls
 // inside a `ScrollArea` while optional sticky chrome (a search header, a footer)
diff --git a/packages/propel/src/patterns/comment.stories.tsx b/packages/propel/src/patterns/comment.stories.tsx
index 1357c33..d5fa57a 100644
--- a/packages/propel/src/patterns/comment.stories.tsx
+++ b/packages/propel/src/patterns/comment.stories.tsx
@@ -1,4 +1,3 @@
-import { Field } from "@base-ui/react/field";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { cva, type VariantProps } from "class-variance-authority";
 import {
@@ -16,15 +15,16 @@ import {
 import * as React from "react";
 import { expect, fn, userEvent } from "storybook/test";
 
-import { Button } from "../components/button/index";
-import { IconButton } from "../components/icon-button/index";
+import { Button } from "../ui/button/index";
+import { Field, TextAreaFieldControl } from "../ui/field/index";
+import { IconButton } from "../ui/icon-button/index";
 import {
   Toolbar,
   ToolbarButton,
   ToolbarGroup,
   ToolbarSeparator,
   ToolbarToggle,
-} from "../components/toolbar/index";
+} from "../ui/toolbar/index";
 
 // A comment composer is a compositional (application-level) component, not a propel
 // primitive: it is assembled entirely from propel building blocks (Toolbar, Button,
@@ -36,7 +36,7 @@ import {
 // Magnitudes follow the Figma "Comment box" scale (Property 1): base / sm / xs. They
 // share the bordered card surface and step down together so a compact composer stays
 // internally consistent.
-const commentVariants = cva("border border-subtle-1 bg-layer-2 text-primary", {
+const commentComposerVariants = cva("border border-subtle-1 bg-layer-2 text-primary", {
   variants: {
     magnitude: {
       // base/sm use radius/xl (12px) and stack their rows in a column; xs uses
@@ -48,22 +48,7 @@ const commentVariants = cva("border border-subtle-1 bg-layer-2 text-primary", {
   },
 });
 
-type CommentMagnitude = NonNullable<VariantProps<typeof commentVariants>["magnitude"]>;
-
-// The body textarea padding + type scale per magnitude, from Figma's "Add a comment"
-// placeholder row.
-const bodyVariants = cva(
-  "w-full resize-none bg-transparent text-primary outline-none placeholder:text-placeholder",
-  {
-    variants: {
-      magnitude: {
-        base: "min-h-10 p-3 text-14 leading-snug",
-        sm: "min-h-10 p-3 text-14 leading-snug",
-        xs: "min-w-0 flex-1 text-12 leading-tight",
-      },
-    },
-  },
-);
+type CommentMagnitude = NonNullable<VariantProps<typeof commentComposerVariants>["magnitude"]>;
 
 // The formatting controls along the bottom bar (Figma node 2842-3905): a mention /
 // reaction / link cluster, an inline B/I/U cluster, then a list + overflow cluster,
@@ -140,6 +125,7 @@ function CommentComposer({
   onSubmit,
 }: CommentComposerProps) {
   const isControlled = value !== undefined;
+  const controlId = React.useId();
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
   const currentValue = isControlled ? value : internalValue;
   const isEmpty = currentValue.trim().length === 0;
@@ -155,60 +141,37 @@ function CommentComposer({
   };
 
   const sendLabel = typeof submitLabel === "string" ? submitLabel : "Comment";
+  const controlMagnitude = magnitude === "xs" ? "sm" : "lg";
+  const controlSurface = magnitude === "xs" ? "inline" : "embedded";
 
   const body = (
-    <Field.Control
-      render={<textarea rows={magnitude === "xs" ? 1 : 2} />}
+    <TextAreaFieldControl
+      id={controlId}
+      rows={magnitude === "xs" ? 1 : 2}
+      magnitude={controlMagnitude}
+      surface={controlSurface}
       placeholder={placeholder}
       value={isControlled ? value : undefined}
       defaultValue={isControlled ? undefined : defaultValue}
       onValueChange={handleValueChange}
-      className={bodyVariants({ magnitude })}
     />
   );
 
   return (
-    <Field.Root className={commentVariants({ magnitude })}>
-      <Field.Label className="sr-only">{label}</Field.Label>
+    <Field name="comment">
+      <div className={commentComposerVariants({ magnitude })}>
+        <label htmlFor={controlId} className="sr-only">
+          {label}
+        </label>
 
-      {magnitude === "xs" ? (
-        <>
-          {body}
-          <div className="flex shrink-0 items-center gap-1.5">
-            <span aria-hidden className="h-4 w-0 shrink-0 border-s-sm border-subtle-1" />
-            <IconButton variant="ghost" tone="neutral" magnitude="md" aria-label="Attach a file">
-              <Paperclip aria-hidden />
-            </IconButton>
-            <IconButton
-              variant="secondary"
-              tone="neutral"
-              magnitude="md"
-              aria-label={sendLabel}
-              disabled={isEmpty}
-              onClick={handleSubmit}
-            >
-              <ArrowUp aria-hidden />
-            </IconButton>
-          </div>
-        </>
-      ) : (
-        <>
-          {body}
-          <div className="flex min-h-9 items-center justify-between gap-2 py-1 ps-1 pe-1.5">
-            <div className="flex min-w-0 items-center overflow-x-auto">
-              <FormattingToolbar />
-            </div>
-            {magnitude === "base" ? (
-              <Button
-                variant="secondary"
-                tone="neutral"
-                magnitude="md"
-                disabled={isEmpty}
-                onClick={handleSubmit}
-              >
-                {submitLabel}
-              </Button>
-            ) : (
+        {magnitude === "xs" ? (
+          <>
+            {body}
+            <div className="flex shrink-0 items-center gap-1.5">
+              <span aria-hidden className="h-4 w-0 shrink-0 border-s-sm border-subtle-1" />
+              <IconButton variant="ghost" tone="neutral" magnitude="md" aria-label="Attach a file">
+                <Paperclip aria-hidden />
+              </IconButton>
               <IconButton
                 variant="secondary"
                 tone="neutral"
@@ -219,11 +182,42 @@ function CommentComposer({
               >
                 <ArrowUp aria-hidden />
               </IconButton>
-            )}
-          </div>
-        </>
-      )}
-    </Field.Root>
+            </div>
+          </>
+        ) : (
+          <>
+            {body}
+            <div className="flex min-h-9 items-center justify-between gap-2 py-1 ps-1 pe-1.5">
+              <div className="flex min-w-0 items-center overflow-x-auto">
+                <FormattingToolbar />
+              </div>
+              {magnitude === "base" ? (
+                <Button
+                  variant="secondary"
+                  tone="neutral"
+                  magnitude="md"
+                  disabled={isEmpty}
+                  onClick={handleSubmit}
+                >
+                  {submitLabel}
+                </Button>
+              ) : (
+                <IconButton
+                  variant="secondary"
+                  tone="neutral"
+                  magnitude="md"
+                  aria-label={sendLabel}
+                  disabled={isEmpty}
+                  onClick={handleSubmit}
+                >
+                  <ArrowUp aria-hidden />
+                </IconButton>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </Field>
   );
 }
 
@@ -235,50 +229,55 @@ CommentComposer.displayName = "CommentComposer";
 // a consumer would copy) instead of an opaque `<CommentComposer />`, since the whole
 // point of this recipe is the composition. Kept to the `base` magnitude shown above.
 const RECIPE_SOURCE = `function CommentComposer() {
+  const controlId = React.useId();
   const [value, setValue] = React.useState("");
   const isEmpty = value.trim().length === 0;
 
   return (
-    <Field.Root className="flex w-full flex-col overflow-clip rounded-xl border border-subtle-1 bg-layer-2 text-primary">
-      <Field.Label className="sr-only">Add a comment</Field.Label>
-      <Field.Control
-        render={<textarea rows={2} />}
-        placeholder="Add a comment"
-        value={value}
-        onValueChange={setValue}
-        className="min-h-10 w-full resize-none bg-transparent p-3 text-14 leading-snug text-primary outline-none placeholder:text-placeholder"
-      />
-      <div className="flex min-h-9 items-center justify-between gap-2 py-1 pe-1.5 ps-1">
-        <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
-          <ToolbarGroup aria-label="Insert">
-            <ToolbarButton aria-label="Mention someone">
-              <AtSign aria-hidden />
-            </ToolbarButton>
-            <ToolbarButton aria-label="Add reaction">
-              <SmilePlus aria-hidden />
-            </ToolbarButton>
-            <ToolbarButton aria-label="Add link">
-              <Link aria-hidden />
-            </ToolbarButton>
-          </ToolbarGroup>
-          <ToolbarSeparator />
-          <ToolbarGroup aria-label="Text formatting">
-            <ToolbarToggle aria-label="Bold">
-              <Bold aria-hidden />
-            </ToolbarToggle>
-            <ToolbarToggle aria-label="Italic">
-              <Italic aria-hidden />
-            </ToolbarToggle>
-            <ToolbarToggle aria-label="Underline">
-              <Underline aria-hidden />
-            </ToolbarToggle>
-          </ToolbarGroup>
-        </Toolbar>
-        <Button variant="secondary" tone="neutral" magnitude="md" disabled={isEmpty}>
-          Comment
-        </Button>
+    <Field name="comment">
+      <div className="flex w-full flex-col overflow-clip rounded-xl border border-subtle-1 bg-layer-2 text-primary">
+        <label htmlFor={controlId} className="sr-only">Add a comment</label>
+        <TextAreaFieldControl
+          id={controlId}
+          rows={2}
+          magnitude="lg"
+          surface="embedded"
+          placeholder="Add a comment"
+          value={value}
+          onValueChange={setValue}
+        />
+        <div className="flex min-h-9 items-center justify-between gap-2 py-1 pe-1.5 ps-1">
+          <Toolbar elevation="flat" density="compact" aria-label="Comment formatting">
+            <ToolbarGroup aria-label="Insert">
+              <ToolbarButton aria-label="Mention someone">
+                <AtSign aria-hidden />
+              </ToolbarButton>
+              <ToolbarButton aria-label="Add reaction">
+                <SmilePlus aria-hidden />
+              </ToolbarButton>
+              <ToolbarButton aria-label="Add link">
+                <Link aria-hidden />
+              </ToolbarButton>
+            </ToolbarGroup>
+            <ToolbarSeparator />
+            <ToolbarGroup aria-label="Text formatting">
+              <ToolbarToggle aria-label="Bold">
+                <Bold aria-hidden />
+              </ToolbarToggle>
+              <ToolbarToggle aria-label="Italic">
+                <Italic aria-hidden />
+              </ToolbarToggle>
+              <ToolbarToggle aria-label="Underline">
+                <Underline aria-hidden />
+              </ToolbarToggle>
+            </ToolbarGroup>
+          </Toolbar>
+          <Button variant="secondary" tone="neutral" magnitude="md" disabled={isEmpty}>
+            Comment
+          </Button>
+        </div>
       </div>
-    </Field.Root>
+    </Field>
   );
 }`;
 
@@ -316,7 +315,7 @@ export const Default: Story = {
     docs: { source: { code: RECIPE_SOURCE, language: "tsx" } },
   },
   render: (args) => (
-    <div className="w-[640px]">
+    <div className="w-160">
       <CommentComposer {...args} />
     </div>
   ),
@@ -330,7 +329,7 @@ export const Default: Story = {
 export const Magnitudes: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => (
-    <div className="flex w-[640px] flex-col gap-6">
+    <div className="flex w-160 flex-col gap-6">
       {MAGNITUDES.map((magnitude) => (
         <CommentComposer key={magnitude} {...args} magnitude={magnitude} />
       ))}
diff --git a/packages/propel/src/storybook/icon-control.tsx b/packages/propel/src/storybook/icon-control.tsx
index b768049..cc10163 100644
--- a/packages/propel/src/storybook/icon-control.tsx
+++ b/packages/propel/src/storybook/icon-control.tsx
@@ -42,11 +42,11 @@ export const STORY_ICONS: Record<string, React.ReactNode> = {
 };
 
 /**
- * Reusable Storybook argType for any icon-shaped prop (`leadingIcon`, `trailingIcon`, `icon`). Icon
- * props are `ReactNode`, which Storybook can't render as a control, so a story spreads this into
- * its `argTypes` to turn the prop into a searchable select of `STORY_ICONS`:
+ * Reusable Storybook argType for any icon-shaped prop (`inlineStartNode`, `inlineEndNode`, `icon`).
+ * Icon props are `ReactNode`, which Storybook can't render as a control, so a story spreads this
+ * into its `argTypes` to turn the prop into a searchable select of `STORY_ICONS`:
  *
- * `argTypes: { leadingIcon: iconControl }`
+ * `argTypes: { inlineStartNode: iconControl }`
  *
  * Per propel's convention we only hand-write an argType to give a control a usable shape (here:
  * pick an icon), never to restate a type docgen already infers.
diff --git a/packages/propel/src/ui/accordion/accordion-header.tsx b/packages/propel/src/ui/accordion/accordion-header.tsx
new file mode 100644
index 0000000..525f685
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion-header.tsx
@@ -0,0 +1,14 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type * as React from "react";
+
+import { accordionHeaderVariants } from "./variants";
+
+export type AccordionHeaderProps = Omit<
+  React.ComponentProps<typeof BaseAccordion.Header>,
+  "className" | "style"
+>;
+
+/** The heading wrapper for an accordion trigger. */
+export function AccordionHeader(props: AccordionHeaderProps) {
+  return <BaseAccordion.Header className={accordionHeaderVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/accordion/accordion-item.tsx b/packages/propel/src/ui/accordion/accordion-item.tsx
new file mode 100644
index 0000000..4a16fd5
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion-item.tsx
@@ -0,0 +1,17 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type { AccordionItem as BaseAccordionItem } from "@base-ui/react/accordion";
+
+import { accordionItemVariants } from "./variants";
+
+export type AccordionItemProps<Value = string> = Omit<
+  BaseAccordionItem.Props,
+  "className" | "style" | "value"
+> & {
+  /** Unique value that identifies this item within its `Accordion`. */
+  value?: Value;
+};
+
+/** A single collapsible section: pairs an `AccordionHeader` and `AccordionPanel`. */
+export function AccordionItem<Value = string>(props: AccordionItemProps<Value>) {
+  return <BaseAccordion.Item className={accordionItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/accordion/accordion-panel.tsx b/packages/propel/src/ui/accordion/accordion-panel.tsx
new file mode 100644
index 0000000..f86f1db
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion-panel.tsx
@@ -0,0 +1,21 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type * as React from "react";
+
+import { accordionPanelVariants } from "./variants";
+
+export type AccordionPanelProps = Omit<
+  React.ComponentProps<typeof BaseAccordion.Panel>,
+  "className" | "style"
+>;
+
+/**
+ * The collapsible content region for an item. Animates open/closed using Base UI's
+ * `--accordion-panel-height` so the height transitions smoothly.
+ */
+export function AccordionPanel({ children, ...props }: AccordionPanelProps) {
+  return (
+    <BaseAccordion.Panel className={accordionPanelVariants()} {...props}>
+      {children}
+    </BaseAccordion.Panel>
+  );
+}
diff --git a/packages/propel/src/ui/accordion/accordion-trigger.tsx b/packages/propel/src/ui/accordion/accordion-trigger.tsx
new file mode 100644
index 0000000..588cae7
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion-trigger.tsx
@@ -0,0 +1,21 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type * as React from "react";
+
+import { accordionTriggerVariants } from "./variants";
+
+export type AccordionTriggerProps = Omit<
+  React.ComponentProps<typeof BaseAccordion.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The clickable control that opens and closes its panel. Base UI sets `aria-expanded` and
+ * `aria-controls` for you.
+ */
+export function AccordionTrigger({ children, ...props }: AccordionTriggerProps) {
+  return (
+    <BaseAccordion.Trigger className={accordionTriggerVariants()} {...props}>
+      {children}
+    </BaseAccordion.Trigger>
+  );
+}
diff --git a/packages/propel/src/ui/accordion/accordion.stories.tsx b/packages/propel/src/ui/accordion/accordion.stories.tsx
new file mode 100644
index 0000000..a084b82
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionItem,
+  AccordionPanel,
+  AccordionTrigger,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC accordion parts (each renders a single element).
+// The components-tier `Accordion` story shows the ready-made trigger (auto chevron) and
+// padded panel. Here you assemble the raw parts and supply your own chevron / panel padding.
+const meta = {
+  title: "UI/Accordion",
+  component: Accordion,
+  subcomponents: { AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel },
+  decorators: [
+    (Story) => (
+      <div className="w-[474px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ITEMS = [
+  { value: "what", label: "What is Plane?", body: "An open-source project management tool." },
+  { value: "pricing", label: "How does pricing work?", body: "Free to self-host." },
+  { value: "import", label: "Can I import my data?", body: "Yes, from common trackers." },
+];
+
+/** Assemble the atomic parts: Root › Item › Header › Trigger, plus Panel. */
+export const Default: Story = {
+  render: () => (
+    <Accordion>
+      {ITEMS.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionHeader>
+            <AccordionTrigger>
+              <span className="flex-1">{item.label}</span>
+              <ChevronDown
+                aria-hidden
+                className="size-3.5 shrink-0 text-icon-secondary transition-transform group-data-panel-open:rotate-180"
+              />
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionPanel>
+            <div className="px-3 pb-3 text-14 text-secondary">{item.body}</div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const triggers = canvas.getAllByRole("button");
+    await expect(triggers[0]).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(triggers[0]);
+    await expect(triggers[0]).toHaveAttribute("aria-expanded", "true");
+  },
+};
+
+/** `multiple` lets several panels stay open at once. */
+export const Multiple: Story = {
+  render: () => (
+    <Accordion multiple defaultValue={["what", "pricing"]}>
+      {ITEMS.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionHeader>
+            <AccordionTrigger>
+              <span className="flex-1">{item.label}</span>
+            </AccordionTrigger>
+          </AccordionHeader>
+          <AccordionPanel>
+            <div className="px-3 pb-3 text-14 text-secondary">{item.body}</div>
+          </AccordionPanel>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  ),
+};
diff --git a/packages/propel/src/ui/accordion/accordion.tsx b/packages/propel/src/ui/accordion/accordion.tsx
new file mode 100644
index 0000000..a9cb3e0
--- /dev/null
+++ b/packages/propel/src/ui/accordion/accordion.tsx
@@ -0,0 +1,18 @@
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import type { AccordionRoot } from "@base-ui/react/accordion";
+
+import { accordionVariants } from "./variants";
+
+export type AccordionProps<Value = string> = Omit<
+  AccordionRoot.Props<Value>,
+  "className" | "style"
+>;
+
+/**
+ * Groups a set of `AccordionItem`s. Single-open by default; pass `multiple` to allow several panels
+ * open at once. Use `defaultValue` (uncontrolled) or `value` + `onValueChange` (controlled) to
+ * drive which items are expanded.
+ */
+export function Accordion<Value = string>(props: AccordionProps<Value>) {
+  return <BaseAccordion.Root className={accordionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/accordion/index.tsx b/packages/propel/src/ui/accordion/index.tsx
new file mode 100644
index 0000000..cfdfc35
--- /dev/null
+++ b/packages/propel/src/ui/accordion/index.tsx
@@ -0,0 +1,5 @@
+export { Accordion, type AccordionProps } from "./accordion";
+export { AccordionHeader, type AccordionHeaderProps } from "./accordion-header";
+export { AccordionItem, type AccordionItemProps } from "./accordion-item";
+export { AccordionPanel, type AccordionPanelProps } from "./accordion-panel";
+export { AccordionTrigger, type AccordionTriggerProps } from "./accordion-trigger";
diff --git a/packages/propel/src/ui/accordion/variants.ts b/packages/propel/src/ui/accordion/variants.ts
new file mode 100644
index 0000000..084d5d2
--- /dev/null
+++ b/packages/propel/src/ui/accordion/variants.ts
@@ -0,0 +1,31 @@
+import { cva, cx } from "class-variance-authority";
+
+// Accordion is a structural disclosure primitive: the Figma "Accordion" spec only
+// defines the collapsed/hover/expanded states (which Base UI drives as state, not
+// props) — so there are no styling axes (variant/tone/magnitude) to expose. The cva
+// pairings below hold each part's static chrome so every part is styled in one place,
+// with no `className` at the boundary.
+export const accordionVariants = cva("flex w-full flex-col");
+
+export const accordionItemVariants = cva("border-b border-subtle");
+
+export const accordionHeaderVariants = cva("flex");
+
+export const accordionTriggerVariants = cva(
+  cx(
+    "group flex flex-1 items-center gap-2 p-3 text-start [--node-size:1rem]",
+    "text-14 font-medium text-primary",
+    "bg-layer-transparent hover:bg-layer-transparent-hover",
+    "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+  ),
+);
+
+export const accordionPanelVariants = cva(
+  cx(
+    "h-(--accordion-panel-height) overflow-hidden",
+    "text-14 text-secondary",
+    "transition-[height] duration-200 ease-out",
+    "data-ending-style:h-0 data-starting-style:h-0",
+  ),
+);
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx
new file mode 100644
index 0000000..3bfdc7b
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-backdrop.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogBackdropVariants } from "./variants";
+
+export type AlertDialogBackdropProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Backdrop>,
+  "className" | "style"
+>;
+
+/**
+ * The dimmed overlay behind the popup. Fades with the dialog's open state via Base UI's
+ * starting/ending transition styles. Maps 1:1 to `AlertDialog.Backdrop`.
+ */
+export function AlertDialogBackdrop(props: AlertDialogBackdropProps) {
+  return <BaseAlertDialog.Backdrop className={alertDialogBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-close.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-close.tsx
new file mode 100644
index 0000000..6bfeedb
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-close.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogCloseVariants } from "./variants";
+
+export type AlertDialogCloseProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Close>,
+  "className" | "style"
+>;
+
+/**
+ * A button that closes the alert dialog when activated. Renders a ghost button by default; children
+ * are optional. Maps 1:1 to `AlertDialog.Close`.
+ */
+export function AlertDialogClose(props: AlertDialogCloseProps) {
+  return <BaseAlertDialog.Close className={alertDialogCloseVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-description.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-description.tsx
new file mode 100644
index 0000000..306d91d
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-description.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogDescriptionVariants } from "./variants";
+
+export type AlertDialogDescriptionProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Description>,
+  "className" | "style"
+>;
+
+/**
+ * The supporting description for the alert dialog. Base UI links it to the popup via
+ * `aria-describedby`. Maps 1:1 to `AlertDialog.Description`.
+ */
+export function AlertDialogDescription(props: AlertDialogDescriptionProps) {
+  return <BaseAlertDialog.Description className={alertDialogDescriptionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-popup.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-popup.tsx
new file mode 100644
index 0000000..c210476
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-popup.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogPopupVariants } from "./variants";
+
+export type AlertDialogPopupProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Popup>,
+  "className" | "style"
+>;
+
+/**
+ * The centered card that holds the alert content. Scales and fades on open/close using Base UI's
+ * `--transform-origin` and starting/ending transition styles. Maps 1:1 to `AlertDialog.Popup`.
+ */
+export function AlertDialogPopup(props: AlertDialogPopupProps) {
+  return <BaseAlertDialog.Popup className={alertDialogPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-portal.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-portal.tsx
new file mode 100644
index 0000000..5d630f0
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-portal.tsx
@@ -0,0 +1,7 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+
+/**
+ * Renders the backdrop and popup into a portal so they escape local stacking contexts. Maps 1:1 to
+ * `AlertDialog.Portal`.
+ */
+export const AlertDialogPortal = BaseAlertDialog.Portal;
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx
new file mode 100644
index 0000000..b031a7b
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-title.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogTitleVariants } from "./variants";
+
+export type AlertDialogTitleProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Title>,
+  "className" | "style"
+>;
+
+/**
+ * The accessible title for the alert dialog. Base UI links it to the popup via `aria-labelledby`.
+ * Maps 1:1 to `AlertDialog.Title`.
+ */
+export function AlertDialogTitle(props: AlertDialogTitleProps) {
+  return <BaseAlertDialog.Title className={alertDialogTitleVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-trigger.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-trigger.tsx
new file mode 100644
index 0000000..beaa2d5
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-trigger.tsx
@@ -0,0 +1,15 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+export type AlertDialogTriggerProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The button that opens the alert dialog. Base UI manages `aria-haspopup`/`aria-expanded` and focus
+ * restoration when the dialog closes. Maps 1:1 to `AlertDialog.Trigger`.
+ */
+export function AlertDialogTrigger(props: AlertDialogTriggerProps) {
+  return <BaseAlertDialog.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog-viewport.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog-viewport.tsx
new file mode 100644
index 0000000..4a2673f
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog-viewport.tsx
@@ -0,0 +1,17 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+import { alertDialogViewportVariants } from "./variants";
+
+export type AlertDialogViewportProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The full-screen container that centers the popup and provides a scrollable area for tall content.
+ * Maps 1:1 to `AlertDialog.Viewport`.
+ */
+export function AlertDialogViewport(props: AlertDialogViewportProps) {
+  return <BaseAlertDialog.Viewport className={alertDialogViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
new file mode 100644
index 0000000..495ac99
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  AlertDialog,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC alert-dialog parts by hand (Root › Trigger ›
+// Portal › Backdrop › Viewport › Popup, plus Title/Description/Close). The
+// components-tier `AlertDialogContent` ready-made composes the portal/backdrop/
+// viewport/popup for you. AlertDialog is always modal and non-dismissible, so it
+// requires an explicit Close response.
+const neutralButton =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+const dangerButton =
+  "inline-flex h-8 items-center rounded-md bg-danger-primary px-3 text-13 text-on-color outline-none";
+
+const meta = {
+  title: "UI/AlertDialog",
+  component: AlertDialog,
+  subcomponents: {
+    AlertDialogTrigger,
+    AlertDialogPortal,
+    AlertDialogBackdrop,
+    AlertDialogViewport,
+    AlertDialogPopup,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogClose,
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: a destructive confirmation requiring an explicit choice. */
+export const Anatomy: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger render={<button type="button" className={dangerButton} />}>
+        Delete account
+      </AlertDialogTrigger>
+      <AlertDialogPortal>
+        <AlertDialogBackdrop />
+        <AlertDialogViewport>
+          <AlertDialogPopup>
+            <div className="flex w-80 flex-col gap-2">
+              <AlertDialogTitle>Delete account?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This permanently deletes your account and cannot be undone.
+              </AlertDialogDescription>
+              <div className="mt-2 flex justify-end gap-2">
+                <AlertDialogClose render={<button type="button" className={neutralButton} />}>
+                  Cancel
+                </AlertDialogClose>
+                <AlertDialogClose render={<button type="button" className={dangerButton} />}>
+                  Delete
+                </AlertDialogClose>
+              </div>
+            </div>
+          </AlertDialogPopup>
+        </AlertDialogViewport>
+      </AlertDialogPortal>
+    </AlertDialog>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Delete account" }));
+    const dialog = await within(document.body).findByRole("alertdialog");
+    await expect(within(dialog).getByText("Delete account?")).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("alertdialog")).not.toBeInTheDocument(),
+    );
+  },
+};
diff --git a/packages/propel/src/ui/alert-dialog/alert-dialog.tsx b/packages/propel/src/ui/alert-dialog/alert-dialog.tsx
new file mode 100644
index 0000000..8219a4e
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/alert-dialog.tsx
@@ -0,0 +1,16 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
+import type * as React from "react";
+
+export type AlertDialogProps = Omit<
+  React.ComponentProps<typeof BaseAlertDialog.Root>,
+  "className" | "style"
+>;
+
+/**
+ * The alert dialog root that wires up open state and accessibility for its parts. Always modal and
+ * non-dismissible, so it requires an explicit user response. Maps 1:1 to Base UI's
+ * `AlertDialog.Root`.
+ */
+export function AlertDialog(props: AlertDialogProps) {
+  return <BaseAlertDialog.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/alert-dialog/index.tsx b/packages/propel/src/ui/alert-dialog/index.tsx
new file mode 100644
index 0000000..b94d221
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/index.tsx
@@ -0,0 +1,12 @@
+export { AlertDialog, type AlertDialogProps } from "./alert-dialog";
+export { AlertDialogBackdrop, type AlertDialogBackdropProps } from "./alert-dialog-backdrop";
+export { AlertDialogClose, type AlertDialogCloseProps } from "./alert-dialog-close";
+export {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from "./alert-dialog-description";
+export { AlertDialogPopup, type AlertDialogPopupProps } from "./alert-dialog-popup";
+export { AlertDialogPortal } from "./alert-dialog-portal";
+export { AlertDialogTitle, type AlertDialogTitleProps } from "./alert-dialog-title";
+export { AlertDialogTrigger, type AlertDialogTriggerProps } from "./alert-dialog-trigger";
+export { AlertDialogViewport, type AlertDialogViewportProps } from "./alert-dialog-viewport";
diff --git a/packages/propel/src/ui/alert-dialog/variants.ts b/packages/propel/src/ui/alert-dialog/variants.ts
new file mode 100644
index 0000000..25a2bb9
--- /dev/null
+++ b/packages/propel/src/ui/alert-dialog/variants.ts
@@ -0,0 +1,40 @@
+import { cva, cx } from "class-variance-authority";
+
+// AlertDialog is a structural overlay primitive. It is always modal and
+// non-dismissible, and Base UI drives every interactive state (open/closed,
+// starting/ending transition styles) as data attributes — so there are no
+// styling axes (variant/tone/magnitude) to expose. The cva pairings below hold
+// the static chrome so each part is styled in one place, with no `className` at
+// the boundary. Root, Trigger, and Portal carry no styling.
+
+export const alertDialogBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
+
+export const alertDialogViewportVariants = cva(
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+);
+
+export const alertDialogPopupVariants = cva(
+  cx(
+    "rounded-lg border-sm border-subtle bg-layer-1 p-4 shadow-overlay-100 outline-none",
+    "origin-(--transform-origin) transition-[opacity,transform] duration-200",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ),
+);
+
+export const alertDialogTitleVariants = cva("text-16 font-semibold text-primary");
+
+export const alertDialogDescriptionVariants = cva("text-14 text-secondary");
+
+export const alertDialogCloseVariants = cva(
+  cx(
+    "inline-flex items-center justify-center rounded-md text-icon-secondary outline-none",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx b/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx
new file mode 100644
index 0000000..024af33
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-clear.tsx
@@ -0,0 +1,18 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { X } from "lucide-react";
+import type * as React from "react";
+
+import { autocompleteButtonVariants } from "./variants";
+
+export type AutocompleteClearProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Clear>,
+  "className" | "style"
+>;
+
+export function AutocompleteClear(props: AutocompleteClearProps) {
+  return (
+    <BaseAutocomplete.Clear className={autocompleteButtonVariants()} {...props}>
+      {props.children ?? <X aria-hidden className="size-4" />}
+    </BaseAutocomplete.Clear>
+  );
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx b/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx
new file mode 100644
index 0000000..bccf13f
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-empty.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompleteEmptyVariants } from "./variants";
+
+export type AutocompleteEmptyProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Empty>,
+  "className" | "style"
+>;
+
+export function AutocompleteEmpty(props: AutocompleteEmptyProps) {
+  return <BaseAutocomplete.Empty className={autocompleteEmptyVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx b/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx
new file mode 100644
index 0000000..0aa9ebf
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-input-group.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompleteInputGroupVariants } from "./variants";
+
+export type AutocompleteInputGroupProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.InputGroup>,
+  "className" | "style"
+>;
+
+export function AutocompleteInputGroup(props: AutocompleteInputGroupProps) {
+  return <BaseAutocomplete.InputGroup className={autocompleteInputGroupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-input.tsx b/packages/propel/src/ui/autocomplete/autocomplete-input.tsx
new file mode 100644
index 0000000..3f05378
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-input.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompleteInputVariants } from "./variants";
+
+export type AutocompleteInputProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Input>,
+  "className" | "style"
+>;
+
+export function AutocompleteInput(props: AutocompleteInputProps) {
+  return <BaseAutocomplete.Input className={autocompleteInputVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-item.tsx b/packages/propel/src/ui/autocomplete/autocomplete-item.tsx
new file mode 100644
index 0000000..8a71d7b
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-item.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompleteItemVariants } from "./variants";
+
+export type AutocompleteItemProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Item>,
+  "className" | "style"
+>;
+
+export function AutocompleteItem(props: AutocompleteItemProps) {
+  return <BaseAutocomplete.Item className={autocompleteItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-list.tsx b/packages/propel/src/ui/autocomplete/autocomplete-list.tsx
new file mode 100644
index 0000000..12d2d02
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-list.tsx
@@ -0,0 +1,3 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export const AutocompleteList = BaseAutocomplete.List;
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx b/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx
new file mode 100644
index 0000000..4024503
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-popup.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompletePopupVariants } from "./variants";
+
+export type AutocompletePopupProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Popup>,
+  "className" | "style"
+>;
+
+export function AutocompletePopup(props: AutocompletePopupProps) {
+  return <BaseAutocomplete.Popup className={autocompletePopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-portal.tsx b/packages/propel/src/ui/autocomplete/autocomplete-portal.tsx
new file mode 100644
index 0000000..ed335a1
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-portal.tsx
@@ -0,0 +1,3 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export const AutocompletePortal = BaseAutocomplete.Portal;
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx b/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx
new file mode 100644
index 0000000..f887d72
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-positioner.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import type * as React from "react";
+
+import { autocompletePositionerVariants } from "./variants";
+
+export type AutocompletePositionerProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Positioner>,
+  "className" | "style"
+>;
+
+export function AutocompletePositioner(props: AutocompletePositionerProps) {
+  return <BaseAutocomplete.Positioner className={autocompletePositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete-trigger.tsx b/packages/propel/src/ui/autocomplete/autocomplete-trigger.tsx
new file mode 100644
index 0000000..185e8bd
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete-trigger.tsx
@@ -0,0 +1,18 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { ChevronsUpDown } from "lucide-react";
+import type * as React from "react";
+
+import { autocompleteButtonVariants } from "./variants";
+
+export type AutocompleteTriggerProps = Omit<
+  React.ComponentProps<typeof BaseAutocomplete.Trigger>,
+  "className" | "style"
+>;
+
+export function AutocompleteTrigger(props: AutocompleteTriggerProps) {
+  return (
+    <BaseAutocomplete.Trigger className={autocompleteButtonVariants()} {...props}>
+      {props.children ?? <ChevronsUpDown aria-hidden className="size-4" />}
+    </BaseAutocomplete.Trigger>
+  );
+}
diff --git a/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx b/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx
new file mode 100644
index 0000000..9f8d04f
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldDescription, FieldError, FieldLabel } from "../field/index";
+import {
+  Autocomplete,
+  AutocompleteClear,
+  AutocompleteEmpty,
+  AutocompleteInput,
+  AutocompleteInputGroup,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopup,
+  AutocompletePortal,
+  AutocompletePositioner,
+  AutocompleteTrigger,
+} from "./index";
+
+const IMAGES = ["nginx:1.29-alpine", "node:22-slim", "postgres:18", "redis:8.2.2-alpine"];
+
+const meta = {
+  title: "UI/Autocomplete",
+  component: Autocomplete,
+  subcomponents: {
+    AutocompleteInputGroup,
+    AutocompleteInput,
+    AutocompleteClear,
+    AutocompleteTrigger,
+    AutocompletePortal,
+    AutocompletePositioner,
+    AutocompletePopup,
+    AutocompleteList,
+    AutocompleteItem,
+    AutocompleteEmpty,
+  },
+} satisfies Meta<typeof Autocomplete>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Autocomplete composes with Field labels and descriptions for free-form searchable input. */
+export const Default: Story = {
+  args: { items: IMAGES, mode: "both", required: true },
+  render: (args) => (
+    <Field name="containerImage">
+      <Autocomplete {...args}>
+        <FieldLabel magnitude="md">Container image</FieldLabel>
+        <AutocompleteInputGroup>
+          <AutocompleteInput placeholder="e.g. docker.io/library/node:latest" />
+          <AutocompleteClear />
+          <AutocompleteTrigger />
+        </AutocompleteInputGroup>
+        <FieldDescription magnitude="md">Enter a registry URL with optional tags.</FieldDescription>
+        <AutocompletePortal>
+          <AutocompletePositioner>
+            <AutocompletePopup>
+              <AutocompleteEmpty>No matches</AutocompleteEmpty>
+              <AutocompleteList>
+                {IMAGES.map((image) => (
+                  <AutocompleteItem key={image} value={image}>
+                    {image}
+                  </AutocompleteItem>
+                ))}
+              </AutocompleteList>
+            </AutocompletePopup>
+          </AutocompletePositioner>
+        </AutocompletePortal>
+        <FieldError magnitude="md" />
+      </Autocomplete>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Container image" }), "node");
+    await expect(within(document.body).getByText("node:22-slim")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/ui/autocomplete/autocomplete.tsx b/packages/propel/src/ui/autocomplete/autocomplete.tsx
new file mode 100644
index 0000000..cd556f5
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/autocomplete.tsx
@@ -0,0 +1,13 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+
+export type AutocompleteProps<Value> = Omit<
+  BaseAutocomplete.Root.Props<Value>,
+  "className" | "style"
+> & {
+  /** Items to display in the autocomplete list. */
+  items?: readonly Value[];
+};
+
+export function Autocomplete<Value>(props: AutocompleteProps<Value>) {
+  return <BaseAutocomplete.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/autocomplete/index.tsx b/packages/propel/src/ui/autocomplete/index.tsx
new file mode 100644
index 0000000..677082e
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/index.tsx
@@ -0,0 +1,17 @@
+export { Autocomplete, type AutocompleteProps } from "./autocomplete";
+export { AutocompleteClear, type AutocompleteClearProps } from "./autocomplete-clear";
+export { AutocompleteEmpty, type AutocompleteEmptyProps } from "./autocomplete-empty";
+export { AutocompleteInput, type AutocompleteInputProps } from "./autocomplete-input";
+export {
+  AutocompleteInputGroup,
+  type AutocompleteInputGroupProps,
+} from "./autocomplete-input-group";
+export { AutocompleteItem, type AutocompleteItemProps } from "./autocomplete-item";
+export { AutocompleteList } from "./autocomplete-list";
+export { AutocompletePopup, type AutocompletePopupProps } from "./autocomplete-popup";
+export { AutocompletePortal } from "./autocomplete-portal";
+export {
+  AutocompletePositioner,
+  type AutocompletePositionerProps,
+} from "./autocomplete-positioner";
+export { AutocompleteTrigger, type AutocompleteTriggerProps } from "./autocomplete-trigger";
diff --git a/packages/propel/src/ui/autocomplete/variants.ts b/packages/propel/src/ui/autocomplete/variants.ts
new file mode 100644
index 0000000..72756a6
--- /dev/null
+++ b/packages/propel/src/ui/autocomplete/variants.ts
@@ -0,0 +1,27 @@
+import { cva, cx } from "class-variance-authority";
+
+export const autocompleteInputGroupVariants = cva(
+  cx(
+    "flex min-h-9 min-w-64 items-center gap-2 rounded-md border-sm border-subtle bg-layer-2 px-3",
+    "focus-within:border-accent-strong focus-within:ring-2 focus-within:ring-accent-strong/20",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const autocompleteInputVariants = cva(
+  "min-w-0 flex-1 bg-transparent text-14 text-primary outline-none placeholder:text-placeholder disabled:text-disabled",
+);
+export const autocompleteButtonVariants = cva(
+  "flex size-6 items-center justify-center rounded-sm text-icon-secondary outline-none hover:bg-layer-transparent-hover focus-visible:bg-layer-transparent-hover data-disabled:text-disabled",
+);
+export const autocompletePositionerVariants = cva("z-50 outline-none");
+export const autocompletePopupVariants = cva(
+  "max-h-[min(var(--available-height),18rem)] min-w-(--anchor-width) overflow-y-auto rounded-md border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100",
+);
+export const autocompleteItemVariants = cva(
+  cx(
+    "grid min-h-8 cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm px-2 text-14 text-primary outline-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const autocompleteEmptyVariants = cva("px-2 py-1.5 text-13 text-tertiary");
diff --git a/packages/propel/src/ui/avatar-group/avatar-group.stories.tsx b/packages/propel/src/ui/avatar-group/avatar-group.stories.tsx
new file mode 100644
index 0000000..fba57c3
--- /dev/null
+++ b/packages/propel/src/ui/avatar-group/avatar-group.stories.tsx
@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/index";
+import { AvatarGroup } from "./index";
+
+// UI-tier story: composes the ATOMIC avatar parts (`Avatar` root + `AvatarImage` +
+// `AvatarFallback`). The components-tier `AvatarGroup` story uses the ready-made
+// `Avatar` (image → initials → person icon) instead.
+const meta = {
+  title: "UI/AvatarGroup",
+  component: AvatarGroup,
+  subcomponents: { Avatar, AvatarImage, AvatarFallback },
+  args: { magnitude: "sm" },
+} satisfies Meta<typeof AvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** `magnitude` on the group sizes every avatar at once — the children don't set it. */
+export const TwoMembers: Story = {
+  render: (args) => (
+    <AvatarGroup {...args}>
+      <Avatar role="img" aria-label="Ada">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+        <AvatarFallback tone="orange">AL</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="Grace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+        <AvatarFallback tone="indigo">GH</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
+
+/** Three avatars, the last one initials-only (no image). */
+export const ThreeMembers: Story = {
+  render: (args) => (
+    <AvatarGroup {...args}>
+      <Avatar role="img" aria-label="Ada">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+        <AvatarFallback tone="orange">AL</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="Grace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+        <AvatarFallback tone="indigo">GH</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="Linus">
+        <AvatarFallback tone="emerald">LT</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+  play: async ({ canvas }) => {
+    // Each avatar exposes role="img"; querying by role proves all three rendered.
+    const avatars = canvas.getAllByRole("img");
+    await expect(avatars).toHaveLength(3);
+    // The group's `magnitude="sm"` flows to every avatar (sm = 24px) even though
+    // none set it themselves.
+    await expect(avatars[0]).toHaveStyle({ width: "24px" });
+  },
+};
+
+/**
+ * Overflow pattern: a few member images, then a final avatar whose fallback shows a "+N" count for
+ * the rest.
+ */
+export const OverflowCount: Story = {
+  render: (args) => (
+    <AvatarGroup {...args}>
+      <Avatar role="img" aria-label="Ada Lovelace">
+        <AvatarImage src="https://i.pravatar.cc/64?img=47" alt="" />
+        <AvatarFallback tone="orange">AL</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="Grace Hopper">
+        <AvatarImage src="https://i.pravatar.cc/64?img=32" alt="" />
+        <AvatarFallback tone="indigo">GH</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="Linus Torvalds">
+        <AvatarImage src="https://i.pravatar.cc/64?img=12" alt="" />
+        <AvatarFallback tone="emerald">LT</AvatarFallback>
+      </Avatar>
+      <Avatar role="img" aria-label="4 more members">
+        <AvatarFallback tone="purple">+4</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
diff --git a/packages/propel/src/ui/avatar-group/avatar-group.tsx b/packages/propel/src/ui/avatar-group/avatar-group.tsx
new file mode 100644
index 0000000..334d954
--- /dev/null
+++ b/packages/propel/src/ui/avatar-group/avatar-group.tsx
@@ -0,0 +1,34 @@
+import type * as React from "react";
+
+import { AvatarGroupContext, type AvatarMagnitude } from "../../ui/avatar";
+import { avatarGroupVariants } from "./variants";
+
+// Figma's "Avatar Groups" component only defines three sizes (Small/Base/Large =
+// 16/20/24px), so groups are limited to the matching magnitudes — narrower than a
+// standalone Avatar's full scale.
+export type AvatarGroupMagnitude = Extract<AvatarMagnitude, "2xs" | "xs" | "sm">;
+
+export type AvatarGroupProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
+  /** Shared size for every avatar in the group; an avatar's own `magnitude` overrides it. */
+  magnitude: AvatarGroupMagnitude;
+};
+
+// Overlapping stack of avatars — mirrors the Figma "Avatar groups" -6px overlap.
+// `-space-x-1.5` handles the overlap (negative margin between siblings) and each
+// `Avatar`'s own `border-subtle` is the single ring that separates them, matching
+// Figma. `magnitude` flows through context so the whole group stays one size.
+// None of these reach into the children directly:
+//
+//   <AvatarGroup magnitude="sm">
+//     <Avatar src={a} />
+//     <Avatar src={b} />
+//   </AvatarGroup>
+export function AvatarGroup({ children, magnitude, ...props }: AvatarGroupProps) {
+  return (
+    <AvatarGroupContext.Provider value={magnitude}>
+      <div className={avatarGroupVariants()} {...props}>
+        {children}
+      </div>
+    </AvatarGroupContext.Provider>
+  );
+}
diff --git a/packages/propel/src/ui/avatar-group/index.tsx b/packages/propel/src/ui/avatar-group/index.tsx
new file mode 100644
index 0000000..751a93f
--- /dev/null
+++ b/packages/propel/src/ui/avatar-group/index.tsx
@@ -0,0 +1 @@
+export * from "./avatar-group";
diff --git a/packages/propel/src/ui/avatar-group/variants.ts b/packages/propel/src/ui/avatar-group/variants.ts
new file mode 100644
index 0000000..e3efe02
--- /dev/null
+++ b/packages/propel/src/ui/avatar-group/variants.ts
@@ -0,0 +1,6 @@
+import { cva } from "class-variance-authority";
+
+// Overlapping stack of avatars — mirrors the Figma "Avatar groups" -6px overlap.
+// `-space-x-1.5` is the negative margin between siblings; each `Avatar`'s own
+// `border-subtle` is the single ring that separates them.
+export const avatarGroupVariants = cva("inline-flex items-center -space-x-1.5");
diff --git a/packages/propel/src/ui/avatar/avatar-fallback.tsx b/packages/propel/src/ui/avatar/avatar-fallback.tsx
new file mode 100644
index 0000000..6309e89
--- /dev/null
+++ b/packages/propel/src/ui/avatar/avatar-fallback.tsx
@@ -0,0 +1,19 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { avatarFallbackVariants } from "./variants";
+
+/** Props for {@link AvatarFallback}; 1:1 with Base UI `Avatar.Fallback`, plus a `tone`. */
+export type AvatarFallbackProps = Omit<
+  React.ComponentProps<typeof BaseAvatar.Fallback>,
+  "className" | "style"
+> & {
+  /** Initials surface color. `none` (default) is the anonymous/icon state. */
+  tone?: NonNullable<VariantProps<typeof avatarFallbackVariants>["tone"]>;
+};
+
+/** 1:1 wrapper around Base UI `Avatar.Fallback`. */
+export function AvatarFallback({ tone = "none", ...props }: AvatarFallbackProps) {
+  return <BaseAvatar.Fallback className={avatarFallbackVariants({ tone })} {...props} />;
+}
diff --git a/packages/propel/src/ui/avatar/avatar-image.tsx b/packages/propel/src/ui/avatar/avatar-image.tsx
new file mode 100644
index 0000000..682c16b
--- /dev/null
+++ b/packages/propel/src/ui/avatar/avatar-image.tsx
@@ -0,0 +1,15 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import type * as React from "react";
+
+import { avatarImageVariants } from "./variants";
+
+/** Props for {@link AvatarImage}; 1:1 with Base UI `Avatar.Image`. */
+export type AvatarImageProps = Omit<
+  React.ComponentProps<typeof BaseAvatar.Image>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Avatar.Image`. */
+export function AvatarImage(props: AvatarImageProps) {
+  return <BaseAvatar.Image className={avatarImageVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/avatar/avatar.stories.tsx b/packages/propel/src/ui/avatar/avatar.stories.tsx
new file mode 100644
index 0000000..1a48e4e
--- /dev/null
+++ b/packages/propel/src/ui/avatar/avatar.stories.tsx
@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { User } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Avatar, AVATAR_TONES, AvatarFallback, AvatarImage, type AvatarMagnitude } from "./index";
+
+const MAGNITUDES: AvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+// UI-tier story: composes the ATOMIC avatar parts — `Avatar` (root) holding an
+// `AvatarImage` and/or `AvatarFallback`. The components-tier `Avatar` story uses the
+// ready-made avatar (`src` → initials → person icon), which assembles these parts.
+const meta = {
+  title: "UI/Avatar",
+  component: Avatar,
+  subcomponents: { AvatarImage, AvatarFallback },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root holding an image, with initials as the fallback while the image loads/fails. */
+export const Default: Story = {
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Avatar {...args} role="img" aria-label="Ada Lovelace">
+      <AvatarImage src="https://i.pravatar.cc/128?img=47" alt="" />
+      <AvatarFallback tone="orange">AL</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+/** Every avatar size (Figma 2xs 16px → 3xl 64px). */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Avatar key={magnitude} magnitude={magnitude} role="img" aria-label={magnitude}>
+          <AvatarFallback tone="indigo">AL</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The fallback's `tone` colors the initials surface — one swatch per Figma avatar tone. */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {AVATAR_TONES.map((tone) => (
+        <Avatar key={tone} magnitude="lg" role="img" aria-label={tone}>
+          <AvatarFallback tone={tone}>{tone[0]?.toUpperCase()}</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The three fallback states: image, initials, and the anonymous person icon (`tone="none"`). */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Avatar magnitude="lg" role="img" aria-label="Image">
+        <AvatarImage src="https://i.pravatar.cc/128?img=47" alt="" />
+        <AvatarFallback tone="orange">AL</AvatarFallback>
+      </Avatar>
+      <Avatar magnitude="lg" role="img" aria-label="Initials">
+        <AvatarFallback tone="emerald">GH</AvatarFallback>
+      </Avatar>
+      <Avatar magnitude="lg" role="img" aria-label="Anonymous">
+        <AvatarFallback tone="none">
+          <User aria-hidden className="size-6" />
+        </AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};
+
+/**
+ * The single project-wide CSS check: an `md` avatar is `size-7` (28px) and the tone utility
+ * resolves to a real color. Tagged out of the sidebar/docs/manifest but still runs under `test`.
+ */
+export const CssCheck: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Avatar magnitude="md" role="img" aria-label="Ada Lovelace">
+      <AvatarFallback tone="indigo">AL</AvatarFallback>
+    </Avatar>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("img", { name: "Ada Lovelace" })).toHaveStyle({ width: "28px" });
+    const initials = canvas.getByText("AL");
+    await expect(getComputedStyle(initials).backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+  },
+};
diff --git a/packages/propel/src/ui/avatar/avatar.tsx b/packages/propel/src/ui/avatar/avatar.tsx
new file mode 100644
index 0000000..03e852e
--- /dev/null
+++ b/packages/propel/src/ui/avatar/avatar.tsx
@@ -0,0 +1,67 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { avatarVariants } from "./variants";
+
+export type AvatarMagnitude = NonNullable<VariantProps<typeof avatarVariants>["magnitude"]>;
+
+/**
+ * Set by `AvatarGroup` to give every avatar inside it the same `magnitude`, so a group stays
+ * consistently sized. An avatar's own `magnitude` prop takes precedence.
+ */
+export const AvatarGroupContext = React.createContext<AvatarMagnitude | undefined>(undefined);
+
+// The initials tone palette the designer defined for avatars (Figma label colors).
+export const AVATAR_TONES = ["orange", "indigo", "emerald", "crimson", "pink", "purple"] as const;
+export type AvatarTone = (typeof AVATAR_TONES)[number];
+
+// Initials background per tone, kept for callers that style their own fallback surface
+// (e.g. `WorkspaceAvatar`). `AvatarFallback`'s `tone` variant carries the same palette.
+export const initialsToneClass: Record<AvatarTone, string> = {
+  orange: "bg-label-orange-bg-strong",
+  indigo: "bg-label-indigo-bg-strong",
+  emerald: "bg-label-emerald-bg-strong",
+  crimson: "bg-label-crimson-bg-strong",
+  pink: "bg-label-pink-bg-strong",
+  purple: "bg-label-purple-bg-strong",
+};
+
+/**
+ * Deterministically pick a tone from a seed (e.g. a name or user id) so the same person always gets
+ * the same color — the "system picks it" behavior. Used as the default when `tone` is not set.
+ */
+export function getAvatarTone(seed: string): AvatarTone {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash * 31 + seed.charCodeAt(i)) | 0;
+  }
+  return AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length];
+}
+
+/** Props for {@link Avatar} (the Base UI `Avatar.Root`), plus a `magnitude`. */
+export type AvatarProps = Omit<
+  React.ComponentProps<typeof BaseAvatar.Root>,
+  "className" | "style"
+> & {
+  /**
+   * Avatar size. Optional because an `Avatar` inside an `AvatarGroup` inherits the group's
+   * magnitude; standalone it falls back to `md`.
+   */
+  magnitude?: AvatarMagnitude;
+};
+
+/**
+ * The styled `Avatar.Root` — a single element that holds an `AvatarImage` and/or `AvatarFallback`.
+ * Maps 1:1 to Base UI's `Avatar.Root`. For the ready-made image+initials+icon avatar, use the
+ * `Avatar` from `@plane/propel/components/avatar`.
+ */
+export function Avatar({ magnitude, ...props }: AvatarProps) {
+  // An explicit `magnitude` wins; otherwise inherit the group's; a standalone avatar with
+  // neither falls back to `md` so it always has a size.
+  const groupMagnitude = React.useContext(AvatarGroupContext);
+  const effectiveMagnitude = magnitude ?? groupMagnitude ?? "md";
+  return (
+    <BaseAvatar.Root className={avatarVariants({ magnitude: effectiveMagnitude })} {...props} />
+  );
+}
diff --git a/packages/propel/src/ui/avatar/index.tsx b/packages/propel/src/ui/avatar/index.tsx
new file mode 100644
index 0000000..6b930d5
--- /dev/null
+++ b/packages/propel/src/ui/avatar/index.tsx
@@ -0,0 +1,3 @@
+export * from "./avatar";
+export { AvatarFallback, type AvatarFallbackProps } from "./avatar-fallback";
+export { AvatarImage, type AvatarImageProps } from "./avatar-image";
diff --git a/packages/propel/src/ui/avatar/variants.ts b/packages/propel/src/ui/avatar/variants.ts
new file mode 100644
index 0000000..1fa757d
--- /dev/null
+++ b/packages/propel/src/ui/avatar/variants.ts
@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+
+export const avatarImageVariants = cva("size-full object-cover");
+
+// The fallback's `tone` colors the initials surface. `none` (the default) is the
+// anonymous/icon state — neutral layer + muted placeholder icon. The named tones are
+// the Figma avatar label colors (initials on a solid tone, white text). Exposing this
+// as a variant lets a composition (`components/avatar`) style the fallback without a
+// `className`.
+export const avatarFallbackVariants = cva(
+  "flex size-full items-center justify-center leading-none",
+  {
+    variants: {
+      tone: {
+        none: "bg-layer-1 text-icon-placeholder",
+        orange: "bg-label-orange-bg-strong text-on-color",
+        indigo: "bg-label-indigo-bg-strong text-on-color",
+        emerald: "bg-label-emerald-bg-strong text-on-color",
+        crimson: "bg-label-crimson-bg-strong text-on-color",
+        pink: "bg-label-pink-bg-strong text-on-color",
+        purple: "bg-label-purple-bg-strong text-on-color",
+      },
+    },
+  },
+);
+
+// Magnitudes follow the Figma "Avatar" component scale (px): 2xs 16 → 3xl 64.
+// Border is 1px (`border-sm`) up to 32px and 2px (`border-lg`) from 40px up.
+// `bg-layer-1` is the avatar's own neutral backdrop (shows behind a transparent fallback).
+export const avatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-clip rounded-full border-subtle bg-layer-1",
+  {
+    variants: {
+      magnitude: {
+        "2xs": "size-4 border-sm text-caption-2xs-regular",
+        xs: "size-5 border-sm text-11",
+        sm: "size-6 border-sm text-12",
+        md: "size-7 border-sm text-13",
+        lg: "size-8 border-sm text-16",
+        xl: "size-10 border-lg text-18",
+        "2xl": "size-14 border-lg text-24",
+        "3xl": "size-16 border-lg text-28",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/badge/badge.stories.tsx b/packages/propel/src/ui/badge/badge.stories.tsx
new file mode 100644
index 0000000..997cfb4
--- /dev/null
+++ b/packages/propel/src/ui/badge/badge.stories.tsx
@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check } from "lucide-react";
+
+import { iconControl } from "../../storybook/icon-control";
+import { Badge, type BadgeMagnitude, type BadgeTone } from "./index";
+
+const TONES: BadgeTone[] = [
+  "neutral",
+  "grey",
+  "brand",
+  "info",
+  "indigo",
+  "success",
+  "emerald",
+  "warning",
+  "yellow",
+  "danger",
+  "crimson",
+  "orange",
+];
+
+const MAGNITUDES: BadgeMagnitude[] = ["sm", "md", "lg"];
+
+// Design-review convention for every propel component:
+//   1. `parameters.design` links the story to its Figma frame, so the Storybook
+//      "Design" panel (@storybook/addon-designs) shows code + Figma side by side.
+//   2. Components that style interaction via CSS `hover:`/`active:`/`focus-visible:`
+//      utilities get a `States` story using storybook-addon-pseudo-states to force
+//      those pseudo-classes side by side (see e.g. Accordion). Badge is static — it
+//      has no interaction-state styling — so it gets NO pseudo-states story; its
+//      variation is fully covered by Tones + Magnitudes.
+const meta = {
+  title: "UI/Badge",
+  component: Badge,
+  // Give the `inlineStartNode` ReactNode prop a usable icon picker in the Controls panel.
+  argTypes: { inlineStartNode: iconControl },
+  args: {
+    children: "Badge",
+    tone: "neutral",
+    magnitude: "md",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1532-1177",
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Every color/intent the badge supports, side by side. */
+export const Tones: Story = {
+  // The grid iterates `tone` and labels each swatch with the tone name, so disable just
+  // those two controls; `magnitude` and `inlineStartNode` stay live and update every swatch
+  // at once.
+  argTypes: { tone: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      {TONES.map((tone) => (
+        <Badge key={tone} {...args} tone={tone}>
+          {tone}
+        </Badge>
+      ))}
+    </div>
+  ),
+};
+
+/** The three sizes (Figma S / Base / Large). */
+export const Magnitudes: Story = {
+  // Iterates `magnitude` (and labels with it); `tone` and `inlineStartNode` stay live.
+  argTypes: { magnitude: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Badge key={magnitude} {...args} magnitude={magnitude}>
+          {magnitude}
+        </Badge>
+      ))}
+    </div>
+  ),
+};
+
+/** Badges with an optional leading icon, which is sized to the magnitude and tinted to the tone. */
+export const WithIcon: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Badge
+          key={magnitude}
+          {...args}
+          tone="success"
+          magnitude={magnitude}
+          inlineStartNode={<Check />}
+        >
+          Done
+        </Badge>
+      ))}
+    </div>
+  ),
+};
+
+// The Figma "Plan Badges" frame defines a paid/free treatment for plan and
+// upgrade affordances. Its two fills (Figma tokens `plans/brand/*` and
+// `plans/neutral/*`) already exist on Badge's `tone` axis, so a plan badge is
+// just a tone choice -- no new component or axis is needed:
+//   paid -> `brand`  (subtle brand-accent fill + brand text, the "upgrade" accent)
+//   free -> `grey`   (neutral grey fill + grey text)
+// Both follow propel semantic tokens, so dark mode tracks automatically. The
+// magnitudes (sm/md/lg) and radius/padding match the standard Badge steps.
+const PLAN_TONES = { paid: "brand", free: "grey" } as const satisfies Record<
+  "paid" | "free",
+  BadgeTone
+>;
+
+/**
+ * The "Plan Badges" treatment: `paid` reads as a `brand`/upgrade accent, `free` as neutral `grey`.
+ * These are plain Badge tones, shown here at every magnitude.
+ */
+export const PlanBadges: Story = {
+  parameters: {
+    controls: { disable: true },
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=3657-77",
+    },
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      {(["paid", "free"] as const).map((plan) => (
+        <div key={plan} className="flex items-center gap-3">
+          {MAGNITUDES.map((magnitude) => (
+            <Badge key={magnitude} {...args} tone={PLAN_TONES[plan]} magnitude={magnitude}>
+              {plan === "paid" ? "Paid" : "Free"}
+            </Badge>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/badge/badge.tsx b/packages/propel/src/ui/badge/badge.tsx
new file mode 100644
index 0000000..a0c6da2
--- /dev/null
+++ b/packages/propel/src/ui/badge/badge.tsx
@@ -0,0 +1,41 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { badgeVariants } from "./variants";
+
+export type BadgeMagnitude = NonNullable<VariantProps<typeof badgeVariants>["magnitude"]>;
+export type BadgeTone = NonNullable<VariantProps<typeof badgeVariants>["tone"]>;
+
+export type BadgeProps = Omit<React.ComponentProps<"span">, "className" | "style"> & {
+  /** The badge label — text, a count, or any inline content. */
+  children?: React.ReactNode;
+  /** Color/intent of the badge. */
+  tone: BadgeTone;
+  /** Size of the badge. */
+  magnitude: BadgeMagnitude;
+  /**
+   * Node rendered before the label (inline-start). An icon or any node; it is sized to the badge's
+   * `--node-size` and inherits the tone's text color. Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+  /** Node rendered after the label (inline-end). Sized to the badge's `--node-size`. Decorative. */
+  inlineEndNode?: React.ReactNode;
+};
+
+export function Badge({
+  children,
+  tone,
+  magnitude,
+  inlineStartNode,
+  inlineEndNode,
+  ...props
+}: BadgeProps) {
+  return (
+    <span className={badgeVariants({ tone, magnitude })} {...props}>
+      {inlineStartNode ? <NodeSlot aria-hidden>{inlineStartNode}</NodeSlot> : null}
+      {children}
+      {inlineEndNode ? <NodeSlot aria-hidden>{inlineEndNode}</NodeSlot> : null}
+    </span>
+  );
+}
diff --git a/packages/propel/src/ui/badge/index.tsx b/packages/propel/src/ui/badge/index.tsx
new file mode 100644
index 0000000..80844a4
--- /dev/null
+++ b/packages/propel/src/ui/badge/index.tsx
@@ -0,0 +1 @@
+export * from "./badge";
diff --git a/packages/propel/src/ui/badge/variants.ts b/packages/propel/src/ui/badge/variants.ts
new file mode 100644
index 0000000..8e98d1b
--- /dev/null
+++ b/packages/propel/src/ui/badge/variants.ts
@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+
+// Magnitudes follow the Figma "Badge" Size axis: S → Base → Large. Mapped onto the
+// t-shirt scale by their label text size (S 12px, Base 13px, Large 14px), consistent
+// with how Avatar names its steps. Height/padding/radius track Figma per step.
+export const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 leading-none font-medium whitespace-nowrap",
+  {
+    variants: {
+      magnitude: {
+        // S: 18px tall, 4px x-padding, 4px radius (radius/sm), text/12, 14px nodes.
+        sm: "h-[18px] rounded-sm px-1 text-12 [--node-size:0.875rem]",
+        // Base: 20px tall, 6px x-padding, 6px radius (radius/md), text/13, 14px nodes.
+        md: "h-5 rounded-md px-1.5 text-13 [--node-size:0.875rem]",
+        // Large: 24px tall, 8px x-padding, 6px radius (radius/md), text/14, 16px nodes.
+        lg: "h-6 rounded-md px-2 text-14 [--node-size:1rem]",
+      },
+      // The Color axis. Label-hue tones map to the `bg-label-*`/`text-label-*`
+      // utilities; semantic tones (brand/info/success/warning/danger) map to the
+      // matching subtle background + primary text tokens — no arbitrary hex.
+      tone: {
+        neutral: "bg-layer-3 text-label-grey-text",
+        grey: "bg-label-grey-bg text-label-grey-text",
+        brand: "bg-accent-subtle text-accent-primary",
+        info: "bg-info-subtle text-info-primary",
+        indigo: "bg-label-indigo-bg text-label-indigo-text",
+        success: "bg-success-subtle text-success-primary",
+        emerald: "bg-label-emerald-bg text-label-emerald-text",
+        warning: "bg-warning-subtle text-warning-primary",
+        yellow: "bg-label-yellow-bg text-label-yellow-text",
+        danger: "bg-danger-subtle text-danger-primary",
+        crimson: "bg-label-crimson-bg text-label-crimson-text",
+        orange: "bg-label-orange-bg text-label-orange-text",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/banner/banner.stories.tsx b/packages/propel/src/ui/banner/banner.stories.tsx
new file mode 100644
index 0000000..073d6dd
--- /dev/null
+++ b/packages/propel/src/ui/banner/banner.stories.tsx
@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info } from "lucide-react";
+import { expect, fn } from "storybook/test";
+
+import { iconControl } from "../../storybook/icon-control";
+import { Button } from "../../ui/button/index";
+import { Banner, type BannerTone } from "./index";
+
+const TONES: BannerTone[] = ["neutral", "info", "accent", "warning", "danger"];
+
+const meta = {
+  title: "UI/Banner",
+  component: Banner,
+  // Icon picker control for the leading icon (None keeps the default tone icon).
+  argTypes: { inlineStartNode: iconControl },
+  args: {
+    title: "There is something that needs your attention",
+    variant: "page",
+    tone: "neutral",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1838-14322",
+    },
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Every intent (`tone`) side by side — the soft surface + foreground color per meaning. */
+export const Tones: Story = {
+  // Iterates `tone` (and pins `variant` to inline for the showcase), so disable those
+  // controls; the rest stay live and update every banner at once.
+  argTypes: { tone: { control: false }, variant: { control: false } },
+  render: (args) => (
+    <div className="flex w-160 flex-col gap-3">
+      {TONES.map((tone) => (
+        <Banner key={tone} {...args} variant="inline" tone={tone} />
+      ))}
+    </div>
+  ),
+};
+
+/** The two scopes (`variant`): the full-width page strip vs the rounded inline card. */
+export const Variants: Story = {
+  // Iterates `variant` (and pins `tone` to info for the comparison), so disable those
+  // controls; the rest stay live and update both banners at once.
+  argTypes: { variant: { control: false }, tone: { control: false } },
+  render: (args) => (
+    <div className="flex w-160 flex-col gap-4">
+      <Banner {...args} variant="page" tone="info" />
+      <Banner {...args} variant="inline" tone="info" />
+    </div>
+  ),
+};
+
+/**
+ * The full page banner from Figma (see the meta's design link): a message with trailing actions and
+ * a dismiss control. `actions` takes any nodes, so the banner composes propel `Button`s, here a
+ * ghost, a secondary, and a primary, matching the three buttons plus the close in the design.
+ */
+export const WithActions: Story = {
+  parameters: { controls: { disable: true } },
+  args: {
+    variant: "page",
+    tone: "neutral",
+    onDismiss: fn(),
+    actions: (
+      <>
+        <Button variant="ghost" tone="neutral" magnitude="sm">
+          Remind me later
+        </Button>
+        <Button variant="secondary" tone="neutral" magnitude="sm">
+          Learn more
+        </Button>
+        <Button variant="primary" tone="neutral" magnitude="sm">
+          Update now
+        </Button>
+      </>
+    ),
+  },
+};
+
+/** A dismissible inline banner. Clicking the dismiss button calls `onDismiss`. */
+export const Dismissible: Story = {
+  args: {
+    variant: "inline",
+    tone: "info",
+    onDismiss: fn(),
+  },
+};
+
+/**
+ * Real interaction test: clicking the dismiss button invokes `onDismiss`. The spy comes from a
+ * Storybook `fn()`; the button is queried by its `aria-label`. Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it stays out of the sidebar, docs, and AI manifest, but still
+ * runs under the default `test` tag.
+ */
+export const DismissCallsHandler: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: {
+    variant: "inline",
+    tone: "info",
+    onDismiss: fn(),
+  },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Dismiss" });
+    await userEvent.click(button);
+    await expect(args.onDismiss).toHaveBeenCalledTimes(1);
+  },
+};
+
+/**
+ * Optional content branches: consumers can hide the icon, pass a custom icon, render body-only
+ * content, and warning/danger tones use assertive `alert` semantics.
+ */
+export const OptionalContentSemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex w-160 flex-col gap-3">
+      <Banner variant="inline" tone="warning" inlineStartNode={null}>
+        Maintenance starts at 6 PM.
+      </Banner>
+      <Banner
+        variant="inline"
+        tone="info"
+        title="Custom icon"
+        inlineStartNode={<Info data-testid="custom-banner-icon" />}
+      />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const warning = canvas.getByRole("alert");
+    await expect(warning).toHaveTextContent("Maintenance starts at 6 PM.");
+    await expect(warning.querySelector("svg")).not.toBeInTheDocument();
+    await expect(canvas.getByTestId("custom-banner-icon")).toBeInTheDocument();
+    await expect(canvas.getByRole("status")).toHaveTextContent("Custom icon");
+  },
+};
diff --git a/packages/propel/src/ui/banner/banner.tsx b/packages/propel/src/ui/banner/banner.tsx
new file mode 100644
index 0000000..683f436
--- /dev/null
+++ b/packages/propel/src/ui/banner/banner.tsx
@@ -0,0 +1,123 @@
+import { cx, type VariantProps } from "class-variance-authority";
+import { CircleAlert, Info, Megaphone, TriangleAlert, X, type LucideIcon } from "lucide-react";
+import * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { bannerVariants } from "./variants";
+
+type BannerVariant = NonNullable<VariantProps<typeof bannerVariants>["variant"]>;
+export type BannerTone = NonNullable<VariantProps<typeof bannerVariants>["tone"]>;
+
+// Foreground (title + default icon) color per tone, mapped from the Figma
+// `text/*` and `icon/*` tokens to propel's semantic text utilities.
+// The title uses the `primary` tone text token. For danger and warning the `secondary`
+// step (red/700, amber/700) does not meet WCAG AA against its own soft tone background,
+// so per design those banners use the darker primary text and icon tokens.
+const toneTextClass: Record<BannerTone, string> = {
+  neutral: "text-secondary",
+  info: "text-info-primary",
+  accent: "text-accent-primary",
+  warning: "text-warning-primary",
+  danger: "text-danger-primary",
+};
+
+const toneIconClass: Record<BannerTone, string> = {
+  neutral: "text-icon-secondary",
+  info: "text-icon-info-secondary",
+  accent: "text-icon-accent-primary",
+  warning: "text-icon-warning-primary",
+  danger: "text-icon-danger-primary",
+};
+
+// The leading icon the system picks per tone when none is supplied. Treated as
+// content (overridable via `icon`), not a style variant.
+const toneIcon: Record<BannerTone, LucideIcon> = {
+  neutral: Info,
+  info: Info,
+  accent: Megaphone,
+  warning: TriangleAlert,
+  danger: CircleAlert,
+};
+
+// warning/danger are time-sensitive problems → `alert` (assertive). The calmer
+// tones are advisory → `status` (polite). Picks the right live-region semantics.
+const toneRole: Record<BannerTone, "status" | "alert"> = {
+  neutral: "status",
+  info: "status",
+  accent: "status",
+  warning: "alert",
+  danger: "alert",
+};
+
+export type BannerProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
+  /** Figma Scope: a full-width page strip (`page`) or a self-contained card (`inline`). */
+  variant: BannerVariant;
+  /** Figma Intent: the banner's meaning/color. */
+  tone: BannerTone;
+  /**
+   * Node rendered before the message (inline-start). Defaults to a tone-appropriate lucide icon;
+   * pass `null` to hide it. Sized to the banner's `--node-size`. Decorative, kept out of the name.
+   */
+  inlineStartNode?: React.ReactNode;
+  /** The banner's headline. Rendered as its own block above any `children` body. */
+  title?: React.ReactNode;
+  /** Trailing actions (e.g. buttons), placed after the message. */
+  actions?: React.ReactNode;
+  /** When provided, shows a dismiss button that calls this on click. */
+  onDismiss?: () => void;
+};
+
+export function Banner({
+  variant,
+  tone,
+  inlineStartNode,
+  title,
+  actions,
+  onDismiss,
+  children,
+  ...props
+}: BannerProps) {
+  // The page banner uses a 20px icon and a medium-weight message; the inline
+  // banner uses a 16px icon and a regular-weight message (per Figma typography).
+  const iconSize = variant === "page" ? "size-5" : "size-4";
+  const nodeSizeVar = variant === "page" ? "[--node-size:1.25rem]" : "[--node-size:1rem]";
+  const textWeight = variant === "page" ? "font-medium" : "font-normal";
+  const DefaultIcon = toneIcon[tone];
+  return (
+    <div
+      // `role`/`aria-live` come from the tone so assistive tech announces problems
+      // assertively and advisories politely; consumers can override via spread.
+      role={toneRole[tone]}
+      className={cx(bannerVariants({ variant, tone }))}
+      {...props}
+    >
+      {inlineStartNode === undefined ? (
+        <DefaultIcon aria-hidden className={cx("shrink-0", iconSize, toneIconClass[tone])} />
+      ) : inlineStartNode ? (
+        <NodeSlot aria-hidden className={cx(nodeSizeVar, toneIconClass[tone])}>
+          {inlineStartNode}
+        </NodeSlot>
+      ) : null}
+      <div
+        className={cx("min-w-0 flex-1 text-14 leading-relaxed", textWeight, toneTextClass[tone])}
+      >
+        {title ? <div>{title}</div> : null}
+        {children ? <div className={cx(title ? "mt-1" : undefined)}>{children}</div> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+      {onDismiss ? (
+        <button
+          type="button"
+          aria-label="Dismiss"
+          onClick={onDismiss}
+          className={cx(
+            "flex shrink-0 items-center justify-center rounded-md p-1 text-icon-tertiary",
+            "hover:bg-layer-1",
+          )}
+        >
+          <X aria-hidden className="size-4" />
+        </button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/propel/src/ui/banner/index.tsx b/packages/propel/src/ui/banner/index.tsx
new file mode 100644
index 0000000..b545097
--- /dev/null
+++ b/packages/propel/src/ui/banner/index.tsx
@@ -0,0 +1 @@
+export * from "./banner";
diff --git a/packages/propel/src/ui/banner/variants.ts b/packages/propel/src/ui/banner/variants.ts
new file mode 100644
index 0000000..3ce3503
--- /dev/null
+++ b/packages/propel/src/ui/banner/variants.ts
@@ -0,0 +1,33 @@
+import { cva } from "class-variance-authority";
+
+// Banner = the Figma "Banners" component. Two scopes (`variant`) and five intents
+// (`tone`). `page` is a full-width strip with a bottom border that sits at the top
+// of a page; `inline` is a self-contained rounded card placed within content.
+export const bannerVariants = cva("flex items-center overflow-clip", {
+  variants: {
+    // Figma "Scope": page banner (full-width strip) vs inline banner (rounded card).
+    variant: {
+      page: "gap-2 border-b px-4 py-3",
+      inline: "gap-2 rounded-lg border px-3 py-2",
+    },
+    // Figma "Intent": the meaning/color of the banner. Each tone sets its own soft
+    // background, border, and (via the text element / icon) foreground color.
+    tone: {
+      neutral: "",
+      info: "",
+      accent: "",
+      warning: "",
+      danger: "",
+    },
+  },
+  // Per Figma the neutral page banner sits on the page surface, while the colored
+  // tones use their soft tone surface; inline neutral uses the layered surface.
+  compoundVariants: [
+    { variant: "page", tone: "neutral", class: "border-subtle bg-surface-1" },
+    { variant: "inline", tone: "neutral", class: "border-subtle bg-surface-2" },
+    { tone: "info", class: "border-info-subtle bg-info-subtle" },
+    { tone: "accent", class: "border-accent-subtle bg-accent-subtle" },
+    { tone: "warning", class: "border-warning-subtle bg-warning-subtle" },
+    { tone: "danger", class: "border-danger-subtle bg-danger-subtle" },
+  ],
+});
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-item.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-item.tsx
new file mode 100644
index 0000000..3a43fac
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb-item.tsx
@@ -0,0 +1,8 @@
+import type * as React from "react";
+
+export type BreadcrumbItemProps = Omit<React.ComponentProps<"li">, "className" | "style">;
+
+/** One step in the trail: a list item holding a link, page, or dropdown crumb. */
+export function BreadcrumbItem(props: BreadcrumbItemProps) {
+  return <li className="inline-flex items-center" {...props} />;
+}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-link.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-link.tsx
new file mode 100644
index 0000000..92368ed
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb-link.tsx
@@ -0,0 +1,11 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { crumbVariants } from "./variants";
+
+export type BreadcrumbLinkProps = Omit<React.ComponentProps<"a">, "className" | "style">;
+
+/** A navigable crumb — renders an anchor styled as a hoverable pill. */
+export function BreadcrumbLink(props: BreadcrumbLinkProps) {
+  return <a className={cx(crumbVariants({ interactive: true }))} {...props} />;
+}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-page.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-page.tsx
new file mode 100644
index 0000000..0f0574c
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb-page.tsx
@@ -0,0 +1,17 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { crumbVariants } from "./variants";
+
+export type BreadcrumbPageProps = Omit<React.ComponentProps<"span">, "className" | "style">;
+
+/** The current page — the last, non-navigable crumb. */
+export function BreadcrumbPage(props: BreadcrumbPageProps) {
+  return (
+    <span
+      aria-current="page"
+      className={cx(crumbVariants({ interactive: false }), "text-primary")}
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-separator.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-separator.tsx
new file mode 100644
index 0000000..761ddd4
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb-separator.tsx
@@ -0,0 +1,18 @@
+import { ChevronRight } from "lucide-react";
+import type * as React from "react";
+
+export type BreadcrumbSeparatorProps = Omit<React.ComponentProps<"li">, "className" | "style">;
+
+/** The visual divider between crumbs. */
+export function BreadcrumbSeparator({ children, ...props }: BreadcrumbSeparatorProps) {
+  return (
+    <li
+      aria-hidden
+      role="presentation"
+      className="flex items-center px-1 text-icon-tertiary"
+      {...props}
+    >
+      {children ?? <ChevronRight className="size-3.5 rtl:-scale-x-100" />}
+    </li>
+  );
+}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb-trigger.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb-trigger.tsx
new file mode 100644
index 0000000..775c7c5
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb-trigger.tsx
@@ -0,0 +1,30 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cx } from "class-variance-authority";
+
+import { crumbTriggerVariants, crumbVariants } from "./variants";
+
+export type BreadcrumbTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+> & {
+  /** Adds a `group/trigger` marker so descendants can react to the open state. */
+  group?: boolean;
+};
+
+/**
+ * A crumb styled as a menu trigger — applies the interactive crumb chrome plus the open-state
+ * styling. Compose a `Menu.Trigger` through the `render` prop.
+ */
+export function BreadcrumbTrigger({ group = false, render, ...props }: BreadcrumbTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    ...(render == null ? { type: "button" } : null),
+    className: cx(crumbVariants({ interactive: true }), crumbTriggerVariants({ group })),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps(props, defaultProps),
+  });
+}
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx
new file mode 100644
index 0000000..758546d
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Layers } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbTrigger,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC breadcrumb parts (each renders a single element).
+// The components-tier `Breadcrumb` story shows the ready-made dropdown/menu crumbs (which
+// compose propel's Menu). Here you assemble the raw crumb chrome: links, the current page,
+// separators, and the bare menu-trigger surface (without an attached menu).
+const meta = {
+  title: "UI/Breadcrumb",
+  component: Breadcrumb,
+  subcomponents: {
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+    BreadcrumbTrigger,
+  },
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root › Item › (Link | Page), with Separator between crumbs. */
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Plane</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Design</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Work items</BreadcrumbPage>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  ),
+  play: async ({ canvas }) => {
+    // The trail exposes its accessible landmark name, and the last crumb is the current page.
+    await expect(canvas.getByRole("navigation", { name: "Breadcrumb" })).toBeInTheDocument();
+    await expect(canvas.getByText("Work items")).toHaveAttribute("aria-current", "page");
+  },
+};
+
+/**
+ * A menu-style crumb built from the raw `BreadcrumbTrigger` (`group` adds the open-state marker so
+ * the chevron can rotate). The UI tier styles just the trigger surface — wiring it to a real menu
+ * via the `render` prop is a components-tier concern, so no separator follows it.
+ */
+export const MenuTrigger: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Plane</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbTrigger group>
+          <Layers aria-hidden className="size-4 shrink-0 text-icon-secondary" />
+          <span>Plane Design</span>
+          <ChevronDown
+            aria-hidden
+            className="size-3.5 shrink-0 text-icon-tertiary transition-transform group-data-popup-open/trigger:rotate-180"
+          />
+        </BreadcrumbTrigger>
+      </BreadcrumbItem>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Components</BreadcrumbPage>
+      </BreadcrumbItem>
+    </Breadcrumb>
+  ),
+};
diff --git a/packages/propel/src/ui/breadcrumb/breadcrumb.tsx b/packages/propel/src/ui/breadcrumb/breadcrumb.tsx
new file mode 100644
index 0000000..66ae930
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,12 @@
+import type * as React from "react";
+
+export type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "className" | "style">;
+
+/** Breadcrumb trail: a `<nav aria-label="Breadcrumb">` wrapping an ordered list. */
+export function Breadcrumb({ children, ...props }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" {...props}>
+      <ol className="flex items-center gap-0.5">{children}</ol>
+    </nav>
+  );
+}
diff --git a/packages/propel/src/ui/breadcrumb/index.tsx b/packages/propel/src/ui/breadcrumb/index.tsx
new file mode 100644
index 0000000..73106ad
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/index.tsx
@@ -0,0 +1,7 @@
+export { Breadcrumb, type BreadcrumbProps } from "./breadcrumb";
+export { BreadcrumbItem, type BreadcrumbItemProps } from "./breadcrumb-item";
+export { BreadcrumbLink, type BreadcrumbLinkProps } from "./breadcrumb-link";
+export { BreadcrumbPage, type BreadcrumbPageProps } from "./breadcrumb-page";
+export { BreadcrumbSeparator, type BreadcrumbSeparatorProps } from "./breadcrumb-separator";
+export { BreadcrumbTrigger, type BreadcrumbTriggerProps } from "./breadcrumb-trigger";
+export { crumbTriggerVariants, crumbVariants } from "./variants";
diff --git a/packages/propel/src/ui/breadcrumb/variants.ts b/packages/propel/src/ui/breadcrumb/variants.ts
new file mode 100644
index 0000000..2ec9893
--- /dev/null
+++ b/packages/propel/src/ui/breadcrumb/variants.ts
@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+
+export const crumbVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-md px-1 py-0.5 text-14 leading-none font-medium text-tertiary",
+  {
+    variants: {
+      interactive: {
+        true: "transition-colors hover:bg-layer-transparent-hover hover:text-primary",
+        false: "",
+      },
+    },
+  },
+);
+
+export const crumbTriggerVariants = cva(
+  "cursor-default data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
+  {
+    variants: {
+      group: {
+        true: "group/trigger",
+        false: "",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/button/button.stories.tsx b/packages/propel/src/ui/button/button.stories.tsx
new file mode 100644
index 0000000..6e55ae5
--- /dev/null
+++ b/packages/propel/src/ui/button/button.stories.tsx
@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn } from "storybook/test";
+
+import { Button, type ButtonMagnitude, type ButtonVariant } from "./index";
+
+const VARIANTS: ButtonVariant[] = ["primary", "secondary", "tertiary", "ghost", "link"];
+const MAGNITUDES: ButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+// UI-tier story: the ATOMIC button — a single accessible `<button>` with `variant` /
+// `tone` / `magnitude` (and link-only `emphasis`). It has no inline-node slots or
+// `loading` spinner; for those, see the ready-made `Button` (Components/Button), which
+// composes this primitive.
+const meta = {
+  title: "UI/Button",
+  component: Button,
+  args: {
+    children: "Button",
+    variant: "primary",
+    tone: "neutral",
+    magnitude: "md",
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** Every Figma "Type" side by side at the default magnitude. */
+export const Variants: Story = {
+  argTypes: { variant: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {VARIANTS.map((variant) => (
+        <Button key={variant} {...args} variant={variant}>
+          {variant}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Tone selects the palette: `neutral` (default) or `danger` (Figma "Error"). Danger shows as a
+ * solid fill and a bordered outline.
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Button {...args} tone="neutral" variant="primary">
+        Neutral
+      </Button>
+      <Button {...args} tone="danger" variant="primary">
+        Danger fill
+      </Button>
+      <Button {...args} tone="danger" variant="secondary">
+        Danger outline
+      </Button>
+    </div>
+  ),
+};
+
+/**
+ * `emphasis` is link-only (Figma "Emphasis"): `solid` is the blue `link/primary` affordance,
+ * `subtle` is the muted gray inline link. Every non-link variant ignores it.
+ */
+export const LinkEmphasis: Story = {
+  argTypes: {
+    emphasis: { control: false },
+    variant: { control: false },
+    children: { control: false },
+  },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Button {...args} variant="link" emphasis="solid">
+        Solid link
+      </Button>
+      <Button {...args} variant="link" emphasis="subtle">
+        Subtle link
+      </Button>
+    </div>
+  ),
+};
+
+/** All sizes (Figma S/Base/L/XL map to sm/md/lg/xl). */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Button key={magnitude} {...args} magnitude={magnitude}>
+          {magnitude}
+        </Button>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Clicking the button fires `onClick`. Tagged out of the sidebar/docs/manifest but still runs under
+ * the default `test` tag.
+ */
+export const ClickFiresOnClick: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn() },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Button" });
+    await userEvent.click(button);
+    await expect(args.onClick).toHaveBeenCalledOnce();
+  },
+};
+
+/** A `disabled` button does not fire `onClick` and is removed from the tab order. */
+export const DisabledBlocksClick: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn(), disabled: true },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Button" });
+    await expect(button).toBeDisabled();
+    await userEvent.click(button);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
diff --git a/packages/propel/src/ui/button/button.tsx b/packages/propel/src/ui/button/button.tsx
new file mode 100644
index 0000000..3f628f7
--- /dev/null
+++ b/packages/propel/src/ui/button/button.tsx
@@ -0,0 +1,55 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { buttonVariants } from "./variants";
+
+// Re-exported so `buttonVariants` stays part of the button entry's public surface
+// (e.g. `icon-button` composes it).
+export { buttonVariants } from "./variants";
+
+export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+export type ButtonTone = NonNullable<VariantProps<typeof buttonVariants>["tone"]>;
+export type ButtonMagnitude = NonNullable<VariantProps<typeof buttonVariants>["magnitude"]>;
+export type ButtonEmphasis = NonNullable<VariantProps<typeof buttonVariants>["emphasis"]>;
+
+type ButtonOwnProps = {
+  variant: ButtonVariant;
+  tone: ButtonTone;
+  magnitude: ButtonMagnitude;
+  /**
+   * Link-only: picks the `link` look. `solid` is the blue `link/primary` style; `subtle` is the
+   * muted gray inline link. Optional and additive — it only affects `variant="link"`, so it has no
+   * default and every other `variant` ignores it.
+   */
+  emphasis?: ButtonEmphasis;
+};
+
+export type ButtonProps = Omit<React.ComponentProps<typeof BaseButton>, "className" | "style"> &
+  ButtonOwnProps;
+
+/**
+ * A plain accessible button built on propel's design tokens. Pick a look with `variant` (Figma
+ * Type), select the error palette with `tone`, and size it with `magnitude` — all required, so
+ * consumers choose explicitly. For `variant="link"` only, optionally choose `solid` (blue) or
+ * `subtle` (gray) with `emphasis`. `children` is passed through; it is not a variant.
+ */
+export function Button({
+  variant,
+  tone,
+  magnitude,
+  emphasis,
+  type = "button",
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <BaseButton
+      type={type}
+      className={buttonVariants({ variant, tone, magnitude, emphasis })}
+      {...props}
+    >
+      {children}
+    </BaseButton>
+  );
+}
diff --git a/packages/propel/src/ui/button/index.tsx b/packages/propel/src/ui/button/index.tsx
new file mode 100644
index 0000000..98d55ac
--- /dev/null
+++ b/packages/propel/src/ui/button/index.tsx
@@ -0,0 +1 @@
+export * from "./button";
diff --git a/packages/propel/src/ui/button/variants.ts b/packages/propel/src/ui/button/variants.ts
new file mode 100644
index 0000000..11aa898
--- /dev/null
+++ b/packages/propel/src/ui/button/variants.ts
@@ -0,0 +1,151 @@
+import { cva, cx } from "class-variance-authority";
+
+// Magnitudes follow the Figma "Buttons" Size scale. Figma ships S/Base/L/XL; those
+// map to sm/md/lg/xl by their px heights (20/24/28/32). Per Figma:
+// S -> text-12/px-1.5; Base & L -> text-13; XL -> text-14. All chrome'd magnitudes
+// use leading-none so the flex-centered label sits dead-center in the fixed height.
+export const buttonVariants = cva(
+  // Shared chrome: inline flex row, centered, focus-visible ring on the brand
+  // accent token, real disabled affordance, and a snug medium label.
+  cx(
+    "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1 rounded-md font-medium",
+    "whitespace-nowrap transition-colors outline-none",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:cursor-not-allowed aria-busy:cursor-default",
+  ),
+  {
+    variants: {
+      // Figma "Type". Primary/secondary/tertiary/ghost are the neutral fills; link
+      // is the inline text affordance. The danger palette is selected via `tone`.
+      variant: {
+        primary: "",
+        // No border color here: the border color is owned by the tone compounds
+        // below (neutral -> border-strong, danger -> border-danger-strong), because
+        // a base color would be order-fragile against the tone color under cx.
+        secondary: "shadow-raised-100",
+        tertiary: "",
+        ghost: "",
+        link: "underline underline-offset-2",
+      },
+      // Neutral by default; `danger` swaps in the Figma "Error" palette.
+      tone: {
+        neutral: "",
+        danger: "",
+      },
+      // Link-only axis (Figma "Emphasis"). `solid` is the blue `link/primary`
+      // affordance; `subtle` is the muted gray inline link. It only changes the
+      // appearance of `variant="link"`; every other variant ignores it.
+      emphasis: {
+        solid: "",
+        subtle: "",
+      },
+      // `leading-none` collapses each label's line box to the glyph height so
+      // the flex `items-center` truly centers it inside the fixed-height button;
+      // any larger line-height (e.g. `leading-snug`) inflates the line box and
+      // makes the top/bottom padding read as uneven. Link overrides below opt
+      // back into a taller line-height since inline link text may wrap.
+      // Each magnitude also sets `--node-size`, the size every inline-start/end node
+      // (icon, avatar, ...) renders at. Per Figma's per-size icon values: 14px up to
+      // Base, 16px from L up. The slots and the loading spinner read this variable, so
+      // the button owns its node sizing in one place.
+      magnitude: {
+        sm: "h-5 min-w-10 px-1.5 text-12 leading-none [--node-size:0.875rem]",
+        md: "h-6 min-w-10 px-2 text-13 leading-none [--node-size:0.875rem]",
+        lg: "h-7 min-w-12 px-2 text-13 leading-none [--node-size:1rem]",
+        xl: "h-8 min-w-13 px-2 text-14 leading-none [--node-size:1rem]",
+      },
+    },
+    compoundVariants: [
+      // ----- Neutral solid (Figma Type=Primary) -----
+      {
+        variant: "primary",
+        tone: "neutral",
+        className: cx(
+          // `text-inverse` (white in light, near-black in dark) keeps AA contrast against
+          // the brand-blue surface, which is dark in light themes and light in dark ones.
+          "bg-accent-primary text-inverse",
+          "hover:bg-accent-primary-hover active:bg-accent-primary-active",
+          "disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        ),
+      },
+      // ----- Neutral outline (Figma Type=Secondary) -----
+      {
+        variant: "secondary",
+        tone: "neutral",
+        className: cx(
+          "border border-strong bg-layer-2 text-secondary",
+          "hover:bg-layer-2-hover active:bg-layer-2-active",
+          "disabled:border-disabled disabled:bg-layer-disabled disabled:text-disabled disabled:shadow-none",
+        ),
+      },
+      // ----- Neutral soft (Figma Type=Tertiary) -----
+      {
+        variant: "tertiary",
+        tone: "neutral",
+        className: cx(
+          "bg-layer-3 text-secondary",
+          "hover:bg-layer-3-hover active:bg-layer-3-active",
+          "disabled:bg-layer-disabled disabled:text-disabled",
+        ),
+      },
+      // ----- Neutral ghost (Figma Type=Ghost) -----
+      {
+        variant: "ghost",
+        tone: "neutral",
+        className: cx(
+          "bg-layer-transparent text-secondary",
+          "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
+          "disabled:bg-transparent disabled:text-disabled",
+        ),
+      },
+      // ----- Neutral link, solid (Figma Type=Link, Emphasis=solid) -----
+      // The blue `link/primary` affordance.
+      {
+        variant: "link",
+        tone: "neutral",
+        emphasis: "solid",
+        className: cx(
+          "min-w-0 px-0 text-link-primary hover:text-link-primary-hover",
+          "disabled:text-disabled disabled:no-underline",
+        ),
+      },
+      // ----- Neutral link, subtle (Figma Type=Link, Emphasis=subtle) -----
+      // The muted gray inline link. Uses `text-secondary` (#4e5355) to match
+      // Figma and clear AA contrast — NOT the lighter `link-secondary` token.
+      {
+        variant: "link",
+        tone: "neutral",
+        emphasis: "subtle",
+        className: cx(
+          "min-w-0 px-0 text-secondary hover:text-primary",
+          "disabled:text-disabled disabled:no-underline",
+        ),
+      },
+      // Link size overrides: link has no chrome/height, so reset to inline text.
+      { variant: "link", magnitude: "sm", className: "h-auto leading-snug" },
+      { variant: "link", magnitude: "md", className: "h-auto" },
+      { variant: "link", magnitude: "lg", className: "h-auto" },
+      { variant: "link", magnitude: "xl", className: "h-auto" },
+      // ----- Danger solid (Figma Type=Error Fill) -----
+      {
+        variant: "primary",
+        tone: "danger",
+        className: cx(
+          "bg-danger-primary text-on-color",
+          "hover:bg-danger-primary-hover active:bg-danger-primary-active",
+          "disabled:bg-layer-disabled disabled:text-on-color-disabled",
+        ),
+      },
+      // ----- Danger outline (Figma Type=Error Outline) -----
+      {
+        variant: "secondary",
+        tone: "danger",
+        className: cx(
+          "border border-danger-strong bg-layer-2 text-danger-secondary",
+          "hover:bg-danger-subtle active:border-danger-subtle active:bg-danger-subtle-active",
+          "disabled:border-disabled disabled:bg-layer-disabled disabled:text-disabled disabled:shadow-none",
+        ),
+      },
+    ],
+  },
+);
diff --git a/packages/propel/src/ui/calendar/calendar.stories.tsx b/packages/propel/src/ui/calendar/calendar.stories.tsx
new file mode 100644
index 0000000..1af0e0f
--- /dev/null
+++ b/packages/propel/src/ui/calendar/calendar.stories.tsx
@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import type { DateRange } from "react-day-picker";
+import { expect } from "storybook/test";
+
+import { Calendar } from "./index";
+
+// A fixed month so every grid renders deterministically (no reliance on "today").
+const JANUARY_2025 = new Date(2025, 0, 1);
+
+const meta = {
+  title: "UI/Calendar",
+  component: Calendar,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1286-12844",
+    },
+  },
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Single-date selection. The picker is controlled here so clicking a day updates the highlighted
+ * selection.
+ */
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 24));
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2025}
+        selected={selected}
+        onSelect={setSelected}
+      />
+    );
+  },
+};
+
+/**
+ * Range selection (`mode="range"`): the two endpoints get the solid accent fill and the days
+ * between them get the soft in-range background.
+ */
+export const RangeSelection: Story = {
+  render: () => {
+    const [range, setRange] = React.useState<DateRange | undefined>({
+      from: new Date(2025, 0, 13),
+      to: new Date(2025, 0, 20),
+    });
+    return (
+      <Calendar mode="range" defaultMonth={JANUARY_2025} selected={range} onSelect={setRange} />
+    );
+  },
+};
+
+/**
+ * Some days are disabled (here: weekends) and cannot be selected. Disabled days render in muted
+ * text.
+ */
+export const WithDisabledDays: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState<Date | undefined>();
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2025}
+        selected={selected}
+        onSelect={setSelected}
+        disabled={{ dayOfWeek: [0, 6] }}
+      />
+    );
+  },
+};
+
+/**
+ * Behavior tests: the month grid renders day buttons, clicking a day selects it, and a disabled day
+ * stays unselectable. Tagged out of the sidebar/docs/manifest — it's a test canary, not a designer-
+ * or agent-facing example — but still runs under the default `test` tag. A fixed `defaultMonth`
+ * keeps the grid deterministic.
+ */
+export const Behavior: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => {
+    const [selected, setSelected] = React.useState<Date | undefined>();
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2025}
+        selected={selected}
+        onSelect={setSelected}
+        // Disable Jan 1 so we can assert it is not selectable.
+        disabled={[new Date(2025, 0, 1)]}
+      />
+    );
+  },
+  play: async ({ canvas, userEvent }) => {
+    // The grid renders day cells; react-day-picker labels day buttons with the
+    // full date ("…, January 15th, 2025") and a selected day gains ", selected".
+    const day15 = canvas.getByRole("button", { name: /January 15th, 2025$/ });
+    await expect(day15).toBeInTheDocument();
+
+    // Clicking a day marks its grid cell selected (react-day-picker sets
+    // `aria-selected` on the gridcell, and the button's label gains "selected").
+    await userEvent.click(day15);
+    await expect(
+      canvas.getByRole("button", { name: /January 15th, 2025, selected$/ }),
+    ).toBeVisible();
+    const selectedCell = canvas.getByRole("gridcell", { selected: true });
+    await expect(selectedCell).toHaveAttribute("data-day", "2025-01-15");
+
+    // A disabled day (Jan 1) renders a disabled, non-interactive button: it
+    // exposes `disabled`/`pointer-events: none`, so it can never be selected.
+    const day1 = canvas.getByRole("button", { name: /January 1st, 2025$/ });
+    await expect(day1).toBeDisabled();
+    await expect(getComputedStyle(day1).pointerEvents).toBe("none");
+    // The earlier selection is the only selected cell — the disabled day added none.
+    await expect(canvas.getAllByRole("gridcell", { selected: true })).toHaveLength(1);
+  },
+};
+
+/**
+ * Keyboard ARIA pattern (WAI-ARIA grid date picker): Tab moves focus into the month grid, **Arrow
+ * keys** move the focused day (Right = +1 day, Down = +7 days), and **Enter** selects it
+ * (`aria-selected` on the gridcell). A fixed `defaultMonth` and a known starting selection keep the
+ * focused day deterministic. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const KeyboardNavigation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => {
+    // Pre-select Jan 15 so react-day-picker makes that the focusable day on Tab.
+    const [selected, setSelected] = React.useState<Date | undefined>(new Date(2025, 0, 15));
+    return (
+      <Calendar
+        mode="single"
+        defaultMonth={JANUARY_2025}
+        selected={selected}
+        onSelect={setSelected}
+      />
+    );
+  },
+  play: async ({ canvas, userEvent }) => {
+    // The grid is a single tab stop (only the selected/active day is tabbable), but
+    // the month-nav chevrons precede it in the tab order. Tab forward until focus
+    // reaches the grid's focusable day (Jan 15, the current selection).
+    const day15 = canvas.getByRole("button", { name: /January 15th, 2025, selected$/ });
+    for (let i = 0; i < 4 && document.activeElement !== day15; i++) {
+      await userEvent.tab();
+    }
+    await expect(day15).toHaveFocus();
+
+    // Arrow Right moves the focused day forward one day (Jan 16).
+    await userEvent.keyboard("{ArrowRight}");
+    await expect(canvas.getByRole("button", { name: /January 16th, 2025$/ })).toHaveFocus();
+
+    // Arrow Down moves the focused day forward one week (Jan 23).
+    await userEvent.keyboard("{ArrowDown}");
+    const day23 = canvas.getByRole("button", { name: /January 23rd, 2025$/ });
+    await expect(day23).toHaveFocus();
+
+    // Enter selects the focused day; its gridcell gains aria-selected and it is the
+    // single selected cell (the previous selection moved with the keyboard).
+    await userEvent.keyboard("{Enter}");
+    await expect(
+      canvas.getByRole("button", { name: /January 23rd, 2025, selected$/ }),
+    ).toBeVisible();
+    const selectedCell = canvas.getByRole("gridcell", { selected: true });
+    await expect(selectedCell).toHaveAttribute("data-day", "2025-01-23");
+    await expect(canvas.getAllByRole("gridcell", { selected: true })).toHaveLength(1);
+  },
+};
diff --git a/packages/propel/src/ui/calendar/calendar.tsx b/packages/propel/src/ui/calendar/calendar.tsx
new file mode 100644
index 0000000..d78d95e
--- /dev/null
+++ b/packages/propel/src/ui/calendar/calendar.tsx
@@ -0,0 +1,39 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
+
+import { calendarClassNames } from "./variants";
+
+/**
+ * Props for {@link Calendar}. Forwards every react-day-picker `DayPickerProps` (`mode`, `selected`,
+ * `onSelect`, `disabled`, `month`, `defaultMonth`, …) but drops `className`/`style`/`classNames` —
+ * styling is owned by propel tokens.
+ */
+// `DayPickerProps` is a discriminated union over `mode`; a plain `Omit` collapses
+// it and de-correlates `selected`/`onSelect`. Omit distributively so each union
+// member (and its mode↔selected↔onSelect relationship) is preserved.
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+export type CalendarProps = DistributiveOmit<DayPickerProps, "className" | "style" | "classNames">;
+
+/**
+ * A date picker built on react-day-picker and styled entirely with propel tokens. Supports `single`
+ * and `range` selection via the `mode` prop and is fully keyboard- and screen-reader-accessible
+ * (react-day-picker owns the grid semantics). Pass `selected`/`onSelect` to control the selection.
+ */
+export function Calendar(props: CalendarProps) {
+  return (
+    <DayPicker
+      // react-day-picker handles month/grid/aria; we only restyle and swap the
+      // nav chevrons for lucide icons (decorative, hidden from assistive tech).
+      classNames={calendarClassNames}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === "left" ? (
+            <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
+          ) : (
+            <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
+          ),
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/calendar/index.tsx b/packages/propel/src/ui/calendar/index.tsx
new file mode 100644
index 0000000..90fe453
--- /dev/null
+++ b/packages/propel/src/ui/calendar/index.tsx
@@ -0,0 +1 @@
+export * from "./calendar";
diff --git a/packages/propel/src/ui/calendar/variants.ts b/packages/propel/src/ui/calendar/variants.ts
new file mode 100644
index 0000000..da22b9f
--- /dev/null
+++ b/packages/propel/src/ui/calendar/variants.ts
@@ -0,0 +1,67 @@
+import { cx } from "class-variance-authority";
+import type { DayPickerProps } from "react-day-picker";
+
+import { surfaceVariants } from "../../internal/surface";
+
+// Propel-token class map for react-day-picker's UI parts. We never import its
+// default stylesheet — every visual decision below comes from a propel utility
+// (Figma node 1272-11630): 40px round day cells, accent endpoints, soft in-range
+// fill, a bordered/elevated container. Keys mirror react-day-picker's `UI`/
+// `DayFlag`/`SelectionState` enums.
+export const calendarClassNames: Partial<NonNullable<DayPickerProps["classNames"]>> = {
+  // Elevated, bordered surface: the shared floating-card surface (white
+  // `surface-1`, subtle border) with `raised` overlay shadow and `lg` radius.
+  root: cx(surfaceVariants({ elevation: "raised", radius: "lg" }), "relative inline-block p-4"),
+  months: "flex flex-col gap-3",
+  month: "flex flex-col gap-3",
+  // Caption + nav share one row; the label leads, buttons sit at the end.
+  month_caption: "flex items-center h-7",
+  caption_label: "text-20 font-semibold text-primary",
+  nav: "absolute inset-e-4 top-4 flex items-center gap-1",
+  // 28px transparent icon buttons that tint on hover (Figma "Icon buttons").
+  button_previous:
+    "inline-flex size-7 items-center justify-center rounded-md text-icon-tertiary hover:bg-layer-transparent-hover disabled:opacity-50",
+  button_next:
+    "inline-flex size-7 items-center justify-center rounded-md text-icon-tertiary hover:bg-layer-transparent-hover disabled:opacity-50",
+  month_grid: "border-collapse",
+  weekdays: "flex",
+  // Weekday column headers: body-sm-regular tertiary text on a 40px cell. The
+  // composite `text-body-sm-regular` utility carries the 14px size plus the
+  // propel regular weight/line-height (Figma "font/body-sm/regular").
+  weekday: "flex size-10 items-center justify-center text-body-sm-regular text-tertiary",
+  week: "flex w-full",
+  // react-day-picker v10 applies the modifier classNames (`selected`, `today`,
+  // `range_*`) and `aria-selected` to the gridcell (this `td`) itself — NOT to a
+  // descendant — so we target the cell directly with `[&.foo]`/`[&[aria-selected]]`
+  // and reach the inner button with `[&>button]`.
+  //
+  // The cell is the range backdrop: range cells (start/middle/end) get the soft
+  // in-range fill, and only the outer corners of an endpoint round off so a
+  // continuous range reads as one pill. A plain single-selected cell stays
+  // transparent (its solid pill comes from the button below).
+  day: "relative size-10 p-0 text-center [&.range-start]:bg-accent-subtle-hover [&.range-middle]:bg-accent-subtle-hover [&.range-end]:bg-accent-subtle-hover [&.range-start]:rounded-s-full [&.range-end]:rounded-e-full",
+  // The actual button: 40px round, body-sm text, primary color.
+  day_button:
+    "relative inline-flex size-10 items-center justify-center rounded-full text-14 text-primary hover:bg-layer-transparent-hover",
+  // Selected single day / range endpoints: solid accent button, inverse text.
+  // (`selected` is set on the cell for every day in a range; `range_middle`
+  // below resets the button back to transparent for the in-between days.)
+  // `text-inverse` keeps AA contrast on the brand-blue surface in every theme.
+  selected:
+    "[&>button]:bg-accent-primary [&>button]:text-inverse [&>button:hover]:bg-accent-primary",
+  // Endpoints are tagged so the cell can round the outer edge of the range.
+  range_start: "range-start",
+  range_end: "range-end",
+  // Middle of a range: keep the button transparent so only the cell's soft fill
+  // shows, and square the cell (the marker class also drives the fill above).
+  range_middle:
+    "range-middle [&>button]:bg-transparent [&>button]:text-primary [&>button:hover]:bg-transparent",
+  // Today (when not selected): accent text so the current date stands out. When
+  // the cell is also selected, the solid accent button (above) wins.
+  today: "[&:not([aria-selected])>button]:text-accent-primary [&>button]:font-semibold",
+  // Disabled days read as muted, non-interactive text.
+  disabled: "[&>button]:text-disabled [&>button]:pointer-events-none",
+  // Days from the adjacent month: dimmed.
+  outside: "[&>button]:text-tertiary",
+  hidden: "invisible",
+};
diff --git a/packages/propel/src/ui/checkbox-group/checkbox-group.stories.tsx b/packages/propel/src/ui/checkbox-group/checkbox-group.stories.tsx
new file mode 100644
index 0000000..8c31ee5
--- /dev/null
+++ b/packages/propel/src/ui/checkbox-group/checkbox-group.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Checkbox, CheckboxGlyph, CheckboxIndicator } from "../checkbox/index";
+import { CheckboxGroup } from "./index";
+
+// UI-tier story: composes the atomic group + atomic checkbox boxes. The group only
+// manages the selected-values array and layout; each box owns its own indicator and
+// accessible name. The components-tier story shows the ready-made group + ready-made
+// `Checkbox` (label rows). No Field/Fieldset here — that's a components-tier concern.
+const meta = {
+  title: "UI/CheckboxGroup",
+  component: CheckboxGroup,
+  subcomponents: { Checkbox },
+  args: { density: "comfortable" },
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Option({ value, label }: { value: string; label: string }) {
+  return (
+    <Checkbox tone="neutral" value={value} aria-label={label}>
+      <CheckboxIndicator>
+        <CheckboxGlyph />
+      </CheckboxIndicator>
+    </Checkbox>
+  );
+}
+
+/** A group of atomic boxes; the group tracks which values are selected. */
+export const Default: Story = {
+  args: { density: "comfortable", defaultValue: ["https"] },
+  render: (args) => (
+    <CheckboxGroup {...args} aria-label="Allowed protocols">
+      <Option value="http" label="HTTP" />
+      <Option value="https" label="HTTPS" />
+      <Option value="ssh" label="SSH" />
+    </CheckboxGroup>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("checkbox", { name: "HTTPS" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  },
+};
+
+/** Multiple boxes can be checked at once — the group collects every selected value. */
+export const Multiple: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { density: "comfortable", defaultValue: [] },
+  render: (args) => (
+    <CheckboxGroup {...args} aria-label="Allowed protocols">
+      <Option value="http" label="HTTP" />
+      <Option value="https" label="HTTPS" />
+    </CheckboxGroup>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const http = canvas.getByRole("checkbox", { name: "HTTP" });
+    const https = canvas.getByRole("checkbox", { name: "HTTPS" });
+    await expect(http).toHaveAttribute("aria-checked", "false");
+
+    await userEvent.click(http);
+    await expect(http).toHaveAttribute("aria-checked", "true");
+
+    await userEvent.click(https);
+    await expect(http).toHaveAttribute("aria-checked", "true");
+    await expect(https).toHaveAttribute("aria-checked", "true");
+  },
+};
diff --git a/packages/propel/src/ui/checkbox-group/checkbox-group.tsx b/packages/propel/src/ui/checkbox-group/checkbox-group.tsx
new file mode 100644
index 0000000..7b78673
--- /dev/null
+++ b/packages/propel/src/ui/checkbox-group/checkbox-group.tsx
@@ -0,0 +1,22 @@
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { checkboxGroupVariants } from "./variants";
+
+type CheckboxGroupVariantProps = VariantProps<typeof checkboxGroupVariants>;
+
+export type CheckboxGroupDensity = NonNullable<CheckboxGroupVariantProps["density"]>;
+
+export type CheckboxGroupProps = Omit<
+  React.ComponentProps<typeof BaseCheckboxGroup>,
+  "className" | "style"
+> & {
+  /** Spacing between checkbox options. */
+  density: CheckboxGroupDensity;
+};
+
+/** Groups related checkboxes and submits their selected values as an array. */
+export function CheckboxGroup({ density, ...props }: CheckboxGroupProps) {
+  return <BaseCheckboxGroup className={checkboxGroupVariants({ density })} {...props} />;
+}
diff --git a/packages/propel/src/ui/checkbox-group/index.tsx b/packages/propel/src/ui/checkbox-group/index.tsx
new file mode 100644
index 0000000..fe9e6d6
--- /dev/null
+++ b/packages/propel/src/ui/checkbox-group/index.tsx
@@ -0,0 +1,5 @@
+export {
+  CheckboxGroup,
+  type CheckboxGroupDensity,
+  type CheckboxGroupProps,
+} from "./checkbox-group";
diff --git a/packages/propel/src/ui/checkbox-group/variants.ts b/packages/propel/src/ui/checkbox-group/variants.ts
new file mode 100644
index 0000000..99713bb
--- /dev/null
+++ b/packages/propel/src/ui/checkbox-group/variants.ts
@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority";
+
+export const checkboxGroupVariants = cva("flex flex-col", {
+  variants: {
+    density: {
+      comfortable: "gap-2",
+      compact: "gap-0",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/checkbox/checkbox-glyph.tsx b/packages/propel/src/ui/checkbox/checkbox-glyph.tsx
new file mode 100644
index 0000000..b396bc6
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/checkbox-glyph.tsx
@@ -0,0 +1,9 @@
+import { Check, Minus } from "lucide-react";
+
+export function CheckboxGlyph({ indeterminate }: { indeterminate?: boolean }) {
+  return indeterminate ? (
+    <Minus aria-hidden className="size-3" />
+  ) : (
+    <Check aria-hidden className="size-3" />
+  );
+}
diff --git a/packages/propel/src/ui/checkbox/checkbox-indicator.tsx b/packages/propel/src/ui/checkbox/checkbox-indicator.tsx
new file mode 100644
index 0000000..409e1cb
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/checkbox-indicator.tsx
@@ -0,0 +1,20 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import type * as React from "react";
+
+export type CheckboxIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseCheckbox.Indicator>,
+  "className" | "style"
+>;
+
+/**
+ * The mark shown inside a checked / indeterminate `Checkbox`. Only mounted while checked or
+ * indeterminate (no `keepMounted`), so the box is empty when unchecked. Decorative — the Root
+ * carries the a11y state. Children — typically a `CheckboxGlyph` — are passed through.
+ */
+export function CheckboxIndicator({ children, ...props }: CheckboxIndicatorProps) {
+  return (
+    <BaseCheckbox.Indicator className="flex items-center justify-center" {...props}>
+      {children}
+    </BaseCheckbox.Indicator>
+  );
+}
diff --git a/packages/propel/src/ui/checkbox/checkbox-visual.tsx b/packages/propel/src/ui/checkbox/checkbox-visual.tsx
new file mode 100644
index 0000000..314c33e
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/checkbox-visual.tsx
@@ -0,0 +1,28 @@
+import { CheckboxGlyph } from "./checkbox-glyph";
+import { checkboxVariants, type CheckboxTone } from "./variants";
+
+export type CheckboxVisualProps = {
+  /** Resting color of the box. `danger` is the Figma "Error" state. */
+  tone: CheckboxTone;
+  /** Whether the box shows as checked. */
+  checked?: boolean;
+  /** Whether the box shows the indeterminate dash (wins over `checked`). */
+  indeterminate?: boolean;
+  /** Whether the box shows as disabled. */
+  disabled?: boolean;
+};
+
+/** A purely presentational copy of the `Checkbox` box for use inside another interactive control. */
+export function CheckboxVisual({ tone, checked, indeterminate, disabled }: CheckboxVisualProps) {
+  return (
+    <span
+      aria-hidden
+      data-checked={checked && !indeterminate ? "" : undefined}
+      data-indeterminate={indeterminate ? "" : undefined}
+      data-disabled={disabled ? "" : undefined}
+      className={checkboxVariants({ tone })}
+    >
+      {checked || indeterminate ? <CheckboxGlyph indeterminate={indeterminate} /> : null}
+    </span>
+  );
+}
diff --git a/packages/propel/src/ui/checkbox/checkbox.stories.tsx b/packages/propel/src/ui/checkbox/checkbox.stories.tsx
new file mode 100644
index 0000000..bc53543
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/checkbox.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Checkbox, CheckboxGlyph, CheckboxIndicator } from "./index";
+
+// UI-tier story: composes the ATOMIC checkbox parts. `Checkbox` is the bare box
+// (Base UI `Checkbox.Root`); the tick/dash only shows when you nest a
+// `CheckboxIndicator` wrapping a `CheckboxGlyph`. The components-tier `Checkbox`
+// story shows the ready-made (label row + icon slot). Here you assemble the raw
+// parts and own the accessible name via `aria-label`.
+const meta = {
+  title: "UI/Checkbox",
+  component: Checkbox,
+  subcomponents: { CheckboxIndicator, CheckboxGlyph },
+  args: { tone: "neutral", "aria-label": "Example" },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root box with its indicator + glyph. Toggling mounts/unmounts the tick. */
+export const Default: Story = {
+  render: (args) => (
+    <Checkbox {...args}>
+      <CheckboxIndicator>
+        <CheckboxGlyph />
+      </CheckboxIndicator>
+    </Checkbox>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const box = canvas.getByRole("checkbox");
+    await expect(box).toHaveAttribute("aria-checked", "false");
+    await userEvent.click(box);
+    await expect(box).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(box);
+    await expect(box).toHaveAttribute("aria-checked", "false");
+  },
+};
+
+/** Resting, checked, indeterminate (dash glyph), and the danger tone. */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Checkbox tone="neutral" aria-label="Unchecked">
+        <CheckboxIndicator>
+          <CheckboxGlyph />
+        </CheckboxIndicator>
+      </Checkbox>
+      <Checkbox tone="neutral" aria-label="Checked" defaultChecked>
+        <CheckboxIndicator>
+          <CheckboxGlyph />
+        </CheckboxIndicator>
+      </Checkbox>
+      <Checkbox tone="neutral" aria-label="Indeterminate" indeterminate>
+        <CheckboxIndicator>
+          <CheckboxGlyph indeterminate />
+        </CheckboxIndicator>
+      </Checkbox>
+      <Checkbox tone="neutral" aria-label="Disabled" disabled>
+        <CheckboxIndicator>
+          <CheckboxGlyph />
+        </CheckboxIndicator>
+      </Checkbox>
+      <Checkbox tone="danger" aria-label="Error">
+        <CheckboxIndicator>
+          <CheckboxGlyph />
+        </CheckboxIndicator>
+      </Checkbox>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const [unchecked, checked] = canvas.getAllByRole("checkbox");
+    // The indicator is only mounted while checked/indeterminate, so the resting box is empty.
+    await expect(unchecked).toBeEmptyDOMElement();
+    await expect(checked).not.toBeEmptyDOMElement();
+  },
+};
diff --git a/packages/propel/src/ui/checkbox/checkbox.tsx b/packages/propel/src/ui/checkbox/checkbox.tsx
new file mode 100644
index 0000000..971e68c
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/checkbox.tsx
@@ -0,0 +1,28 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import type * as React from "react";
+
+import { checkboxVariants, type CheckboxTone } from "./variants";
+
+export type { CheckboxTone } from "./variants";
+
+export type CheckboxProps = Omit<
+  React.ComponentProps<typeof BaseCheckbox.Root>,
+  "className" | "style"
+> & {
+  /** Resting color of the box. `danger` is the Figma "Error" state. */
+  tone: CheckboxTone;
+};
+
+/**
+ * The checkbox box: a styled `BaseCheckbox.Root`. Base UI renders a real checkbox with
+ * `aria-checked` (including `mixed` for indeterminate). Children — typically a `CheckboxIndicator`
+ * — are passed through. Give it an accessible name with `aria-label`/`aria-labelledby`, or pair it
+ * with a `<label htmlFor>`.
+ */
+export function Checkbox({ tone, children, ...props }: CheckboxProps) {
+  return (
+    <BaseCheckbox.Root className={checkboxVariants({ tone })} {...props}>
+      {children}
+    </BaseCheckbox.Root>
+  );
+}
diff --git a/packages/propel/src/ui/checkbox/index.tsx b/packages/propel/src/ui/checkbox/index.tsx
new file mode 100644
index 0000000..475f290
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/index.tsx
@@ -0,0 +1,4 @@
+export { Checkbox, type CheckboxProps, type CheckboxTone } from "./checkbox";
+export { CheckboxIndicator, type CheckboxIndicatorProps } from "./checkbox-indicator";
+export { CheckboxGlyph } from "./checkbox-glyph";
+export { CheckboxVisual, type CheckboxVisualProps } from "./checkbox-visual";
diff --git a/packages/propel/src/ui/checkbox/variants.tsx b/packages/propel/src/ui/checkbox/variants.tsx
new file mode 100644
index 0000000..dc69ad0
--- /dev/null
+++ b/packages/propel/src/ui/checkbox/variants.tsx
@@ -0,0 +1,26 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+export const checkboxVariants = cva(
+  cx(
+    "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border-sm align-top",
+    "transition-colors outline-none",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-1",
+    "data-checked:border-transparent data-checked:bg-accent-primary data-checked:text-icon-on-color",
+    "data-indeterminate:border-transparent data-indeterminate:bg-accent-primary data-indeterminate:text-icon-on-color",
+    "data-disabled:cursor-not-allowed data-disabled:border-disabled data-disabled:bg-transparent",
+    "data-disabled:data-checked:border-transparent data-disabled:data-checked:bg-layer-disabled data-disabled:data-checked:text-icon-disabled",
+    "data-disabled:data-indeterminate:border-transparent data-disabled:data-indeterminate:bg-layer-disabled data-disabled:data-indeterminate:text-icon-disabled",
+  ),
+  {
+    variants: {
+      tone: {
+        neutral: "border-icon-tertiary",
+        danger: "border-danger-strong",
+      },
+    },
+  },
+);
+
+type CheckboxVariantProps = VariantProps<typeof checkboxVariants>;
+
+export type CheckboxTone = NonNullable<CheckboxVariantProps["tone"]>;
diff --git a/packages/propel/src/ui/collapsible/collapsible-panel.tsx b/packages/propel/src/ui/collapsible/collapsible-panel.tsx
new file mode 100644
index 0000000..74cbcea
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/collapsible-panel.tsx
@@ -0,0 +1,17 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type * as React from "react";
+
+import { collapsiblePanelVariants } from "./variants";
+
+export type CollapsiblePanelProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Panel>,
+  "className" | "style"
+>;
+
+/**
+ * The collapsible content region. Animates open/closed using Base UI's `--collapsible-panel-height`
+ * so the height transitions smoothly. Maps 1:1 to `Collapsible.Panel`.
+ */
+export function CollapsiblePanel(props: CollapsiblePanelProps) {
+  return <BaseCollapsible.Panel className={collapsiblePanelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/collapsible/collapsible-trigger.tsx b/packages/propel/src/ui/collapsible/collapsible-trigger.tsx
new file mode 100644
index 0000000..b4a9e39
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/collapsible-trigger.tsx
@@ -0,0 +1,17 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type * as React from "react";
+
+import { collapsibleTriggerVariants } from "./variants";
+
+export type CollapsibleTriggerProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The button that opens and closes the panel. Base UI sets `aria-expanded`/`aria-controls` and
+ * reflects open state as `[data-panel-open]` on this element. Maps 1:1 to `Collapsible.Trigger`.
+ */
+export function CollapsibleTrigger(props: CollapsibleTriggerProps) {
+  return <BaseCollapsible.Trigger className={collapsibleTriggerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/collapsible/collapsible.stories.tsx b/packages/propel/src/ui/collapsible/collapsible.stories.tsx
new file mode 100644
index 0000000..87fbdb4
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/collapsible.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "./index";
+
+// UI-tier story: composes the ATOMIC collapsible parts (Root › Trigger / Panel). Each part owns its
+// own chrome (no `className` at the boundary), so the trigger lays its label and chevron out itself.
+// The components-tier `Collapsible` story shows the ready-made `<Collapsible trigger=…>` wrapper.
+const meta = {
+  title: "UI/Collapsible",
+  component: Collapsible,
+  subcomponents: { CollapsibleTrigger, CollapsiblePanel },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Assemble the atomic parts: Root › Trigger, plus Panel. */
+export const Default: Story = {
+  render: () => (
+    <Collapsible>
+      <CollapsibleTrigger>
+        <span className="flex-1">Recent activity</span>
+        <ChevronDown
+          aria-hidden
+          className="size-3.5 shrink-0 text-icon-secondary transition-transform group-data-panel-open:rotate-180"
+        />
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <p className="pt-2 text-tertiary">3 work items updated in the last hour.</p>
+      </CollapsiblePanel>
+    </Collapsible>
+  ),
+};
+
+/** `defaultOpen` renders the panel expanded on mount. */
+export const DefaultOpen: Story = {
+  render: () => (
+    <Collapsible defaultOpen>
+      <CollapsibleTrigger>
+        <span className="flex-1">Description</span>
+        <ChevronDown
+          aria-hidden
+          className="size-3.5 shrink-0 text-icon-secondary transition-transform group-data-panel-open:rotate-180"
+        />
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <p className="pt-2 text-tertiary">
+          The roadmap groups upcoming work into quarterly milestones.
+        </p>
+      </CollapsiblePanel>
+    </Collapsible>
+  ),
+};
+
+/** Behavior test: the trigger toggles `aria-expanded` and shows/hides the panel. */
+export const Toggle: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Collapsible>
+      <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+      <CollapsiblePanel>Panel content</CollapsiblePanel>
+    </Collapsible>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: "Toggle" });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await expect(canvas.getByText("Panel content")).toBeVisible();
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+  },
+};
diff --git a/packages/propel/src/ui/collapsible/collapsible.tsx b/packages/propel/src/ui/collapsible/collapsible.tsx
new file mode 100644
index 0000000..0f3e93c
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/collapsible.tsx
@@ -0,0 +1,16 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type * as React from "react";
+
+export type CollapsibleProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Root>,
+  "className" | "style"
+>;
+
+/**
+ * A single show/hide disclosure — the one-item primitive that `Accordion` generalizes. Uncontrolled
+ * by default; pass `defaultOpen` (uncontrolled) or `open` + `onOpenChange` (controlled) to drive
+ * it. Maps 1:1 to Base UI's `Collapsible.Root`.
+ */
+export function Collapsible(props: CollapsibleProps) {
+  return <BaseCollapsible.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/collapsible/index.tsx b/packages/propel/src/ui/collapsible/index.tsx
new file mode 100644
index 0000000..2c4c648
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/index.tsx
@@ -0,0 +1,3 @@
+export { Collapsible, type CollapsibleProps } from "./collapsible";
+export { CollapsiblePanel, type CollapsiblePanelProps } from "./collapsible-panel";
+export { CollapsibleTrigger, type CollapsibleTriggerProps } from "./collapsible-trigger";
diff --git a/packages/propel/src/ui/collapsible/variants.ts b/packages/propel/src/ui/collapsible/variants.ts
new file mode 100644
index 0000000..0ee660e
--- /dev/null
+++ b/packages/propel/src/ui/collapsible/variants.ts
@@ -0,0 +1,27 @@
+import { cva, cx } from "class-variance-authority";
+
+// Collapsible is a structural disclosure primitive (the single-item form that
+// Accordion generalizes). The Figma spec only defines collapsed/hover/expanded
+// states, which Base UI drives as state — so there are no styling axes
+// (variant/tone/magnitude) to expose. The cva pairings below hold the static
+// chrome so every part is styled in one place, with no `className` at the boundary.
+
+export const collapsibleTriggerVariants = cva(
+  cx(
+    "group flex w-full items-center justify-between gap-2 text-start",
+    "text-14 font-medium text-primary",
+    "cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+  ),
+);
+
+export const collapsiblePanelVariants = cva(
+  cx(
+    // Base UI exposes the panel's natural size as `--collapsible-panel-height`;
+    // transition from it to 0 on the starting/ending styles for a smooth collapse.
+    "h-(--collapsible-panel-height) overflow-hidden",
+    "text-14 text-secondary",
+    "transition-[height] duration-200 ease-out",
+    "data-ending-style:h-0 data-starting-style:h-0",
+  ),
+);
diff --git a/packages/propel/src/ui/combobox/combobox-clear.tsx b/packages/propel/src/ui/combobox/combobox-clear.tsx
new file mode 100644
index 0000000..b01375d
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-clear.tsx
@@ -0,0 +1,18 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { X } from "lucide-react";
+import type * as React from "react";
+
+import { comboboxButtonVariants } from "./variants";
+
+export type ComboboxClearProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Clear>,
+  "className" | "style"
+>;
+
+export function ComboboxClear(props: ComboboxClearProps) {
+  return (
+    <BaseCombobox.Clear className={comboboxButtonVariants()} {...props}>
+      {props.children ?? <X aria-hidden className="size-4" />}
+    </BaseCombobox.Clear>
+  );
+}
diff --git a/packages/propel/src/ui/combobox/combobox-empty.tsx b/packages/propel/src/ui/combobox/combobox-empty.tsx
new file mode 100644
index 0000000..269a275
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-empty.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxEmptyVariants } from "./variants";
+
+export type ComboboxEmptyProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Empty>,
+  "className" | "style"
+>;
+
+export function ComboboxEmpty(props: ComboboxEmptyProps) {
+  return <BaseCombobox.Empty className={comboboxEmptyVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-input-group.tsx b/packages/propel/src/ui/combobox/combobox-input-group.tsx
new file mode 100644
index 0000000..fad3b4c
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-input-group.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxInputGroupVariants } from "./variants";
+
+export type ComboboxInputGroupProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.InputGroup>,
+  "className" | "style"
+>;
+
+export function ComboboxInputGroup(props: ComboboxInputGroupProps) {
+  return <BaseCombobox.InputGroup className={comboboxInputGroupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-input.tsx b/packages/propel/src/ui/combobox/combobox-input.tsx
new file mode 100644
index 0000000..a0693e9
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-input.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxInputVariants } from "./variants";
+
+export type ComboboxInputProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Input>,
+  "className" | "style"
+>;
+
+export function ComboboxInput(props: ComboboxInputProps) {
+  return <BaseCombobox.Input className={comboboxInputVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-item-indicator.tsx b/packages/propel/src/ui/combobox/combobox-item-indicator.tsx
new file mode 100644
index 0000000..360f991
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-item-indicator.tsx
@@ -0,0 +1,16 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+export type ComboboxItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.ItemIndicator>,
+  "className" | "style"
+>;
+
+export function ComboboxItemIndicator(props: ComboboxItemIndicatorProps) {
+  return (
+    <BaseCombobox.ItemIndicator className="flex size-4 items-center justify-center" {...props}>
+      {props.children ?? <Check aria-hidden className="size-4" />}
+    </BaseCombobox.ItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/combobox/combobox-item.tsx b/packages/propel/src/ui/combobox/combobox-item.tsx
new file mode 100644
index 0000000..09e772d
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-item.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxItemVariants } from "./variants";
+
+export type ComboboxItemProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Item>,
+  "className" | "style"
+>;
+
+export function ComboboxItem(props: ComboboxItemProps) {
+  return <BaseCombobox.Item className={comboboxItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-label.tsx b/packages/propel/src/ui/combobox/combobox-label.tsx
new file mode 100644
index 0000000..1c3f4d9
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-label.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxLabelVariants } from "./variants";
+
+export type ComboboxLabelProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Label>,
+  "className" | "style"
+>;
+
+export function ComboboxLabel(props: ComboboxLabelProps) {
+  return <BaseCombobox.Label className={comboboxLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-list.tsx b/packages/propel/src/ui/combobox/combobox-list.tsx
new file mode 100644
index 0000000..951fef7
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-list.tsx
@@ -0,0 +1,3 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export const ComboboxList = BaseCombobox.List;
diff --git a/packages/propel/src/ui/combobox/combobox-popup.tsx b/packages/propel/src/ui/combobox/combobox-popup.tsx
new file mode 100644
index 0000000..6316b7f
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-popup.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxPopupVariants } from "./variants";
+
+export type ComboboxPopupProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Popup>,
+  "className" | "style"
+>;
+
+export function ComboboxPopup(props: ComboboxPopupProps) {
+  return <BaseCombobox.Popup className={comboboxPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-portal.tsx b/packages/propel/src/ui/combobox/combobox-portal.tsx
new file mode 100644
index 0000000..5035c52
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-portal.tsx
@@ -0,0 +1,3 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export const ComboboxPortal = BaseCombobox.Portal;
diff --git a/packages/propel/src/ui/combobox/combobox-positioner.tsx b/packages/propel/src/ui/combobox/combobox-positioner.tsx
new file mode 100644
index 0000000..7073c2a
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-positioner.tsx
@@ -0,0 +1,13 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import type * as React from "react";
+
+import { comboboxPositionerVariants } from "./variants";
+
+export type ComboboxPositionerProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Positioner>,
+  "className" | "style"
+>;
+
+export function ComboboxPositioner(props: ComboboxPositionerProps) {
+  return <BaseCombobox.Positioner className={comboboxPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/combobox-trigger.tsx b/packages/propel/src/ui/combobox/combobox-trigger.tsx
new file mode 100644
index 0000000..24d24ce
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox-trigger.tsx
@@ -0,0 +1,18 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { ChevronsUpDown } from "lucide-react";
+import type * as React from "react";
+
+import { comboboxButtonVariants } from "./variants";
+
+export type ComboboxTriggerProps = Omit<
+  React.ComponentProps<typeof BaseCombobox.Trigger>,
+  "className" | "style"
+>;
+
+export function ComboboxTrigger(props: ComboboxTriggerProps) {
+  return (
+    <BaseCombobox.Trigger className={comboboxButtonVariants()} {...props}>
+      {props.children ?? <ChevronsUpDown aria-hidden className="size-4" />}
+    </BaseCombobox.Trigger>
+  );
+}
diff --git a/packages/propel/src/ui/combobox/combobox.stories.tsx b/packages/propel/src/ui/combobox/combobox.stories.tsx
new file mode 100644
index 0000000..c019257
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldError, FieldLabel } from "../field/index";
+import {
+  Combobox,
+  ComboboxClear,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxPopup,
+  ComboboxPortal,
+  ComboboxPositioner,
+  ComboboxTrigger,
+} from "./index";
+
+const REGIONS = ["us-central-1", "us-east-1", "eu-central-1", "ap-west-1"];
+
+const meta = {
+  title: "UI/Combobox",
+  component: Combobox,
+  subcomponents: {
+    ComboboxLabel,
+    ComboboxInputGroup,
+    ComboboxInput,
+    ComboboxClear,
+    ComboboxTrigger,
+    ComboboxPortal,
+    ComboboxPositioner,
+    ComboboxPopup,
+    ComboboxList,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxEmpty,
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Combobox owns the input and popup composition for choosing from filterable items. */
+export const Default: Story = {
+  args: { items: REGIONS, required: true },
+  render: (args) => (
+    <Field name="region">
+      <Combobox {...args}>
+        <FieldLabel magnitude="md">Region</FieldLabel>
+        <ComboboxInputGroup>
+          <ComboboxInput placeholder="e.g. eu-central-1" />
+          <ComboboxClear />
+          <ComboboxTrigger />
+        </ComboboxInputGroup>
+        <ComboboxPortal>
+          <ComboboxPositioner>
+            <ComboboxPopup>
+              <ComboboxEmpty>No matches</ComboboxEmpty>
+              <ComboboxList>
+                {REGIONS.map((region) => (
+                  <ComboboxItem key={region} value={region}>
+                    <ComboboxItemIndicator />
+                    <span>{region}</span>
+                  </ComboboxItem>
+                ))}
+              </ComboboxList>
+            </ComboboxPopup>
+          </ComboboxPositioner>
+        </ComboboxPortal>
+        <FieldError magnitude="md" />
+      </Combobox>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.type(canvas.getByRole("combobox", { name: "Region" }), "eu");
+    await expect(within(document.body).getByText("eu-central-1")).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/ui/combobox/combobox.tsx b/packages/propel/src/ui/combobox/combobox.tsx
new file mode 100644
index 0000000..d487cb8
--- /dev/null
+++ b/packages/propel/src/ui/combobox/combobox.tsx
@@ -0,0 +1,12 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+export type ComboboxProps<Value, Multiple extends boolean | undefined = false> = Omit<
+  BaseCombobox.Root.Props<Value, Multiple>,
+  "className" | "style"
+>;
+
+export function Combobox<Value, Multiple extends boolean | undefined = false>(
+  props: ComboboxProps<Value, Multiple>,
+) {
+  return <BaseCombobox.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/combobox/index.tsx b/packages/propel/src/ui/combobox/index.tsx
new file mode 100644
index 0000000..2a819c8
--- /dev/null
+++ b/packages/propel/src/ui/combobox/index.tsx
@@ -0,0 +1,13 @@
+export { Combobox, type ComboboxProps } from "./combobox";
+export { ComboboxClear, type ComboboxClearProps } from "./combobox-clear";
+export { ComboboxEmpty, type ComboboxEmptyProps } from "./combobox-empty";
+export { ComboboxInput, type ComboboxInputProps } from "./combobox-input";
+export { ComboboxInputGroup, type ComboboxInputGroupProps } from "./combobox-input-group";
+export { ComboboxItem, type ComboboxItemProps } from "./combobox-item";
+export { ComboboxItemIndicator, type ComboboxItemIndicatorProps } from "./combobox-item-indicator";
+export { ComboboxLabel, type ComboboxLabelProps } from "./combobox-label";
+export { ComboboxList } from "./combobox-list";
+export { ComboboxPopup, type ComboboxPopupProps } from "./combobox-popup";
+export { ComboboxPortal } from "./combobox-portal";
+export { ComboboxPositioner, type ComboboxPositionerProps } from "./combobox-positioner";
+export { ComboboxTrigger, type ComboboxTriggerProps } from "./combobox-trigger";
diff --git a/packages/propel/src/ui/combobox/variants.ts b/packages/propel/src/ui/combobox/variants.ts
new file mode 100644
index 0000000..cc5b722
--- /dev/null
+++ b/packages/propel/src/ui/combobox/variants.ts
@@ -0,0 +1,28 @@
+import { cva, cx } from "class-variance-authority";
+
+export const comboboxLabelVariants = cva("text-14 font-medium text-primary");
+export const comboboxInputGroupVariants = cva(
+  cx(
+    "flex min-h-9 min-w-64 items-center gap-2 rounded-md border-sm border-subtle bg-layer-2 px-3",
+    "focus-within:border-accent-strong focus-within:ring-2 focus-within:ring-accent-strong/20",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const comboboxInputVariants = cva(
+  "min-w-0 flex-1 bg-transparent text-14 text-primary outline-none placeholder:text-placeholder disabled:text-disabled",
+);
+export const comboboxButtonVariants = cva(
+  "flex size-6 items-center justify-center rounded-sm text-icon-secondary outline-none hover:bg-layer-transparent-hover focus-visible:bg-layer-transparent-hover data-disabled:text-disabled",
+);
+export const comboboxPositionerVariants = cva("z-50 outline-none");
+export const comboboxPopupVariants = cva(
+  "max-h-[min(var(--available-height),18rem)] min-w-(--anchor-width) overflow-y-auto rounded-md border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100",
+);
+export const comboboxItemVariants = cva(
+  cx(
+    "grid min-h-8 cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm px-2 text-14 text-primary outline-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const comboboxEmptyVariants = cva("px-2 py-1.5 text-13 text-tertiary");
diff --git a/packages/propel/src/ui/context-menu/context-menu-arrow.tsx b/packages/propel/src/ui/context-menu/context-menu-arrow.tsx
new file mode 100644
index 0000000..19d03b1
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-arrow.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuArrowVariants } from "./variants";
+
+export type ContextMenuArrowProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Arrow>,
+  "className" | "style"
+>;
+
+/** An element pointing from the popup toward its anchor. Wraps `ContextMenu.Arrow` 1:1. */
+export function ContextMenuArrow(props: ContextMenuArrowProps) {
+  return <BaseContextMenu.Arrow className={contextMenuArrowVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-backdrop.tsx b/packages/propel/src/ui/context-menu/context-menu-backdrop.tsx
new file mode 100644
index 0000000..848cb1e
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-backdrop.tsx
@@ -0,0 +1,12 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuBackdropProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Backdrop>,
+  "className" | "style"
+>;
+
+/** An overlay rendered beneath the menu popup. Wraps `ContextMenu.Backdrop` 1:1. */
+export function ContextMenuBackdrop(props: ContextMenuBackdropProps) {
+  return <BaseContextMenu.Backdrop {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-checkbox-item-indicator.tsx b/packages/propel/src/ui/context-menu/context-menu-checkbox-item-indicator.tsx
new file mode 100644
index 0000000..dd912d5
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-checkbox-item-indicator.tsx
@@ -0,0 +1,22 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { contextMenuItemIndicatorVariants } from "./variants";
+
+export type ContextMenuCheckboxItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.CheckboxItemIndicator>,
+  "className" | "style"
+>;
+
+/** Shows whether the checkbox item is ticked. Wraps `ContextMenu.CheckboxItemIndicator` 1:1. */
+export function ContextMenuCheckboxItemIndicator(props: ContextMenuCheckboxItemIndicatorProps) {
+  return (
+    <BaseContextMenu.CheckboxItemIndicator
+      className={contextMenuItemIndicatorVariants()}
+      {...props}
+    >
+      {props.children ?? <Check className="size-4" aria-hidden="true" />}
+    </BaseContextMenu.CheckboxItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-checkbox-item.tsx b/packages/propel/src/ui/context-menu/context-menu-checkbox-item.tsx
new file mode 100644
index 0000000..e2204cd
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-checkbox-item.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuItemVariants } from "./variants";
+
+export type ContextMenuCheckboxItemProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.CheckboxItem>,
+  "className" | "style"
+>;
+
+/** A menu row that toggles a setting on or off. Wraps `ContextMenu.CheckboxItem` 1:1. */
+export function ContextMenuCheckboxItem(props: ContextMenuCheckboxItemProps) {
+  return <BaseContextMenu.CheckboxItem className={contextMenuItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-group-label.tsx b/packages/propel/src/ui/context-menu/context-menu-group-label.tsx
new file mode 100644
index 0000000..3c41c41
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-group-label.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuGroupLabelVariants } from "./variants";
+
+export type ContextMenuGroupLabelProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.GroupLabel>,
+  "className" | "style"
+>;
+
+/** A non-interactive heading associated with its parent group. Wraps `ContextMenu.GroupLabel` 1:1. */
+export function ContextMenuGroupLabel(props: ContextMenuGroupLabelProps) {
+  return <BaseContextMenu.GroupLabel className={contextMenuGroupLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-group.tsx b/packages/propel/src/ui/context-menu/context-menu-group.tsx
new file mode 100644
index 0000000..6dbb1ec
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-group.tsx
@@ -0,0 +1,12 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuGroupProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Group>,
+  "className" | "style"
+>;
+
+/** Groups related items so a `ContextMenuGroupLabel` can title them. Wraps `ContextMenu.Group` 1:1. */
+export function ContextMenuGroup(props: ContextMenuGroupProps) {
+  return <BaseContextMenu.Group {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-item.tsx b/packages/propel/src/ui/context-menu/context-menu-item.tsx
new file mode 100644
index 0000000..2133c12
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-item.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuItemVariants } from "./variants";
+
+export type ContextMenuItemProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Item>,
+  "className" | "style"
+>;
+
+/** An interactive menu row. Wraps `ContextMenu.Item` 1:1. */
+export function ContextMenuItem(props: ContextMenuItemProps) {
+  return <BaseContextMenu.Item className={contextMenuItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-link-item.tsx b/packages/propel/src/ui/context-menu/context-menu-link-item.tsx
new file mode 100644
index 0000000..37a32a7
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-link-item.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuItemVariants } from "./variants";
+
+export type ContextMenuLinkItemProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.LinkItem>,
+  "className" | "style"
+>;
+
+/** A navigational `<a>` menu row. Wraps `ContextMenu.LinkItem` 1:1. */
+export function ContextMenuLinkItem(props: ContextMenuLinkItemProps) {
+  return <BaseContextMenu.LinkItem className={contextMenuItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-popup.tsx b/packages/propel/src/ui/context-menu/context-menu-popup.tsx
new file mode 100644
index 0000000..30677fb
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-popup.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuPopupVariants } from "./variants";
+
+export type ContextMenuPopupProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Popup>,
+  "className" | "style"
+>;
+
+/** The menu surface that contains the items. Wraps `ContextMenu.Popup` 1:1. */
+export function ContextMenuPopup(props: ContextMenuPopupProps) {
+  return <BaseContextMenu.Popup className={contextMenuPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-portal.tsx b/packages/propel/src/ui/context-menu/context-menu-portal.tsx
new file mode 100644
index 0000000..aef1cf2
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-portal.tsx
@@ -0,0 +1,4 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+/** Portals the popup out to `<body>` by default. Re-exports `ContextMenu.Portal` 1:1. */
+export const ContextMenuPortal = BaseContextMenu.Portal;
diff --git a/packages/propel/src/ui/context-menu/context-menu-positioner.tsx b/packages/propel/src/ui/context-menu/context-menu-positioner.tsx
new file mode 100644
index 0000000..688a3fc
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-positioner.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuPositionerVariants } from "./variants";
+
+export type ContextMenuPositionerProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Positioner>,
+  "className" | "style"
+>;
+
+/** Positions the popup against the pointer. Wraps `ContextMenu.Positioner` 1:1. */
+export function ContextMenuPositioner(props: ContextMenuPositionerProps) {
+  return <BaseContextMenu.Positioner className={contextMenuPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-radio-group.tsx b/packages/propel/src/ui/context-menu/context-menu-radio-group.tsx
new file mode 100644
index 0000000..6e2a41b
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-radio-group.tsx
@@ -0,0 +1,12 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuRadioGroupProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.RadioGroup>,
+  "className" | "style"
+>;
+
+/** Groups related radio items around a shared value. Wraps `ContextMenu.RadioGroup` 1:1. */
+export function ContextMenuRadioGroup(props: ContextMenuRadioGroupProps) {
+  return <BaseContextMenu.RadioGroup {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-radio-item-indicator.tsx b/packages/propel/src/ui/context-menu/context-menu-radio-item-indicator.tsx
new file mode 100644
index 0000000..45ffb8e
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-radio-item-indicator.tsx
@@ -0,0 +1,19 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { contextMenuItemIndicatorVariants } from "./variants";
+
+export type ContextMenuRadioItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.RadioItemIndicator>,
+  "className" | "style"
+>;
+
+/** Shows whether the radio item is selected. Wraps `ContextMenu.RadioItemIndicator` 1:1. */
+export function ContextMenuRadioItemIndicator(props: ContextMenuRadioItemIndicatorProps) {
+  return (
+    <BaseContextMenu.RadioItemIndicator className={contextMenuItemIndicatorVariants()} {...props}>
+      {props.children ?? <Check className="size-4" aria-hidden="true" />}
+    </BaseContextMenu.RadioItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-radio-item.tsx b/packages/propel/src/ui/context-menu/context-menu-radio-item.tsx
new file mode 100644
index 0000000..3335692
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-radio-item.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuItemVariants } from "./variants";
+
+export type ContextMenuRadioItemProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.RadioItem>,
+  "className" | "style"
+>;
+
+/** A menu row that behaves like a radio button. Wraps `ContextMenu.RadioItem` 1:1. */
+export function ContextMenuRadioItem(props: ContextMenuRadioItemProps) {
+  return <BaseContextMenu.RadioItem className={contextMenuItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-separator.tsx b/packages/propel/src/ui/context-menu/context-menu-separator.tsx
new file mode 100644
index 0000000..f671f05
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-separator.tsx
@@ -0,0 +1,14 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+import { contextMenuSeparatorVariants } from "./variants";
+
+export type ContextMenuSeparatorProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Separator>,
+  "className" | "style"
+>;
+
+/** A thin divider between groups of items. Wraps `ContextMenu.Separator` 1:1. */
+export function ContextMenuSeparator(props: ContextMenuSeparatorProps) {
+  return <BaseContextMenu.Separator className={contextMenuSeparatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-submenu-root.tsx b/packages/propel/src/ui/context-menu/context-menu-submenu-root.tsx
new file mode 100644
index 0000000..c894147
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-submenu-root.tsx
@@ -0,0 +1,12 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuSubmenuRootProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.SubmenuRoot>,
+  "className" | "style"
+>;
+
+/** Groups all parts of a nested submenu. Wraps `ContextMenu.SubmenuRoot` 1:1. */
+export function ContextMenuSubmenuRoot(props: ContextMenuSubmenuRootProps) {
+  return <BaseContextMenu.SubmenuRoot {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-submenu-trigger.tsx b/packages/propel/src/ui/context-menu/context-menu-submenu-trigger.tsx
new file mode 100644
index 0000000..9804b14
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-submenu-trigger.tsx
@@ -0,0 +1,23 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { contextMenuItemVariants } from "./variants";
+
+export type ContextMenuSubmenuTriggerProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.SubmenuTrigger>,
+  "className" | "style"
+>;
+
+/** The row that opens a submenu. Wraps `ContextMenu.SubmenuTrigger` 1:1. */
+export function ContextMenuSubmenuTrigger(props: ContextMenuSubmenuTriggerProps) {
+  return (
+    <BaseContextMenu.SubmenuTrigger
+      className={cx(
+        contextMenuItemVariants(),
+        "group/item data-popup-open:bg-layer-transparent-hover data-popup-open:text-primary",
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu-trigger.tsx b/packages/propel/src/ui/context-menu/context-menu-trigger.tsx
new file mode 100644
index 0000000..d4707cc
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu-trigger.tsx
@@ -0,0 +1,12 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuTriggerProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Trigger>,
+  "className" | "style"
+>;
+
+/** The area that opens the menu on right click or long press. Wraps `ContextMenu.Trigger` 1:1. */
+export function ContextMenuTrigger(props: ContextMenuTriggerProps) {
+  return <BaseContextMenu.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/context-menu.stories.tsx b/packages/propel/src/ui/context-menu/context-menu.stories.tsx
new file mode 100644
index 0000000..8da55d0
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fireEvent, waitFor } from "storybook/test";
+
+import {
+  ContextMenu,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuPopup,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "./index";
+
+// UI-tier story: assemble the ATOMIC context-menu parts by hand — Root › Trigger,
+// then Portal › Positioner › Popup wrapping items, separators and groups. The
+// components-tier story uses the rich `ContextMenuItem` (icon + label) rows.
+const meta = {
+  title: "UI/ContextMenu",
+  component: ContextMenu,
+  subcomponents: {
+    ContextMenuTrigger,
+    ContextMenuPortal,
+    ContextMenuPositioner,
+    ContextMenuPopup,
+    ContextMenuItem,
+    ContextMenuSeparator,
+    ContextMenuGroup,
+    ContextMenuGroupLabel,
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const triggerClass =
+  "flex h-32 w-72 items-center justify-center rounded-lg border-sm border-dashed border-subtle text-13 text-tertiary select-none";
+
+/** Right-click (or long-press) the area to open the popup assembled from raw parts. */
+export const Default: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger render={<div className={triggerClass} />}>
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuPortal>
+        <ContextMenuPositioner>
+          <ContextMenuPopup>
+            <ContextMenuGroup>
+              <ContextMenuGroupLabel>Actions</ContextMenuGroupLabel>
+              <ContextMenuItem>Cut</ContextMenuItem>
+              <ContextMenuItem>Copy</ContextMenuItem>
+              <ContextMenuItem>Paste</ContextMenuItem>
+            </ContextMenuGroup>
+            <ContextMenuSeparator />
+            <ContextMenuItem>Delete</ContextMenuItem>
+          </ContextMenuPopup>
+        </ContextMenuPositioner>
+      </ContextMenuPortal>
+    </ContextMenu>
+  ),
+  play: async ({ canvas }) => {
+    await fireEvent.contextMenu(canvas.getByText("Right-click here"));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("Actions");
+    await expect(document.body).toHaveTextContent("Delete");
+  },
+};
diff --git a/packages/propel/src/ui/context-menu/context-menu.tsx b/packages/propel/src/ui/context-menu/context-menu.tsx
new file mode 100644
index 0000000..56c316d
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/context-menu.tsx
@@ -0,0 +1,15 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import type * as React from "react";
+
+export type ContextMenuProps = Omit<
+  React.ComponentProps<typeof BaseContextMenu.Root>,
+  "className" | "style"
+>;
+
+/**
+ * Root of the context menu. Wraps `ContextMenu.Root` 1:1; opens at the pointer on right click or
+ * long press.
+ */
+export function ContextMenu(props: ContextMenuProps) {
+  return <BaseContextMenu.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/context-menu/index.tsx b/packages/propel/src/ui/context-menu/index.tsx
new file mode 100644
index 0000000..d3e0a86
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/index.tsx
@@ -0,0 +1,34 @@
+export { ContextMenu, type ContextMenuProps } from "./context-menu";
+export { ContextMenuArrow, type ContextMenuArrowProps } from "./context-menu-arrow";
+export { ContextMenuBackdrop, type ContextMenuBackdropProps } from "./context-menu-backdrop";
+export {
+  ContextMenuCheckboxItem,
+  type ContextMenuCheckboxItemProps,
+} from "./context-menu-checkbox-item";
+export {
+  ContextMenuCheckboxItemIndicator,
+  type ContextMenuCheckboxItemIndicatorProps,
+} from "./context-menu-checkbox-item-indicator";
+export { ContextMenuGroup, type ContextMenuGroupProps } from "./context-menu-group";
+export { ContextMenuGroupLabel, type ContextMenuGroupLabelProps } from "./context-menu-group-label";
+export { ContextMenuItem, type ContextMenuItemProps } from "./context-menu-item";
+export { ContextMenuLinkItem, type ContextMenuLinkItemProps } from "./context-menu-link-item";
+export { ContextMenuPopup, type ContextMenuPopupProps } from "./context-menu-popup";
+export { ContextMenuPortal } from "./context-menu-portal";
+export { ContextMenuPositioner, type ContextMenuPositionerProps } from "./context-menu-positioner";
+export { ContextMenuRadioGroup, type ContextMenuRadioGroupProps } from "./context-menu-radio-group";
+export { ContextMenuRadioItem, type ContextMenuRadioItemProps } from "./context-menu-radio-item";
+export {
+  ContextMenuRadioItemIndicator,
+  type ContextMenuRadioItemIndicatorProps,
+} from "./context-menu-radio-item-indicator";
+export { ContextMenuSeparator, type ContextMenuSeparatorProps } from "./context-menu-separator";
+export {
+  ContextMenuSubmenuRoot,
+  type ContextMenuSubmenuRootProps,
+} from "./context-menu-submenu-root";
+export {
+  ContextMenuSubmenuTrigger,
+  type ContextMenuSubmenuTriggerProps,
+} from "./context-menu-submenu-trigger";
+export { ContextMenuTrigger, type ContextMenuTriggerProps } from "./context-menu-trigger";
diff --git a/packages/propel/src/ui/context-menu/variants.ts b/packages/propel/src/ui/context-menu/variants.ts
new file mode 100644
index 0000000..00e29f4
--- /dev/null
+++ b/packages/propel/src/ui/context-menu/variants.ts
@@ -0,0 +1,37 @@
+import { cva, cx } from "class-variance-authority";
+
+/** Positioner: anchors the popup at the pointer with overlay stacking. */
+export const contextMenuPositionerVariants = cva("z-50 outline-none");
+
+/** Popup: the menu surface, animated from its pointer-anchored transform origin. */
+export const contextMenuPopupVariants = cva(
+  cx(
+    "min-w-40 rounded-lg border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100 outline-none",
+    "origin-(--transform-origin) transition-[opacity,transform] duration-150",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ),
+);
+
+/** Item rows: shared styling for Item, LinkItem, CheckboxItem, RadioItem and SubmenuTrigger. */
+export const contextMenuItemVariants = cva(
+  cx(
+    "flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 text-secondary outline-none select-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+);
+
+/** Indicator slot inside radio/checkbox items. */
+export const contextMenuItemIndicatorVariants = cva(
+  "flex size-4 items-center justify-center text-icon-accent-primary",
+);
+
+/** Separator: a thin divider spanning the popup padding. */
+export const contextMenuSeparatorVariants = cva("-mx-1 my-1 border-t border-subtle");
+
+/** GroupLabel: a non-interactive section heading. */
+export const contextMenuGroupLabelVariants = cva("px-2 py-1 text-12 font-medium text-tertiary");
+
+/** Arrow: a small caret matching the popup surface color. */
+export const contextMenuArrowVariants = cva("text-layer-1");
diff --git a/packages/propel/src/ui/dialog/dialog-backdrop.tsx b/packages/propel/src/ui/dialog/dialog-backdrop.tsx
new file mode 100644
index 0000000..04885a3
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-backdrop.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogBackdropVariants } from "./variants";
+
+export type DialogBackdropProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Backdrop>,
+  "className" | "style"
+>;
+
+/**
+ * The dimmed overlay behind the popup. Fades with the dialog's open state via Base UI's
+ * starting/ending transition styles. Maps 1:1 to `Dialog.Backdrop`.
+ */
+export function DialogBackdrop(props: DialogBackdropProps) {
+  return <BaseDialog.Backdrop className={dialogBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-close.tsx b/packages/propel/src/ui/dialog/dialog-close.tsx
new file mode 100644
index 0000000..a48cf1a
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-close.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogCloseVariants } from "./variants";
+
+export type DialogCloseProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Close>,
+  "className" | "style"
+>;
+
+/**
+ * A button that closes the dialog when activated. Renders a ghost button by default; children are
+ * optional. Maps 1:1 to `Dialog.Close`.
+ */
+export function DialogClose(props: DialogCloseProps) {
+  return <BaseDialog.Close className={dialogCloseVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-description.tsx b/packages/propel/src/ui/dialog/dialog-description.tsx
new file mode 100644
index 0000000..99cacae
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-description.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogDescriptionVariants } from "./variants";
+
+export type DialogDescriptionProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Description>,
+  "className" | "style"
+>;
+
+/**
+ * The supporting description for the dialog. Base UI links it to the popup via `aria-describedby`.
+ * Maps 1:1 to `Dialog.Description`.
+ */
+export function DialogDescription(props: DialogDescriptionProps) {
+  return <BaseDialog.Description className={dialogDescriptionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-popup.tsx b/packages/propel/src/ui/dialog/dialog-popup.tsx
new file mode 100644
index 0000000..80ea7bb
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-popup.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogPopupVariants } from "./variants";
+
+export type DialogPopupProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Popup>,
+  "className" | "style"
+>;
+
+/**
+ * The centered card that holds the dialog content. Scales and fades on open/close using Base UI's
+ * `--transform-origin` and starting/ending transition styles. Maps 1:1 to `Dialog.Popup`.
+ */
+export function DialogPopup(props: DialogPopupProps) {
+  return <BaseDialog.Popup className={dialogPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-portal.tsx b/packages/propel/src/ui/dialog/dialog-portal.tsx
new file mode 100644
index 0000000..b6d3e2d
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-portal.tsx
@@ -0,0 +1,7 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+
+/**
+ * Renders the backdrop and popup into a portal so they escape local stacking contexts. Maps 1:1 to
+ * `Dialog.Portal`.
+ */
+export const DialogPortal = BaseDialog.Portal;
diff --git a/packages/propel/src/ui/dialog/dialog-title.tsx b/packages/propel/src/ui/dialog/dialog-title.tsx
new file mode 100644
index 0000000..1a478f4
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-title.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogTitleVariants } from "./variants";
+
+export type DialogTitleProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Title>,
+  "className" | "style"
+>;
+
+/**
+ * The accessible title for the dialog. Base UI links it to the popup via `aria-labelledby`. Maps
+ * 1:1 to `Dialog.Title`.
+ */
+export function DialogTitle(props: DialogTitleProps) {
+  return <BaseDialog.Title className={dialogTitleVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-trigger.tsx b/packages/propel/src/ui/dialog/dialog-trigger.tsx
new file mode 100644
index 0000000..ce2d8b8
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-trigger.tsx
@@ -0,0 +1,15 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+export type DialogTriggerProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The button that opens the dialog. Base UI manages `aria-haspopup`/`aria-expanded` and focus
+ * restoration when the dialog closes. Maps 1:1 to `Dialog.Trigger`.
+ */
+export function DialogTrigger(props: DialogTriggerProps) {
+  return <BaseDialog.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog-viewport.tsx b/packages/propel/src/ui/dialog/dialog-viewport.tsx
new file mode 100644
index 0000000..dadeeaf
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog-viewport.tsx
@@ -0,0 +1,17 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+import { dialogViewportVariants } from "./variants";
+
+export type DialogViewportProps = Omit<
+  React.ComponentProps<typeof BaseDialog.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The full-screen container that centers the popup and provides a scrollable area for tall content.
+ * Maps 1:1 to `Dialog.Viewport`.
+ */
+export function DialogViewport(props: DialogViewportProps) {
+  return <BaseDialog.Viewport className={dialogViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/dialog.stories.tsx b/packages/propel/src/ui/dialog/dialog.stories.tsx
new file mode 100644
index 0000000..de6fe3f
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog.stories.tsx
@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogDescription,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  DialogViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC dialog parts (Root › Trigger › Portal ›
+// Backdrop › Viewport › Popup, plus Title/Description/Close). The components-tier
+// `DialogContent` ready-made composes the portal/backdrop/viewport/popup for you;
+// here you wire that boilerplate by hand.
+const triggerClass =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+const meta = {
+  title: "UI/Dialog",
+  component: Dialog,
+  subcomponents: {
+    DialogTrigger,
+    DialogPortal,
+    DialogBackdrop,
+    DialogViewport,
+    DialogPopup,
+    DialogTitle,
+    DialogDescription,
+    DialogClose,
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: trigger opens a portaled, backdropped, centered popup. */
+export const Anatomy: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger render={<button type="button" className={triggerClass} />}>
+        Open dialog
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogBackdrop />
+        <DialogViewport>
+          <DialogPopup>
+            <div className="flex w-80 flex-col gap-2">
+              <div className="flex items-start justify-between gap-4">
+                <DialogTitle>Delete project</DialogTitle>
+                <DialogClose
+                  render={
+                    <button type="button" aria-label="Close" className="size-7">
+                      <X aria-hidden className="size-4" />
+                    </button>
+                  }
+                />
+              </div>
+              <DialogDescription>
+                This permanently removes the project and all of its work items.
+              </DialogDescription>
+              <div className="mt-2 flex justify-end gap-2">
+                <DialogClose render={<button type="button" className={triggerClass} />}>
+                  Cancel
+                </DialogClose>
+              </div>
+            </div>
+          </DialogPopup>
+        </DialogViewport>
+      </DialogPortal>
+    </Dialog>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Open dialog" }));
+    const dialog = await within(document.body).findByRole("dialog");
+    await expect(within(dialog).getByText("Delete project")).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByRole("button", { name: "Cancel" }));
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+  },
+};
+
+/**
+ * `disablePointerDismissal` on the root keeps the dialog open when the backdrop is clicked, so it
+ * only closes via an explicit `DialogClose`.
+ */
+export const NonDismissable: Story = {
+  render: () => (
+    <Dialog disablePointerDismissal>
+      <DialogTrigger render={<button type="button" className={triggerClass} />}>
+        Open locked dialog
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogBackdrop />
+        <DialogViewport>
+          <DialogPopup>
+            <div className="flex w-80 flex-col gap-2">
+              <DialogTitle>Unsaved changes</DialogTitle>
+              <DialogDescription>
+                Choose an action — clicking outside won&apos;t dismiss.
+              </DialogDescription>
+              <div className="mt-2 flex justify-end">
+                <DialogClose render={<button type="button" className={triggerClass} />}>
+                  Discard
+                </DialogClose>
+              </div>
+            </div>
+          </DialogPopup>
+        </DialogViewport>
+      </DialogPortal>
+    </Dialog>
+  ),
+};
diff --git a/packages/propel/src/ui/dialog/dialog.tsx b/packages/propel/src/ui/dialog/dialog.tsx
new file mode 100644
index 0000000..042e0be
--- /dev/null
+++ b/packages/propel/src/ui/dialog/dialog.tsx
@@ -0,0 +1,13 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import type * as React from "react";
+
+export type DialogProps = Omit<React.ComponentProps<typeof BaseDialog.Root>, "className" | "style">;
+
+/**
+ * The dialog root that wires up open state and accessibility for its parts. Modal by default; pass
+ * `disablePointerDismissal` to keep it open on outside clicks. Maps 1:1 to Base UI's
+ * `Dialog.Root`.
+ */
+export function Dialog(props: DialogProps) {
+  return <BaseDialog.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/dialog/index.tsx b/packages/propel/src/ui/dialog/index.tsx
new file mode 100644
index 0000000..454f25b
--- /dev/null
+++ b/packages/propel/src/ui/dialog/index.tsx
@@ -0,0 +1,9 @@
+export { Dialog, type DialogProps } from "./dialog";
+export { DialogBackdrop, type DialogBackdropProps } from "./dialog-backdrop";
+export { DialogClose, type DialogCloseProps } from "./dialog-close";
+export { DialogDescription, type DialogDescriptionProps } from "./dialog-description";
+export { DialogPopup, type DialogPopupProps } from "./dialog-popup";
+export { DialogPortal } from "./dialog-portal";
+export { DialogTitle, type DialogTitleProps } from "./dialog-title";
+export { DialogTrigger, type DialogTriggerProps } from "./dialog-trigger";
+export { DialogViewport, type DialogViewportProps } from "./dialog-viewport";
diff --git a/packages/propel/src/ui/dialog/variants.ts b/packages/propel/src/ui/dialog/variants.ts
new file mode 100644
index 0000000..01291f3
--- /dev/null
+++ b/packages/propel/src/ui/dialog/variants.ts
@@ -0,0 +1,39 @@
+import { cva, cx } from "class-variance-authority";
+
+// Dialog is a structural overlay primitive. Base UI drives every interactive
+// state (open/closed, starting/ending transition styles) as data attributes, so
+// there are no styling axes (variant/tone/magnitude) to expose. The cva pairings
+// below hold the static chrome so each part is styled in one place, with no
+// `className` at the boundary. Root, Trigger, and Portal carry no styling.
+
+export const dialogBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
+
+export const dialogViewportVariants = cva(
+  "fixed inset-0 z-50 flex items-center justify-center p-4",
+);
+
+export const dialogPopupVariants = cva(
+  cx(
+    "rounded-lg border-sm border-subtle bg-layer-1 p-4 shadow-overlay-100 outline-none",
+    "origin-(--transform-origin) transition-[opacity,transform] duration-200",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ),
+);
+
+export const dialogTitleVariants = cva("text-16 font-semibold text-primary");
+
+export const dialogDescriptionVariants = cva("text-14 text-secondary");
+
+export const dialogCloseVariants = cva(
+  cx(
+    "inline-flex items-center justify-center rounded-md text-icon-secondary outline-none",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
diff --git a/packages/propel/src/ui/drawer/drawer-backdrop.tsx b/packages/propel/src/ui/drawer/drawer-backdrop.tsx
new file mode 100644
index 0000000..9fe1c6f
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-backdrop.tsx
@@ -0,0 +1,18 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerBackdropVariants } from "./variants";
+
+export type DrawerBackdropProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Backdrop>,
+  "className" | "style"
+>;
+
+/**
+ * The dimmed overlay behind the drawer. Fades in/out via Base UI's
+ * `data-starting-style`/`data-ending-style` transition hooks. Maps 1:1 to Base UI's
+ * `Drawer.Backdrop`.
+ */
+export function DrawerBackdrop(props: DrawerBackdropProps) {
+  return <BaseDrawer.Backdrop className={drawerBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-close.tsx b/packages/propel/src/ui/drawer/drawer-close.tsx
new file mode 100644
index 0000000..f856290
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-close.tsx
@@ -0,0 +1,17 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerCloseVariants } from "./variants";
+
+export type DrawerCloseProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Close>,
+  "className" | "style"
+>;
+
+/**
+ * A control that closes the drawer when activated. Place inside the content for a dismiss button.
+ * Maps 1:1 to Base UI's `Drawer.Close`.
+ */
+export function DrawerClose(props: DrawerCloseProps) {
+  return <BaseDrawer.Close className={drawerCloseVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-content.tsx b/packages/propel/src/ui/drawer/drawer-content.tsx
new file mode 100644
index 0000000..0295b74
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-content.tsx
@@ -0,0 +1,18 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerContentVariants } from "./variants";
+
+export type DrawerContentProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Content>,
+  "className" | "style"
+>;
+
+/**
+ * The padded inner content region of the popup. Holds the title, description, body, and close
+ * affordances, and allows mouse text selection without triggering swipe-dismiss. Maps 1:1 to Base
+ * UI's `Drawer.Content`.
+ */
+export function DrawerContent(props: DrawerContentProps) {
+  return <BaseDrawer.Content className={drawerContentVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-description.tsx b/packages/propel/src/ui/drawer/drawer-description.tsx
new file mode 100644
index 0000000..d3ad1c8
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-description.tsx
@@ -0,0 +1,17 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerDescriptionVariants } from "./variants";
+
+export type DrawerDescriptionProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Description>,
+  "className" | "style"
+>;
+
+/**
+ * Supporting text for the drawer. Base UI wires it as the popup's `aria-describedby` target. Maps
+ * 1:1 to Base UI's `Drawer.Description`.
+ */
+export function DrawerDescription(props: DrawerDescriptionProps) {
+  return <BaseDrawer.Description className={drawerDescriptionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-indent-background.tsx b/packages/propel/src/ui/drawer/drawer-indent-background.tsx
new file mode 100644
index 0000000..9d699aa
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-indent-background.tsx
@@ -0,0 +1,16 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerIndentBackgroundProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.IndentBackground>,
+  "className" | "style"
+>;
+
+/**
+ * Renders behind the indented page content so the area revealed by the indent effect has a backdrop
+ * color. Used alongside `DrawerIndent` inside a `DrawerProvider`. Maps 1:1 to Base UI's
+ * `Drawer.IndentBackground`.
+ */
+export function DrawerIndentBackground(props: DrawerIndentBackgroundProps) {
+  return <BaseDrawer.IndentBackground {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-indent.tsx b/packages/propel/src/ui/drawer/drawer-indent.tsx
new file mode 100644
index 0000000..64b3858
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-indent.tsx
@@ -0,0 +1,16 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerIndentProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Indent>,
+  "className" | "style"
+>;
+
+/**
+ * Wraps page content that should scale/shift inward as the drawer opens (the indent effect). Place
+ * inside a `DrawerProvider`, around the `Drawer` root and your page. Maps 1:1 to Base UI's
+ * `Drawer.Indent`.
+ */
+export function DrawerIndent(props: DrawerIndentProps) {
+  return <BaseDrawer.Indent {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-popup.tsx b/packages/propel/src/ui/drawer/drawer-popup.tsx
new file mode 100644
index 0000000..0b5453f
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-popup.tsx
@@ -0,0 +1,17 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerPopupVariants } from "./variants";
+
+export type DrawerPopupProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Popup>,
+  "className" | "style"
+>;
+
+/**
+ * The sliding panel itself. Defaults to a right-edge drawer that slides in/out using Base UI's
+ * `data-starting-style`/`data-ending-style` transforms. Maps 1:1 to Base UI's `Drawer.Popup`.
+ */
+export function DrawerPopup(props: DrawerPopupProps) {
+  return <BaseDrawer.Popup className={drawerPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-portal.tsx b/packages/propel/src/ui/drawer/drawer-portal.tsx
new file mode 100644
index 0000000..1a9b7c0
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-portal.tsx
@@ -0,0 +1,15 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerPortalProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Portal>,
+  "className" | "style"
+>;
+
+/**
+ * Portals the backdrop, viewport, and popup out to the end of the document body so the drawer
+ * escapes overflow/stacking contexts. Maps 1:1 to Base UI's `Drawer.Portal`.
+ */
+export function DrawerPortal(props: DrawerPortalProps) {
+  return <BaseDrawer.Portal {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-provider.tsx b/packages/propel/src/ui/drawer/drawer-provider.tsx
new file mode 100644
index 0000000..f09188a
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-provider.tsx
@@ -0,0 +1,16 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerProviderProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Provider>,
+  "className" | "style"
+>;
+
+/**
+ * Optional context wrapper that coordinates indent effects across sibling drawers. Wrap `Drawer`
+ * (and any `DrawerIndent`/`DrawerIndentBackground`) in it when you need the page to shift as the
+ * drawer opens. Maps 1:1 to Base UI's `Drawer.Provider`.
+ */
+export function DrawerProvider(props: DrawerProviderProps) {
+  return <BaseDrawer.Provider {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-swipe-area.tsx b/packages/propel/src/ui/drawer/drawer-swipe-area.tsx
new file mode 100644
index 0000000..cf2b974
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-swipe-area.tsx
@@ -0,0 +1,15 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerSwipeAreaProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.SwipeArea>,
+  "className" | "style"
+>;
+
+/**
+ * An off-screen edge hit area that lets users swipe the closed drawer open from the screen edge.
+ * Optional; render it as a sibling of the trigger. Maps 1:1 to Base UI's `Drawer.SwipeArea`.
+ */
+export function DrawerSwipeArea(props: DrawerSwipeAreaProps) {
+  return <BaseDrawer.SwipeArea {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-title.tsx b/packages/propel/src/ui/drawer/drawer-title.tsx
new file mode 100644
index 0000000..1397bb6
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-title.tsx
@@ -0,0 +1,17 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerTitleVariants } from "./variants";
+
+export type DrawerTitleProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Title>,
+  "className" | "style"
+>;
+
+/**
+ * The accessible heading for the drawer. Base UI wires it as the popup's `aria-labelledby` target.
+ * Maps 1:1 to Base UI's `Drawer.Title`.
+ */
+export function DrawerTitle(props: DrawerTitleProps) {
+  return <BaseDrawer.Title className={drawerTitleVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-trigger.tsx b/packages/propel/src/ui/drawer/drawer-trigger.tsx
new file mode 100644
index 0000000..aa5a169
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-trigger.tsx
@@ -0,0 +1,16 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerTriggerProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The control that opens the drawer. Base UI wires `aria-haspopup`/`aria-expanded` and reflects
+ * open state as data attributes. Compose a `Button` via `render` downstream. Maps 1:1 to Base UI's
+ * `Drawer.Trigger`.
+ */
+export function DrawerTrigger(props: DrawerTriggerProps) {
+  return <BaseDrawer.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer-viewport.tsx b/packages/propel/src/ui/drawer/drawer-viewport.tsx
new file mode 100644
index 0000000..310da8b
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer-viewport.tsx
@@ -0,0 +1,17 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+import { drawerViewportVariants } from "./variants";
+
+export type DrawerViewportProps = Omit<
+  React.ComponentProps<typeof BaseDrawer.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The fixed, full-screen layer that positions the popup against a screen edge. Wraps the
+ * `DrawerPopup` and aligns it via layout. Maps 1:1 to Base UI's `Drawer.Viewport`.
+ */
+export function DrawerViewport(props: DrawerViewportProps) {
+  return <BaseDrawer.Viewport className={drawerViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/drawer.stories.tsx b/packages/propel/src/ui/drawer/drawer.stories.tsx
new file mode 100644
index 0000000..fc6e150
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { X } from "lucide-react";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC drawer parts by hand (Root › Trigger ›
+// Portal › Backdrop › Viewport › Popup › Content, plus Title/Description/Close).
+// The components-tier `DrawerPanel` ready-made composes the portal/backdrop/
+// viewport/popup/content for you.
+const triggerClass =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+const meta = {
+  title: "UI/Drawer",
+  component: Drawer,
+  subcomponents: {
+    DrawerTrigger,
+    DrawerPortal,
+    DrawerBackdrop,
+    DrawerViewport,
+    DrawerPopup,
+    DrawerContent,
+    DrawerTitle,
+    DrawerDescription,
+    DrawerClose,
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: trigger opens a right-edge sliding panel. */
+export const Anatomy: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger render={<button type="button" className={triggerClass} />}>
+        Open drawer
+      </DrawerTrigger>
+      <DrawerPortal>
+        <DrawerBackdrop />
+        <DrawerViewport>
+          <DrawerPopup>
+            <DrawerContent>
+              <div className="flex items-start justify-between gap-4">
+                <DrawerTitle>Work item details</DrawerTitle>
+                <DrawerClose
+                  render={
+                    <button type="button" aria-label="Close" className="size-7">
+                      <X aria-hidden className="size-4" />
+                    </button>
+                  }
+                />
+              </div>
+              <DrawerDescription>Edit the fields for this work item.</DrawerDescription>
+              <div className="text-14 text-secondary">Panel body content goes here.</div>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
+    </Drawer>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Open drawer" }));
+    const dialog = await within(document.body).findByRole("dialog");
+    await expect(within(dialog).getByText("Work item details")).toBeInTheDocument();
+    await userEvent.click(within(dialog).getByRole("button", { name: "Close" }));
+    await waitFor(() =>
+      expect(within(document.body).queryByRole("dialog")).not.toBeInTheDocument(),
+    );
+  },
+};
+
+/** Open on mount via the root's `defaultOpen`, with no trigger present. */
+export const DefaultOpen: Story = {
+  render: () => (
+    <Drawer defaultOpen>
+      <DrawerPortal>
+        <DrawerBackdrop />
+        <DrawerViewport>
+          <DrawerPopup>
+            <DrawerContent>
+              <DrawerTitle>Filters</DrawerTitle>
+              <DrawerDescription>This drawer started open.</DrawerDescription>
+            </DrawerContent>
+          </DrawerPopup>
+        </DrawerViewport>
+      </DrawerPortal>
+    </Drawer>
+  ),
+};
diff --git a/packages/propel/src/ui/drawer/drawer.tsx b/packages/propel/src/ui/drawer/drawer.tsx
new file mode 100644
index 0000000..8e17ea2
--- /dev/null
+++ b/packages/propel/src/ui/drawer/drawer.tsx
@@ -0,0 +1,13 @@
+import { Drawer as BaseDrawer } from "@base-ui/react/drawer";
+import type * as React from "react";
+
+export type DrawerProps = Omit<React.ComponentProps<typeof BaseDrawer.Root>, "className" | "style">;
+
+/**
+ * The drawer root that holds open state and gesture configuration. Uncontrolled by default; pass
+ * `defaultOpen` (uncontrolled) or `open` + `onOpenChange` (controlled). Native props like
+ * `swipeDirection` and snap points pass straight through. Maps 1:1 to Base UI's `Drawer.Root`.
+ */
+export function Drawer(props: DrawerProps) {
+  return <BaseDrawer.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/drawer/index.tsx b/packages/propel/src/ui/drawer/index.tsx
new file mode 100644
index 0000000..ac5b07f
--- /dev/null
+++ b/packages/propel/src/ui/drawer/index.tsx
@@ -0,0 +1,17 @@
+export { Drawer, type DrawerProps } from "./drawer";
+export { DrawerProvider, type DrawerProviderProps } from "./drawer-provider";
+export {
+  DrawerIndentBackground,
+  type DrawerIndentBackgroundProps,
+} from "./drawer-indent-background";
+export { DrawerIndent, type DrawerIndentProps } from "./drawer-indent";
+export { DrawerTrigger, type DrawerTriggerProps } from "./drawer-trigger";
+export { DrawerSwipeArea, type DrawerSwipeAreaProps } from "./drawer-swipe-area";
+export { DrawerPortal, type DrawerPortalProps } from "./drawer-portal";
+export { DrawerBackdrop, type DrawerBackdropProps } from "./drawer-backdrop";
+export { DrawerViewport, type DrawerViewportProps } from "./drawer-viewport";
+export { DrawerPopup, type DrawerPopupProps } from "./drawer-popup";
+export { DrawerContent, type DrawerContentProps } from "./drawer-content";
+export { DrawerTitle, type DrawerTitleProps } from "./drawer-title";
+export { DrawerDescription, type DrawerDescriptionProps } from "./drawer-description";
+export { DrawerClose, type DrawerCloseProps } from "./drawer-close";
diff --git a/packages/propel/src/ui/drawer/variants.ts b/packages/propel/src/ui/drawer/variants.ts
new file mode 100644
index 0000000..db17bbe
--- /dev/null
+++ b/packages/propel/src/ui/drawer/variants.ts
@@ -0,0 +1,43 @@
+import { cva, cx } from "class-variance-authority";
+
+// Drawer wraps Base UI's drawer parts 1:1. Base UI drives open/closed and swipe
+// state as data attributes, so there are no styling axes (variant/tone/magnitude)
+// to expose. The cva pairings below hold the static chrome for the parts that
+// need it, so every part is styled in one place with no `className` at the
+// boundary. Structural parts (Provider, Indent, IndentBackground, Root, Trigger,
+// SwipeArea, Portal) carry no styling.
+
+export const drawerBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
+
+export const drawerViewportVariants = cva("fixed inset-0 z-50");
+
+export const drawerPopupVariants = cva(
+  cx(
+    // Defaults to a right-edge drawer: pinned to the inline-end, full height,
+    // sliding in/out via the starting/ending translate. Edge handling can be
+    // varied per-app, but the primitive ships a consistent right drawer.
+    "fixed inset-y-0 inset-e-0 z-50 flex h-full w-80 max-w-[90vw] flex-col",
+    "border-s-sm border-subtle bg-layer-1 shadow-overlay-100 outline-none",
+    "transition-transform duration-200",
+    "data-ending-style:translate-x-full data-starting-style:translate-x-full",
+  ),
+);
+
+export const drawerContentVariants = cva("flex min-h-0 flex-1 flex-col gap-2 p-4");
+
+export const drawerTitleVariants = cva("text-16 font-semibold text-primary");
+
+export const drawerDescriptionVariants = cva("text-14 text-secondary");
+
+export const drawerCloseVariants = cva(
+  cx(
+    "inline-flex items-center justify-center rounded-md text-icon-secondary outline-none",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
diff --git a/packages/propel/src/ui/field/checkbox-field-control.tsx b/packages/propel/src/ui/field/checkbox-field-control.tsx
new file mode 100644
index 0000000..1a58861
--- /dev/null
+++ b/packages/propel/src/ui/field/checkbox-field-control.tsx
@@ -0,0 +1,14 @@
+import { Checkbox, CheckboxGlyph, CheckboxIndicator, type CheckboxProps } from "../checkbox/index";
+
+export type CheckboxFieldControlProps = Omit<CheckboxProps, "children">;
+
+/** The bare checkbox box (Root + indicator + glyph) used inside a field row. */
+export function CheckboxFieldControl(props: CheckboxFieldControlProps) {
+  return (
+    <Checkbox {...props}>
+      <CheckboxIndicator>
+        <CheckboxGlyph indeterminate={props.indeterminate} />
+      </CheckboxIndicator>
+    </Checkbox>
+  );
+}
diff --git a/packages/propel/src/ui/field/field-description.tsx b/packages/propel/src/ui/field/field-description.tsx
new file mode 100644
index 0000000..b4b44bb
--- /dev/null
+++ b/packages/propel/src/ui/field/field-description.tsx
@@ -0,0 +1,17 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import { fieldDescriptionVariants, type InputMagnitude } from "./variants";
+
+export type FieldDescriptionProps = Omit<
+  React.ComponentProps<typeof BaseField.Description>,
+  "className" | "style"
+> & {
+  /** Text size matched to the field control. */
+  magnitude: InputMagnitude;
+};
+
+/** Supporting / helper text for a custom field. */
+export function FieldDescription({ magnitude, ...props }: FieldDescriptionProps) {
+  return <BaseField.Description className={fieldDescriptionVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/field-error.tsx b/packages/propel/src/ui/field/field-error.tsx
new file mode 100644
index 0000000..42038c1
--- /dev/null
+++ b/packages/propel/src/ui/field/field-error.tsx
@@ -0,0 +1,17 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import { fieldErrorVariants, type InputMagnitude } from "./variants";
+
+export type FieldErrorProps = Omit<
+  React.ComponentProps<typeof BaseField.Error>,
+  "className" | "style"
+> & {
+  /** Text size matched to the field control. */
+  magnitude: InputMagnitude;
+};
+
+/** Error text for a custom field. */
+export function FieldError({ magnitude, ...props }: FieldErrorProps) {
+  return <BaseField.Error className={fieldErrorVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/field-helper-text.tsx b/packages/propel/src/ui/field/field-helper-text.tsx
new file mode 100644
index 0000000..fc12b67
--- /dev/null
+++ b/packages/propel/src/ui/field/field-helper-text.tsx
@@ -0,0 +1,26 @@
+import type * as React from "react";
+
+import { FieldDescription } from "./field-description";
+import { FieldError } from "./field-error";
+import type { InputMagnitude } from "./variants";
+
+export function FieldHelperText({
+  magnitude,
+  hint,
+  error,
+}: {
+  magnitude: InputMagnitude;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+}) {
+  return (
+    <>
+      <FieldError magnitude={magnitude} match={error != null}>
+        {error}
+      </FieldError>
+      {error == null && hint != null ? (
+        <FieldDescription magnitude={magnitude}>{hint}</FieldDescription>
+      ) : null}
+    </>
+  );
+}
diff --git a/packages/propel/src/ui/field/field-item-content.tsx b/packages/propel/src/ui/field/field-item-content.tsx
new file mode 100644
index 0000000..731d2ff
--- /dev/null
+++ b/packages/propel/src/ui/field/field-item-content.tsx
@@ -0,0 +1,24 @@
+import type * as React from "react";
+
+import { FieldDescription } from "./field-description";
+import { FieldLabel } from "./field-label";
+import type { InputMagnitude } from "./variants";
+
+export function FieldItemContent({
+  children,
+  description,
+  magnitude,
+}: {
+  children: React.ReactNode;
+  description?: React.ReactNode;
+  magnitude: InputMagnitude;
+}) {
+  return (
+    <div className="flex min-w-0 flex-col gap-1">
+      <FieldLabel magnitude={magnitude}>{children}</FieldLabel>
+      {description != null ? (
+        <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/propel/src/ui/field/field-item.tsx b/packages/propel/src/ui/field/field-item.tsx
new file mode 100644
index 0000000..dca05de
--- /dev/null
+++ b/packages/propel/src/ui/field/field-item.tsx
@@ -0,0 +1,14 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import { fieldItemVariants } from "./variants";
+
+export type FieldItemProps = Omit<
+  React.ComponentProps<typeof BaseField.Item>,
+  "className" | "style"
+>;
+
+/** Groups one checkbox or radio option with its label and optional description. */
+export function FieldItem(props: FieldItemProps) {
+  return <BaseField.Item className={fieldItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/field-label-group.tsx b/packages/propel/src/ui/field/field-label-group.tsx
new file mode 100644
index 0000000..de7f17b
--- /dev/null
+++ b/packages/propel/src/ui/field/field-label-group.tsx
@@ -0,0 +1,38 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { FieldDescription } from "./field-description";
+import { FieldLabel } from "./field-label";
+import { type InputMagnitude, labelGroupVariants } from "./variants";
+
+export function FieldLabelGroup({
+  magnitude,
+  required,
+  label,
+  description,
+  orientation,
+}: {
+  magnitude: InputMagnitude;
+  required?: boolean;
+  label?: React.ReactNode;
+  description?: React.ReactNode;
+  orientation: NonNullable<VariantProps<typeof labelGroupVariants>["orientation"]>;
+}) {
+  if (label == null && description == null) {
+    return null;
+  }
+
+  const inset = orientation === "horizontal" && description == null;
+  return (
+    <div className={labelGroupVariants({ orientation })}>
+      {label != null ? (
+        <FieldLabel magnitude={magnitude} required={required} inset={inset}>
+          {label}
+        </FieldLabel>
+      ) : null}
+      {description != null ? (
+        <FieldDescription magnitude={magnitude}>{description}</FieldDescription>
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/propel/src/ui/field/field-label.tsx b/packages/propel/src/ui/field/field-label.tsx
new file mode 100644
index 0000000..d36d52f
--- /dev/null
+++ b/packages/propel/src/ui/field/field-label.tsx
@@ -0,0 +1,25 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import { fieldLabelVariants, type InputMagnitude } from "./variants";
+
+export type FieldLabelProps = {
+  children: React.ReactNode;
+  magnitude: InputMagnitude;
+  required?: boolean;
+  inset?: boolean;
+};
+
+/** The label row: the label text and the required `*` asterisk in danger. */
+export function FieldLabel({ children, magnitude, required, inset }: FieldLabelProps) {
+  return (
+    <BaseField.Label className={fieldLabelVariants({ magnitude, inset })}>
+      {children}
+      {required ? (
+        <span aria-hidden className="text-danger-primary">
+          *
+        </span>
+      ) : null}
+    </BaseField.Label>
+  );
+}
diff --git a/packages/propel/src/ui/field/field-option-magnitude-context.ts b/packages/propel/src/ui/field/field-option-magnitude-context.ts
new file mode 100644
index 0000000..42db5a2
--- /dev/null
+++ b/packages/propel/src/ui/field/field-option-magnitude-context.ts
@@ -0,0 +1,5 @@
+import * as React from "react";
+
+import type { InputMagnitude } from "./variants";
+
+export const FieldOptionMagnitudeContext = React.createContext<InputMagnitude | null>(null);
diff --git a/packages/propel/src/ui/field/field-option-magnitude-provider.tsx b/packages/propel/src/ui/field/field-option-magnitude-provider.tsx
new file mode 100644
index 0000000..2dea91d
--- /dev/null
+++ b/packages/propel/src/ui/field/field-option-magnitude-provider.tsx
@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { FieldOptionMagnitudeContext } from "./field-option-magnitude-context";
+import type { InputMagnitude } from "./variants";
+
+export function FieldOptionMagnitudeProvider({
+  children,
+  magnitude,
+}: {
+  children: React.ReactNode;
+  magnitude: InputMagnitude;
+}) {
+  return (
+    <FieldOptionMagnitudeContext.Provider value={magnitude}>
+      {children}
+    </FieldOptionMagnitudeContext.Provider>
+  );
+}
diff --git a/packages/propel/src/ui/field/field.stories.tsx b/packages/propel/src/ui/field/field.stories.tsx
new file mode 100644
index 0000000..df3f8b8
--- /dev/null
+++ b/packages/propel/src/ui/field/field.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Field, FieldDescription, FieldError, FieldLabel, InputFieldControl } from "./index";
+
+// UI-tier story: composes the ATOMIC field parts. `Field` (Base UI `Field.Root`) is the
+// labeling/validation shell; `FieldLabel` names the control, `InputFieldControl` is the
+// field-styled text input, `FieldDescription` is helper text, and `FieldError` announces the
+// validation message (shown when `match` is true / the field is `invalid`). The ready-made
+// fields (InputField, choice/group/popup fields) live in `components/field`.
+const meta = {
+  title: "UI/Field",
+  component: Field,
+  subcomponents: { FieldLabel, InputFieldControl, FieldDescription, FieldError },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A labeled input with helper text, assembled from the atomic parts. */
+export const Default: Story = {
+  render: () => (
+    <Field name="displayName">
+      <FieldLabel magnitude="md" required>
+        Display name
+      </FieldLabel>
+      <InputFieldControl magnitude="md" required placeholder="Ada Lovelace" />
+      <FieldDescription magnitude="md">Shown anywhere your profile is visible.</FieldDescription>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("textbox", { name: "Display name" });
+    await expect(input).toBeRequired();
+    await expect(input).toHaveAccessibleDescription("Shown anywhere your profile is visible.");
+  },
+};
+
+/** An invalid field: the control exposes `aria-invalid` and announces the `FieldError` text. */
+export const Invalid: Story = {
+  render: () => (
+    <Field name="workspaceSlug" invalid>
+      <FieldLabel magnitude="md">Workspace slug</FieldLabel>
+      <InputFieldControl magnitude="md" defaultValue="Already taken" />
+      <FieldError magnitude="md" match={true}>
+        Choose a different workspace slug.
+      </FieldError>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("textbox", { name: "Workspace slug" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(input).toHaveAccessibleDescription("Choose a different workspace slug.");
+  },
+};
diff --git a/packages/propel/src/ui/field/field.tsx b/packages/propel/src/ui/field/field.tsx
new file mode 100644
index 0000000..b2dcf2d
--- /dev/null
+++ b/packages/propel/src/ui/field/field.tsx
@@ -0,0 +1,12 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+export type FieldProps = Omit<React.ComponentProps<typeof BaseField.Root>, "className" | "style">;
+
+/**
+ * The shared field chrome for custom controls. Compose it with `FieldLabel`, `InputFieldControl` or
+ * `TextAreaFieldControl`, `FieldDescription`, and `FieldError`.
+ */
+export function Field(props: FieldProps) {
+  return <BaseField.Root className="flex flex-col gap-1.5" {...props} />;
+}
diff --git a/packages/propel/src/ui/field/index.tsx b/packages/propel/src/ui/field/index.tsx
new file mode 100644
index 0000000..1e45016
--- /dev/null
+++ b/packages/propel/src/ui/field/index.tsx
@@ -0,0 +1,18 @@
+export { CheckboxFieldControl, type CheckboxFieldControlProps } from "./checkbox-field-control";
+export { Field, type FieldProps } from "./field";
+export { FieldDescription, type FieldDescriptionProps } from "./field-description";
+export { FieldError, type FieldErrorProps } from "./field-error";
+export { FieldItem, type FieldItemProps } from "./field-item";
+export { FieldLabel, type FieldLabelProps } from "./field-label";
+export { InputFieldBox, type InputFieldBoxProps } from "./input-field-box";
+export { InputFieldContent, type InputFieldContentProps } from "./input-field-content";
+export { InputFieldControl, type InputFieldControlProps } from "./input-field-control";
+export { InputFieldIconSlot, type InputFieldIconSlotProps } from "./input-field-icon-slot";
+export { InputFieldRoot, type InputFieldRootProps } from "./input-field-root";
+export { TextAreaFieldBox, type TextAreaFieldBoxProps } from "./text-area-field-box";
+export {
+  TextAreaFieldControl,
+  type TextAreaFieldControlMagnitude,
+  type TextAreaFieldControlProps,
+  type TextAreaFieldControlSurface,
+} from "./text-area-field-control";
diff --git a/packages/propel/src/ui/field/input-field-box.tsx b/packages/propel/src/ui/field/input-field-box.tsx
new file mode 100644
index 0000000..3040e64
--- /dev/null
+++ b/packages/propel/src/ui/field/input-field-box.tsx
@@ -0,0 +1,15 @@
+import type * as React from "react";
+
+import { type InputMagnitude, type InputTone, inputFieldBoxVariants } from "./variants";
+
+export type InputFieldBoxProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
+  /** Magnitude scale. `md` | `lg` | `xl`. */
+  magnitude: InputMagnitude;
+  /** Resting treatment. `neutral` | `danger`. */
+  tone: InputTone;
+};
+
+/** The bordered box that frames the `InputField` control and its inline slots. */
+export function InputFieldBox({ magnitude, tone, ...props }: InputFieldBoxProps) {
+  return <div className={inputFieldBoxVariants({ magnitude, tone })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/input-field-content.tsx b/packages/propel/src/ui/field/input-field-content.tsx
new file mode 100644
index 0000000..e3447f9
--- /dev/null
+++ b/packages/propel/src/ui/field/input-field-content.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { inputFieldContentVariants } from "./variants";
+
+export type InputFieldContentProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
+  /** Label placement: `vertical` (label above) | `horizontal` (label beside). */
+  orientation: "vertical" | "horizontal";
+};
+
+/** The control + helper-text column of `InputField`. */
+export function InputFieldContent({ orientation, ...props }: InputFieldContentProps) {
+  return <div className={inputFieldContentVariants({ orientation })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/input-field-control.tsx b/packages/propel/src/ui/field/input-field-control.tsx
new file mode 100644
index 0000000..8a0098d
--- /dev/null
+++ b/packages/propel/src/ui/field/input-field-control.tsx
@@ -0,0 +1,2 @@
+export { Input as InputFieldControl } from "../input/input";
+export type { InputProps as InputFieldControlProps } from "../input/input";
diff --git a/packages/propel/src/ui/field/input-field-icon-slot.tsx b/packages/propel/src/ui/field/input-field-icon-slot.tsx
new file mode 100644
index 0000000..daa453f
--- /dev/null
+++ b/packages/propel/src/ui/field/input-field-icon-slot.tsx
@@ -0,0 +1,10 @@
+import type * as React from "react";
+
+import { iconSlotClass } from "./variants";
+
+export type InputFieldIconSlotProps = Omit<React.ComponentProps<"span">, "className" | "style">;
+
+/** A 16px decorative slot rendered at the inline start/end of the `InputField` control. */
+export function InputFieldIconSlot(props: InputFieldIconSlotProps) {
+  return <span aria-hidden className={iconSlotClass} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/input-field-root.tsx b/packages/propel/src/ui/field/input-field-root.tsx
new file mode 100644
index 0000000..1a659fd
--- /dev/null
+++ b/packages/propel/src/ui/field/input-field-root.tsx
@@ -0,0 +1,17 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import type * as React from "react";
+
+import { inputFieldRootVariants } from "./variants";
+
+export type InputFieldRootProps = Omit<
+  React.ComponentProps<typeof BaseField.Root>,
+  "className" | "style"
+> & {
+  /** Label placement: `vertical` (label above) | `horizontal` (label beside). */
+  orientation: "vertical" | "horizontal";
+};
+
+/** The Base UI `Field.Root` chrome for `InputField`, with orientation-aware layout. */
+export function InputFieldRoot({ orientation, ...props }: InputFieldRootProps) {
+  return <BaseField.Root className={inputFieldRootVariants({ orientation })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/text-area-field-box.tsx b/packages/propel/src/ui/field/text-area-field-box.tsx
new file mode 100644
index 0000000..becd999
--- /dev/null
+++ b/packages/propel/src/ui/field/text-area-field-box.tsx
@@ -0,0 +1,13 @@
+import type * as React from "react";
+
+import { type InputTone, textAreaFieldBoxVariants } from "./variants";
+
+export type TextAreaFieldBoxProps = Omit<React.ComponentProps<"div">, "className" | "style"> & {
+  /** Resting treatment. `neutral` | `danger`. */
+  tone: InputTone;
+};
+
+/** The bordered box that frames the `TextAreaField` control. */
+export function TextAreaFieldBox({ tone, ...props }: TextAreaFieldBoxProps) {
+  return <div className={textAreaFieldBoxVariants({ tone })} {...props} />;
+}
diff --git a/packages/propel/src/ui/field/text-area-field-control.tsx b/packages/propel/src/ui/field/text-area-field-control.tsx
new file mode 100644
index 0000000..9eb6353
--- /dev/null
+++ b/packages/propel/src/ui/field/text-area-field-control.tsx
@@ -0,0 +1,6 @@
+export { TextArea as TextAreaFieldControl } from "../text-area/text-area";
+export type {
+  TextAreaMagnitude as TextAreaFieldControlMagnitude,
+  TextAreaProps as TextAreaFieldControlProps,
+  TextAreaSurface as TextAreaFieldControlSurface,
+} from "../text-area/text-area";
diff --git a/packages/propel/src/ui/field/use-field-option-magnitude.ts b/packages/propel/src/ui/field/use-field-option-magnitude.ts
new file mode 100644
index 0000000..d151b0a
--- /dev/null
+++ b/packages/propel/src/ui/field/use-field-option-magnitude.ts
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { FieldOptionMagnitudeContext } from "./field-option-magnitude-context";
+import type { InputMagnitude } from "./variants";
+
+export function useFieldOptionMagnitude(magnitude?: InputMagnitude) {
+  const contextMagnitude = React.useContext(FieldOptionMagnitudeContext);
+  const resolvedMagnitude = magnitude ?? contextMagnitude;
+
+  if (resolvedMagnitude == null) {
+    throw new Error("Field option components require a magnitude or a parent field composition.");
+  }
+
+  return resolvedMagnitude;
+}
diff --git a/packages/propel/src/ui/field/variants.ts b/packages/propel/src/ui/field/variants.ts
new file mode 100644
index 0000000..7be65f8
--- /dev/null
+++ b/packages/propel/src/ui/field/variants.ts
@@ -0,0 +1,144 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+export type { InputMagnitude } from "../input/variants";
+
+export const fieldLabelVariants = cva(
+  cx("inline-flex items-center gap-0.5", "font-medium text-primary"),
+  {
+    variants: {
+      magnitude: {
+        md: "text-13",
+        lg: "text-14",
+        xl: "text-14",
+      },
+      inset: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      { magnitude: "md", inset: true, class: "pt-[7px]" },
+      { magnitude: "lg", inset: true, class: "pt-[9px]" },
+      { magnitude: "xl", inset: true, class: "pt-[13px]" },
+    ],
+  },
+);
+
+type FieldLabelVariantProps = VariantProps<typeof fieldLabelVariants>;
+
+export type FieldMagnitude = NonNullable<FieldLabelVariantProps["magnitude"]>;
+
+const fieldHelperTextVariants = cva("", {
+  variants: {
+    magnitude: {
+      md: "text-12",
+      lg: "text-13",
+      xl: "text-13",
+    },
+  },
+});
+
+type FieldHelperTextVariantProps = VariantProps<typeof fieldHelperTextVariants>;
+
+type FieldHelperTextVariantsProps = {
+  magnitude: NonNullable<FieldHelperTextVariantProps["magnitude"]>;
+};
+
+export const fieldDescriptionVariants = ({ magnitude }: FieldHelperTextVariantsProps) =>
+  cx("text-tertiary", fieldHelperTextVariants({ magnitude }));
+
+export const fieldErrorVariants = ({ magnitude }: FieldHelperTextVariantsProps) =>
+  cx("text-danger-primary", fieldHelperTextVariants({ magnitude }));
+
+export const fieldBoxVariants = cva(
+  cx(
+    "flex w-full items-center gap-1.5 bg-layer-2 transition-[color,background-color,border-color,box-shadow]",
+    "border-sm",
+    "has-[:disabled]:cursor-not-allowed has-[:disabled]:border-subtle has-[:disabled]:bg-layer-2 has-[:disabled]:ring-0 has-[:disabled]:hover:border-subtle",
+  ),
+  {
+    variants: {
+      tone: {
+        neutral: cx(
+          "border-subtle hover:border-subtle-1 hover:bg-layer-2-hover",
+          "focus-within:border-accent-strong focus-within:bg-layer-2 focus-within:ring-2 focus-within:ring-accent-strong/20",
+          "focus-within:hover:border-accent-strong focus-within:hover:bg-layer-2",
+        ),
+        danger: "border-danger-strong",
+      },
+    },
+  },
+);
+
+type FieldBoxVariantProps = VariantProps<typeof fieldBoxVariants>;
+
+export type InputTone = NonNullable<FieldBoxVariantProps["tone"]>;
+
+export const inputFieldRootVariants = cva("flex gap-2", {
+  variants: {
+    orientation: {
+      vertical: "flex-col items-start",
+      horizontal: "flex-row items-start",
+    },
+  },
+});
+
+export const inputFieldContentVariants = cva("flex flex-col", {
+  variants: {
+    orientation: {
+      vertical: "w-full gap-1.5",
+      horizontal: "min-w-0 flex-1 gap-2",
+    },
+  },
+});
+
+const inputFieldBoxFrameVariants = cva("rounded-md px-3", {
+  variants: {
+    magnitude: {
+      md: "py-1.5",
+      lg: "py-2",
+      xl: "py-3",
+    },
+  },
+});
+
+type InputFieldBoxFrameVariantProps = VariantProps<typeof inputFieldBoxFrameVariants>;
+
+type InputFieldBoxVariantsProps = {
+  magnitude: NonNullable<InputFieldBoxFrameVariantProps["magnitude"]>;
+  tone: InputTone;
+};
+
+export const inputFieldBoxVariants = ({ magnitude, tone }: InputFieldBoxVariantsProps) =>
+  cx(fieldBoxVariants({ tone }), inputFieldBoxFrameVariants({ magnitude }));
+
+const textAreaFieldBoxFrameVariants = cva("items-stretch rounded-lg py-2");
+
+type TextAreaFieldBoxVariantsProps = {
+  tone: InputTone;
+};
+
+export const textAreaFieldBoxVariants = ({ tone }: TextAreaFieldBoxVariantsProps) =>
+  cx(fieldBoxVariants({ tone }), textAreaFieldBoxFrameVariants());
+
+export const iconSlotClass = cx(
+  "flex shrink-0 items-center justify-center text-icon-secondary",
+  "[&_svg]:size-4",
+);
+
+export const fieldItemVariants = cva(
+  cx(
+    "flex min-w-0 items-start gap-2 rounded-sm px-2 py-1 text-primary transition-colors",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-60",
+    "not-data-disabled:hover:bg-layer-transparent-hover",
+  ),
+);
+
+export const labelGroupVariants = cva("flex flex-col gap-1", {
+  variants: {
+    orientation: {
+      vertical: "w-full",
+      horizontal: "min-w-0 flex-1",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/fieldset/fieldset-legend.tsx b/packages/propel/src/ui/fieldset/fieldset-legend.tsx
new file mode 100644
index 0000000..2dadf2b
--- /dev/null
+++ b/packages/propel/src/ui/fieldset/fieldset-legend.tsx
@@ -0,0 +1,20 @@
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import type { VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { fieldsetLegendVariants } from "./variants";
+
+type FieldsetLegendVariantProps = VariantProps<typeof fieldsetLegendVariants>;
+
+export type FieldsetLegendProps = Omit<
+  React.ComponentProps<typeof BaseFieldset.Legend>,
+  "className" | "style"
+> & {
+  /** Legend text size. */
+  magnitude: NonNullable<FieldsetLegendVariantProps["magnitude"]>;
+};
+
+/** Accessible label associated with a `Fieldset`. */
+export function FieldsetLegend({ magnitude, ...props }: FieldsetLegendProps) {
+  return <BaseFieldset.Legend className={fieldsetLegendVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/fieldset/fieldset.stories.tsx b/packages/propel/src/ui/fieldset/fieldset.stories.tsx
new file mode 100644
index 0000000..61179fe
--- /dev/null
+++ b/packages/propel/src/ui/fieldset/fieldset.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Field, FieldLabel, InputFieldControl } from "../field/index";
+import { Fieldset, FieldsetLegend } from "./index";
+
+// UI-tier story: composes the atomic `Fieldset` + `FieldsetLegend` with raw `Field`
+// primitives. The ready-made field conveniences (InputField, RadioGroupFieldOption…)
+// live in the components tier — see the `Components/Fieldset` story.
+const meta = {
+  title: "UI/Fieldset",
+  component: Fieldset,
+  subcomponents: { FieldsetLegend },
+} satisfies Meta<typeof Fieldset>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function TextField({ name, label }: { name: string; label: string }) {
+  return (
+    <Field name={name}>
+      <FieldLabel magnitude="md">{label}</FieldLabel>
+      <InputFieldControl magnitude="md" placeholder={label} />
+    </Field>
+  );
+}
+
+/** Fieldset groups related fields under one accessible legend. */
+export const Default: Story = {
+  render: () => (
+    <Fieldset>
+      <FieldsetLegend magnitude="md">Billing details</FieldsetLegend>
+      <div className="flex w-80 flex-col gap-4">
+        <TextField name="company" label="Company" />
+        <TextField name="taxId" label="Tax ID" />
+      </div>
+    </Fieldset>
+  ),
+};
+
+export const GroupSemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Fieldset>
+      <FieldsetLegend magnitude="md">Shipping address</FieldsetLegend>
+      <div className="w-80">
+        <TextField name="city" label="City" />
+      </div>
+    </Fieldset>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("group", { name: "Shipping address" })).toBeInTheDocument();
+    await expect(canvas.getByRole("textbox", { name: "City" })).toHaveAttribute("name", "city");
+  },
+};
diff --git a/packages/propel/src/ui/fieldset/fieldset.tsx b/packages/propel/src/ui/fieldset/fieldset.tsx
new file mode 100644
index 0000000..8f29465
--- /dev/null
+++ b/packages/propel/src/ui/fieldset/fieldset.tsx
@@ -0,0 +1,14 @@
+import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
+import type * as React from "react";
+
+import { fieldsetVariants } from "./variants";
+
+export type FieldsetProps = Omit<
+  React.ComponentProps<typeof BaseFieldset.Root>,
+  "className" | "style"
+>;
+
+/** Groups a legend with related controls. */
+export function Fieldset(props: FieldsetProps) {
+  return <BaseFieldset.Root className={fieldsetVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/fieldset/index.tsx b/packages/propel/src/ui/fieldset/index.tsx
new file mode 100644
index 0000000..a071092
--- /dev/null
+++ b/packages/propel/src/ui/fieldset/index.tsx
@@ -0,0 +1,2 @@
+export { Fieldset, type FieldsetProps } from "./fieldset";
+export { FieldsetLegend, type FieldsetLegendProps } from "./fieldset-legend";
diff --git a/packages/propel/src/ui/fieldset/variants.ts b/packages/propel/src/ui/fieldset/variants.ts
new file mode 100644
index 0000000..75d0caf
--- /dev/null
+++ b/packages/propel/src/ui/fieldset/variants.ts
@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+
+export const fieldsetVariants = cva("flex min-w-0 flex-col gap-3");
+
+export const fieldsetLegendVariants = cva("font-medium text-primary", {
+  variants: {
+    magnitude: {
+      md: "text-13",
+      lg: "text-14",
+      xl: "text-14",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/form/form.stories.tsx b/packages/propel/src/ui/form/form.stories.tsx
new file mode 100644
index 0000000..b801b88
--- /dev/null
+++ b/packages/propel/src/ui/form/form.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent } from "storybook/test";
+
+import { Button } from "../button/index";
+import { Field, FieldError, FieldLabel, InputFieldControl } from "../field/index";
+import { Form } from "./index";
+
+// UI-tier story: composes the atomic `Form` with raw `Field` primitives (label +
+// control + error). The ready-made labeled-field conveniences (InputField,
+// SelectField, …) live in the components tier — see the `Components/Form` story.
+const meta = {
+  title: "UI/Form",
+  component: Form,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A form assembled from `Form` + `Field`/`FieldLabel`/`InputFieldControl`/`FieldError`. */
+export const Default: Story = {
+  render: (args) => (
+    <Form {...args}>
+      <div className="flex w-80 flex-col gap-4">
+        <Field name="email">
+          <FieldLabel magnitude="md">Email</FieldLabel>
+          <InputFieldControl magnitude="md" type="email" required placeholder="you@example.com" />
+          <FieldError magnitude="md" />
+        </Field>
+        <Button type="submit" variant="primary" tone="neutral" magnitude="md">
+          Submit
+        </Button>
+      </div>
+    </Form>
+  ),
+};
+
+/** Native constraint validation: submitting an empty required field shows the error. */
+export const Validation: Story = {
+  args: { onSubmit: fn((e) => e.preventDefault()) },
+  render: (args) => (
+    <Form {...args}>
+      <div className="flex w-80 flex-col gap-4">
+        <Field name="email">
+          <FieldLabel magnitude="md">Email</FieldLabel>
+          <InputFieldControl magnitude="md" type="email" required placeholder="you@example.com" />
+          <FieldError magnitude="md" />
+        </Field>
+        <Button type="submit" variant="primary" tone="neutral" magnitude="md">
+          Submit
+        </Button>
+      </div>
+    </Form>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Submit" }));
+    await expect(canvas.getByRole("textbox", { name: "Email" })).toBeInvalid();
+  },
+};
diff --git a/packages/propel/src/ui/form/form.tsx b/packages/propel/src/ui/form/form.tsx
new file mode 100644
index 0000000..3949001
--- /dev/null
+++ b/packages/propel/src/ui/form/form.tsx
@@ -0,0 +1,16 @@
+import { Form as BaseForm } from "@base-ui/react/form";
+import type { FormProps as BaseFormProps } from "@base-ui/react/form";
+
+import { formVariants } from "./variants";
+
+export type FormProps<FormValues extends Record<string, unknown> = Record<string, unknown>> = Omit<
+  BaseFormProps<FormValues>,
+  "className" | "style"
+>;
+
+/** Native form element with Base UI consolidated error handling. */
+export function Form<FormValues extends Record<string, unknown> = Record<string, unknown>>(
+  props: FormProps<FormValues>,
+) {
+  return <BaseForm className={formVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/form/index.tsx b/packages/propel/src/ui/form/index.tsx
new file mode 100644
index 0000000..9111f76
--- /dev/null
+++ b/packages/propel/src/ui/form/index.tsx
@@ -0,0 +1 @@
+export { Form, type FormProps } from "./form";
diff --git a/packages/propel/src/ui/form/variants.ts b/packages/propel/src/ui/form/variants.ts
new file mode 100644
index 0000000..204ff62
--- /dev/null
+++ b/packages/propel/src/ui/form/variants.ts
@@ -0,0 +1,3 @@
+import { cva } from "class-variance-authority";
+
+export const formVariants = cva("flex flex-col gap-4");
diff --git a/packages/propel/src/ui/icon-button/icon-button.stories.tsx b/packages/propel/src/ui/icon-button/icon-button.stories.tsx
new file mode 100644
index 0000000..0947985
--- /dev/null
+++ b/packages/propel/src/ui/icon-button/icon-button.stories.tsx
@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Plus } from "lucide-react";
+import { expect, fn } from "storybook/test";
+
+import { iconControl } from "../../storybook/icon-control";
+import { IconButton, type IconButtonMagnitude, type IconButtonVariant } from "./index";
+
+const VARIANTS: IconButtonVariant[] = ["primary", "secondary", "tertiary", "ghost"];
+const MAGNITUDES: IconButtonMagnitude[] = ["sm", "md", "lg", "xl"];
+
+const meta = {
+  title: "UI/IconButton",
+  component: IconButton,
+  // Icon picker control for the single glyph (the button's `children`).
+  argTypes: { children: iconControl },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1720-3036",
+    },
+  },
+  args: {
+    variant: "primary",
+    tone: "neutral",
+    magnitude: "md",
+    children: <Plus />,
+    "aria-label": "Add item",
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Every Figma "Type" side by side. The neutral fills are `primary`/`secondary`/ `tertiary`/`ghost`;
+ * the two Error types are the `danger` tone of `primary` (Error fill) and `secondary` (Error
+ * outline) — see {@link Tones}.
+ */
+export const Variants: Story = {
+  argTypes: { variant: { control: false }, "aria-label": { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {VARIANTS.map((variant) => (
+        <IconButton key={variant} {...args} variant={variant} aria-label={`${variant} action`} />
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Tone selects the palette: `neutral` (default) or `danger` (Figma "Error"). Danger shows as a
+ * solid fill (Error fill) and a bordered outline (Error outline).
+ */
+export const Tones: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <IconButton {...args} tone="neutral" variant="primary" aria-label="Neutral" />
+      <IconButton {...args} tone="danger" variant="primary" aria-label="Danger fill" />
+      <IconButton {...args} tone="danger" variant="secondary" aria-label="Danger outline" />
+    </div>
+  ),
+};
+
+/** All sizes (Figma S/Base/L/XL map to sm/md/lg/xl). */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false }, "aria-label": { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <IconButton
+          key={magnitude}
+          {...args}
+          magnitude={magnitude}
+          aria-label={`${magnitude} add`}
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** The loading state shows a spinner, sets `aria-busy`, and blocks interaction. */
+export const Loading: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <IconButton {...args} variant="primary" aria-label="Saving" loading />
+      <IconButton {...args} variant="secondary" aria-label="Loading" loading />
+      <IconButton {...args} variant="tertiary" aria-label="Refreshing" loading />
+    </div>
+  ),
+};
+
+/** A disabled icon button does not fire `onClick`. */
+export const Disabled: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {VARIANTS.map((variant) => (
+        <IconButton
+          key={variant}
+          {...args}
+          variant={variant}
+          aria-label={`${variant} disabled`}
+          disabled
+        />
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * An IconButton exposes its `aria-label` as the accessible name. Tagged
+ * `!dev`/`!autodocs`/`!manifest` so it's hidden from the sidebar, docs, and AI manifest — it's a
+ * behavior test, not an example — but still runs under `test`.
+ */
+export const HasAccessibleName: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <IconButton variant="primary" tone="neutral" magnitude="md" aria-label="Add item">
+      <Plus />
+    </IconButton>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("button", { name: "Add item" })).toBeInTheDocument();
+  },
+};
+
+/**
+ * Tab moves focus onto the icon button (queryable by its `aria-label`), then **Enter** activates it
+ * (fires `onClick`).
+ */
+export const EnterActivates: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn() },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Add item" });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    await expect(args.onClick).toHaveBeenCalledOnce();
+  },
+};
+
+/** With the icon button focused, **Space** activates it (fires `onClick`). */
+export const SpaceActivates: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn() },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Add item" });
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.keyboard("[Space]");
+    await expect(args.onClick).toHaveBeenCalledOnce();
+  },
+};
+
+/**
+ * A `disabled` icon button is removed from the tab order: Tab does not land on it and keyboard
+ * activation (Enter/Space) never fires `onClick`.
+ */
+export const DisabledNotKeyboardActivatable: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn(), disabled: true },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Add item" });
+    await expect(button).toBeDisabled();
+    await userEvent.tab();
+    await expect(button).not.toHaveFocus();
+    button.focus();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("[Space]");
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
+
+/** A `loading` icon button remains focusable with `aria-busy`, but Base UI suppresses activation. */
+export const LoadingBlocksInteraction: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { onClick: fn(), loading: true },
+  play: async ({ args, canvas, userEvent }) => {
+    const button = canvas.getByRole("button", { name: "Add item" });
+    await expect(button).toHaveAttribute("aria-busy", "true");
+    await expect(button).not.toBeDisabled();
+
+    await userEvent.tab();
+    await expect(button).toHaveFocus();
+    await userEvent.keyboard("{Enter}");
+    await userEvent.keyboard("[Space]");
+    await userEvent.click(button);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
diff --git a/packages/propel/src/ui/icon-button/icon-button.tsx b/packages/propel/src/ui/icon-button/icon-button.tsx
new file mode 100644
index 0000000..223858e
--- /dev/null
+++ b/packages/propel/src/ui/icon-button/icon-button.tsx
@@ -0,0 +1,76 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cx } from "class-variance-authority";
+import { LoaderCircle } from "lucide-react";
+import * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import {
+  type ButtonMagnitude,
+  type ButtonProps,
+  type ButtonTone,
+  type ButtonVariant,
+  buttonVariants,
+} from "../../ui/button/index";
+import { iconButtonVariants } from "./variants";
+
+// Figma "Icon button" Type axis: Primary/Secondary/Tertiary/Error/Error outline/
+// Ghost. There is no link icon button, so IconButton drops Button's `link`
+// variant (and the link-only `emphasis` axis) — its visual axes are
+// `variant` + `tone`, the same compound tokens Button uses for everything but link.
+export type IconButtonVariant = Exclude<ButtonVariant, "link">;
+export type IconButtonTone = ButtonTone;
+export type IconButtonMagnitude = ButtonMagnitude;
+
+export type IconButtonProps = Omit<ButtonProps, "variant" | "emphasis"> & {
+  variant: IconButtonVariant;
+  /**
+   * The single node to render (an icon, an avatar, ...), sized to the button's `--node-size`. It is
+   * the button's only content, so it is `children`; decorative, the accessible name comes from
+   * `aria-label`.
+   */
+  children: React.ReactNode;
+  /** Required: icon-only buttons have no visible text, so they must be labeled. */
+  "aria-label": string;
+  /** Shows a spinner, sets `aria-busy`, and makes the button non-interactive. */
+  loading?: boolean;
+};
+
+/**
+ * The icon-only form of {@link Button}: a square button with a single glyph and no label. It shares
+ * Button's design tokens (`variant`/`tone`/`magnitude`) but is its own component/export. There is
+ * no `link` icon button, so `variant` excludes it. An `aria-label` is REQUIRED for the accessible
+ * name.
+ */
+export function IconButton({
+  children,
+  variant,
+  tone,
+  magnitude,
+  loading = false,
+  disabled,
+  type = "button",
+  ...props
+}: IconButtonProps) {
+  // `loading` mirrors Button: Base UI suppresses activation while keeping the
+  // button focusable through `focusableWhenDisabled`; `disabled` remains hard-disabled.
+  return (
+    <BaseButton
+      type={type}
+      {...props}
+      disabled={disabled || loading}
+      focusableWhenDisabled={loading ? true : undefined}
+      aria-busy={loading ? true : undefined}
+      // Pass only variant/tone to `buttonVariants` so Button's chrome (background,
+      // border, text/icon color, radius) applies but NOT its text-button geometry;
+      // `iconButtonVariants` then layers the square `size-N` box and `--node-size`
+      // glyph scale per magnitude (see its comment for why magnitude is kept separate).
+      className={cx(buttonVariants({ variant, tone }), iconButtonVariants({ magnitude }))}
+    >
+      {loading ? (
+        <LoaderCircle aria-hidden className="size-(--node-size) animate-spin" />
+      ) : (
+        <NodeSlot aria-hidden>{children}</NodeSlot>
+      )}
+    </BaseButton>
+  );
+}
diff --git a/packages/propel/src/ui/icon-button/index.tsx b/packages/propel/src/ui/icon-button/index.tsx
new file mode 100644
index 0000000..abd60f3
--- /dev/null
+++ b/packages/propel/src/ui/icon-button/index.tsx
@@ -0,0 +1 @@
+export * from "./icon-button";
diff --git a/packages/propel/src/ui/icon-button/variants.ts b/packages/propel/src/ui/icon-button/variants.ts
new file mode 100644
index 0000000..1ba319a
--- /dev/null
+++ b/packages/propel/src/ui/icon-button/variants.ts
@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+
+// IconButton's own geometry, separate from Button's label-driven chrome (which comes
+// from composing `buttonVariants({ variant, tone })`). Icon buttons are square — a
+// fixed `size-N` box per Figma's "Icon button" Size scale (S/Base/L/XL = 20/24/28/32px,
+// mapped to sm/md/lg/xl) — and their glyph runs a step larger than a text button's at
+// md and xl. Each magnitude also sets `--node-size` (14/16/16/20px, per the Figma
+// "Icon button" glyph spec), which the node slot and loading spinner size to.
+//
+// `magnitude` is kept off Button's compound chrome on purpose: Button's `magnitude`
+// adds a height, min-width, and horizontal padding meant for labelled buttons, which
+// would beat this square `size-N` (cx does not dedupe conflicting utilities) and leave
+// the button rectangular.
+export const iconButtonVariants = cva("", {
+  variants: {
+    magnitude: {
+      sm: "size-5 [--node-size:0.875rem]", // 20px box, 14px glyph
+      md: "size-6 [--node-size:1rem]", // 24px box, 16px glyph
+      lg: "size-7 [--node-size:1rem]", // 28px box, 16px glyph
+      xl: "size-8 [--node-size:1.25rem]", // 32px box, 20px glyph
+    },
+  },
+});
diff --git a/packages/propel/src/ui/input/index.tsx b/packages/propel/src/ui/input/index.tsx
new file mode 100644
index 0000000..9220205
--- /dev/null
+++ b/packages/propel/src/ui/input/index.tsx
@@ -0,0 +1 @@
+export { Input, type InputMagnitude, type InputProps } from "./input";
diff --git a/packages/propel/src/ui/input/input.stories.tsx b/packages/propel/src/ui/input/input.stories.tsx
new file mode 100644
index 0000000..f982edb
--- /dev/null
+++ b/packages/propel/src/ui/input/input.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type * as React from "react";
+import { expect, userEvent } from "storybook/test";
+
+import { Field, FieldError, FieldLabel } from "../field/index";
+import { inputFieldBoxVariants, type InputMagnitude } from "../field/variants";
+import { Input } from "./index";
+
+const MAGNITUDES: InputMagnitude[] = ["md", "lg", "xl"];
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function InputSurface({
+  children,
+  magnitude = "md",
+}: {
+  children: React.ReactNode;
+  magnitude?: InputMagnitude;
+}) {
+  return (
+    <div className="w-72">
+      <div className={inputFieldBoxVariants({ magnitude, tone: "neutral" })}>{children}</div>
+    </div>
+  );
+}
+
+/** Single native input element. Compose it with `Field` for labels, names, and validation. */
+export const Default: Story = {
+  args: {
+    magnitude: "md",
+    "aria-label": "Name",
+    placeholder: "Ada Lovelace",
+  },
+  render: (args) => (
+    <InputSurface>
+      <Input {...args} />
+    </InputSurface>
+  ),
+};
+
+/** Every input text magnitude. */
+export const Magnitudes: Story = {
+  args: {
+    magnitude: "md",
+    "aria-label": "Name",
+    placeholder: "Ada Lovelace",
+  },
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex flex-col gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <InputSurface key={magnitude} magnitude={magnitude}>
+          <Input {...args} magnitude={magnitude} aria-label={magnitude} placeholder={magnitude} />
+        </InputSurface>
+      ))}
+    </div>
+  ),
+};
+
+export const FieldComposition: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Field name="displayName">
+      <FieldLabel magnitude="md">Display name</FieldLabel>
+      <InputSurface>
+        <Input {...args} placeholder="Ada Lovelace" />
+      </InputSurface>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole<HTMLInputElement>("textbox", { name: "Display name" });
+    await userEvent.type(input, "Grace");
+    await expect(input).toHaveAttribute("name", "displayName");
+    await expect(input).toHaveValue("Grace");
+  },
+};
+
+export const FieldErrorAssociation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Field name="email" invalid>
+      <FieldLabel magnitude="md">Email</FieldLabel>
+      <InputSurface>
+        <Input {...args} defaultValue="not-an-email" />
+      </InputSurface>
+      <FieldError magnitude="md" match={true}>
+        Enter a valid email address.
+      </FieldError>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("textbox", { name: "Email" });
+    await expect(input).toHaveAttribute("aria-invalid", "true");
+    await expect(input).toHaveAccessibleDescription("Enter a valid email address.");
+  },
+};
diff --git a/packages/propel/src/ui/input/input.tsx b/packages/propel/src/ui/input/input.tsx
new file mode 100644
index 0000000..0aea2ba
--- /dev/null
+++ b/packages/propel/src/ui/input/input.tsx
@@ -0,0 +1,16 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import type * as React from "react";
+
+import { inputVariants, type InputMagnitude } from "./variants";
+
+export type { InputMagnitude };
+
+export type InputProps = Omit<React.ComponentProps<typeof BaseInput>, "className" | "style"> & {
+  /** Text size for the input value. */
+  magnitude: InputMagnitude;
+};
+
+/** Single-line native input element that automatically works inside `Field`. */
+export function Input({ magnitude, ...props }: InputProps) {
+  return <BaseInput className={inputVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/input/variants.ts b/packages/propel/src/ui/input/variants.ts
new file mode 100644
index 0000000..32fe7f7
--- /dev/null
+++ b/packages/propel/src/ui/input/variants.ts
@@ -0,0 +1,22 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+export const inputVariants = cva(
+  cx(
+    "min-w-0 flex-1 bg-transparent text-primary outline-none",
+    "placeholder:text-placeholder",
+    "disabled:cursor-not-allowed disabled:text-disabled",
+  ),
+  {
+    variants: {
+      magnitude: {
+        md: "text-14",
+        lg: "text-14",
+        xl: "text-16",
+      },
+    },
+  },
+);
+
+type InputVariantProps = VariantProps<typeof inputVariants>;
+
+export type InputMagnitude = NonNullable<InputVariantProps["magnitude"]>;
diff --git a/packages/propel/src/ui/menu/index.tsx b/packages/propel/src/ui/menu/index.tsx
new file mode 100644
index 0000000..1c1f488
--- /dev/null
+++ b/packages/propel/src/ui/menu/index.tsx
@@ -0,0 +1,27 @@
+export { Menu, type MenuProps } from "./menu";
+export { MenuArrow, type MenuArrowProps } from "./menu-arrow";
+export { MenuBackdrop, type MenuBackdropProps } from "./menu-backdrop";
+export { MenuCheckboxItem, type MenuCheckboxItemProps } from "./menu-checkbox-item";
+export {
+  MenuCheckboxItemIndicator,
+  type MenuCheckboxItemIndicatorProps,
+} from "./menu-checkbox-item-indicator";
+export { MenuGroup, type MenuGroupProps } from "./menu-group";
+export { MenuGroupLabel, type MenuGroupLabelProps } from "./menu-group-label";
+export { MenuItem, type MenuItemProps } from "./menu-item";
+export { MenuLabel, type MenuLabelProps } from "./menu-label";
+export { MenuLinkItem, type MenuLinkItemProps } from "./menu-link-item";
+export { MenuPopup, type MenuPopupProps } from "./menu-popup";
+export { MenuPortal } from "./menu-portal";
+export { MenuPositioner, type MenuPositionerProps } from "./menu-positioner";
+export { MenuRadioGroup, type MenuRadioGroupProps } from "./menu-radio-group";
+export { MenuRadioItem, type MenuRadioItemProps } from "./menu-radio-item";
+export {
+  MenuRadioItemIndicator,
+  type MenuRadioItemIndicatorProps,
+} from "./menu-radio-item-indicator";
+export { MenuSeparator, type MenuSeparatorProps } from "./menu-separator";
+export { MenuSub, type MenuSubProps } from "./menu-sub";
+export { MenuSubTrigger, type MenuSubTriggerProps } from "./menu-sub-trigger";
+export { MenuTrigger, type MenuTriggerProps } from "./menu-trigger";
+export { MenuViewport, type MenuViewportProps } from "./menu-viewport";
diff --git a/packages/propel/src/ui/menu/menu-arrow.tsx b/packages/propel/src/ui/menu/menu-arrow.tsx
new file mode 100644
index 0000000..2718880
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-arrow.tsx
@@ -0,0 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuArrowVariants } from "./variants";
+
+export type MenuArrowProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Arrow>,
+  "className" | "style"
+>;
+
+/** An element pointing from the popup toward its anchor. Wraps `Menu.Arrow` 1:1. */
+export function MenuArrow(props: MenuArrowProps) {
+  return <BaseMenu.Arrow className={menuArrowVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-backdrop.tsx b/packages/propel/src/ui/menu/menu-backdrop.tsx
new file mode 100644
index 0000000..1627671
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-backdrop.tsx
@@ -0,0 +1,12 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuBackdropProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Backdrop>,
+  "className" | "style"
+>;
+
+/** An overlay rendered beneath the menu popup. Wraps `Menu.Backdrop` 1:1. */
+export function MenuBackdrop(props: MenuBackdropProps) {
+  return <BaseMenu.Backdrop {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-checkbox-item-indicator.tsx b/packages/propel/src/ui/menu/menu-checkbox-item-indicator.tsx
new file mode 100644
index 0000000..0644634
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-checkbox-item-indicator.tsx
@@ -0,0 +1,19 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { menuItemIndicatorVariants } from "./variants";
+
+export type MenuCheckboxItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseMenu.CheckboxItemIndicator>,
+  "className" | "style"
+>;
+
+/** Shows whether the checkbox item is ticked. Wraps `Menu.CheckboxItemIndicator` 1:1. */
+export function MenuCheckboxItemIndicator(props: MenuCheckboxItemIndicatorProps) {
+  return (
+    <BaseMenu.CheckboxItemIndicator className={menuItemIndicatorVariants()} {...props}>
+      {props.children ?? <Check className="size-4" aria-hidden="true" />}
+    </BaseMenu.CheckboxItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-checkbox-item.tsx b/packages/propel/src/ui/menu/menu-checkbox-item.tsx
new file mode 100644
index 0000000..6e439fd
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-checkbox-item.tsx
@@ -0,0 +1,25 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+export type MenuCheckboxItemProps = Omit<
+  React.ComponentProps<typeof BaseMenu.CheckboxItem>,
+  "className" | "style" | "label"
+>;
+
+/** A toggleable multi-select menu row with `role="menuitemcheckbox"`. Wraps `Menu.CheckboxItem` 1:1. */
+export function MenuCheckboxItem({ children, ...props }: MenuCheckboxItemProps) {
+  return (
+    <BaseMenu.CheckboxItem
+      className={cx(
+        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
+        "text-secondary",
+        "data-highlighted:bg-layer-transparent-hover",
+        "data-disabled:pointer-events-none data-disabled:text-disabled",
+      )}
+      {...props}
+    >
+      {children}
+    </BaseMenu.CheckboxItem>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-group-label.tsx b/packages/propel/src/ui/menu/menu-group-label.tsx
new file mode 100644
index 0000000..549b6ad
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-group-label.tsx
@@ -0,0 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuGroupLabelVariants } from "./variants";
+
+export type MenuGroupLabelProps = Omit<
+  React.ComponentProps<typeof BaseMenu.GroupLabel>,
+  "className" | "style"
+>;
+
+/** A non-interactive heading associated with its parent group. Wraps `Menu.GroupLabel` 1:1. */
+export function MenuGroupLabel(props: MenuGroupLabelProps) {
+  return <BaseMenu.GroupLabel className={menuGroupLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-group.tsx b/packages/propel/src/ui/menu/menu-group.tsx
new file mode 100644
index 0000000..f7e36f3
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-group.tsx
@@ -0,0 +1,12 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuGroupProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Group>,
+  "className" | "style"
+>;
+
+/** Groups related menu items so a `MenuLabel` can title them. */
+export function MenuGroup(props: MenuGroupProps) {
+  return <BaseMenu.Group {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-item.tsx b/packages/propel/src/ui/menu/menu-item.tsx
new file mode 100644
index 0000000..be38cca
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-item.tsx
@@ -0,0 +1,27 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { menuRowVariants } from "./variants";
+
+type MenuItemVariant = NonNullable<VariantProps<typeof menuRowVariants>["variant"]>;
+type MenuItemEmphasis = NonNullable<VariantProps<typeof menuRowVariants>["emphasis"]>;
+
+export type MenuItemProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Item>,
+  "className" | "style" | "label"
+> & {
+  /** Row layout. */
+  variant: MenuItemVariant;
+  /** Row emphasis. @default "default" */
+  emphasis?: MenuItemEmphasis;
+};
+
+/** A selectable menu row. Wraps `Menu.Item` 1:1. */
+export function MenuItem({ variant, emphasis = "default", children, ...props }: MenuItemProps) {
+  return (
+    <BaseMenu.Item className={menuRowVariants({ variant, emphasis })} {...props}>
+      {children}
+    </BaseMenu.Item>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-label.tsx b/packages/propel/src/ui/menu/menu-label.tsx
new file mode 100644
index 0000000..6249b0f
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-label.tsx
@@ -0,0 +1,24 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuLabelProps = Omit<
+  React.ComponentProps<typeof BaseMenu.GroupLabel>,
+  "className" | "style"
+> & {
+  /** Optional inline-end content on the heading row. */
+  inlineEndNode?: React.ReactNode;
+  children?: React.ReactNode;
+};
+
+/** A non-interactive section heading for a group of menu items. */
+export function MenuLabel({ inlineEndNode, children, ...props }: MenuLabelProps) {
+  return (
+    <BaseMenu.GroupLabel
+      className="flex items-center gap-1.5 px-2 py-1.5 text-12 text-tertiary"
+      {...props}
+    >
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      {inlineEndNode != null ? <span className="shrink-0">{inlineEndNode}</span> : null}
+    </BaseMenu.GroupLabel>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-link-item.tsx b/packages/propel/src/ui/menu/menu-link-item.tsx
new file mode 100644
index 0000000..b403c66
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-link-item.tsx
@@ -0,0 +1,18 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuItemVariants } from "./variants";
+
+export type MenuLinkItemProps = Omit<
+  React.ComponentProps<typeof BaseMenu.LinkItem>,
+  "className" | "style" | "label"
+>;
+
+/** A navigational `<a>` menu row. Wraps `Menu.LinkItem` 1:1. */
+export function MenuLinkItem({ children, ...props }: MenuLinkItemProps) {
+  return (
+    <BaseMenu.LinkItem className={menuItemVariants()} {...props}>
+      {children}
+    </BaseMenu.LinkItem>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-popup.tsx b/packages/propel/src/ui/menu/menu-popup.tsx
new file mode 100644
index 0000000..93b9594
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-popup.tsx
@@ -0,0 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuPopupVariants } from "./variants";
+
+export type MenuPopupProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Popup>,
+  "className" | "style"
+>;
+
+/** The menu surface that contains the items. Wraps `Menu.Popup` 1:1. */
+export function MenuPopup(props: MenuPopupProps) {
+  return <BaseMenu.Popup className={menuPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-portal.tsx b/packages/propel/src/ui/menu/menu-portal.tsx
new file mode 100644
index 0000000..4cd093d
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-portal.tsx
@@ -0,0 +1,4 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+
+/** Portals the popup out to `<body>` by default. Re-exports `Menu.Portal` 1:1. */
+export const MenuPortal = BaseMenu.Portal;
diff --git a/packages/propel/src/ui/menu/menu-positioner.tsx b/packages/propel/src/ui/menu/menu-positioner.tsx
new file mode 100644
index 0000000..1ddd105
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-positioner.tsx
@@ -0,0 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuPositionerVariants } from "./variants";
+
+export type MenuPositionerProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Positioner>,
+  "className" | "style"
+>;
+
+/** Positions the popup against the pointer. Wraps `Menu.Positioner` 1:1. */
+export function MenuPositioner(props: MenuPositionerProps) {
+  return <BaseMenu.Positioner className={menuPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-radio-group.tsx b/packages/propel/src/ui/menu/menu-radio-group.tsx
new file mode 100644
index 0000000..e646169
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-radio-group.tsx
@@ -0,0 +1,12 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuRadioGroupProps = Omit<
+  React.ComponentProps<typeof BaseMenu.RadioGroup>,
+  "className" | "style"
+>;
+
+/** Groups related radio items around a shared value. Wraps `Menu.RadioGroup` 1:1. */
+export function MenuRadioGroup(props: MenuRadioGroupProps) {
+  return <BaseMenu.RadioGroup {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-radio-item-indicator.tsx b/packages/propel/src/ui/menu/menu-radio-item-indicator.tsx
new file mode 100644
index 0000000..c9554d6
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-radio-item-indicator.tsx
@@ -0,0 +1,19 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { menuItemIndicatorVariants } from "./variants";
+
+export type MenuRadioItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseMenu.RadioItemIndicator>,
+  "className" | "style"
+>;
+
+/** Shows whether the radio item is selected. Wraps `Menu.RadioItemIndicator` 1:1. */
+export function MenuRadioItemIndicator(props: MenuRadioItemIndicatorProps) {
+  return (
+    <BaseMenu.RadioItemIndicator className={menuItemIndicatorVariants()} {...props}>
+      {props.children ?? <Check className="size-4" aria-hidden="true" />}
+    </BaseMenu.RadioItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-radio-item.tsx b/packages/propel/src/ui/menu/menu-radio-item.tsx
new file mode 100644
index 0000000..6176da2
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-radio-item.tsx
@@ -0,0 +1,14 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+import { menuItemVariants } from "./variants";
+
+export type MenuRadioItemProps = Omit<
+  React.ComponentProps<typeof BaseMenu.RadioItem>,
+  "className" | "style"
+>;
+
+/** A menu row that behaves like a radio button. Wraps `Menu.RadioItem` 1:1. */
+export function MenuRadioItem(props: MenuRadioItemProps) {
+  return <BaseMenu.RadioItem className={menuItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-separator.tsx b/packages/propel/src/ui/menu/menu-separator.tsx
new file mode 100644
index 0000000..14f799a
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-separator.tsx
@@ -0,0 +1,12 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuSeparatorProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Separator>,
+  "className" | "style"
+>;
+
+/** A thin divider between groups of items. */
+export function MenuSeparator(props: MenuSeparatorProps) {
+  return <BaseMenu.Separator className="-mx-1 my-1 border-t border-subtle" {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-sub-trigger.tsx b/packages/propel/src/ui/menu/menu-sub-trigger.tsx
new file mode 100644
index 0000000..e58472e
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-sub-trigger.tsx
@@ -0,0 +1,25 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+export type MenuSubTriggerProps = Omit<
+  React.ComponentProps<typeof BaseMenu.SubmenuTrigger>,
+  "className" | "style" | "label"
+>;
+
+/** The row that opens a submenu. Wraps `Menu.SubmenuTrigger` 1:1. */
+export function MenuSubTrigger({ children, ...props }: MenuSubTriggerProps) {
+  return (
+    <BaseMenu.SubmenuTrigger
+      className={cx(
+        "group/item flex h-[34px] w-full cursor-default items-center gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
+        "text-secondary",
+        "data-highlighted:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-hover",
+        "data-disabled:pointer-events-none data-disabled:text-disabled",
+      )}
+      {...props}
+    >
+      {children}
+    </BaseMenu.SubmenuTrigger>
+  );
+}
diff --git a/packages/propel/src/ui/menu/menu-sub.tsx b/packages/propel/src/ui/menu/menu-sub.tsx
new file mode 100644
index 0000000..ff727db
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-sub.tsx
@@ -0,0 +1,22 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+type BaseSubmenuRootProps = React.ComponentProps<typeof BaseMenu.SubmenuRoot>;
+
+export type MenuSubProps = Omit<
+  BaseSubmenuRootProps,
+  "open" | "defaultOpen" | "onOpenChange" | "children"
+> & {
+  /** Whether the submenu is open. Controlled; pair with `onOpenChange`. */
+  open?: boolean;
+  /** Whether the submenu is open on mount. Uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called with the next open state when the submenu opens or closes. */
+  onOpenChange?: BaseSubmenuRootProps["onOpenChange"];
+  /** The submenu's trigger and nested content. */
+  children?: React.ReactNode;
+};
+
+export function MenuSub(props: MenuSubProps) {
+  return <BaseMenu.SubmenuRoot {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-trigger.tsx b/packages/propel/src/ui/menu/menu-trigger.tsx
new file mode 100644
index 0000000..90797ab
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-trigger.tsx
@@ -0,0 +1,15 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuTriggerProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The element that opens the menu. Renders a `<button>` by default; pass `render` to project the
+ * trigger onto your own element.
+ */
+export function MenuTrigger(props: MenuTriggerProps) {
+  return <BaseMenu.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu-viewport.tsx b/packages/propel/src/ui/menu/menu-viewport.tsx
new file mode 100644
index 0000000..4c321f9
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu-viewport.tsx
@@ -0,0 +1,15 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type * as React from "react";
+
+export type MenuViewportProps = Omit<
+  React.ComponentProps<typeof BaseMenu.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * A content wrapper inside the popup that morphs/clips during submenu or size transitions. Wraps
+ * `Menu.Viewport` 1:1.
+ */
+export function MenuViewport(props: MenuViewportProps) {
+  return <BaseMenu.Viewport className="relative" {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/menu.stories.tsx b/packages/propel/src/ui/menu/menu.stories.tsx
new file mode 100644
index 0000000..4dd73c0
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu.stories.tsx
@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check } from "lucide-react";
+import * as React from "react";
+import { expect, userEvent, waitFor } from "storybook/test";
+
+import {
+  Menu,
+  MenuCheckboxItem,
+  MenuCheckboxItemIndicator,
+  MenuGroup,
+  MenuGroupLabel,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuSeparator,
+  MenuTrigger,
+} from "./index";
+
+// UI-tier story: assemble the ATOMIC menu parts by hand — Root › Trigger, then the
+// portal/positioner/popup surface wrapping items, separators and groups. The
+// components-tier `Menu` story uses the ready-made `MenuContent` plus the rich
+// `MenuItem`/`MenuCheckboxItem` rows; here each part renders a single element and
+// you wire the layout yourself.
+const meta = {
+  title: "UI/Menu",
+  component: Menu,
+  subcomponents: {
+    MenuTrigger,
+    MenuPortal,
+    MenuPositioner,
+    MenuPopup,
+    MenuItem,
+    MenuCheckboxItem,
+    MenuCheckboxItemIndicator,
+    MenuSeparator,
+    MenuGroup,
+    MenuGroupLabel,
+  },
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// A plain trigger button styled with propel tokens — the menu primitive ships no
+// trigger style, so stories supply one to keep the focus on the menu surface.
+const triggerClass =
+  "inline-flex h-8 items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+/** Assemble the surface by hand: Root › Trigger, then Portal › Positioner › Popup wrapping items. */
+export const Default: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger render={<button type="button" className={triggerClass} />}>Actions</MenuTrigger>
+      <MenuPortal>
+        <MenuPositioner sideOffset={4}>
+          <MenuPopup>
+            <MenuItem variant="default">Edit</MenuItem>
+            <MenuItem variant="default">Duplicate</MenuItem>
+            <MenuSeparator />
+            <MenuItem variant="default">Delete</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </MenuPortal>
+    </Menu>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Actions" }));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    const items = document.body.querySelectorAll('[role="menuitem"]');
+    await expect(items.length).toBe(3);
+  },
+};
+
+/** `MenuGroup` + `MenuGroupLabel` title a section; a `MenuSeparator` divides groups. */
+export const Grouped: Story = {
+  render: () => (
+    <Menu>
+      <MenuTrigger render={<button type="button" className={triggerClass} />}>View</MenuTrigger>
+      <MenuPortal>
+        <MenuPositioner sideOffset={4}>
+          <MenuPopup>
+            <MenuGroup>
+              <MenuGroupLabel>Layout</MenuGroupLabel>
+              <MenuItem variant="default">List</MenuItem>
+              <MenuItem variant="default">Board</MenuItem>
+            </MenuGroup>
+            <MenuSeparator />
+            <MenuGroup>
+              <MenuGroupLabel>Density</MenuGroupLabel>
+              <MenuItem variant="default">Comfortable</MenuItem>
+              <MenuItem variant="default">Compact</MenuItem>
+            </MenuGroup>
+          </MenuPopup>
+        </MenuPositioner>
+      </MenuPortal>
+    </Menu>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "View" }));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("Layout");
+    await expect(document.body).toHaveTextContent("Density");
+  },
+};
+
+/** `MenuCheckboxItem` + `MenuCheckboxItemIndicator` make a toggleable multi-select row. */
+export const Checkboxes: Story = {
+  render: function CheckboxesStory() {
+    const [checked, setChecked] = React.useState<Record<string, boolean>>({ comments: true });
+    const rows = [
+      { key: "comments", label: "Comments" },
+      { key: "mentions", label: "Mentions" },
+      { key: "updates", label: "Updates" },
+    ];
+    return (
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>Notify</MenuTrigger>
+        <MenuPortal>
+          <MenuPositioner sideOffset={4}>
+            <MenuPopup>
+              {rows.map((row) => (
+                <MenuCheckboxItem
+                  key={row.key}
+                  checked={Boolean(checked[row.key])}
+                  onCheckedChange={(next) => setChecked((c) => ({ ...c, [row.key]: next }))}
+                  closeOnClick={false}
+                >
+                  <span className="min-w-0 flex-1 truncate">{row.label}</span>
+                  <MenuCheckboxItemIndicator>
+                    <Check className="size-4" aria-hidden="true" />
+                  </MenuCheckboxItemIndicator>
+                </MenuCheckboxItem>
+              ))}
+            </MenuPopup>
+          </MenuPositioner>
+        </MenuPortal>
+      </Menu>
+    );
+  },
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Notify" }));
+    const findRow = (text: string) =>
+      Array.from(document.body.querySelectorAll('[role="menuitemcheckbox"]')).find((el) =>
+        el.textContent?.includes(text),
+      ) as HTMLElement | undefined;
+    const row = (await waitFor(() => {
+      const found = findRow("Mentions");
+      if (found == null) throw new Error("Mentions row not mounted yet");
+      return found;
+    })) as HTMLElement;
+    await expect(row).toHaveAttribute("aria-checked", "false");
+    await userEvent.click(row);
+    await waitFor(() => expect(findRow("Mentions")).toHaveAttribute("aria-checked", "true"));
+  },
+};
diff --git a/packages/propel/src/ui/menu/menu.tsx b/packages/propel/src/ui/menu/menu.tsx
new file mode 100644
index 0000000..bf7e7e4
--- /dev/null
+++ b/packages/propel/src/ui/menu/menu.tsx
@@ -0,0 +1,22 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import type { MenuRoot } from "@base-ui/react/menu";
+
+export type MenuProps<Payload = unknown> = Omit<
+  MenuRoot.Props<Payload>,
+  "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"
+> & {
+  /** Whether the menu is open. Controlled; pair with `onOpenChange`. */
+  open?: boolean;
+  /** Whether the menu is open on mount. Uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called with the next open state when the menu opens or closes. */
+  onOpenChange?: MenuRoot.Props<Payload>["onOpenChange"];
+  /** Modal behavior while open. @default false */
+  modal?: MenuRoot.Props<Payload>["modal"];
+  /** The trigger and menu surface (`MenuTrigger`, `MenuContent`). */
+  children?: MenuRoot.Props<Payload>["children"];
+};
+
+export function Menu<Payload = unknown>(props: MenuProps<Payload>) {
+  return <BaseMenu.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/menu/variants.ts b/packages/propel/src/ui/menu/variants.ts
new file mode 100644
index 0000000..e532feb
--- /dev/null
+++ b/packages/propel/src/ui/menu/variants.ts
@@ -0,0 +1,58 @@
+import { cva, cx } from "class-variance-authority";
+
+/** Positioner: anchors the popup at the pointer with overlay stacking. */
+export const menuPositionerVariants = cva("z-50 outline-none");
+
+/** Popup: the menu surface, animated from its pointer-anchored transform origin. */
+export const menuPopupVariants = cva(
+  cx(
+    "min-w-40 rounded-lg border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100 outline-none",
+    "origin-(--transform-origin) transition-[opacity,transform] duration-150",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ),
+);
+
+/** Item rows: shared styling for Item, LinkItem, CheckboxItem, RadioItem and SubmenuTrigger. */
+export const menuItemVariants = cva(
+  cx(
+    "flex h-8 cursor-default items-center gap-2 rounded-md px-2 text-13 text-secondary outline-none select-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+);
+
+/** Standalone `MenuItem` row: variant-driven layout + emphasis, distinct from the shared row base. */
+export const menuRowVariants = cva(
+  cx(
+    "group/item flex w-full gap-2 rounded-md px-2 text-13 outline-none select-none [--node-size:1rem]",
+    "text-secondary",
+    "data-disabled:pointer-events-none data-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      variant: {
+        default: "h-[34px] items-center",
+        "with-description": "min-h-[34px] items-start py-1.5",
+      },
+      emphasis: {
+        default: "cursor-default data-highlighted:bg-layer-transparent-hover",
+        link: "cursor-pointer",
+      },
+    },
+  },
+);
+
+/** Indicator slot inside radio/checkbox items. */
+export const menuItemIndicatorVariants = cva(
+  "flex size-4 items-center justify-center text-icon-accent-primary",
+);
+
+/** Separator: a thin divider spanning the popup padding. */
+export const menuSeparatorVariants = cva("-mx-1 my-1 border-t border-subtle");
+
+/** GroupLabel: a non-interactive section heading. */
+export const menuGroupLabelVariants = cva("px-2 py-1 text-12 font-medium text-tertiary");
+
+/** Arrow: a small caret matching the popup surface color. */
+export const menuArrowVariants = cva("text-layer-1");
diff --git a/packages/propel/src/ui/menubar/index.tsx b/packages/propel/src/ui/menubar/index.tsx
new file mode 100644
index 0000000..30783cc
--- /dev/null
+++ b/packages/propel/src/ui/menubar/index.tsx
@@ -0,0 +1 @@
+export { Menubar, type MenubarProps } from "./menubar";
diff --git a/packages/propel/src/ui/menubar/menubar.stories.tsx b/packages/propel/src/ui/menubar/menubar.stories.tsx
new file mode 100644
index 0000000..13a2739
--- /dev/null
+++ b/packages/propel/src/ui/menubar/menubar.stories.tsx
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor } from "storybook/test";
+
+import {
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuPortal,
+  MenuPositioner,
+  MenuSeparator,
+  MenuTrigger,
+} from "../menu/index";
+import { Menubar } from "./index";
+
+// UI-tier story: the `Menubar` container hosts a row of atomic `Menu` roots, each
+// assembled from raw parts (Trigger › Portal › Positioner › Popup › Item). The
+// components-tier story swaps the popup assembly for the ready-made `MenuContent`.
+const meta = {
+  title: "UI/Menubar",
+  component: Menubar,
+  subcomponents: { Menu, MenuTrigger, MenuPortal, MenuPositioner, MenuPopup, MenuItem },
+} satisfies Meta<typeof Menubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const triggerClass =
+  "inline-flex h-7 items-center rounded-sm px-2.5 text-13 text-secondary outline-none data-popup-open:bg-layer-transparent-hover";
+
+/** A row of menus sharing arrow-key navigation and single-open behavior. */
+export const Default: Story = {
+  parameters: {
+    a11y: {
+      // With a menu open, Base UI's Menubar treats each menu as a submenu and emits a
+      // visually-hidden `aria-owns` owner `<span>` to reparent the portaled popup into
+      // the correct place in the accessibility tree. In the DOM that span lands inside
+      // the `role="menubar"`, which axe's aria-required-children flags as a disallowed
+      // child — a static-analysis false-positive (same as the Menu Submenu story; see
+      // dequelabs/axe-core#4048 and floating-ui/floating-ui#3424). Suppress just this rule.
+      config: { rules: [{ id: "aria-required-children", enabled: false }] },
+    },
+  },
+  render: () => (
+    <Menubar>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>File</MenuTrigger>
+        <MenuPortal>
+          <MenuPositioner sideOffset={4}>
+            <MenuPopup>
+              <MenuItem variant="default">New file</MenuItem>
+              <MenuItem variant="default">Open…</MenuItem>
+              <MenuSeparator />
+              <MenuItem variant="default">Save</MenuItem>
+            </MenuPopup>
+          </MenuPositioner>
+        </MenuPortal>
+      </Menu>
+      <Menu>
+        <MenuTrigger render={<button type="button" className={triggerClass} />}>Edit</MenuTrigger>
+        <MenuPortal>
+          <MenuPositioner sideOffset={4}>
+            <MenuPopup>
+              <MenuItem variant="default">Undo</MenuItem>
+              <MenuItem variant="default">Redo</MenuItem>
+            </MenuPopup>
+          </MenuPositioner>
+        </MenuPortal>
+      </Menu>
+    </Menubar>
+  ),
+  play: async ({ canvas }) => {
+    // Inside a Menubar, each menu trigger is a `role="menuitem"` (not a plain button).
+    await userEvent.click(canvas.getByRole("menuitem", { name: "File" }));
+    await waitFor(() => expect(document.body.querySelector('[role="menu"]')).toBeInTheDocument());
+    await expect(document.body).toHaveTextContent("New file");
+  },
+};
diff --git a/packages/propel/src/ui/menubar/menubar.tsx b/packages/propel/src/ui/menubar/menubar.tsx
new file mode 100644
index 0000000..d8425b9
--- /dev/null
+++ b/packages/propel/src/ui/menubar/menubar.tsx
@@ -0,0 +1,14 @@
+import { Menubar as BaseMenubar } from "@base-ui/react/menubar";
+import type * as React from "react";
+
+import { menubarVariants } from "./variants";
+
+export type MenubarProps = Omit<React.ComponentProps<typeof BaseMenubar>, "className" | "style">;
+
+/**
+ * The container for an application menu bar — wraps a horizontal row of `Menu.Root`s so they share
+ * arrow-key navigation and single-open behavior. Maps 1:1 to Base UI's `Menubar`.
+ */
+export function Menubar(props: MenubarProps) {
+  return <BaseMenubar className={menubarVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/menubar/variants.ts b/packages/propel/src/ui/menubar/variants.ts
new file mode 100644
index 0000000..ea64f20
--- /dev/null
+++ b/packages/propel/src/ui/menubar/variants.ts
@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+
+// Menubar is a verbatim wrapping of Base UI's single `Menubar` container, which
+// hosts a row of `Menu.Root`s. Base UI drives all state through `data-*`
+// attributes, so there are no styling axes (variant/tone/magnitude) to expose.
+// The cva pairing below holds the static container chrome in one place, with no
+// `className` at the boundary.
+
+export const menubarVariants = cva(
+  "inline-flex items-center gap-1 rounded-md border-sm border-subtle bg-layer-1 p-1",
+);
diff --git a/packages/propel/src/ui/meter/index.tsx b/packages/propel/src/ui/meter/index.tsx
new file mode 100644
index 0000000..efd2592
--- /dev/null
+++ b/packages/propel/src/ui/meter/index.tsx
@@ -0,0 +1,5 @@
+export { Meter, type MeterProps } from "./meter";
+export { MeterIndicator, type MeterIndicatorProps } from "./meter-indicator";
+export { MeterLabel, type MeterLabelProps } from "./meter-label";
+export { MeterTrack, type MeterTrackProps } from "./meter-track";
+export { MeterValue, type MeterValueProps } from "./meter-value";
diff --git a/packages/propel/src/ui/meter/meter-indicator.tsx b/packages/propel/src/ui/meter/meter-indicator.tsx
new file mode 100644
index 0000000..05efd1e
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter-indicator.tsx
@@ -0,0 +1,17 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type * as React from "react";
+
+import { meterIndicatorVariants } from "./variants";
+
+export type MeterIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseMeter.Indicator>,
+  "className" | "style"
+>;
+
+/**
+ * The filled portion of the track, sized to the value. Base UI sets its `width` inline from the
+ * meter value; we own only the fill and the width transition. Maps 1:1 to `Meter.Indicator`.
+ */
+export function MeterIndicator(props: MeterIndicatorProps) {
+  return <BaseMeter.Indicator className={meterIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/meter/meter-label.tsx b/packages/propel/src/ui/meter/meter-label.tsx
new file mode 100644
index 0000000..d848b79
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter-label.tsx
@@ -0,0 +1,14 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type * as React from "react";
+
+import { meterLabelVariants } from "./variants";
+
+export type MeterLabelProps = Omit<
+  React.ComponentProps<typeof BaseMeter.Label>,
+  "className" | "style"
+>;
+
+/** The meter's accessible label. Maps 1:1 to `Meter.Label`. */
+export function MeterLabel(props: MeterLabelProps) {
+  return <BaseMeter.Label className={meterLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/meter/meter-track.tsx b/packages/propel/src/ui/meter/meter-track.tsx
new file mode 100644
index 0000000..4851f56
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter-track.tsx
@@ -0,0 +1,14 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type * as React from "react";
+
+import { meterTrackVariants } from "./variants";
+
+export type MeterTrackProps = Omit<
+  React.ComponentProps<typeof BaseMeter.Track>,
+  "className" | "style"
+>;
+
+/** The full range rail that contains the indicator. Maps 1:1 to `Meter.Track`. */
+export function MeterTrack(props: MeterTrackProps) {
+  return <BaseMeter.Track className={meterTrackVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/meter/meter-value.tsx b/packages/propel/src/ui/meter/meter-value.tsx
new file mode 100644
index 0000000..bb2e2ef
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter-value.tsx
@@ -0,0 +1,14 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type * as React from "react";
+
+import { meterValueVariants } from "./variants";
+
+export type MeterValueProps = Omit<
+  React.ComponentProps<typeof BaseMeter.Value>,
+  "className" | "style"
+>;
+
+/** A text element displaying the formatted current value. Maps 1:1 to `Meter.Value`. */
+export function MeterValue(props: MeterValueProps) {
+  return <BaseMeter.Value className={meterValueVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/meter/meter.stories.tsx b/packages/propel/src/ui/meter/meter.stories.tsx
new file mode 100644
index 0000000..86a48a3
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "./index";
+
+// UI-tier story: assembles the ATOMIC meter parts (`Meter` root + `MeterLabel` +
+// `MeterTrack` › `MeterIndicator` + `MeterValue`). The components-tier `Meter` story
+// uses the ready-made `<Meter value label />`, which composes these parts for you.
+const meta = {
+  title: "UI/Meter",
+  component: Meter,
+  subcomponents: { MeterLabel, MeterTrack, MeterIndicator, MeterValue },
+  args: { value: 64 },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Meter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Assemble the parts: Root › Label + (Track › Indicator) + Value. */
+export const Default: Story = {
+  args: { value: 64 },
+  render: (args) => (
+    <Meter {...args}>
+      <MeterLabel>Disk usage</MeterLabel>
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+      <MeterValue />
+    </Meter>
+  ),
+};
+
+/** Several fill levels, each labelled. */
+export const Levels: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-4">
+      {[15, 50, 90].map((value) => (
+        <Meter key={value} value={value}>
+          <MeterLabel>Storage</MeterLabel>
+          <MeterTrack>
+            <MeterIndicator />
+          </MeterTrack>
+          <MeterValue />
+        </Meter>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Behavior: Base UI's `Meter.Root` exposes `role="meter"` with the current value via
+ * `aria-valuenow`. Tagged out of the sidebar/docs/manifest but still runs under `test`.
+ */
+export const HasMeterRole: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <Meter value={42} aria-label="Quota">
+      <MeterTrack>
+        <MeterIndicator />
+      </MeterTrack>
+      <MeterValue />
+    </Meter>
+  ),
+  play: async ({ canvas }) => {
+    const meter = canvas.getByRole("meter", { name: "Quota" });
+    await expect(meter).toHaveAttribute("aria-valuenow", "42");
+  },
+};
diff --git a/packages/propel/src/ui/meter/meter.tsx b/packages/propel/src/ui/meter/meter.tsx
new file mode 100644
index 0000000..af28359
--- /dev/null
+++ b/packages/propel/src/ui/meter/meter.tsx
@@ -0,0 +1,16 @@
+import { Meter as BaseMeter } from "@base-ui/react/meter";
+import type * as React from "react";
+
+import { meterRootVariants } from "./variants";
+
+export type MeterProps = Omit<React.ComponentProps<typeof BaseMeter.Root>, "className" | "style">;
+
+/**
+ * A static gauge that graphs a numeric `value` within a known range (`min`/`max`, default 0–100):
+ * disk usage, quota consumption, password strength. Unlike `Progress` — which tracks task
+ * completion over time — a meter is a measurement, not a countdown, and its value can move in
+ * either direction. Maps 1:1 to Base UI's `Meter.Root`.
+ */
+export function Meter(props: MeterProps) {
+  return <BaseMeter.Root className={meterRootVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/meter/variants.ts b/packages/propel/src/ui/meter/variants.ts
new file mode 100644
index 0000000..492152f
--- /dev/null
+++ b/packages/propel/src/ui/meter/variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+
+/** Root: a vertical stack holding the label/value row and the track. */
+export const meterRootVariants = cva("flex w-full flex-col gap-1");
+
+/** Label: the meter's accessible name, rendered as visible text. */
+export const meterLabelVariants = cva("text-13 font-medium text-secondary");
+
+/** Value: the formatted current value, shown alongside the label. */
+export const meterValueVariants = cva("text-13 text-tertiary");
+
+/** Track: the full range rail that contains the indicator. */
+export const meterTrackVariants = cva("h-1.5 w-full overflow-hidden rounded-full bg-layer-3");
+
+/**
+ * Indicator: the filled portion. Base UI sets its `width` inline from the meter value, so we own
+ * only the fill, pill radius, and the width transition — never a hardcoded width.
+ */
+export const meterIndicatorVariants = cva(
+  "h-full rounded-full bg-accent-primary transition-[width] duration-200",
+);
diff --git a/packages/propel/src/ui/nav-item/index.tsx b/packages/propel/src/ui/nav-item/index.tsx
new file mode 100644
index 0000000..af2a397
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/index.tsx
@@ -0,0 +1,6 @@
+export { NavItem, type NavItemLevel, type NavItemMagnitude, type NavItemProps } from "./nav-item";
+export { NavItemChevron } from "./nav-item-chevron";
+export { NavItemCount } from "./nav-item-count";
+export { NavItemGroup, type NavItemGroupProps } from "./nav-item-group";
+export { NavItemHeader, type NavItemHeaderProps } from "./nav-item-header";
+export { NavItemPanel, type NavItemPanelProps } from "./nav-item-panel";
diff --git a/packages/propel/src/ui/nav-item/nav-item-chevron.tsx b/packages/propel/src/ui/nav-item/nav-item-chevron.tsx
new file mode 100644
index 0000000..4a5a4b0
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-chevron.tsx
@@ -0,0 +1,26 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+/** The disclosure chevron for an expandable nav row. */
+export function NavItemChevron({
+  open = false,
+  icon,
+}: {
+  /** Whether the row is expanded; rotates the chevron 180° when true. */
+  open?: boolean;
+  /** The chevron glyph, sized to 16px. */
+  icon: React.ReactNode;
+}) {
+  return (
+    <span
+      aria-hidden
+      data-open={open ? "" : undefined}
+      className={cx(
+        "flex size-4 shrink-0 items-center justify-center text-icon-placeholder [&>svg]:size-full",
+        "transition-transform data-open:rotate-180 rtl:-scale-x-100",
+      )}
+    >
+      {icon}
+    </span>
+  );
+}
diff --git a/packages/propel/src/ui/nav-item/nav-item-context.ts b/packages/propel/src/ui/nav-item/nav-item-context.ts
new file mode 100644
index 0000000..17de4fc
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-context.ts
@@ -0,0 +1,8 @@
+import { cx } from "class-variance-authority";
+
+export const navItemHeaderToggleClass = cx(
+  "flex min-w-0 flex-1 items-center gap-1 rounded-md py-2 text-start outline-none",
+  "cursor-pointer text-inherit select-none",
+  "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  "disabled:pointer-events-none disabled:text-disabled aria-disabled:pointer-events-none aria-disabled:text-disabled",
+);
diff --git a/packages/propel/src/ui/nav-item/nav-item-count.tsx b/packages/propel/src/ui/nav-item/nav-item-count.tsx
new file mode 100644
index 0000000..fbf70c3
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-count.tsx
@@ -0,0 +1,20 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+/** A small count chip for a nav row's inline-end slot. */
+export function NavItemCount({
+  children,
+  ...props
+}: Omit<React.ComponentProps<"span">, "className" | "style">) {
+  return (
+    <span
+      className={cx(
+        "inline-flex min-w-4 items-center justify-center rounded-sm px-0.5",
+        "bg-layer-3 text-11 leading-tight text-secondary",
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/packages/propel/src/ui/nav-item/nav-item-group.tsx b/packages/propel/src/ui/nav-item/nav-item-group.tsx
new file mode 100644
index 0000000..78f0c99
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-group.tsx
@@ -0,0 +1,12 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type * as React from "react";
+
+export type NavItemGroupProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Root>,
+  "className" | "style"
+>;
+
+/** A collapsible sidebar section. Sections start open by default. */
+export function NavItemGroup({ defaultOpen = true, ...props }: NavItemGroupProps) {
+  return <BaseCollapsible.Root defaultOpen={defaultOpen} {...props} />;
+}
diff --git a/packages/propel/src/components/nav-item/nav-item-header.stories.tsx b/packages/propel/src/ui/nav-item/nav-item-header.stories.tsx
similarity index 51%
rename from packages/propel/src/components/nav-item/nav-item-header.stories.tsx
rename to packages/propel/src/ui/nav-item/nav-item-header.stories.tsx
index 97564c9..d9889f2 100644
--- a/packages/propel/src/components/nav-item/nav-item-header.stories.tsx
+++ b/packages/propel/src/ui/nav-item/nav-item-header.stories.tsx
@@ -2,10 +2,10 @@ import { DirectionProvider } from "@base-ui/react/direction-provider";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Plus } from "lucide-react";
 import * as React from "react";
-import { expect, fn, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 
 import { IconButton } from "../icon-button/index";
-import { NavItem, NavItemHeader } from "./index";
+import { NavItem, NavItemGroup, NavItemHeader, NavItemPanel } from "./index";
 
 // The Figma header uses a filled caret-down (a solid triangle), not a stroked chevron.
 // lucide ships outline glyphs only, so the consumer supplies this small filled caret to
@@ -19,9 +19,23 @@ function CaretDown() {
   );
 }
 
+function DemoPanel() {
+  return (
+    <NavItemPanel>
+      <NavItem magnitude="lg" level={2}>
+        Unread
+      </NavItem>
+      <NavItem magnitude="lg" level={2}>
+        Snoozed
+      </NavItem>
+    </NavItemPanel>
+  );
+}
+
 const meta = {
-  title: "Components/NavItemHeader",
+  title: "UI/NavItemHeader",
   component: NavItemHeader,
+  subcomponents: { NavItemGroup, NavItemPanel },
   parameters: {
     design: {
       type: "figma",
@@ -40,6 +54,12 @@ const meta = {
       </div>
     ),
   ],
+  render: (args) => (
+    <NavItemGroup>
+      <NavItemHeader {...args} />
+      <DemoPanel />
+    </NavItemGroup>
+  ),
 } satisfies Meta<typeof NavItemHeader>;
 
 export default meta;
@@ -48,21 +68,28 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 /**
- * With a trailing action: an "add" `IconButton` sits at the inline-end via `inlineEndNode`. The
+ * With an inline-end action: an "add" `IconButton` sits at the inline-end via `inlineEndNode`. The
  * action is a sibling of the toggle button, so clicking it does not toggle the section (and there
  * is no nested-interactive a11y violation).
  */
 export const WithAction: Story = {
-  args: {
-    onClick: fn(),
-    inlineEndNode: (
-      <IconButton variant="tertiary" tone="neutral" magnitude="sm" aria-label="Add to Inbox">
-        <Plus />
-      </IconButton>
-    ),
+  render: (args) => {
+    const onOpenChange = fn();
+    return (
+      <NavItemGroup onOpenChange={onOpenChange}>
+        <NavItemHeader
+          {...args}
+          inlineEndNode={
+            <IconButton variant="tertiary" tone="neutral" magnitude="sm" aria-label="Add to Inbox">
+              <Plus />
+            </IconButton>
+          }
+        />
+        <DemoPanel />
+      </NavItemGroup>
+    );
   },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+  play: async ({ canvas }) => {
     const header = canvas.getByRole("button", { name: "Inbox" });
     const add = canvas.getByRole("button", { name: "Add to Inbox" });
 
@@ -71,7 +98,6 @@ export const WithAction: Story = {
 
     // Clicking the action does not toggle the section.
     await userEvent.click(add);
-    await expect(args.onClick).not.toHaveBeenCalled();
     await expect(header).toHaveAttribute("aria-expanded", "true");
 
     // Clicking the header still toggles.
@@ -83,8 +109,8 @@ export const WithAction: Story = {
 /** Uncontrolled: clicking toggles `aria-expanded` and rotates the chevron. */
 export const Uncontrolled: Story = {
   args: { onClick: fn() },
-  play: async ({ canvasElement }) => {
-    const header = within(canvasElement).getByRole("button", { name: "Inbox" });
+  play: async ({ canvas }) => {
+    const header = canvas.getByRole("button", { name: "Inbox" });
 
     // Sections start expanded by default.
     await expect(header).toHaveAttribute("aria-expanded", "true");
@@ -103,23 +129,59 @@ export const Uncontrolled: Story = {
 export const Collapsible: Story = {
   parameters: { controls: { disable: true } },
   render: (args) => {
-    const [expanded, setExpanded] = React.useState(true);
+    const [open, setOpen] = React.useState(true);
     return (
-      <div className="flex flex-col gap-1">
-        <NavItemHeader {...args} expanded={expanded} onExpandedChange={setExpanded}>
-          Inbox
-        </NavItemHeader>
-        {expanded ? (
-          <>
-            <NavItem magnitude="lg" level={2}>
-              Unread
-            </NavItem>
-            <NavItem magnitude="lg" level={2}>
-              Snoozed
-            </NavItem>
-          </>
-        ) : null}
-      </div>
+      <NavItemGroup open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
+        <NavItemHeader {...args}>Inbox</NavItemHeader>
+        <DemoPanel />
+      </NavItemGroup>
+    );
+  },
+};
+
+/**
+ * Base UI Collapsible hides the panel when the trigger collapses it and exposes the trigger state
+ * with `aria-expanded`. Tagged out of sidebar/docs/manifest while still running under the default
+ * `test` tag.
+ */
+export const CollapsiblePanelVisibility: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: (args) => (
+    <NavItemGroup>
+      <NavItemHeader {...args}>Inbox</NavItemHeader>
+      <NavItemPanel>
+        <NavItem magnitude="lg" level={2}>
+          Unread
+        </NavItem>
+      </NavItemPanel>
+    </NavItemGroup>
+  ),
+  play: async ({ canvas }) => {
+    const header = canvas.getByRole("button", { name: "Inbox" });
+    const unread = canvas.getByRole("button", { name: "Unread" });
+
+    await expect(header).toHaveAttribute("aria-expanded", "true");
+    await expect(unread).toBeVisible();
+
+    await userEvent.click(header);
+    await expect(header).toHaveAttribute("aria-expanded", "false");
+    await expect(unread).not.toBeVisible();
+  },
+};
+
+/**
+ * Controlled state: the root owns `open` and `onOpenChange`, while the header remains only the
+ * trigger row.
+ */
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => {
+    const [open, setOpen] = React.useState(true);
+    return (
+      <NavItemGroup open={open} onOpenChange={(nextOpen) => setOpen(nextOpen)}>
+        <NavItemHeader {...args}>{open ? "Collapse inbox" : "Expand inbox"}</NavItemHeader>
+        <DemoPanel />
+      </NavItemGroup>
     );
   },
 };
@@ -131,18 +193,23 @@ export const Collapsible: Story = {
  */
 export const KeyboardActivation: Story = {
   tags: ["!dev", "!autodocs", "!manifest"],
-  args: { onExpandedChange: fn() },
-  play: async ({ canvasElement, args }) => {
-    const header = within(canvasElement).getByRole("button", { name: "Inbox" });
+  render: (args) => (
+    <NavItemGroup onOpenChange={fn()}>
+      <NavItemHeader {...args} />
+      <DemoPanel />
+    </NavItemGroup>
+  ),
+  play: async ({ canvas }) => {
+    const header = canvas.getByRole("button", { name: "Inbox" });
 
     await userEvent.tab();
     await expect(header).toHaveFocus();
 
     await userEvent.keyboard("{Enter}");
-    await expect(args.onExpandedChange).toHaveBeenCalledTimes(1);
+    await expect(header).toHaveAttribute("aria-expanded", "false");
 
     await userEvent.keyboard(" ");
-    await expect(args.onExpandedChange).toHaveBeenCalledTimes(2);
+    await expect(header).toHaveAttribute("aria-expanded", "true");
   },
 };
 
@@ -152,16 +219,19 @@ export const RightToLeft: Story = {
   render: (args) => (
     <DirectionProvider direction="rtl">
       <div dir="rtl">
-        <NavItemHeader
-          {...args}
-          inlineEndNode={
-            <IconButton variant="tertiary" tone="neutral" magnitude="sm" aria-label="إضافة">
-              <Plus />
-            </IconButton>
-          }
-        >
-          الوارد
-        </NavItemHeader>
+        <NavItemGroup>
+          <NavItemHeader
+            {...args}
+            inlineEndNode={
+              <IconButton variant="tertiary" tone="neutral" magnitude="sm" aria-label="إضافة">
+                <Plus />
+              </IconButton>
+            }
+          >
+            الوارد
+          </NavItemHeader>
+          <DemoPanel />
+        </NavItemGroup>
       </div>
     </DirectionProvider>
   ),
diff --git a/packages/propel/src/ui/nav-item/nav-item-header.tsx b/packages/propel/src/ui/nav-item/nav-item-header.tsx
new file mode 100644
index 0000000..1c89cfa
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-header.tsx
@@ -0,0 +1,47 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { navItemHeaderToggleClass } from "./nav-item-context";
+import { navItemHeaderVariants } from "./variants";
+
+export type NavItemHeaderProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Trigger>,
+  "className" | "style" | "children"
+> & {
+  /** The section title. */
+  children: React.ReactNode;
+  /** The disclosure chevron glyph, sized to 16px. */
+  chevron: React.ReactNode;
+  /** Optional inline-end action. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/** A sidebar section header row. */
+export function NavItemHeader({ children, chevron, inlineEndNode, ...props }: NavItemHeaderProps) {
+  return (
+    <div className={cx(navItemHeaderVariants(), "[--node-size:1rem]")}>
+      <BaseCollapsible.Trigger
+        {...props}
+        type="button"
+        className={cx(navItemHeaderToggleClass, "group/nav-item-header-toggle")}
+      >
+        <span className="min-w-0 truncate text-body-xs-semibold">{children}</span>
+        <span
+          aria-hidden
+          className={cx(
+            "flex size-4 shrink-0 items-center justify-center text-icon-secondary [&>svg]:size-full",
+            "rotate-90 transition-transform group-data-panel-open/nav-item-header-toggle:rotate-0",
+            "rtl:-rotate-90 rtl:group-data-panel-open/nav-item-header-toggle:rotate-0",
+          )}
+        >
+          {chevron}
+        </span>
+      </BaseCollapsible.Trigger>
+      {inlineEndNode != null ? (
+        <NodeSlot className="text-icon-secondary">{inlineEndNode}</NodeSlot>
+      ) : null}
+    </div>
+  );
+}
diff --git a/packages/propel/src/ui/nav-item/nav-item-panel.tsx b/packages/propel/src/ui/nav-item/nav-item-panel.tsx
new file mode 100644
index 0000000..cbb7d8d
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item-panel.tsx
@@ -0,0 +1,12 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type * as React from "react";
+
+export type NavItemPanelProps = Omit<
+  React.ComponentProps<typeof BaseCollapsible.Panel>,
+  "className" | "style"
+>;
+
+/** Collapsible content controlled by the preceding `NavItemHeader`. */
+export function NavItemPanel(props: NavItemPanelProps) {
+  return <BaseCollapsible.Panel className="flex flex-col gap-1" {...props} />;
+}
diff --git a/packages/propel/src/ui/nav-item/nav-item.stories.tsx b/packages/propel/src/ui/nav-item/nav-item.stories.tsx
new file mode 100644
index 0000000..4303c71
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item.stories.tsx
@@ -0,0 +1,178 @@
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown, Inbox } from "lucide-react";
+import { expect, fn, userEvent } from "storybook/test";
+
+import { iconControl } from "../../storybook/icon-control";
+import { NavItem, NavItemChevron, NavItemCount, type NavItemMagnitude } from "./index";
+
+const MAGNITUDES: NavItemMagnitude[] = ["lg", "md"];
+
+const meta = {
+  title: "UI/NavItem",
+  component: NavItem,
+  subcomponents: { NavItemCount, NavItemChevron },
+  // Icon picker control for the inline-start icon.
+  argTypes: { inlineStartNode: iconControl },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1329-396",
+    },
+  },
+  args: {
+    children: "Inbox",
+    magnitude: "lg",
+    inlineStartNode: <Inbox />,
+  },
+  // The row stretches to its container; constrain it to a sidebar-like width.
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NavItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/** A row with an inline-end count chip and a disclosure chevron, like a collapsible group. */
+export const WithTrailing: Story = {
+  args: {
+    inlineEndNode: (
+      <>
+        <NavItemCount>6</NavItemCount>
+        <NavItemChevron icon={<ChevronDown />} />
+      </>
+    ),
+  },
+};
+
+/** The current page: filled surface, primary-tone label, and `aria-current="page"`. */
+export const Active: Story = {
+  args: { active: true },
+  play: async ({ canvas }) => {
+    const item = canvas.getByRole("button", { name: "Inbox" });
+    await expect(item).toHaveAttribute("aria-current", "page");
+  },
+};
+
+/** Rendered as a link via `render`, while keeping the selected semantics. */
+export const AsLink: Story = {
+  args: {
+    active: true,
+    render: <a href="#inbox" />,
+  },
+  play: async ({ canvas }) => {
+    const link = canvas.getByRole("link", { name: "Inbox" });
+    await expect(link).toHaveAttribute("href", "#inbox");
+    await expect(link).toHaveAttribute("aria-current", "page");
+    await expect(link).not.toHaveAttribute("type");
+  },
+};
+
+/**
+ * Keyboard ARIA pattern: NavItem renders a native `<button>`, so Tab moves focus to the row and
+ * both **Enter** and **Space** activate it (fire its click handler). The active row also exposes
+ * `aria-current="page"`. Tagged out of the sidebar/docs/manifest while still running under the
+ * default `test` tag.
+ */
+export const KeyboardActivation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { active: true, onClick: fn() },
+  play: async ({ canvas, args }) => {
+    const item = canvas.getByRole("button", { name: "Inbox" });
+
+    // The selected row exposes aria-current for assistive tech.
+    await expect(item).toHaveAttribute("aria-current", "page");
+
+    // Tab moves focus onto the row.
+    await userEvent.tab();
+    await expect(item).toHaveFocus();
+
+    // Enter activates the row (native button behavior).
+    await userEvent.keyboard("{Enter}");
+    await expect(args.onClick).toHaveBeenCalledTimes(1);
+
+    // Space activates it too.
+    await userEvent.keyboard(" ");
+    await expect(args.onClick).toHaveBeenCalledTimes(2);
+  },
+};
+
+/**
+ * The prop-driven states side by side at both magnitudes. Hover and pressed are CSS-driven
+ * (`hover:` / `active:`) — interact with the rows above to see them.
+ */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {MAGNITUDES.map((magnitude) => (
+        <div key={magnitude} className="flex flex-col gap-1">
+          <p className="text-11 text-tertiary uppercase">{magnitude}</p>
+          <NavItem {...args} magnitude={magnitude} inlineEndNode={<NavItemCount>6</NavItemCount>}>
+            Default
+          </NavItem>
+          <NavItem
+            {...args}
+            magnitude={magnitude}
+            active
+            inlineEndNode={<NavItemCount>6</NavItemCount>}
+          >
+            Selected
+          </NavItem>
+          <NavItem {...args} magnitude={magnitude} disabled>
+            Disabled
+          </NavItem>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/** The Figma `Level` axis: each step indents the row 8px further from the inline-start. */
+export const Levels: Story = {
+  argTypes: { level: { control: false }, children: { control: false } },
+  render: (args) => (
+    <div className="flex flex-col gap-1">
+      {([1, 2, 3, 4, 5] as const).map((level) => (
+        <NavItem key={level} {...args} level={level}>
+          {`Level ${level}`}
+        </NavItem>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * RTL: the inline-start icon moves to the inline-start (visually the right edge) and the disclosure
+ * chevron mirrors. Wrapped in Base UI's `DirectionProvider`.
+ */
+export const RightToLeft: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <DirectionProvider direction="rtl">
+      <div dir="rtl" className="flex flex-col gap-1">
+        <NavItem
+          {...args}
+          inlineEndNode={
+            <>
+              <NavItemCount>6</NavItemCount>
+              <NavItemChevron icon={<ChevronDown />} />
+            </>
+          }
+        >
+          الوارد
+        </NavItem>
+        <NavItem {...args} level={2}>
+          مستوى ٢
+        </NavItem>
+      </div>
+    </DirectionProvider>
+  ),
+};
diff --git a/packages/propel/src/ui/nav-item/nav-item.tsx b/packages/propel/src/ui/nav-item/nav-item.tsx
new file mode 100644
index 0000000..dc6a128
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/nav-item.tsx
@@ -0,0 +1,72 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cx, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { navItemVariants } from "./variants";
+
+export type NavItemMagnitude = NonNullable<VariantProps<typeof navItemVariants>["magnitude"]>;
+export type NavItemLevel = NonNullable<VariantProps<typeof navItemVariants>["level"]>;
+
+export type NavItemProps = Omit<useRender.ComponentProps<"button">, "className" | "style"> & {
+  /** The row label. */
+  children: React.ReactNode;
+  /** Size of the row label. */
+  magnitude: NavItemMagnitude;
+  /** Nesting depth. Defaults to `1`. */
+  level?: NavItemLevel;
+  /** Whether this row is the current/selected item. */
+  active?: boolean;
+  /** Leading content at the inline-start. */
+  inlineStartNode?: React.ReactNode;
+  /** Optional inline-end content. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/** A single sidebar navigation row. */
+export function NavItem({
+  children,
+  magnitude,
+  level = 1,
+  active = false,
+  inlineStartNode,
+  inlineEndNode,
+  render,
+  ...props
+}: NavItemProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    ...(render == null ? { type: "button" } : null),
+    "aria-current": active ? "page" : undefined,
+    className: navItemVariants({ magnitude, level }),
+    children: (
+      <>
+        {inlineStartNode ? (
+          <span
+            aria-hidden
+            className={cx(
+              "flex size-4 shrink-0 items-center justify-center text-icon-placeholder [&>svg]:size-full",
+              "group-active/nav-item:text-icon-primary group-data-active/nav-item:text-icon-primary",
+              "group-disabled/nav-item:text-icon-disabled group-aria-disabled/nav-item:text-icon-disabled",
+            )}
+          >
+            {inlineStartNode}
+          </span>
+        ) : null}
+        <span className="min-w-0 flex-1 truncate leading-snug font-medium">{children}</span>
+        {inlineEndNode ? (
+          <span className="flex shrink-0 items-center gap-2">{inlineEndNode}</span>
+        ) : null}
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps(props, defaultProps),
+    state: { active },
+    stateAttributesMapping: {
+      active: (value) => (value ? { "data-active": "" } : null),
+    },
+  });
+}
diff --git a/packages/propel/src/ui/nav-item/variants.ts b/packages/propel/src/ui/nav-item/variants.ts
new file mode 100644
index 0000000..0804be3
--- /dev/null
+++ b/packages/propel/src/ui/nav-item/variants.ts
@@ -0,0 +1,37 @@
+import { cva, cx } from "class-variance-authority";
+
+export const navItemVariants = cva(
+  cx(
+    "group/nav-item flex h-8 w-full items-center gap-2 rounded-lg ps-2 pe-2 text-start",
+    "bg-layer-transparent text-secondary transition-colors outline-none",
+    "cursor-pointer select-none",
+    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active active:text-primary",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-active:bg-layer-transparent-selected data-active:text-primary",
+    "disabled:pointer-events-none disabled:text-disabled aria-disabled:pointer-events-none aria-disabled:text-disabled",
+  ),
+  {
+    variants: {
+      magnitude: {
+        lg: "text-14",
+        md: "text-13",
+      },
+      level: {
+        1: "",
+        2: "ps-4",
+        3: "ps-6",
+        4: "ps-8",
+        5: "ps-10",
+      },
+    },
+  },
+);
+
+export const navItemHeaderVariants = cva(
+  cx(
+    "group/nav-item-header flex h-8 w-full items-center gap-1 rounded-lg ps-2 pe-1 text-start",
+    "bg-layer-transparent text-tertiary transition-colors",
+    "select-none hover:bg-layer-transparent-hover",
+    "has-[>button:disabled]:hover:bg-transparent has-[>button[aria-disabled=true]]:hover:bg-transparent",
+  ),
+);
diff --git a/packages/propel/src/ui/navigation-menu/index.tsx b/packages/propel/src/ui/navigation-menu/index.tsx
new file mode 100644
index 0000000..3662af1
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/index.tsx
@@ -0,0 +1,22 @@
+export { NavigationMenu, type NavigationMenuProps } from "./navigation-menu";
+export { NavigationMenuArrow, type NavigationMenuArrowProps } from "./navigation-menu-arrow";
+export {
+  NavigationMenuBackdrop,
+  type NavigationMenuBackdropProps,
+} from "./navigation-menu-backdrop";
+export { NavigationMenuContent, type NavigationMenuContentProps } from "./navigation-menu-content";
+export { NavigationMenuIcon, type NavigationMenuIconProps } from "./navigation-menu-icon";
+export { NavigationMenuItem, type NavigationMenuItemProps } from "./navigation-menu-item";
+export { NavigationMenuLink, type NavigationMenuLinkProps } from "./navigation-menu-link";
+export { NavigationMenuList, type NavigationMenuListProps } from "./navigation-menu-list";
+export { NavigationMenuPopup, type NavigationMenuPopupProps } from "./navigation-menu-popup";
+export { NavigationMenuPortal, type NavigationMenuPortalProps } from "./navigation-menu-portal";
+export {
+  NavigationMenuPositioner,
+  type NavigationMenuPositionerProps,
+} from "./navigation-menu-positioner";
+export { NavigationMenuTrigger, type NavigationMenuTriggerProps } from "./navigation-menu-trigger";
+export {
+  NavigationMenuViewport,
+  type NavigationMenuViewportProps,
+} from "./navigation-menu-viewport";
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-arrow.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-arrow.tsx
new file mode 100644
index 0000000..44713d5
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-arrow.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+export type NavigationMenuArrowProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Arrow>,
+  "className" | "style"
+>;
+
+/**
+ * The optional caret pointing from the popup back to the active trigger. Maps 1:1 to
+ * `NavigationMenu.Arrow`.
+ */
+export function NavigationMenuArrow(props: NavigationMenuArrowProps) {
+  return <BaseNavigationMenu.Arrow {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-backdrop.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-backdrop.tsx
new file mode 100644
index 0000000..4a39161
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-backdrop.tsx
@@ -0,0 +1,14 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuBackdropVariants } from "./variants";
+
+export type NavigationMenuBackdropProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Backdrop>,
+  "className" | "style"
+>;
+
+/** The dimmed overlay rendered behind the popup. Maps 1:1 to `NavigationMenu.Backdrop`. */
+export function NavigationMenuBackdrop(props: NavigationMenuBackdropProps) {
+  return <BaseNavigationMenu.Backdrop className={navigationMenuBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-content.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-content.tsx
new file mode 100644
index 0000000..9eae4d7
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-content.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+export type NavigationMenuContentProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Content>,
+  "className" | "style"
+>;
+
+/**
+ * The panel shown when an item is active; rendered into the shared `Viewport`. Structural — its own
+ * links own their layout. Maps 1:1 to `NavigationMenu.Content`.
+ */
+export function NavigationMenuContent(props: NavigationMenuContentProps) {
+  return <BaseNavigationMenu.Content {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-icon.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-icon.tsx
new file mode 100644
index 0000000..f9340d0
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-icon.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuIconVariants } from "./variants";
+
+export type NavigationMenuIconProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Icon>,
+  "className" | "style"
+>;
+
+/**
+ * The caret rendered inside a `Trigger`; rotates while the popup is open. Maps 1:1 to
+ * `NavigationMenu.Icon`.
+ */
+export function NavigationMenuIcon(props: NavigationMenuIconProps) {
+  return <BaseNavigationMenu.Icon className={navigationMenuIconVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-item.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-item.tsx
new file mode 100644
index 0000000..a1ba587
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-item.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+export type NavigationMenuItemProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Item>,
+  "className" | "style"
+>;
+
+/**
+ * A single item in the list, grouping a `Trigger`/`Link` with its `Content`. Structural, so it
+ * carries no chrome. Maps 1:1 to `NavigationMenu.Item`.
+ */
+export function NavigationMenuItem(props: NavigationMenuItemProps) {
+  return <BaseNavigationMenu.Item {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-link.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-link.tsx
new file mode 100644
index 0000000..98eaf37
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-link.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuLinkVariants } from "./variants";
+
+export type NavigationMenuLinkProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Link>,
+  "className" | "style"
+>;
+
+/**
+ * A navigable link, either as a top-level item or inside `Content`. Shares the nav-item chrome with
+ * `Trigger`. Maps 1:1 to `NavigationMenu.Link`.
+ */
+export function NavigationMenuLink(props: NavigationMenuLinkProps) {
+  return <BaseNavigationMenu.Link className={navigationMenuLinkVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-list.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-list.tsx
new file mode 100644
index 0000000..025a973
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-list.tsx
@@ -0,0 +1,14 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuListVariants } from "./variants";
+
+export type NavigationMenuListProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.List>,
+  "className" | "style"
+>;
+
+/** The horizontal row of top-level menu items. Maps 1:1 to `NavigationMenu.List`. */
+export function NavigationMenuList(props: NavigationMenuListProps) {
+  return <BaseNavigationMenu.List className={navigationMenuListVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-popup.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-popup.tsx
new file mode 100644
index 0000000..4c3f66b
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-popup.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuPopupVariants } from "./variants";
+
+export type NavigationMenuPopupProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Popup>,
+  "className" | "style"
+>;
+
+/**
+ * The shared anchored surface that houses the active item's `Content`. Maps 1:1 to
+ * `NavigationMenu.Popup`.
+ */
+export function NavigationMenuPopup(props: NavigationMenuPopupProps) {
+  return <BaseNavigationMenu.Popup className={navigationMenuPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-portal.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-portal.tsx
new file mode 100644
index 0000000..d19e94a
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-portal.tsx
@@ -0,0 +1,12 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+export type NavigationMenuPortalProps = React.ComponentProps<typeof BaseNavigationMenu.Portal>;
+
+/**
+ * Portals the positioned popup out to the end of `document.body`. Maps 1:1 to
+ * `NavigationMenu.Portal`.
+ */
+export function NavigationMenuPortal(props: NavigationMenuPortalProps) {
+  return <BaseNavigationMenu.Portal {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-positioner.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-positioner.tsx
new file mode 100644
index 0000000..cc3cedb
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-positioner.tsx
@@ -0,0 +1,19 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuPositionerVariants } from "./variants";
+
+export type NavigationMenuPositionerProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Positioner>,
+  "className" | "style"
+>;
+
+/**
+ * Anchors the popup to the active trigger via the underlying positioning engine. Maps 1:1 to
+ * `NavigationMenu.Positioner`.
+ */
+export function NavigationMenuPositioner(props: NavigationMenuPositionerProps) {
+  return (
+    <BaseNavigationMenu.Positioner className={navigationMenuPositionerVariants()} {...props} />
+  );
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-trigger.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-trigger.tsx
new file mode 100644
index 0000000..dee6cf8
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-trigger.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuTriggerVariants } from "./variants";
+
+export type NavigationMenuTriggerProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The button that opens an item's `Content`. Base UI reflects open state as `[data-popup-open]`.
+ * Maps 1:1 to `NavigationMenu.Trigger`.
+ */
+export function NavigationMenuTrigger(props: NavigationMenuTriggerProps) {
+  return <BaseNavigationMenu.Trigger className={navigationMenuTriggerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu-viewport.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu-viewport.tsx
new file mode 100644
index 0000000..aa556a3
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu-viewport.tsx
@@ -0,0 +1,17 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+import { navigationMenuViewportVariants } from "./variants";
+
+export type NavigationMenuViewportProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The morph container that resizes between items' `Content`, reading Base UI's `--popup-width`/
+ * `--popup-height`. Maps 1:1 to `NavigationMenu.Viewport`.
+ */
+export function NavigationMenuViewport(props: NavigationMenuViewportProps) {
+  return <BaseNavigationMenu.Viewport className={navigationMenuViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu.stories.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu.stories.tsx
new file mode 100644
index 0000000..f79c487
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu.stories.tsx
@@ -0,0 +1,177 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronDown } from "lucide-react";
+import type * as React from "react";
+import { expect, waitFor } from "storybook/test";
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIcon,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuPopup,
+  NavigationMenuPortal,
+  NavigationMenuPositioner,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC navigation-menu parts by hand — Root › List › Item(s), then
+// the shared Portal › Positioner › Popup › Viewport surface. The components-tier story uses the
+// ready-made `NavigationMenuPanel` to collapse that portal chain into one part.
+const meta = {
+  title: "UI/NavigationMenu",
+  component: NavigationMenu,
+  subcomponents: {
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuContent,
+    NavigationMenuLink,
+    NavigationMenuViewport,
+  },
+} satisfies Meta<typeof NavigationMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PRODUCT_LINKS = [
+  { href: "#issues", title: "Issues", description: "Track work items across projects." },
+  { href: "#cycles", title: "Cycles", description: "Time-boxed sprints for your team." },
+  { href: "#modules", title: "Modules", description: "Group related work into modules." },
+  { href: "#pages", title: "Pages", description: "Rich documents that live with your work." },
+];
+
+const RESOURCE_LINKS = [
+  { href: "#docs", title: "Documentation", description: "Guides and API references." },
+  { href: "#changelog", title: "Changelog", description: "What shipped recently." },
+];
+
+/** A menu with two dropdown items and a bare top-level link. */
+export const Default: Story = {
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTriggerRow>Product</NavigationMenuTriggerRow>
+          <NavigationMenuContent>
+            <ul className="grid w-[28rem] grid-cols-2 gap-1 p-2">
+              {PRODUCT_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    <span className="block text-14 font-medium text-primary">{item.title}</span>
+                    <span className="block text-12 text-tertiary">{item.description}</span>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuTriggerRow>Resources</NavigationMenuTriggerRow>
+          <NavigationMenuContent>
+            <ul className="flex w-72 flex-col gap-1 p-2">
+              {RESOURCE_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    <span className="block text-14 font-medium text-primary">{item.title}</span>
+                    <span className="block text-12 text-tertiary">{item.description}</span>
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+
+        <NavigationMenuItem>
+          <NavigationMenuLink render={<a href="#pricing" />}>Pricing</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <NavigationMenuPortal>
+        <NavigationMenuPositioner sideOffset={6}>
+          <NavigationMenuPopup>
+            <NavigationMenuViewport />
+          </NavigationMenuPopup>
+        </NavigationMenuPositioner>
+      </NavigationMenuPortal>
+    </NavigationMenu>
+  ),
+};
+
+/**
+ * Behavior test: hovering/clicking a trigger opens its content in the shared popup; the content's
+ * links are reachable by their unique text once open.
+ */
+export const OpenContent: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  parameters: {
+    a11y: {
+      // While the popup is open Base UI's NavigationMenu emits two internal patterns that axe flags
+      // as static-analysis false-positives:
+      //   * `aria-hidden-focus`: the visually-hidden focus-guard `<span tabindex="0" aria-hidden>`
+      //     sentinels that bracket the popup to wrap focus — intentional, not author markup.
+      //   * `landmark-unique`: the portaled popup renders a second `<nav>` landmark alongside the
+      //     root menu's `<nav>`; both are Base UI internals with no author-supplied label.
+      // Suppress just these two rules for this open-popup story.
+      config: {
+        rules: [
+          { id: "aria-hidden-focus", enabled: false },
+          { id: "landmark-unique", enabled: false },
+        ],
+      },
+    },
+  },
+  render: () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTriggerRow>Product</NavigationMenuTriggerRow>
+          <NavigationMenuContent>
+            <ul className="flex w-72 flex-col gap-1 p-2">
+              {PRODUCT_LINKS.map((item) => (
+                <li key={item.href}>
+                  <NavigationMenuLink render={<a href={item.href} />}>
+                    {item.title}
+                  </NavigationMenuLink>
+                </li>
+              ))}
+            </ul>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+
+      <NavigationMenuPortal>
+        <NavigationMenuPositioner sideOffset={6}>
+          <NavigationMenuPopup>
+            <NavigationMenuViewport />
+          </NavigationMenuPopup>
+        </NavigationMenuPositioner>
+      </NavigationMenuPortal>
+    </NavigationMenu>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const trigger = canvas.getByRole("button", { name: /Product/ });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    // Clicking the trigger opens its content; the popup is portaled, so query the document body.
+    await userEvent.click(trigger);
+    await expect(trigger).toHaveAttribute("aria-expanded", "true");
+    await waitFor(async () => {
+      await expect(document.body).toHaveTextContent("Cycles");
+    });
+  },
+};
+
+/** A trigger row that pairs the label with the rotating disclosure caret. */
+function NavigationMenuTriggerRow({ children }: { children: React.ReactNode }) {
+  return (
+    <NavigationMenuTrigger>
+      {children}
+      <NavigationMenuIcon>
+        <ChevronDown aria-hidden className="size-3.5" />
+      </NavigationMenuIcon>
+    </NavigationMenuTrigger>
+  );
+}
diff --git a/packages/propel/src/ui/navigation-menu/navigation-menu.tsx b/packages/propel/src/ui/navigation-menu/navigation-menu.tsx
new file mode 100644
index 0000000..61828cd
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/navigation-menu.tsx
@@ -0,0 +1,15 @@
+import { NavigationMenu as BaseNavigationMenu } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+
+export type NavigationMenuProps = Omit<
+  React.ComponentProps<typeof BaseNavigationMenu.Root>,
+  "className" | "style"
+>;
+
+/**
+ * The root of a navigation menu — a collection of links and dropdown menus for site navigation.
+ * Maps 1:1 to Base UI's `NavigationMenu.Root`.
+ */
+export function NavigationMenu(props: NavigationMenuProps) {
+  return <BaseNavigationMenu.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/navigation-menu/variants.ts b/packages/propel/src/ui/navigation-menu/variants.ts
new file mode 100644
index 0000000..bb3530a
--- /dev/null
+++ b/packages/propel/src/ui/navigation-menu/variants.ts
@@ -0,0 +1,55 @@
+import { cva, cx } from "class-variance-authority";
+
+// Navigation Menu is a verbatim wrapping of Base UI's parts. Base UI drives all
+// open/active state through `data-*` attributes, so there are no styling axes
+// (variant/tone/magnitude) to expose. The cva pairings below hold the static
+// chrome for every styled part in one place, with no `className` at the boundary.
+
+export const navigationMenuListVariants = cva("flex items-center gap-1");
+
+// Trigger and Link share the nav-item chrome: a pill that highlights on hover and
+// while its popup is open, with a focus-visible accent ring.
+export const navigationMenuTriggerVariants = cva(
+  cx(
+    "group inline-flex h-8 items-center gap-1 rounded-md px-3 text-13 font-medium text-secondary outline-none",
+    "hover:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-selected",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
+
+export const navigationMenuLinkVariants = cva(
+  cx(
+    "inline-flex h-8 items-center gap-1 rounded-md px-3 text-13 font-medium text-secondary outline-none",
+    "hover:bg-layer-transparent-hover data-popup-open:bg-layer-transparent-selected",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
+
+// Rotates the caret while the popup is open; reads the parent Trigger's
+// `group-data-popup-open` state.
+export const navigationMenuIconVariants = cva(
+  "flex size-4 items-center justify-center text-icon-secondary transition-transform group-data-popup-open:rotate-180",
+);
+
+export const navigationMenuPositionerVariants = cva("z-50 outline-none");
+
+export const navigationMenuPopupVariants = cva(
+  cx(
+    "origin-(--transform-origin) rounded-lg border-sm border-subtle bg-layer-1 p-2 shadow-overlay-100 outline-none",
+    "transition-[opacity,transform] duration-150",
+    "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+  ),
+);
+
+// Content morph container: Base UI exposes the active panel's size as
+// `--popup-width`/`--popup-height`, transitioned for a smooth resize between items.
+export const navigationMenuViewportVariants = cva(
+  "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[width,height] duration-150",
+);
+
+export const navigationMenuBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
diff --git a/packages/propel/src/ui/number-field/index.tsx b/packages/propel/src/ui/number-field/index.tsx
new file mode 100644
index 0000000..0b310f2
--- /dev/null
+++ b/packages/propel/src/ui/number-field/index.tsx
@@ -0,0 +1,5 @@
+export { NumberField, type NumberFieldProps } from "./number-field";
+export { NumberFieldDecrement, type NumberFieldDecrementProps } from "./number-field-decrement";
+export { NumberFieldGroup, type NumberFieldGroupProps } from "./number-field-group";
+export { NumberFieldIncrement, type NumberFieldIncrementProps } from "./number-field-increment";
+export { NumberFieldInput, type NumberFieldInputProps } from "./number-field-input";
diff --git a/packages/propel/src/ui/number-field/number-field-decrement.tsx b/packages/propel/src/ui/number-field/number-field-decrement.tsx
new file mode 100644
index 0000000..fba59b5
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field-decrement.tsx
@@ -0,0 +1,13 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type * as React from "react";
+
+import { numberFieldButtonVariants } from "./variants";
+
+export type NumberFieldDecrementProps = Omit<
+  React.ComponentProps<typeof BaseNumberField.Decrement>,
+  "className" | "style"
+>;
+
+export function NumberFieldDecrement(props: NumberFieldDecrementProps) {
+  return <BaseNumberField.Decrement className={numberFieldButtonVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/number-field/number-field-group.tsx b/packages/propel/src/ui/number-field/number-field-group.tsx
new file mode 100644
index 0000000..429e4c6
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field-group.tsx
@@ -0,0 +1,13 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type * as React from "react";
+
+import { numberFieldGroupVariants } from "./variants";
+
+export type NumberFieldGroupProps = Omit<
+  React.ComponentProps<typeof BaseNumberField.Group>,
+  "className" | "style"
+>;
+
+export function NumberFieldGroup(props: NumberFieldGroupProps) {
+  return <BaseNumberField.Group className={numberFieldGroupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/number-field/number-field-increment.tsx b/packages/propel/src/ui/number-field/number-field-increment.tsx
new file mode 100644
index 0000000..5103ff6
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field-increment.tsx
@@ -0,0 +1,13 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type * as React from "react";
+
+import { numberFieldButtonVariants } from "./variants";
+
+export type NumberFieldIncrementProps = Omit<
+  React.ComponentProps<typeof BaseNumberField.Increment>,
+  "className" | "style"
+>;
+
+export function NumberFieldIncrement(props: NumberFieldIncrementProps) {
+  return <BaseNumberField.Increment className={numberFieldButtonVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/number-field/number-field-input.tsx b/packages/propel/src/ui/number-field/number-field-input.tsx
new file mode 100644
index 0000000..5fe2cf3
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field-input.tsx
@@ -0,0 +1,13 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type * as React from "react";
+
+import { numberFieldInputVariants } from "./variants";
+
+export type NumberFieldInputProps = Omit<
+  React.ComponentProps<typeof BaseNumberField.Input>,
+  "className" | "style"
+>;
+
+export function NumberFieldInput(props: NumberFieldInputProps) {
+  return <BaseNumberField.Input className={numberFieldInputVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/number-field/number-field.stories.tsx b/packages/propel/src/ui/number-field/number-field.stories.tsx
new file mode 100644
index 0000000..7341ea9
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Minus, Plus } from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  NumberField,
+  NumberFieldDecrement,
+  NumberFieldGroup,
+  NumberFieldIncrement,
+  NumberFieldInput,
+} from "./index";
+
+// UI-tier story: composes the atomic parts (root + group + decrement + input +
+// increment). You own the button icons and accessible names. The components-tier story
+// shows the ready-made `NumberField` that wires the −/+ buttons for you.
+const meta = {
+  title: "UI/NumberField",
+  component: NumberField,
+  subcomponents: { NumberFieldGroup, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement },
+} satisfies Meta<typeof NumberField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Root holding a group with decrement / input / increment. */
+export const Default: Story = {
+  args: { defaultValue: 2, min: 1, max: 64 },
+  render: (args) => (
+    <NumberField {...args} aria-label="Number of instances">
+      <NumberFieldGroup>
+        <NumberFieldDecrement aria-label="Decrease instances">
+          <Minus aria-hidden className="size-4" />
+        </NumberFieldDecrement>
+        <NumberFieldInput aria-label="Number of instances" />
+        <NumberFieldIncrement aria-label="Increase instances">
+          <Plus aria-hidden className="size-4" />
+        </NumberFieldIncrement>
+      </NumberFieldGroup>
+    </NumberField>
+  ),
+};
+
+/** The +/- buttons step the value within `min`/`max`. */
+export const IncrementAndDecrement: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { defaultValue: 2, min: 1, max: 64 },
+  render: (args) => (
+    <NumberField {...args} aria-label="Number of instances">
+      <NumberFieldGroup>
+        <NumberFieldDecrement aria-label="Decrease instances">
+          <Minus aria-hidden className="size-4" />
+        </NumberFieldDecrement>
+        <NumberFieldInput aria-label="Number of instances" />
+        <NumberFieldIncrement aria-label="Increase instances">
+          <Plus aria-hidden className="size-4" />
+        </NumberFieldIncrement>
+      </NumberFieldGroup>
+    </NumberField>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const input = canvas.getByRole("textbox", { name: "Number of instances" });
+    await expect(input).toHaveDisplayValue("2");
+    await userEvent.click(canvas.getByRole("button", { name: "Increase instances" }));
+    await expect(input).toHaveDisplayValue("3");
+    await userEvent.click(canvas.getByRole("button", { name: "Decrease instances" }));
+    await expect(input).toHaveDisplayValue("2");
+  },
+};
diff --git a/packages/propel/src/ui/number-field/number-field.tsx b/packages/propel/src/ui/number-field/number-field.tsx
new file mode 100644
index 0000000..ed01344
--- /dev/null
+++ b/packages/propel/src/ui/number-field/number-field.tsx
@@ -0,0 +1,13 @@
+import { NumberField as BaseNumberField } from "@base-ui/react/number-field";
+import type * as React from "react";
+
+import { numberFieldRootVariants } from "./variants";
+
+export type NumberFieldProps = Omit<
+  React.ComponentProps<typeof BaseNumberField.Root>,
+  "className" | "style"
+>;
+
+export function NumberField(props: NumberFieldProps) {
+  return <BaseNumberField.Root className={numberFieldRootVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/number-field/variants.ts b/packages/propel/src/ui/number-field/variants.ts
new file mode 100644
index 0000000..376376e
--- /dev/null
+++ b/packages/propel/src/ui/number-field/variants.ts
@@ -0,0 +1,20 @@
+import { cva, cx } from "class-variance-authority";
+
+export const numberFieldRootVariants = cva("flex min-w-0 flex-col gap-1.5");
+export const numberFieldGroupVariants = cva(
+  cx(
+    "flex w-fit items-center overflow-hidden rounded-md border-sm border-subtle bg-layer-2",
+    "focus-within:border-accent-strong focus-within:ring-2 focus-within:ring-accent-strong/20",
+    "data-disabled:cursor-not-allowed data-disabled:border-subtle data-disabled:bg-layer-2",
+  ),
+);
+export const numberFieldButtonVariants = cva(
+  cx(
+    "flex size-8 items-center justify-center text-icon-secondary transition-colors outline-none",
+    "hover:bg-layer-transparent-hover focus-visible:bg-layer-transparent-hover",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const numberFieldInputVariants = cva(
+  "h-8 w-16 bg-transparent text-center text-14 text-primary outline-none disabled:text-disabled",
+);
diff --git a/packages/propel/src/ui/otp-field/index.tsx b/packages/propel/src/ui/otp-field/index.tsx
new file mode 100644
index 0000000..381d5ba
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/index.tsx
@@ -0,0 +1,3 @@
+export { OTPField, type OTPFieldProps } from "./otp-field";
+export { OTPFieldInput, type OTPFieldInputProps } from "./otp-field-input";
+export { OTPFieldSeparator, type OTPFieldSeparatorProps } from "./otp-field-separator";
diff --git a/packages/propel/src/ui/otp-field/otp-field-input.tsx b/packages/propel/src/ui/otp-field/otp-field-input.tsx
new file mode 100644
index 0000000..2d9918b
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/otp-field-input.tsx
@@ -0,0 +1,14 @@
+import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
+import type * as React from "react";
+
+import { otpFieldInputVariants } from "./variants";
+
+export type OTPFieldInputProps = Omit<
+  React.ComponentProps<typeof BaseOTPField.Input>,
+  "className" | "style"
+>;
+
+/** A single OTP character input cell. Maps 1:1 to `OTPFieldPreview.Input`. */
+export function OTPFieldInput(props: OTPFieldInputProps) {
+  return <BaseOTPField.Input className={otpFieldInputVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/otp-field/otp-field-separator.tsx b/packages/propel/src/ui/otp-field/otp-field-separator.tsx
new file mode 100644
index 0000000..5b3ae62
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/otp-field-separator.tsx
@@ -0,0 +1,14 @@
+import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
+import type * as React from "react";
+
+import { otpFieldSeparatorVariants } from "./variants";
+
+export type OTPFieldSeparatorProps = Omit<
+  React.ComponentProps<typeof BaseOTPField.Separator>,
+  "className" | "style"
+>;
+
+/** A divider between groups of slots, e.g. `123-456`. Maps 1:1 to `OTPFieldPreview.Separator`. */
+export function OTPFieldSeparator(props: OTPFieldSeparatorProps) {
+  return <BaseOTPField.Separator className={otpFieldSeparatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/otp-field/otp-field.stories.tsx b/packages/propel/src/ui/otp-field/otp-field.stories.tsx
new file mode 100644
index 0000000..69eb6e5
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/otp-field.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { OTPField, OTPFieldInput, OTPFieldSeparator } from "./index";
+
+// UI-tier story: composes the atomic parts (root + per-slot input, optionally with a
+// separator). Each `OTPFieldInput` resolves its slot index from the root context, so
+// you render one per slot. The components-tier story shows the ready-made `OTPField`
+// that emits `length` inputs for you.
+const meta = {
+  title: "UI/OTPField",
+  component: OTPField,
+  subcomponents: { OTPFieldInput, OTPFieldSeparator },
+} satisfies Meta<typeof OTPField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Base UI ignores `aria-label` on the first OTP slot and names it from `aria-labelledby` instead,
+// so a visually-hidden label backs the first slot while the rest carry an `aria-label`. Without
+// this the slot inputs fail axe's "Form elements must have labels".
+const FIRST_SLOT_LABEL_ID = "otp-first-slot-label";
+
+/** A six-slot code, each slot an atomic input. */
+export const Default: Story = {
+  args: { length: 6 },
+  render: (args) => (
+    <OTPField {...args} aria-label="Verification code">
+      <span id={FIRST_SLOT_LABEL_ID} className="sr-only">
+        Character 1
+      </span>
+      {Array.from({ length: args.length }, (_, index) =>
+        index === 0 ? (
+          <OTPFieldInput key={index} aria-labelledby={FIRST_SLOT_LABEL_ID} />
+        ) : (
+          <OTPFieldInput key={index} aria-label={`Character ${index + 1}`} />
+        ),
+      )}
+    </OTPField>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getAllByRole("textbox")).toHaveLength(6);
+  },
+};
+
+/** A separator splits the slots into groups, e.g. `123-456`. */
+export const Grouped: Story = {
+  args: { length: 6 },
+  render: (args) => (
+    <OTPField {...args} aria-label="Verification code">
+      <span id={FIRST_SLOT_LABEL_ID} className="sr-only">
+        Character 1
+      </span>
+      <OTPFieldInput aria-labelledby={FIRST_SLOT_LABEL_ID} />
+      <OTPFieldInput aria-label="Character 2" />
+      <OTPFieldInput aria-label="Character 3" />
+      <OTPFieldSeparator>-</OTPFieldSeparator>
+      <OTPFieldInput aria-label="Character 4" />
+      <OTPFieldInput aria-label="Character 5" />
+      <OTPFieldInput aria-label="Character 6" />
+    </OTPField>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getAllByRole("textbox")).toHaveLength(6);
+  },
+};
diff --git a/packages/propel/src/ui/otp-field/otp-field.tsx b/packages/propel/src/ui/otp-field/otp-field.tsx
new file mode 100644
index 0000000..077fb14
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/otp-field.tsx
@@ -0,0 +1,18 @@
+import { OTPFieldPreview as BaseOTPField } from "@base-ui/react/otp-field";
+import type * as React from "react";
+
+import { otpFieldRootVariants } from "./variants";
+
+export type OTPFieldProps = Omit<
+  React.ComponentProps<typeof BaseOTPField.Root>,
+  "className" | "style"
+>;
+
+/**
+ * A one-time-password / verification-code field composed of individual character slots. Drive the
+ * number of slots with the required `length` prop; render one `OTPFieldInput` per slot inside. Maps
+ * 1:1 to Base UI's `OTPFieldPreview.Root` (in preview upstream — its API may change).
+ */
+export function OTPField(props: OTPFieldProps) {
+  return <BaseOTPField.Root className={otpFieldRootVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/otp-field/variants.ts b/packages/propel/src/ui/otp-field/variants.ts
new file mode 100644
index 0000000..b86043a
--- /dev/null
+++ b/packages/propel/src/ui/otp-field/variants.ts
@@ -0,0 +1,16 @@
+import { cva, cx } from "class-variance-authority";
+
+/** Root: a horizontal row of character slots (and optional separators). */
+export const otpFieldRootVariants = cva("flex items-center gap-2");
+
+/** Input: a single character cell with the input chrome tokens. */
+export const otpFieldInputVariants = cva(
+  cx(
+    "size-9 rounded-md border-sm border-subtle bg-layer-2 text-center text-14 text-primary outline-none",
+    "focus:border-accent-strong focus:ring-2 focus:ring-accent-strong/20",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+
+/** Separator: a visual divider between groups of slots (e.g. `123-456`). */
+export const otpFieldSeparatorVariants = cva("text-tertiary");
diff --git a/packages/propel/src/ui/pagination/index.tsx b/packages/propel/src/ui/pagination/index.tsx
new file mode 100644
index 0000000..724a07b
--- /dev/null
+++ b/packages/propel/src/ui/pagination/index.tsx
@@ -0,0 +1,13 @@
+export { PaginationArrowButton, type PaginationArrowButtonProps } from "./pagination-arrow-button";
+export { PaginationEllipsis } from "./pagination-ellipsis";
+export { PaginationPageButton, type PaginationPageButtonProps } from "./pagination-page-button";
+export {
+  PaginationPerPageTrigger,
+  type PaginationPerPageTriggerProps,
+} from "./pagination-per-page-trigger";
+export {
+  arrowButtonVariants,
+  pageButtonVariants,
+  perPageTriggerVariants,
+  slotBase,
+} from "./variants";
diff --git a/packages/propel/src/ui/pagination/pagination-arrow-button.tsx b/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
new file mode 100644
index 0000000..9f7fbd1
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-arrow-button.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+import { arrowButtonVariants } from "./variants";
+
+export type PaginationArrowButtonProps = Omit<
+  React.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * A styled prev/next arrow button. Applies `arrowButtonVariants()`; pass the (directional,
+ * RTL-mirrored) arrow icon as `children` and wire `aria-label`/`disabled`/`onClick` through props.
+ */
+export function PaginationArrowButton(props: PaginationArrowButtonProps) {
+  return <button type="button" className={arrowButtonVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-ellipsis.tsx b/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
new file mode 100644
index 0000000..2af318f
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-ellipsis.tsx
@@ -0,0 +1,13 @@
+import { cx } from "class-variance-authority";
+import { MoreHorizontal } from "lucide-react";
+
+import { slotBase } from "./variants";
+
+/** A non-interactive gap marker between distant page numbers. */
+export function PaginationEllipsis() {
+  return (
+    <li aria-hidden className={cx(slotBase, "text-icon-placeholder")}>
+      <MoreHorizontal className="size-3.5 shrink-0" />
+    </li>
+  );
+}
diff --git a/packages/propel/src/ui/pagination/pagination-page-button.tsx b/packages/propel/src/ui/pagination/pagination-page-button.tsx
new file mode 100644
index 0000000..cc5d819
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-page-button.tsx
@@ -0,0 +1,19 @@
+import type * as React from "react";
+
+import { pageButtonVariants } from "./variants";
+
+export type PaginationPageButtonProps = Omit<
+  React.ComponentProps<"button">,
+  "className" | "style"
+> & {
+  /** Whether this button represents the current page (renders the pressed/selected fill). */
+  current: boolean;
+};
+
+/**
+ * A styled page-number button. Applies `pageButtonVariants({ current })`; pass the page number (or
+ * a loading spinner) as `children` and wire `aria-current`/`onClick` through props.
+ */
+export function PaginationPageButton({ current, ...props }: PaginationPageButtonProps) {
+  return <button type="button" className={pageButtonVariants({ current })} {...props} />;
+}
diff --git a/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx b/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
new file mode 100644
index 0000000..f313a4b
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination-per-page-trigger.tsx
@@ -0,0 +1,26 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+
+import { perPageTriggerVariants } from "./variants";
+
+export type PaginationPerPageTriggerProps = Omit<
+  useRender.ComponentProps<"button">,
+  "className" | "style"
+>;
+
+/**
+ * The per-page selector pill, styled as a `layer-3` Menu trigger. Compose a `Menu.Trigger` through
+ * the `render` prop; pass the visible size, the `sr-only` label, and the chevron as `children`.
+ */
+export function PaginationPerPageTrigger({ render, ...props }: PaginationPerPageTriggerProps) {
+  const defaultProps: useRender.ElementProps<"button"> = {
+    ...(render == null ? { type: "button" } : null),
+    className: perPageTriggerVariants(),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps(props, defaultProps),
+  });
+}
diff --git a/packages/propel/src/ui/pagination/pagination.stories.tsx b/packages/propel/src/ui/pagination/pagination.stories.tsx
new file mode 100644
index 0000000..fc2a34b
--- /dev/null
+++ b/packages/propel/src/ui/pagination/pagination.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { PaginationArrowButton, PaginationEllipsis, PaginationPageButton } from "./index";
+
+// UI-tier story: composes the ATOMIC pagination parts (each renders a single styled control).
+// The components-tier `Pagination` story owns the truncation logic, the per-page Menu and the
+// range label. Here you lay out the raw slots yourself inside a `<nav>` › `<ul>`: prev/next
+// arrows, page-number buttons (one marked `current`), and the non-interactive ellipsis.
+const meta = {
+  title: "UI/Pagination",
+  component: PaginationPageButton,
+  subcomponents: { PaginationArrowButton, PaginationEllipsis },
+  args: { current: false, children: "1" },
+} satisfies Meta<typeof PaginationPageButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PAGES = [1, 2, 3, 4, 5];
+
+/** A bare pager assembled from the atomic slots: prev/next arrows around a window of page buttons. */
+export const Default: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <nav aria-label="Pagination">
+      <ul className="flex items-center gap-0.5">
+        <li>
+          <PaginationArrowButton aria-label="Go to previous page" disabled>
+            <ChevronLeft />
+          </PaginationArrowButton>
+        </li>
+        {PAGES.map((n) => (
+          <li key={n}>
+            <PaginationPageButton
+              current={n === 1}
+              aria-current={n === 1 ? "page" : undefined}
+              aria-label={`Go to page ${n}`}
+              disabled={n === 1}
+            >
+              {n}
+            </PaginationPageButton>
+          </li>
+        ))}
+        <li>
+          <PaginationArrowButton aria-label="Go to next page">
+            <ChevronRight />
+          </PaginationArrowButton>
+        </li>
+      </ul>
+    </nav>
+  ),
+  play: async ({ canvas }) => {
+    // Page 1 is current (pressed fill + aria-current) and the prev arrow is disabled at the start.
+    const page1 = canvas.getByRole("button", { name: "Go to page 1" });
+    await expect(page1).toHaveAttribute("aria-current", "page");
+    await expect(canvas.getByRole("button", { name: "Go to previous page" })).toBeDisabled();
+  },
+};
+
+/** A long run truncated with the `PaginationEllipsis` gap marker: `1 2 3 … 100`. */
+export const WithEllipsis: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <nav aria-label="Pagination">
+      <ul className="flex items-center gap-0.5">
+        <li>
+          <PaginationArrowButton aria-label="Go to previous page">
+            <ChevronLeft />
+          </PaginationArrowButton>
+        </li>
+        {[1, 2, 3].map((n) => (
+          <li key={n}>
+            <PaginationPageButton
+              current={n === 2}
+              aria-current={n === 2 ? "page" : undefined}
+              aria-label={`Go to page ${n}`}
+              disabled={n === 2}
+            >
+              {n}
+            </PaginationPageButton>
+          </li>
+        ))}
+        <PaginationEllipsis />
+        <li>
+          <PaginationPageButton current={false} aria-label="Go to page 100">
+            100
+          </PaginationPageButton>
+        </li>
+        <li>
+          <PaginationArrowButton aria-label="Go to next page">
+            <ChevronRight />
+          </PaginationArrowButton>
+        </li>
+      </ul>
+    </nav>
+  ),
+};
+
+/** The standalone page-number button, with its `current` (pressed) state toggleable via controls. */
+export const PageButton: Story = {
+  render: (args) => <PaginationPageButton {...args} aria-label="Go to page 1" />,
+};
diff --git a/packages/propel/src/ui/pagination/variants.ts b/packages/propel/src/ui/pagination/variants.ts
new file mode 100644
index 0000000..bf74e56
--- /dev/null
+++ b/packages/propel/src/ui/pagination/variants.ts
@@ -0,0 +1,61 @@
+import { cva, cx } from "class-variance-authority";
+
+// Shared 24px slot used by page numbers, the prev/next buttons and the ellipsis.
+// 24px tall with a 24px minimum width so single digits stay square (per Figma),
+// but the slot grows for wider content — multi-digit page numbers like `100` get
+// their own width plus horizontal padding rather than clipping a fixed square.
+// `radius/sm` for page numbers, `radius/md` for the arrow buttons.
+export const slotBase = cx(
+  "inline-flex h-6 w-auto min-w-6 shrink-0 items-center justify-center px-1",
+  "text-13 text-primary outline-none",
+);
+
+export const pageButtonVariants = cva(
+  cx(
+    slotBase,
+    "rounded-sm bg-layer-transparent",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:pointer-events-none disabled:text-disabled",
+  ),
+  {
+    variants: {
+      // The current page reads as pressed: it sits on the `transparent-active` fill
+      // (Figma "Selected") and is not interactive. It's marked `disabled` to block
+      // re-navigation, but the Figma "Selected" state keeps `text/primary` — so it
+      // must override the `disabled:text-disabled` dim that the base applies.
+      current: {
+        true: "bg-layer-transparent-active disabled:text-primary",
+        false: "",
+      },
+    },
+  },
+);
+
+export const arrowButtonVariants = cva(
+  cx(
+    slotBase,
+    "rounded-md bg-layer-transparent text-icon-secondary",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "disabled:pointer-events-none disabled:text-icon-disabled",
+    // Prev/next arrows are directional — mirror them under RTL so "previous" always
+    // points toward the start of the run.
+    "[&_svg]:size-4 [&_svg]:shrink-0 rtl:[&_svg]:-scale-x-100",
+  ),
+);
+
+// The per-page selector trigger (Figma `4762-503`): a `layer-3` pill, 24px tall,
+// `radius/md`, holding the current size + a chevron-down. It's the trigger for the
+// page-size Menu, so it gets a focus ring and rotates its chevron while the menu
+// is open.
+export const perPageTriggerVariants = cva(
+  cx(
+    "inline-flex h-6 min-w-10 cursor-default items-center justify-center gap-1 rounded-md px-2",
+    "bg-layer-3 text-13 font-medium text-secondary outline-none",
+    "hover:bg-layer-3-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-icon-secondary",
+    "[&[data-popup-open]_svg]:rotate-180",
+  ),
+);
diff --git a/packages/propel/src/ui/pill/icon-pill.tsx b/packages/propel/src/ui/pill/icon-pill.tsx
new file mode 100644
index 0000000..a13817a
--- /dev/null
+++ b/packages/propel/src/ui/pill/icon-pill.tsx
@@ -0,0 +1,44 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { type PillMagnitude } from "./pill-shared";
+import { PillSpinner } from "./pill-spinner";
+import { iconPillVariants } from "./variants";
+
+export type IconPillProps = Omit<
+  React.ComponentProps<typeof BaseButton>,
+  "className" | "style" | "children"
+> & {
+  /** Box scale. */
+  magnitude: PillMagnitude;
+  /** The icon, sized and tinted by the pill. */
+  children: React.ReactNode;
+  /** Accessible name — required because the content is an icon. */
+  "aria-label": string;
+  /** Busy state: swaps the icon for a spinner and blocks clicks. */
+  loading?: boolean;
+};
+
+/** An icon-only square pill. */
+export function IconPill({
+  magnitude,
+  loading = false,
+  children,
+  type = "button",
+  disabled,
+  ...props
+}: IconPillProps) {
+  return (
+    <BaseButton
+      type={type}
+      {...props}
+      disabled={disabled || loading}
+      focusableWhenDisabled={loading ? true : undefined}
+      aria-busy={loading ? true : undefined}
+      className={iconPillVariants({ magnitude })}
+    >
+      {loading ? <PillSpinner /> : <NodeSlot aria-hidden>{children}</NodeSlot>}
+    </BaseButton>
+  );
+}
diff --git a/packages/propel/src/ui/pill/index.tsx b/packages/propel/src/ui/pill/index.tsx
new file mode 100644
index 0000000..bf04565
--- /dev/null
+++ b/packages/propel/src/ui/pill/index.tsx
@@ -0,0 +1,3 @@
+export { IconPill, type IconPillProps } from "./icon-pill";
+export { PillButton, type PillButtonProps, type PillMagnitude } from "./pill";
+export { PillSwitch, type PillSwitchProps } from "./pill-switch";
diff --git a/packages/propel/src/ui/pill/pill-label.tsx b/packages/propel/src/ui/pill/pill-label.tsx
new file mode 100644
index 0000000..b15b0f0
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill-label.tsx
@@ -0,0 +1,5 @@
+import type * as React from "react";
+
+export function PillLabel({ children }: { children: React.ReactNode }) {
+  return <span className="min-w-0 truncate">{children}</span>;
+}
diff --git a/packages/propel/src/ui/pill/pill-shared.tsx b/packages/propel/src/ui/pill/pill-shared.tsx
new file mode 100644
index 0000000..86a0b31
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill-shared.tsx
@@ -0,0 +1,13 @@
+import { type VariantProps } from "class-variance-authority";
+
+import { labelPillSize } from "./variants";
+
+export { labelPillSize, pillBase } from "./variants";
+
+export type PillMagnitude = NonNullable<VariantProps<typeof labelPillSize>["magnitude"]>;
+
+export const labelFontByMagnitude: Record<PillMagnitude, string> = {
+  sm: "text-12",
+  md: "text-13",
+  lg: "text-body-sm-regular",
+};
diff --git a/packages/propel/src/ui/pill/pill-spinner.tsx b/packages/propel/src/ui/pill/pill-spinner.tsx
new file mode 100644
index 0000000..94d904c
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill-spinner.tsx
@@ -0,0 +1,5 @@
+import { LoaderCircle } from "lucide-react";
+
+export function PillSpinner() {
+  return <LoaderCircle aria-hidden className="size-(--node-size) shrink-0 animate-spin" />;
+}
diff --git a/packages/propel/src/ui/pill/pill-switch.tsx b/packages/propel/src/ui/pill/pill-switch.tsx
new file mode 100644
index 0000000..da092c8
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill-switch.tsx
@@ -0,0 +1,51 @@
+import { Toggle } from "@base-ui/react/toggle";
+import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { PillLabel } from "./pill-label";
+import { labelFontByMagnitude, labelPillSize, type PillMagnitude } from "./pill-shared";
+
+const pillSwitchColors = cx(
+  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
+  "hover:border-strong hover:bg-layer-2-hover",
+  "data-pressed:border-strong data-pressed:bg-layer-2-selected data-pressed:text-primary",
+  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+);
+
+export type PillSwitchProps<Value extends string = string> = Omit<
+  BaseToggleTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /** Box scale. `sm` 20px / `md` 24px / `lg` 28px. */
+  magnitude: PillMagnitude;
+  /** A 14px node before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** A 14px node after the label. */
+  inlineEndNode?: React.ReactNode;
+};
+
+/** A toggle pill. */
+export function PillSwitch<Value extends string = string>({
+  magnitude,
+  inlineStartNode,
+  inlineEndNode,
+  children,
+  ...props
+}: PillSwitchProps<Value>) {
+  return (
+    <Toggle
+      className={cx(
+        labelPillSize({ magnitude }),
+        labelFontByMagnitude[magnitude],
+        pillSwitchColors,
+      )}
+      {...props}
+    >
+      {inlineStartNode ? <NodeSlot aria-hidden>{inlineStartNode}</NodeSlot> : null}
+      <PillLabel>{children}</PillLabel>
+      {inlineEndNode ? <NodeSlot aria-hidden>{inlineEndNode}</NodeSlot> : null}
+    </Toggle>
+  );
+}
diff --git a/packages/propel/src/ui/pill/pill.stories.tsx b/packages/propel/src/ui/pill/pill.stories.tsx
new file mode 100644
index 0000000..77eeafa
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill.stories.tsx
@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Check, Plus, Tag, X } from "lucide-react";
+import { expect, fn, userEvent } from "storybook/test";
+
+import { IconPill, PillButton, PillSwitch } from "./index";
+
+const MAGNITUDES = ["sm", "md", "lg"] as const;
+
+// Module-scope spies so the `play` function can assert against the same references the
+// `render` wires to the buttons.
+const clickSpies = { onClick: fn(), onLoadingClick: fn() };
+
+const meta = {
+  title: "UI/Pill",
+  component: PillButton,
+  subcomponents: { PillSwitch, IconPill },
+  args: { magnitude: "md", children: "Label" },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1121-11",
+    },
+  },
+} satisfies Meta<typeof PillButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A pill-shaped button. Holds a label with optional inline-start/end nodes. */
+export const Button: Story = {
+  args: { magnitude: "md", inlineStartNode: <Plus />, children: "Add label" },
+};
+
+/** Every magnitude (`sm` / `md` / `lg`) of `PillButton`. */
+export const Magnitudes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <PillButton key={magnitude} magnitude={magnitude} inlineStartNode={<Tag />}>
+          {magnitude}
+        </PillButton>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * `PillButton` states. Default / hover / active are the chip darkening its fill + border (hover and
+ * active are forced here via the pseudo-states addon); `disabled` and `loading` drop to a
+ * transparent fill with a dimmed label, and `loading` swaps the inline-start node for a spinner.
+ */
+export const States: Story = {
+  parameters: {
+    controls: { disable: true },
+    pseudo: { hover: ["#pill-hover"], active: ["#pill-active"] },
+  },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <PillButton magnitude="md" inlineStartNode={<Tag />}>
+        Default
+      </PillButton>
+      <PillButton id="pill-hover" magnitude="md" inlineStartNode={<Tag />}>
+        Hover
+      </PillButton>
+      <PillButton id="pill-active" magnitude="md" inlineStartNode={<Tag />}>
+        Active
+      </PillButton>
+      <PillButton magnitude="md" inlineStartNode={<Tag />} disabled>
+        Disabled
+      </PillButton>
+      <PillButton magnitude="md" loading>
+        Loading
+      </PillButton>
+    </div>
+  ),
+};
+
+/**
+ * `PillSwitch` is a toggle: the selected look is its pressed state. Use it for segmented on/off
+ * choices (e.g. display properties in a settings menu).
+ */
+export const Switch: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      <PillSwitch magnitude="md" inlineStartNode={<Tag />}>
+        Off
+      </PillSwitch>
+      <PillSwitch magnitude="md" inlineStartNode={<Check />} defaultPressed>
+        On
+      </PillSwitch>
+    </div>
+  ),
+};
+
+/**
+ * Icon-only square pills. Require an `aria-label`. `disabled` drops to a transparent fill with the
+ * disabled icon color, and `loading` swaps the icon for a spinner tinted with that same disabled
+ * icon color.
+ */
+export const Icons: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <IconPill key={magnitude} magnitude={magnitude} aria-label={`Close ${magnitude}`}>
+          <X />
+        </IconPill>
+      ))}
+      <IconPill magnitude="md" aria-label="Add (disabled)" disabled>
+        <Plus />
+      </IconPill>
+      <IconPill magnitude="md" aria-label="Add (loading)" loading>
+        <Plus />
+      </IconPill>
+    </div>
+  ),
+};
+
+/**
+ * Clicking a `PillButton` fires its handler, and a `loading` pill blocks the click while staying
+ * focusable (`aria-busy`). Tagged out of the sidebar/docs/manifest but still run under the default
+ * `test` tag.
+ */
+export const ButtonClicks: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex gap-3">
+      <PillButton magnitude="md" onClick={clickSpies.onClick}>
+        Click me
+      </PillButton>
+      <PillButton magnitude="md" loading onClick={clickSpies.onLoadingClick}>
+        Busy
+      </PillButton>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const { onClick, onLoadingClick } = clickSpies;
+    onClick.mockClear();
+    onLoadingClick.mockClear();
+
+    const button = canvas.getByRole("button", { name: "Click me" });
+    await userEvent.click(button);
+    await expect(onClick).toHaveBeenCalledTimes(1);
+
+    const busy = canvas.getByRole("button", { name: "Busy" });
+    await expect(busy).toHaveAttribute("aria-busy", "true");
+    // The busy pill is focusable but does not act on click.
+    await userEvent.click(busy);
+    await expect(onLoadingClick).not.toHaveBeenCalled();
+  },
+};
+
+/**
+ * `PillSwitch` reports `aria-pressed` and flips it on click (Base UI `Toggle`). Tagged out of the
+ * sidebar/docs/manifest but still run under the default `test` tag.
+ */
+export const SwitchToggles: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <PillSwitch magnitude="md" inlineStartNode={<Tag />}>
+      Toggle me
+    </PillSwitch>
+  ),
+  play: async ({ canvas }) => {
+    const toggle = canvas.getByRole("button", { name: "Toggle me" });
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+  },
+};
diff --git a/packages/propel/src/ui/pill/pill.tsx b/packages/propel/src/ui/pill/pill.tsx
new file mode 100644
index 0000000..29b8d76
--- /dev/null
+++ b/packages/propel/src/ui/pill/pill.tsx
@@ -0,0 +1,67 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import { NodeSlot } from "../../internal/node-slot";
+import { PillLabel } from "./pill-label";
+import { labelFontByMagnitude, labelPillSize, type PillMagnitude } from "./pill-shared";
+import { PillSpinner } from "./pill-spinner";
+
+export type { PillMagnitude } from "./pill-shared";
+
+const pillButtonColors = cx(
+  "cursor-pointer border-subtle-1 bg-layer-2 text-secondary",
+  "hover:border-strong hover:bg-layer-2-hover",
+  "active:border-strong active:bg-layer-2-active active:text-primary",
+  "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
+  "aria-busy:cursor-default aria-busy:border-subtle-1 aria-busy:bg-layer-transparent aria-busy:text-disabled",
+);
+
+export type PillButtonProps = Omit<
+  React.ComponentProps<typeof BaseButton>,
+  "className" | "style"
+> & {
+  /** Box scale. `sm` 20px / `md` 24px / `lg` 28px. */
+  magnitude: PillMagnitude;
+  /** A 14px node before the label. */
+  inlineStartNode?: React.ReactNode;
+  /** A 14px node after the label. */
+  inlineEndNode?: React.ReactNode;
+  /** Busy state: swaps the inline-start node for a spinner and blocks clicks. */
+  loading?: boolean;
+};
+
+/** A pill-shaped button. */
+export function PillButton({
+  magnitude,
+  inlineStartNode,
+  inlineEndNode,
+  loading = false,
+  children,
+  type = "button",
+  disabled,
+  ...props
+}: PillButtonProps) {
+  return (
+    <BaseButton
+      type={type}
+      {...props}
+      disabled={disabled || loading}
+      focusableWhenDisabled={loading ? true : undefined}
+      aria-busy={loading ? true : undefined}
+      className={cx(
+        labelPillSize({ magnitude }),
+        labelFontByMagnitude[magnitude],
+        pillButtonColors,
+      )}
+    >
+      {loading ? (
+        <PillSpinner />
+      ) : inlineStartNode ? (
+        <NodeSlot aria-hidden>{inlineStartNode}</NodeSlot>
+      ) : null}
+      <PillLabel>{children}</PillLabel>
+      {!loading && inlineEndNode ? <NodeSlot aria-hidden>{inlineEndNode}</NodeSlot> : null}
+    </BaseButton>
+  );
+}
diff --git a/packages/propel/src/ui/pill/variants.ts b/packages/propel/src/ui/pill/variants.ts
new file mode 100644
index 0000000..f878dd8
--- /dev/null
+++ b/packages/propel/src/ui/pill/variants.ts
@@ -0,0 +1,36 @@
+import { cva, cx } from "class-variance-authority";
+
+export const pillBase = cx(
+  "inline-flex shrink-0 items-center justify-center rounded-md border-sm outline-none",
+  "transition-colors focus-visible:ring-2 focus-visible:ring-accent-strong",
+);
+
+export const labelPillSize = cva(cx(pillBase, "max-w-[120px] gap-1 py-1 [--node-size:0.875rem]"), {
+  variants: {
+    magnitude: {
+      sm: "h-5 px-1.5",
+      md: "h-6 px-1.5",
+      lg: "h-7 px-2",
+    },
+  },
+});
+
+export const iconPillVariants = cva(
+  cx(
+    pillBase,
+    "cursor-pointer border-subtle-1 bg-layer-2 text-icon-secondary",
+    "hover:border-strong hover:bg-layer-2-hover",
+    "active:border-strong active:bg-layer-2-active",
+    "disabled:cursor-not-allowed disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-icon-disabled",
+    "aria-busy:cursor-default aria-busy:border-subtle-1 aria-busy:bg-layer-transparent aria-busy:text-icon-disabled",
+  ),
+  {
+    variants: {
+      magnitude: {
+        sm: "size-5 [--node-size:0.875rem]",
+        md: "size-6 [--node-size:1rem]",
+        lg: "size-7 [--node-size:1rem]",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/popover/index.tsx b/packages/propel/src/ui/popover/index.tsx
new file mode 100644
index 0000000..47959ed
--- /dev/null
+++ b/packages/propel/src/ui/popover/index.tsx
@@ -0,0 +1,11 @@
+export { Popover, type PopoverProps } from "./popover";
+export { PopoverArrow, type PopoverArrowProps } from "./popover-arrow";
+export { PopoverBackdrop, type PopoverBackdropProps } from "./popover-backdrop";
+export { PopoverClose, type PopoverCloseProps } from "./popover-close";
+export { PopoverDescription, type PopoverDescriptionProps } from "./popover-description";
+export { PopoverPopup, type PopoverPopupProps } from "./popover-popup";
+export { PopoverPortal } from "./popover-portal";
+export { PopoverPositioner, type PopoverPositionerProps } from "./popover-positioner";
+export { PopoverTitle, type PopoverTitleProps } from "./popover-title";
+export { PopoverTrigger, type PopoverTriggerProps } from "./popover-trigger";
+export { PopoverViewport, type PopoverViewportProps } from "./popover-viewport";
diff --git a/packages/propel/src/ui/popover/popover-arrow.tsx b/packages/propel/src/ui/popover/popover-arrow.tsx
new file mode 100644
index 0000000..f30233f
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-arrow.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverArrowVariants } from "./variants";
+
+/** Props for {@link PopoverArrow}; 1:1 with Base UI `Popover.Arrow`. */
+export type PopoverArrowProps = Omit<
+  React.ComponentProps<typeof BasePopover.Arrow>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Arrow`. */
+export function PopoverArrow(props: PopoverArrowProps) {
+  return <BasePopover.Arrow className={popoverArrowVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-backdrop.tsx b/packages/propel/src/ui/popover/popover-backdrop.tsx
new file mode 100644
index 0000000..992cb5c
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-backdrop.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverBackdropVariants } from "./variants";
+
+/** Props for {@link PopoverBackdrop}; 1:1 with Base UI `Popover.Backdrop`. */
+export type PopoverBackdropProps = Omit<
+  React.ComponentProps<typeof BasePopover.Backdrop>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Backdrop`. */
+export function PopoverBackdrop(props: PopoverBackdropProps) {
+  return <BasePopover.Backdrop className={popoverBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-close.tsx b/packages/propel/src/ui/popover/popover-close.tsx
new file mode 100644
index 0000000..23c55cc
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-close.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverCloseVariants } from "./variants";
+
+/** Props for {@link PopoverClose}; 1:1 with Base UI `Popover.Close`. */
+export type PopoverCloseProps = Omit<
+  React.ComponentProps<typeof BasePopover.Close>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Close`. */
+export function PopoverClose(props: PopoverCloseProps) {
+  return <BasePopover.Close className={popoverCloseVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-description.tsx b/packages/propel/src/ui/popover/popover-description.tsx
new file mode 100644
index 0000000..d50d681
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-description.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverDescriptionVariants } from "./variants";
+
+/** Props for {@link PopoverDescription}; 1:1 with Base UI `Popover.Description`. */
+export type PopoverDescriptionProps = Omit<
+  React.ComponentProps<typeof BasePopover.Description>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Description`. */
+export function PopoverDescription(props: PopoverDescriptionProps) {
+  return <BasePopover.Description className={popoverDescriptionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-popup.tsx b/packages/propel/src/ui/popover/popover-popup.tsx
new file mode 100644
index 0000000..56df446
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-popup.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverPopupVariants } from "./variants";
+
+/** Props for {@link PopoverPopup}; 1:1 with Base UI `Popover.Popup`. */
+export type PopoverPopupProps = Omit<
+  React.ComponentProps<typeof BasePopover.Popup>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Popup`. */
+export function PopoverPopup(props: PopoverPopupProps) {
+  return <BasePopover.Popup className={popoverPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-portal.tsx b/packages/propel/src/ui/popover/popover-portal.tsx
new file mode 100644
index 0000000..cfaab17
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-portal.tsx
@@ -0,0 +1,4 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+
+/** 1:1 wrapper around Base UI `Popover.Portal`. */
+export const PopoverPortal = BasePopover.Portal;
diff --git a/packages/propel/src/ui/popover/popover-positioner.tsx b/packages/propel/src/ui/popover/popover-positioner.tsx
new file mode 100644
index 0000000..ee7bf47
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-positioner.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverPositionerVariants } from "./variants";
+
+/** Props for {@link PopoverPositioner}; 1:1 with Base UI `Popover.Positioner`. */
+export type PopoverPositionerProps = Omit<
+  React.ComponentProps<typeof BasePopover.Positioner>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Positioner`. */
+export function PopoverPositioner(props: PopoverPositionerProps) {
+  return <BasePopover.Positioner className={popoverPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-title.tsx b/packages/propel/src/ui/popover/popover-title.tsx
new file mode 100644
index 0000000..40b9255
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-title.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverTitleVariants } from "./variants";
+
+/** Props for {@link PopoverTitle}; 1:1 with Base UI `Popover.Title`. */
+export type PopoverTitleProps = Omit<
+  React.ComponentProps<typeof BasePopover.Title>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Title`. */
+export function PopoverTitle(props: PopoverTitleProps) {
+  return <BasePopover.Title className={popoverTitleVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-trigger.tsx b/packages/propel/src/ui/popover/popover-trigger.tsx
new file mode 100644
index 0000000..b5ee16c
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-trigger.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+export type PopoverTriggerProps = Omit<
+  React.ComponentProps<typeof BasePopover.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The element that opens the popover. Renders a `<button>` by default; pass `render` to project the
+ * trigger onto your own element.
+ */
+export function PopoverTrigger(props: PopoverTriggerProps) {
+  return <BasePopover.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover-viewport.tsx b/packages/propel/src/ui/popover/popover-viewport.tsx
new file mode 100644
index 0000000..412ffef
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover-viewport.tsx
@@ -0,0 +1,15 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type * as React from "react";
+
+import { popoverViewportVariants } from "./variants";
+
+/** Props for {@link PopoverViewport}; 1:1 with Base UI `Popover.Viewport`. */
+export type PopoverViewportProps = Omit<
+  React.ComponentProps<typeof BasePopover.Viewport>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Popover.Viewport`. */
+export function PopoverViewport(props: PopoverViewportProps) {
+  return <BasePopover.Viewport className={popoverViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/popover.stories.tsx b/packages/propel/src/ui/popover/popover.stories.tsx
new file mode 100644
index 0000000..0560ec6
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover.stories.tsx
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Popover,
+  PopoverArrow,
+  PopoverBackdrop,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTitle,
+  PopoverTrigger,
+  PopoverViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC popover parts by hand (Root › Trigger ›
+// Portal › Positioner › Popup, plus Viewport/Title/Description/Arrow/Close). The
+// components-tier `PopoverContent` ready-made composes the portal/positioner/panel
+// surface for you.
+const triggerClass =
+  "inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none";
+
+const meta = {
+  title: "UI/Popover",
+  component: Popover,
+  subcomponents: {
+    PopoverTrigger,
+    PopoverPortal,
+    PopoverBackdrop,
+    PopoverPositioner,
+    PopoverViewport,
+    PopoverPopup,
+    PopoverTitle,
+    PopoverDescription,
+    PopoverArrow,
+    PopoverClose,
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: trigger opens an anchored popup with title, body, and arrow. */
+export const Anatomy: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger render={<button type="button" className={triggerClass} />}>
+        About
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverPositioner side="bottom" sideOffset={8}>
+          <PopoverPopup>
+            <PopoverViewport>
+              <div className="flex w-56 flex-col gap-1 p-2">
+                <PopoverTitle>Keyboard shortcuts</PopoverTitle>
+                <PopoverDescription>
+                  Press <kbd>?</kbd> anywhere to see the full list.
+                </PopoverDescription>
+              </div>
+            </PopoverViewport>
+            <PopoverArrow />
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </Popover>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "About" }));
+    await waitFor(() =>
+      expect(within(document.body).getByText("Keyboard shortcuts")).toBeInTheDocument(),
+    );
+  },
+};
+
+/**
+ * `modal` renders a `PopoverBackdrop` and traps focus, so the popover behaves like a lightweight
+ * dialog and `PopoverClose` dismisses it.
+ */
+export const Modal: Story = {
+  render: () => (
+    <Popover modal>
+      <PopoverTrigger render={<button type="button" className={triggerClass} />}>
+        Open menu
+      </PopoverTrigger>
+      <PopoverPortal>
+        <PopoverBackdrop />
+        <PopoverPositioner side="bottom" sideOffset={8}>
+          <PopoverPopup>
+            <div className="flex w-56 flex-col gap-2 p-2">
+              <PopoverTitle>Confirm</PopoverTitle>
+              <PopoverDescription>Focus is trapped while this is open.</PopoverDescription>
+              <div className="flex justify-end">
+                <PopoverClose render={<button type="button" className={triggerClass} />}>
+                  Close
+                </PopoverClose>
+              </div>
+            </div>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </Popover>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Open menu" }));
+    const close = await within(document.body).findByRole("button", { name: "Close" });
+    await userEvent.click(close);
+    await waitFor(() =>
+      expect(within(document.body).queryByText("Focus is trapped while this is open.")).toBeNull(),
+    );
+  },
+};
diff --git a/packages/propel/src/ui/popover/popover.tsx b/packages/propel/src/ui/popover/popover.tsx
new file mode 100644
index 0000000..20e4eda
--- /dev/null
+++ b/packages/propel/src/ui/popover/popover.tsx
@@ -0,0 +1,22 @@
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import type { PopoverRoot } from "@base-ui/react/popover";
+
+export type PopoverProps<Payload = unknown> = Omit<
+  PopoverRoot.Props<Payload>,
+  "open" | "defaultOpen" | "onOpenChange" | "modal" | "children"
+> & {
+  /** Whether the popover is open. Controlled; pair with `onOpenChange`. */
+  open?: boolean;
+  /** Whether the popover is open on mount. Uncontrolled. @default false */
+  defaultOpen?: boolean;
+  /** Called with the next open state when the popover opens or closes. */
+  onOpenChange?: PopoverRoot.Props<Payload>["onOpenChange"];
+  /** Modal behavior while open. @default false */
+  modal?: PopoverRoot.Props<Payload>["modal"];
+  /** The popover's trigger and panel (`PopoverTrigger`, `PopoverContent`). */
+  children?: PopoverRoot.Props<Payload>["children"];
+};
+
+export function Popover<Payload = unknown>(props: PopoverProps<Payload>) {
+  return <BasePopover.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/popover/variants.ts b/packages/propel/src/ui/popover/variants.ts
new file mode 100644
index 0000000..d452c3b
--- /dev/null
+++ b/packages/propel/src/ui/popover/variants.ts
@@ -0,0 +1,38 @@
+import { cva, cx } from "class-variance-authority";
+
+export const popoverPositionerVariants = cva("z-50 outline-none");
+export const popoverPopupVariants = cva(
+  cx(
+    "rounded-lg border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100 outline-none",
+    "origin-(--transform-origin) transition-[opacity,transform] duration-150",
+    "data-starting-style:scale-95 data-starting-style:opacity-0",
+    "data-ending-style:scale-95 data-ending-style:opacity-0",
+  ),
+);
+export const popoverBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
+export const popoverArrowVariants = cva(
+  cx(
+    "size-2 rotate-45 border-sm border-subtle bg-layer-1",
+    "data-[side=bottom]:top-[-3px] data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+    "data-[side=top]:bottom-[-3px] data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+    "data-[side=left]:right-[-3px] data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+    "data-[side=right]:left-[-3px] data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+    "data-[side=inline-start]:inset-e-[-3px] data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)] rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+    "data-[side=inline-end]:inset-s-[-3px] data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)] rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+  ),
+);
+export const popoverViewportVariants = cva("relative");
+export const popoverTitleVariants = cva("text-14 font-semibold text-primary");
+export const popoverDescriptionVariants = cva("text-13 text-secondary");
+export const popoverCloseVariants = cva(
+  cx(
+    "inline-flex items-center justify-center rounded-md text-icon-secondary outline-none",
+    "hover:bg-layer-transparent-hover",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
diff --git a/packages/propel/src/ui/preview-card/index.tsx b/packages/propel/src/ui/preview-card/index.tsx
new file mode 100644
index 0000000..6e1b8c4
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/index.tsx
@@ -0,0 +1,8 @@
+export { PreviewCard, type PreviewCardProps } from "./preview-card";
+export { PreviewCardArrow, type PreviewCardArrowProps } from "./preview-card-arrow";
+export { PreviewCardBackdrop, type PreviewCardBackdropProps } from "./preview-card-backdrop";
+export { PreviewCardPopup, type PreviewCardPopupProps } from "./preview-card-popup";
+export { PreviewCardPortal, type PreviewCardPortalProps } from "./preview-card-portal";
+export { PreviewCardPositioner, type PreviewCardPositionerProps } from "./preview-card-positioner";
+export { PreviewCardTrigger, type PreviewCardTriggerProps } from "./preview-card-trigger";
+export { PreviewCardViewport, type PreviewCardViewportProps } from "./preview-card-viewport";
diff --git a/packages/propel/src/ui/preview-card/preview-card-arrow.tsx b/packages/propel/src/ui/preview-card/preview-card-arrow.tsx
new file mode 100644
index 0000000..1bff3a6
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-arrow.tsx
@@ -0,0 +1,12 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+export type PreviewCardArrowProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Arrow>,
+  "className" | "style"
+>;
+
+/** The optional caret pointing from the popup back to the trigger. Maps 1:1 to `PreviewCard.Arrow`. */
+export function PreviewCardArrow(props: PreviewCardArrowProps) {
+  return <BasePreviewCard.Arrow {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-backdrop.tsx b/packages/propel/src/ui/preview-card/preview-card-backdrop.tsx
new file mode 100644
index 0000000..4d90d3e
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-backdrop.tsx
@@ -0,0 +1,14 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+import { previewCardBackdropVariants } from "./variants";
+
+export type PreviewCardBackdropProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Backdrop>,
+  "className" | "style"
+>;
+
+/** The dimmed overlay rendered behind the popup. Maps 1:1 to `PreviewCard.Backdrop`. */
+export function PreviewCardBackdrop(props: PreviewCardBackdropProps) {
+  return <BasePreviewCard.Backdrop className={previewCardBackdropVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-popup.tsx b/packages/propel/src/ui/preview-card/preview-card-popup.tsx
new file mode 100644
index 0000000..9c66600
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-popup.tsx
@@ -0,0 +1,14 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+import { previewCardPopupVariants } from "./variants";
+
+export type PreviewCardPopupProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Popup>,
+  "className" | "style"
+>;
+
+/** The anchored surface that holds the rich link preview. Maps 1:1 to `PreviewCard.Popup`. */
+export function PreviewCardPopup(props: PreviewCardPopupProps) {
+  return <BasePreviewCard.Popup className={previewCardPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-portal.tsx b/packages/propel/src/ui/preview-card/preview-card-portal.tsx
new file mode 100644
index 0000000..107038a
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-portal.tsx
@@ -0,0 +1,9 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+export type PreviewCardPortalProps = React.ComponentProps<typeof BasePreviewCard.Portal>;
+
+/** Portals the positioned popup out to the end of `document.body`. Maps 1:1 to `PreviewCard.Portal`. */
+export function PreviewCardPortal(props: PreviewCardPortalProps) {
+  return <BasePreviewCard.Portal {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-positioner.tsx b/packages/propel/src/ui/preview-card/preview-card-positioner.tsx
new file mode 100644
index 0000000..3b64168
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-positioner.tsx
@@ -0,0 +1,17 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+import { previewCardPositionerVariants } from "./variants";
+
+export type PreviewCardPositionerProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Positioner>,
+  "className" | "style"
+>;
+
+/**
+ * Anchors the popup to the trigger via the underlying positioning engine. Maps 1:1 to
+ * `PreviewCard.Positioner`.
+ */
+export function PreviewCardPositioner(props: PreviewCardPositionerProps) {
+  return <BasePreviewCard.Positioner className={previewCardPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-trigger.tsx b/packages/propel/src/ui/preview-card/preview-card-trigger.tsx
new file mode 100644
index 0000000..c3389f5
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-trigger.tsx
@@ -0,0 +1,15 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+export type PreviewCardTriggerProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Trigger>,
+  "className" | "style"
+>;
+
+/**
+ * The link that opens the preview card on hover/focus. Renders an `<a>`; inherits its surrounding
+ * text styling. Maps 1:1 to `PreviewCard.Trigger`.
+ */
+export function PreviewCardTrigger(props: PreviewCardTriggerProps) {
+  return <BasePreviewCard.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card-viewport.tsx b/packages/propel/src/ui/preview-card/preview-card-viewport.tsx
new file mode 100644
index 0000000..1ba6b8a
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card-viewport.tsx
@@ -0,0 +1,15 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+export type PreviewCardViewportProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The container enabling direction-aware content transitions when the card moves between triggers.
+ * Maps 1:1 to `PreviewCard.Viewport`.
+ */
+export function PreviewCardViewport(props: PreviewCardViewportProps) {
+  return <BasePreviewCard.Viewport {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/preview-card.stories.tsx b/packages/propel/src/ui/preview-card/preview-card.stories.tsx
new file mode 100644
index 0000000..55f4cdc
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  PreviewCard,
+  PreviewCardArrow,
+  PreviewCardBackdrop,
+  PreviewCardPopup,
+  PreviewCardPortal,
+  PreviewCardPositioner,
+  PreviewCardTrigger,
+  PreviewCardViewport,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC preview-card parts by hand (Root › Trigger ›
+// Portal › Backdrop › Positioner › Popup, plus the optional Arrow). The
+// components-tier `PreviewCardContent` ready-made composes the portal/backdrop/
+// positioner/popup for you. The trigger renders an inline `<a>` and the card opens
+// on hover/focus.
+
+const meta = {
+  title: "UI/PreviewCard",
+  component: PreviewCard,
+  subcomponents: {
+    PreviewCardTrigger,
+    PreviewCardPortal,
+    PreviewCardBackdrop,
+    PreviewCardPositioner,
+    PreviewCardViewport,
+    PreviewCardPopup,
+    PreviewCardArrow,
+  },
+} satisfies Meta<typeof PreviewCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: a hovered link reveals a positioned preview popup with an arrow. */
+export const Anatomy: Story = {
+  render: () => (
+    <p className="max-w-prose text-14 text-secondary">
+      The open-source project tracker{" "}
+      <PreviewCard>
+        <PreviewCardTrigger
+          render={<a href="https://plane.so" className="text-accent-strong underline" />}
+        >
+          Plane
+        </PreviewCardTrigger>
+        <PreviewCardPortal>
+          <PreviewCardBackdrop />
+          <PreviewCardPositioner side="top" sideOffset={4}>
+            <PreviewCardPopup>
+              <div className="flex w-56 flex-col gap-1">
+                <span className="text-14 font-semibold text-primary">Plane</span>
+                <span className="text-13 text-secondary">
+                  Open-source project management for issues, sprints, and roadmaps.
+                </span>
+              </div>
+              <PreviewCardArrow />
+            </PreviewCardPopup>
+          </PreviewCardPositioner>
+        </PreviewCardPortal>
+      </PreviewCard>{" "}
+      makes planning simple.
+    </p>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.hover(canvas.getByRole("link", { name: "Plane" }));
+    await waitFor(() =>
+      expect(within(document.body).getByText(/Open-source project management/)).toBeInTheDocument(),
+    );
+  },
+};
diff --git a/packages/propel/src/ui/preview-card/preview-card.tsx b/packages/propel/src/ui/preview-card/preview-card.tsx
new file mode 100644
index 0000000..417ede5
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/preview-card.tsx
@@ -0,0 +1,15 @@
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import type * as React from "react";
+
+export type PreviewCardProps = Omit<
+  React.ComponentProps<typeof BasePreviewCard.Root>,
+  "className" | "style"
+>;
+
+/**
+ * The root of a preview card — a popup that appears when a link is hovered, showing a preview for
+ * sighted users. Maps 1:1 to Base UI's `PreviewCard.Root`.
+ */
+export function PreviewCard(props: PreviewCardProps) {
+  return <BasePreviewCard.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/preview-card/variants.ts b/packages/propel/src/ui/preview-card/variants.ts
new file mode 100644
index 0000000..51a502f
--- /dev/null
+++ b/packages/propel/src/ui/preview-card/variants.ts
@@ -0,0 +1,25 @@
+import { cva, cx } from "class-variance-authority";
+
+// Preview Card is a verbatim wrapping of Base UI's parts. Base UI drives all
+// open state through `data-*` attributes, so there are no styling axes
+// (variant/tone/magnitude) to expose. The cva pairings below hold the static
+// chrome for every styled part in one place, with no `className` at the boundary.
+
+export const previewCardPositionerVariants = cva("z-50 outline-none");
+
+// Like the shared anchored popup, but with `p-3` and a `max-w-80` to comfortably
+// hold the richer link-preview content.
+export const previewCardPopupVariants = cva(
+  cx(
+    "max-w-80 origin-(--transform-origin) rounded-lg border-sm border-subtle bg-layer-1 p-3 shadow-overlay-100 outline-none",
+    "transition-[opacity,transform] duration-150",
+    "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
+  ),
+);
+
+export const previewCardBackdropVariants = cva(
+  cx(
+    "fixed inset-0 bg-backdrop transition-opacity duration-200",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0",
+  ),
+);
diff --git a/packages/propel/src/ui/progress/index.tsx b/packages/propel/src/ui/progress/index.tsx
new file mode 100644
index 0000000..c319b7b
--- /dev/null
+++ b/packages/propel/src/ui/progress/index.tsx
@@ -0,0 +1,6 @@
+export * from "./progress";
+export { ProgressCircle, type ProgressCircleProps } from "./progress-circle";
+export { ProgressIndicator, type ProgressIndicatorProps } from "./progress-indicator";
+export { ProgressLabel, type ProgressLabelProps } from "./progress-label";
+export { ProgressTrack, type ProgressTrackProps } from "./progress-track";
+export { ProgressValue, type ProgressValueProps } from "./progress-value";
diff --git a/packages/propel/src/ui/progress/progress-circle.tsx b/packages/propel/src/ui/progress/progress-circle.tsx
new file mode 100644
index 0000000..ba47797
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress-circle.tsx
@@ -0,0 +1,87 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { ringVariants } from "./variants";
+
+// Circle geometry per magnitude. The Figma circular variant (nodes 5736-3457 / 5736-3460)
+// is a 16px (sm) / 20px (md) box holding a 2px-stroke ring: a 14px circle (sm) or 18px
+// circle (md). The centerline radius is therefore (diameter - stroke) / 2 -> 6 (sm) / 8
+// (md). The viewBox matches the box so 1 SVG user unit == 1px.
+const RING_GEOMETRY = {
+  sm: { box: 16, radius: 6 },
+  md: { box: 20, radius: 8 },
+} as const;
+const RING_STROKE = 2;
+
+type RingMagnitude = NonNullable<VariantProps<typeof ringVariants>["magnitude"]>;
+
+/** Props for {@link ProgressCircle}. */
+export type ProgressCircleProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Root>,
+  "className" | "style" | "value"
+> & {
+  /** Completion from 0 to `max` (default max 100). */
+  value: number;
+  /** Diameter (`sm` 16px / `md` 20px). */
+  magnitude: RingMagnitude;
+  /** Accessible name for the ring. */
+  "aria-label": string;
+};
+
+/**
+ * The atomic determinate progress ring — a styled `Progress.Root` wrapping an SVG: a subtle track
+ * circle (`layer-3-selected`) plus an accent arc (`accent-primary`) proportional to the value, with
+ * rounded caps. `magnitude` changes the diameter (`sm` 16px / `md` 20px). Base UI `Progress.Root`
+ * owns the `progressbar` role + `aria-valuenow`.
+ */
+export function ProgressCircle({ value, magnitude, ...props }: ProgressCircleProps) {
+  const { box, radius } = RING_GEOMETRY[magnitude];
+  const circumference = 2 * Math.PI * radius;
+  const max = props.max ?? 100;
+  // Clamp once and feed the same value to the SVG arc and the Root, so the arc
+  // and `aria-valuenow` never disagree for out-of-range input.
+  const clampedValue = Math.min(Math.max(value, 0), max);
+  const fraction = max > 0 ? clampedValue / max : 0;
+  const dashOffset = circumference * (1 - fraction);
+  const center = box / 2;
+  return (
+    <BaseProgress.Root value={clampedValue} {...props}>
+      <svg
+        className={ringVariants({ magnitude })}
+        viewBox={`0 0 ${box} ${box}`}
+        fill="none"
+        aria-hidden="true"
+      >
+        {/* Track: the full subtle ring. Strokes with the same `layer-3-selected`
+            surface token the linear track fills with, so both variants read as the
+            same low-emphasis track and re-tint together in every theme. (The old
+            `icon-disabled` icon token sat too bright in dark mode — its track lightness
+            landed right next to the accent arc, so the indicator stopped reading.) */}
+        <circle
+          className="[stroke:var(--bg-layer-3-selected)]"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={RING_STROKE}
+        />
+        {/* Indicator arc: accent stroke proportional to the value, using the same
+            `accent-primary` token the linear indicator fills with (Figma binds both to
+            `background/accent/primary`). Rotated -90deg so the arc starts at 12 o'clock;
+            the dash offset shrinks it toward `value`. `transform-origin: center` keeps
+            the rotation about the circle's center regardless of direction (the visual
+            sweep stays clockwise in RTL too). */}
+        <circle
+          className="origin-center -rotate-90 [stroke:var(--bg-accent-primary)] transition-[stroke-dashoffset] duration-300 ease-out"
+          cx={center}
+          cy={center}
+          r={radius}
+          strokeWidth={RING_STROKE}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={dashOffset}
+        />
+      </svg>
+    </BaseProgress.Root>
+  );
+}
diff --git a/packages/propel/src/ui/progress/progress-indicator.tsx b/packages/propel/src/ui/progress/progress-indicator.tsx
new file mode 100644
index 0000000..75ac269
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress-indicator.tsx
@@ -0,0 +1,15 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type * as React from "react";
+
+import { progressIndicatorVariants } from "./variants";
+
+/** Props for {@link ProgressIndicator}; 1:1 with Base UI `Progress.Indicator`. */
+export type ProgressIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Indicator>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Progress.Indicator`. */
+export function ProgressIndicator(props: ProgressIndicatorProps) {
+  return <BaseProgress.Indicator className={progressIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/progress/progress-label.tsx b/packages/propel/src/ui/progress/progress-label.tsx
new file mode 100644
index 0000000..3e9b5f2
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress-label.tsx
@@ -0,0 +1,15 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type * as React from "react";
+
+import { progressLabelVariants } from "./variants";
+
+/** Props for {@link ProgressLabel}; 1:1 with Base UI `Progress.Label`. */
+export type ProgressLabelProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Label>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Progress.Label`. */
+export function ProgressLabel(props: ProgressLabelProps) {
+  return <BaseProgress.Label className={progressLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/progress/progress-track.tsx b/packages/propel/src/ui/progress/progress-track.tsx
new file mode 100644
index 0000000..fce419e
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress-track.tsx
@@ -0,0 +1,20 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { trackVariants } from "./variants";
+
+/** Props for {@link ProgressTrack}; 1:1 with Base UI `Progress.Track`. */
+export type ProgressTrackProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Track>,
+  "className" | "style"
+> &
+  VariantProps<typeof trackVariants>;
+
+/**
+ * 1:1 wrapper around Base UI `Progress.Track`. `magnitude` drives the track thickness (`sm` 5px /
+ * `md` 8px).
+ */
+export function ProgressTrack({ magnitude, ...props }: ProgressTrackProps) {
+  return <BaseProgress.Track className={trackVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/progress/progress-value.tsx b/packages/propel/src/ui/progress/progress-value.tsx
new file mode 100644
index 0000000..c32ab86
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress-value.tsx
@@ -0,0 +1,15 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import type * as React from "react";
+
+import { progressValueVariants } from "./variants";
+
+/** Props for {@link ProgressValue}; 1:1 with Base UI `Progress.Value`. */
+export type ProgressValueProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Value>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Progress.Value`. */
+export function ProgressValue(props: ProgressValueProps) {
+  return <BaseProgress.Value className={progressValueVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/progress/progress.stories.tsx b/packages/propel/src/ui/progress/progress.stories.tsx
new file mode 100644
index 0000000..8417c98
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress.stories.tsx
@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  Progress,
+  ProgressCircle,
+  ProgressIndicator,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressValue,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC progress parts. `Progress` (Base UI `Progress.Root`)
+// owns the `progressbar` value model; `ProgressTrack` › `ProgressIndicator` paint the bar,
+// `ProgressLabel`/`ProgressValue` the accessible name + trailing text. `ProgressCircle` is
+// the atomic determinate ring. The ready-made linear+circular `Progress` (magnitude, the
+// trailing `%`) lives in `components/progress`.
+const meta = {
+  title: "UI/Progress",
+  component: Progress,
+  subcomponents: { ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue, ProgressCircle },
+  // The render fns assemble their own atoms; these satisfy the Root's value-model props.
+  args: { value: 32, "aria-label": "Progress" },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Assemble the linear bar from atoms: Root (`layout="linear"`) › Label + Track › Indicator, plus
+ * the trailing Value. The Root requires an accessible name — here the visible `ProgressLabel`
+ * supplies it.
+ */
+export const Default: Story = {
+  render: () => (
+    <Progress layout="linear" value={32}>
+      <ProgressLabel>Upload progress</ProgressLabel>
+      <ProgressTrack magnitude="md">
+        <ProgressIndicator />
+      </ProgressTrack>
+      <ProgressValue>{(_, value) => (value == null ? "" : `${Math.round(value)}%`)}</ProgressValue>
+    </Progress>
+  ),
+  play: async ({ canvas }) => {
+    const bar = canvas.getByRole("progressbar", { name: "Upload progress" });
+    await expect(bar).toHaveAttribute("aria-valuenow", "32");
+    await expect(canvas.getByText("32%")).toBeInTheDocument();
+  },
+};
+
+/**
+ * The atomic determinate ring — a styled `Progress.Root` wrapping an SVG. It owns its own
+ * `progressbar` role; pass `aria-label` for the accessible name and `magnitude` for the diameter
+ * (`sm` 16px / `md` 20px).
+ */
+export const Circle: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <ProgressCircle value={32} magnitude="sm" aria-label="Small sync progress" />
+      <ProgressCircle value={64} magnitude="md" aria-label="Medium sync progress" />
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/progress/progress.tsx b/packages/propel/src/ui/progress/progress.tsx
new file mode 100644
index 0000000..46ac2c3
--- /dev/null
+++ b/packages/propel/src/ui/progress/progress.tsx
@@ -0,0 +1,27 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { rootVariants } from "./variants";
+
+/** Props for {@link Progress} (the Base UI `Progress.Root`). */
+export type ProgressProps = Omit<
+  React.ComponentProps<typeof BaseProgress.Root>,
+  "className" | "style"
+> &
+  VariantProps<typeof rootVariants>;
+
+/**
+ * The atomic `Progress.Root` — maps 1:1 to Base UI's `Progress.Root`. It owns the `progressbar`
+ * value model (`value` / `min` / `max` / `format` are native, not styling) and groups the progress
+ * parts (`ProgressTrack` → `ProgressIndicator`, `ProgressLabel`, `ProgressValue`).
+ *
+ * Pass `layout="linear"` to apply the horizontal bar layout (`flex w-full items-center gap-2`) used
+ * by the ready-made linear bar.
+ *
+ * For the ready-made bar (linear + circular variants, `magnitude`, the trailing `%` label), use the
+ * `Progress` from `@plane/propel/components/progress`.
+ */
+export function Progress({ layout, ...props }: ProgressProps) {
+  return <BaseProgress.Root className={rootVariants({ layout })} {...props} />;
+}
diff --git a/packages/propel/src/ui/progress/variants.ts b/packages/propel/src/ui/progress/variants.ts
new file mode 100644
index 0000000..c9253d0
--- /dev/null
+++ b/packages/propel/src/ui/progress/variants.ts
@@ -0,0 +1,36 @@
+import { cva } from "class-variance-authority";
+
+export const progressIndicatorVariants = cva(
+  "absolute inset-y-0 rounded-full bg-accent-primary transition-[width] duration-300 ease-out",
+);
+export const progressLabelVariants = cva("text-13 font-medium text-secondary");
+export const progressValueVariants = cva("text-12 font-medium text-accent-primary tabular-nums");
+
+export const rootVariants = cva("", {
+  variants: {
+    layout: {
+      linear: "flex w-full items-center gap-2",
+    },
+  },
+});
+
+export const trackVariants = cva(
+  "relative min-w-0 flex-1 overflow-hidden rounded-full bg-layer-3-selected",
+  {
+    variants: {
+      magnitude: {
+        sm: "h-[5px]",
+        md: "h-2",
+      },
+    },
+  },
+);
+
+export const ringVariants = cva("shrink-0", {
+  variants: {
+    magnitude: {
+      sm: "size-4",
+      md: "size-5",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/radio/index.tsx b/packages/propel/src/ui/radio/index.tsx
new file mode 100644
index 0000000..e946a74
--- /dev/null
+++ b/packages/propel/src/ui/radio/index.tsx
@@ -0,0 +1,3 @@
+export { Radio, type RadioProps } from "./radio";
+export { RadioIndicator, type RadioIndicatorProps } from "./radio-indicator";
+export { RadioGroup, type RadioGroupDensity, type RadioGroupProps } from "./radio-group";
diff --git a/packages/propel/src/ui/radio/radio-group.tsx b/packages/propel/src/ui/radio/radio-group.tsx
new file mode 100644
index 0000000..87308e6
--- /dev/null
+++ b/packages/propel/src/ui/radio/radio-group.tsx
@@ -0,0 +1,20 @@
+import { RadioGroup as BaseRadioGroup } from "@base-ui/react/radio-group";
+import type { RadioGroup as BaseRadioGroupTypes } from "@base-ui/react/radio-group";
+import type { VariantProps } from "class-variance-authority";
+
+import { radioGroupVariants } from "./variants";
+
+export type RadioGroupDensity = NonNullable<VariantProps<typeof radioGroupVariants>["density"]>;
+
+export type RadioGroupProps<Value = string> = Omit<
+  BaseRadioGroupTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /** Spacing between options: `comfortable` (8px) or `compact` (flush). */
+  density: RadioGroupDensity;
+};
+
+/** Groups a set of `Radio` options so at most one can be selected at a time. Renders a `radiogroup`. */
+export function RadioGroup<Value = string>({ density, ...props }: RadioGroupProps<Value>) {
+  return <BaseRadioGroup className={radioGroupVariants({ density })} {...props} />;
+}
diff --git a/packages/propel/src/ui/radio/radio-indicator.tsx b/packages/propel/src/ui/radio/radio-indicator.tsx
new file mode 100644
index 0000000..0a902f4
--- /dev/null
+++ b/packages/propel/src/ui/radio/radio-indicator.tsx
@@ -0,0 +1,18 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import type * as React from "react";
+
+import { radioIndicatorVariants } from "./variants";
+
+export type RadioIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseRadio.Indicator>,
+  "className" | "style"
+>;
+
+/**
+ * The selected dot (Base UI `Radio.Indicator`). An 8px circle filled with the Root's
+ * `currentColor`, mounted by the primitive only while the option is checked. Rendered inside a
+ * `Radio`.
+ */
+export function RadioIndicator(props: RadioIndicatorProps) {
+  return <BaseRadio.Indicator className={radioIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/radio/radio.stories.tsx b/packages/propel/src/ui/radio/radio.stories.tsx
new file mode 100644
index 0000000..3c98e18
--- /dev/null
+++ b/packages/propel/src/ui/radio/radio.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Radio, RadioGroup, RadioIndicator } from "./index";
+
+// UI-tier story: composes the atomic radio parts. `Radio` is the bare ring (Base UI
+// `Radio.Root`); the selected dot only shows when you nest a `RadioIndicator`. A `Radio`
+// must live inside a `RadioGroup`, which manages single-select state + roving focus.
+// The components-tier story shows the ready-made `Radio` (ring + dot) inside a labelled
+// fieldset. Here you assemble the raw parts and name each via `aria-label`.
+const meta = {
+  title: "UI/Radio",
+  component: RadioGroup,
+  subcomponents: { Radio, RadioIndicator },
+  args: { density: "comfortable" },
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Option({ value, label }: { value: string; label: string }) {
+  return (
+    <Radio value={value} aria-label={label}>
+      <RadioIndicator />
+    </Radio>
+  );
+}
+
+/** A group of atomic rings; the first is selected by default. */
+export const Default: Story = {
+  args: { density: "comfortable", defaultValue: "low" },
+  render: (args) => (
+    <RadioGroup {...args} aria-label="Priority">
+      <Option value="low" label="Low" />
+      <Option value="medium" label="Medium" />
+      <Option value="high" label="High" />
+    </RadioGroup>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("radio", { name: "Low" })).toHaveAttribute(
+      "aria-checked",
+      "true",
+    );
+  },
+};
+
+/** Selecting one ring clears any other — at most one is checked at a time. */
+export const SelectionBehavior: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { density: "comfortable" },
+  render: (args) => (
+    <RadioGroup {...args} aria-label="Priority">
+      <Option value="low" label="Low" />
+      <Option value="medium" label="Medium" />
+    </RadioGroup>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const low = canvas.getByRole("radio", { name: "Low" });
+    const medium = canvas.getByRole("radio", { name: "Medium" });
+    await expect(low).toHaveAttribute("aria-checked", "false");
+
+    await userEvent.click(low);
+    await expect(low).toHaveAttribute("aria-checked", "true");
+
+    await userEvent.click(medium);
+    await expect(medium).toHaveAttribute("aria-checked", "true");
+    await expect(low).toHaveAttribute("aria-checked", "false");
+  },
+};
diff --git a/packages/propel/src/ui/radio/radio.tsx b/packages/propel/src/ui/radio/radio.tsx
new file mode 100644
index 0000000..3eb8c77
--- /dev/null
+++ b/packages/propel/src/ui/radio/radio.tsx
@@ -0,0 +1,18 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import type * as React from "react";
+
+import { radioVariants } from "./variants";
+
+export type RadioProps = Omit<React.ComponentProps<typeof BaseRadio.Root>, "className" | "style">;
+
+/**
+ * A single radio ring (Base UI `Radio.Root`). The 16px ring follows Figma node 2159-4535; the
+ * selected and disabled states come from the primitive. Use `disabled` for a non-editable
+ * (read-only) option — see the module comment for why `readOnly` is avoided. Must be rendered
+ * inside a `RadioGroup`, and render a `RadioIndicator` as its child for the selected dot.
+ *
+ * @param value - The unique value this option contributes to its `RadioGroup`.
+ */
+export function Radio(props: RadioProps) {
+  return <BaseRadio.Root className={radioVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/radio/variants.ts b/packages/propel/src/ui/radio/variants.ts
new file mode 100644
index 0000000..9ebf682
--- /dev/null
+++ b/packages/propel/src/ui/radio/variants.ts
@@ -0,0 +1,24 @@
+import { cva, cx } from "class-variance-authority";
+
+export const radioVariants = cva(
+  cx(
+    "flex size-4 shrink-0 items-center justify-center rounded-full border-sm border-current bg-layer-1",
+    "text-icon-tertiary transition-colors outline-none",
+    "data-checked:text-icon-accent-primary",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-2",
+    "data-disabled:cursor-not-allowed data-disabled:text-icon-disabled data-disabled:opacity-60",
+  ),
+);
+
+// The inner dot: 8px (`size-2`) filled with the Root's `currentColor`, only present while selected
+// (Base UI mounts the Indicator when checked).
+export const radioIndicatorVariants = cva("size-2 rounded-full bg-current");
+
+export const radioGroupVariants = cva("flex flex-col", {
+  variants: {
+    density: {
+      comfortable: "gap-2",
+      compact: "gap-0",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/scroll-area/index.tsx b/packages/propel/src/ui/scroll-area/index.tsx
new file mode 100644
index 0000000..6c4a3fe
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/index.tsx
@@ -0,0 +1,6 @@
+export { ScrollArea, type ScrollAreaProps } from "./scroll-area";
+export { ScrollAreaContent, type ScrollAreaContentProps } from "./scroll-area-content";
+export { ScrollAreaCorner, type ScrollAreaCornerProps } from "./scroll-area-corner";
+export { ScrollAreaScrollbar, type ScrollAreaScrollbarProps } from "./scroll-area-scrollbar";
+export { ScrollAreaThumb, type ScrollAreaThumbProps } from "./scroll-area-thumb";
+export { ScrollAreaViewport, type ScrollAreaViewportProps } from "./scroll-area-viewport";
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-content.tsx b/packages/propel/src/ui/scroll-area/scroll-area-content.tsx
new file mode 100644
index 0000000..200e228
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area-content.tsx
@@ -0,0 +1,15 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollAreaContentVariants } from "./variants";
+
+/** Props for {@link ScrollAreaContent}; 1:1 with Base UI `ScrollArea.Content`. */
+export type ScrollAreaContentProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Content>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `ScrollArea.Content`. */
+export function ScrollAreaContent(props: ScrollAreaContentProps) {
+  return <BaseScrollArea.Content className={scrollAreaContentVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-corner.tsx b/packages/propel/src/ui/scroll-area/scroll-area-corner.tsx
new file mode 100644
index 0000000..454fd32
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area-corner.tsx
@@ -0,0 +1,15 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollAreaCornerVariants } from "./variants";
+
+/** Props for {@link ScrollAreaCorner}; 1:1 with Base UI `ScrollArea.Corner`. */
+export type ScrollAreaCornerProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Corner>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `ScrollArea.Corner`. */
+export function ScrollAreaCorner(props: ScrollAreaCornerProps) {
+  return <BaseScrollArea.Corner className={scrollAreaCornerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-scrollbar.tsx b/packages/propel/src/ui/scroll-area/scroll-area-scrollbar.tsx
new file mode 100644
index 0000000..2919e55
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area-scrollbar.tsx
@@ -0,0 +1,15 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollbarClass } from "../../internal/scrollbar";
+
+/** Props for {@link ScrollAreaScrollbar}; 1:1 with Base UI `ScrollArea.Scrollbar`. */
+export type ScrollAreaScrollbarProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Scrollbar>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `ScrollArea.Scrollbar`. */
+export function ScrollAreaScrollbar(props: ScrollAreaScrollbarProps) {
+  return <BaseScrollArea.Scrollbar className={scrollbarClass} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-thumb.tsx b/packages/propel/src/ui/scroll-area/scroll-area-thumb.tsx
new file mode 100644
index 0000000..50b8d8c
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area-thumb.tsx
@@ -0,0 +1,15 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollbarThumbClass } from "../../internal/scrollbar";
+
+/** Props for {@link ScrollAreaThumb}; 1:1 with Base UI `ScrollArea.Thumb`. */
+export type ScrollAreaThumbProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Thumb>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `ScrollArea.Thumb`. */
+export function ScrollAreaThumb(props: ScrollAreaThumbProps) {
+  return <BaseScrollArea.Thumb className={scrollbarThumbClass} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/scroll-area-viewport.tsx b/packages/propel/src/ui/scroll-area/scroll-area-viewport.tsx
new file mode 100644
index 0000000..7843155
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area-viewport.tsx
@@ -0,0 +1,15 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollAreaViewportVariants } from "./variants";
+
+/** Props for {@link ScrollAreaViewport}; 1:1 with Base UI `ScrollArea.Viewport`. */
+export type ScrollAreaViewportProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Viewport>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `ScrollArea.Viewport`. */
+export function ScrollAreaViewport(props: ScrollAreaViewportProps) {
+  return <BaseScrollArea.Viewport className={scrollAreaViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/scroll-area.stories.tsx b/packages/propel/src/ui/scroll-area/scroll-area.stories.tsx
new file mode 100644
index 0000000..150b64e
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC scroll-area parts. `ScrollArea` (Base UI
+// `ScrollArea.Root`) lays its viewport out as a height-constrained flex column but renders
+// no scrollbars itself; you wire the viewport, scrollbar(s), thumb, and corner by hand. The
+// ready-made scroller (orientation prop, automatic scrollbars) lives in
+// `components/scroll-area`.
+const meta = {
+  title: "UI/ScrollArea",
+  component: ScrollArea,
+  subcomponents: {
+    ScrollAreaViewport,
+    ScrollAreaContent,
+    ScrollAreaScrollbar,
+    ScrollAreaThumb,
+    ScrollAreaCorner,
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex h-64 w-72 flex-col rounded-lg border border-subtle bg-layer-1">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A vertically scrollable region built from atoms: Root › Viewport › Content, plus a vertical
+ * Scrollbar › Thumb. The scrollbar is hidden until you hover the area or scroll, then the inset
+ * thumb fades in.
+ */
+export const Default: Story = {
+  render: () => (
+    <ScrollArea>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>
+          <div className="flex flex-col gap-2 p-3">
+            {Array.from({ length: 30 }, (_, i) => (
+              <p key={i} className="text-13 text-secondary">
+                Line {i + 1} of the scrollable content.
+              </p>
+            ))}
+          </div>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation="vertical">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+    </ScrollArea>
+  ),
+};
+
+/**
+ * Both axes overflow: a vertical and a horizontal Scrollbar (each with its own Thumb) plus the
+ * Corner that fills the gap where they meet.
+ */
+export const BothAxes: Story = {
+  render: () => (
+    <ScrollArea>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>
+          <div className="flex w-160 flex-col gap-2 p-3">
+            {Array.from({ length: 30 }, (_, i) => (
+              <p key={i} className="text-13 whitespace-nowrap text-secondary">
+                Line {i + 1} of wide content that overflows horizontally as well as down.
+              </p>
+            ))}
+          </div>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar orientation="vertical">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollArea>
+  ),
+};
diff --git a/packages/propel/src/ui/scroll-area/scroll-area.tsx b/packages/propel/src/ui/scroll-area/scroll-area.tsx
new file mode 100644
index 0000000..43a540f
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/scroll-area.tsx
@@ -0,0 +1,20 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollAreaRootVariants } from "./variants";
+
+/** Props for {@link ScrollArea}; 1:1 with Base UI `ScrollArea.Root`. */
+export type ScrollAreaProps = Omit<
+  React.ComponentProps<typeof BaseScrollArea.Root>,
+  "className" | "style"
+>;
+
+/**
+ * 1:1 wrapper around Base UI `ScrollArea.Root`. This is the atomic part: it lays its viewport out
+ * as a height-constrained flex column but renders no scrollbars itself. The ready-made scroller
+ * that composes the viewport, scrollbars, thumb and corner lives in
+ * `@plane/propel/components/scroll-area`.
+ */
+export function ScrollArea(props: ScrollAreaProps) {
+  return <BaseScrollArea.Root className={scrollAreaRootVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/scroll-area/variants.ts b/packages/propel/src/ui/scroll-area/variants.ts
new file mode 100644
index 0000000..2fc8a54
--- /dev/null
+++ b/packages/propel/src/ui/scroll-area/variants.ts
@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+
+export const scrollAreaRootVariants = cva("relative flex min-h-0 flex-1 flex-col");
+export const scrollAreaViewportVariants = cva(
+  "min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none",
+);
+export const scrollAreaContentVariants = cva("min-w-full");
+export const scrollAreaCornerVariants = cva("bg-transparent");
diff --git a/packages/propel/src/ui/search/expandable-search.tsx b/packages/propel/src/ui/search/expandable-search.tsx
new file mode 100644
index 0000000..4294a5b
--- /dev/null
+++ b/packages/propel/src/ui/search/expandable-search.tsx
@@ -0,0 +1,79 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import { Search as SearchIcon, X } from "lucide-react";
+import * as React from "react";
+
+import { useControllableState } from "../../hooks/use-controllable-state/index";
+import type { SearchProps } from "./search";
+import {
+  expandableBoxClass,
+  expandableWrapperClass,
+  searchClearButtonClass,
+  searchInputClass,
+} from "./variants";
+
+export type ExpandableSearchProps = SearchProps;
+
+/** A search field that collapses to a magnifier icon and expands while focused or filled. */
+export function ExpandableSearch({
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Search",
+  disabled,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: ExpandableSearchProps) {
+  const [currentValue, commit] = useControllableState<string>({
+    value,
+    defaultValue: defaultValue ?? "",
+    onValueChange,
+  });
+  const hasValue = currentValue != null && currentValue !== "";
+  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledBy ? undefined : "Search");
+  const [focused, setFocused] = React.useState(false);
+  const showExpanded = focused || hasValue;
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  return (
+    <div className={expandableWrapperClass}>
+      <label className={expandableBoxClass} data-expanded={showExpanded ? "" : undefined}>
+        <SearchIcon aria-hidden className="size-4 shrink-0 text-icon-secondary" />
+        <BaseInput
+          ref={inputRef}
+          type="search"
+          value={currentValue}
+          onValueChange={(next) => commit(next)}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              if (hasValue) commit("");
+              else inputRef.current?.blur();
+            }
+          }}
+          placeholder={placeholder}
+          disabled={disabled}
+          aria-label={resolvedAriaLabel}
+          aria-labelledby={ariaLabelledBy}
+          className={searchInputClass}
+          {...props}
+        />
+        {hasValue && !disabled ? (
+          <button
+            type="button"
+            aria-label="Clear search"
+            onClick={() => {
+              commit("");
+              inputRef.current?.focus();
+            }}
+            className={searchClearButtonClass}
+          >
+            <X aria-hidden className="size-3.5" />
+          </button>
+        ) : null}
+      </label>
+    </div>
+  );
+}
diff --git a/packages/propel/src/ui/search/index.tsx b/packages/propel/src/ui/search/index.tsx
new file mode 100644
index 0000000..9c4db54
--- /dev/null
+++ b/packages/propel/src/ui/search/index.tsx
@@ -0,0 +1,2 @@
+export { ExpandableSearch, type ExpandableSearchProps } from "./expandable-search";
+export { Search, type SearchProps } from "./search";
diff --git a/packages/propel/src/ui/search/search.stories.tsx b/packages/propel/src/ui/search/search.stories.tsx
new file mode 100644
index 0000000..2070a24
--- /dev/null
+++ b/packages/propel/src/ui/search/search.stories.tsx
@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { expect, userEvent } from "storybook/test";
+
+import { ExpandableSearch, Search } from "./index";
+
+const meta = {
+  title: "UI/Search",
+  component: Search,
+  subcomponents: { ExpandableSearch },
+  args: { placeholder: "Search" },
+  // The field fills its container; give it a width to render in.
+  decorators: [
+    (Story) => (
+      <div className="w-72">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=1393-45336",
+    },
+  },
+} satisfies Meta<typeof Search>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Empty search field — leading magnifier + placeholder, no clear button yet. */
+export const Default: Story = {};
+
+/** With a value: the clear (✕) button appears at the trailing edge. */
+export const Filled: Story = {
+  args: { defaultValue: "Product" },
+};
+
+/** Disabled field. */
+export const Disabled: Story = {
+  args: { defaultValue: "Product", disabled: true },
+};
+
+/** Controlled: drive the value with `value` + `onValueChange`. */
+export const Controlled: Story = {
+  parameters: { controls: { disable: true } },
+  render: function ControlledStory() {
+    const [value, setValue] = React.useState("");
+    return (
+      <div className="flex flex-col gap-2">
+        <Search value={value} onValueChange={setValue} />
+        <p className="text-12 text-tertiary">Query: {value || "(empty)"}</p>
+      </div>
+    );
+  },
+};
+
+/**
+ * `ExpandableSearch` collapses to a magnifier icon and expands into a full search input while
+ * focused — the toolbar/header pattern. The input itself is the only control, so it stays a real
+ * searchbox; it collapses again when blurred empty (or on `Escape`).
+ */
+export const Expandable: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ExpandableSearch />,
+};
+
+/** `ExpandableSearch` with an initial value renders expanded (with the clear button). */
+export const ExpandableFilled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <ExpandableSearch defaultValue="Roadmap" />,
+};
+
+/**
+ * `ExpandableSearch` is a single searchbox that renders collapsed and expands on focus — there is
+ * no separate toggle button. Focusing it (clicking the magnifier focuses the field) expands it;
+ * blurring it empty or pressing `Escape` collapses it, and a value keeps it open. Tagged out of the
+ * sidebar/docs/manifest but still run under the default `test` tag.
+ */
+export const ExpandAndCollapse: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <ExpandableSearch />
+      {/* A focusable sibling to blur onto, so the collapse-on-blur path is testable. */}
+      <button type="button">elsewhere</button>
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    // The field is always a real searchbox (no separate toggle); it just renders collapsed
+    // until focused. `data-expanded` on its box reflects the open state.
+    const input = canvas.getByRole("searchbox", { name: "Search" });
+    const box = input.closest("label");
+    await expect(box).not.toHaveAttribute("data-expanded");
+
+    // Focus opens it (clicking the box focuses the input); blurring it empty collapses it.
+    await userEvent.click(input);
+    await expect(input).toHaveFocus();
+    await expect(box).toHaveAttribute("data-expanded");
+    await userEvent.click(canvas.getByRole("button", { name: "elsewhere" }));
+    await expect(box).not.toHaveAttribute("data-expanded");
+
+    // A value keeps it open; Escape clears the field first, then (empty) collapses it.
+    await userEvent.click(input);
+    await userEvent.type(input, "Roadmap");
+    await userEvent.keyboard("{Escape}");
+    await expect(input).toHaveValue("");
+    await expect(box).toHaveAttribute("data-expanded");
+    await userEvent.keyboard("{Escape}");
+    await expect(box).not.toHaveAttribute("data-expanded");
+
+    // The field is never removed from the document — it just collapses.
+    await expect(canvas.getByRole("searchbox", { name: "Search" })).toBeInTheDocument();
+  },
+};
+
+/**
+ * Typing reveals the clear button; clicking it empties the field and returns focus to the input.
+ * Tagged out of the sidebar/docs/manifest but still run under the default `test` tag.
+ */
+export const TypeAndClear: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("searchbox", { name: "Search" });
+
+    // No clear button while empty.
+    await expect(canvas.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
+
+    await userEvent.type(input, "Roadmap");
+    await expect(input).toHaveValue("Roadmap");
+
+    // The clear button now appears; clicking it empties the field and refocuses it.
+    const clear = canvas.getByRole("button", { name: "Clear search" });
+    await userEvent.click(clear);
+    await expect(input).toHaveValue("");
+    await expect(input).toHaveFocus();
+    await expect(canvas.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * Naming contract: an explicit `aria-labelledby` provides the accessible name without being
+ * overridden by the default "Search" label.
+ */
+export const LabelledBySemantics: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <span id="project-search-label">Find projects</span>
+      <Search aria-labelledby="project-search-label" />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("searchbox", { name: "Find projects" })).toBeInTheDocument();
+    await expect(canvas.queryByRole("searchbox", { name: "Search" })).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * Disabled fields keep their value visible but do not expose the clear button, so the disabled
+ * input remains a single non-interactive control.
+ */
+export const DisabledHidesClear: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { defaultValue: "Roadmap", disabled: true },
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("searchbox", { name: "Search" })).toBeDisabled();
+    await expect(canvas.queryByRole("button", { name: "Clear search" })).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * `ExpandableSearch` uses the same clear affordance once it has a value; clicking it clears and
+ * keeps focus on the searchbox.
+ */
+export const ExpandableTypeAndClear: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => <ExpandableSearch />,
+  play: async ({ canvas }) => {
+    const input = canvas.getByRole("searchbox", { name: "Search" });
+    await userEvent.click(input);
+    await userEvent.type(input, "Roadmap");
+    await expect(input).toHaveValue("Roadmap");
+
+    await userEvent.click(canvas.getByRole("button", { name: "Clear search" }));
+    await expect(input).toHaveValue("");
+    await expect(input).toHaveFocus();
+  },
+};
diff --git a/packages/propel/src/ui/search/search.tsx b/packages/propel/src/ui/search/search.tsx
new file mode 100644
index 0000000..b5a059c
--- /dev/null
+++ b/packages/propel/src/ui/search/search.tsx
@@ -0,0 +1,79 @@
+import { Input as BaseInput } from "@base-ui/react/input";
+import { cx } from "class-variance-authority";
+import { Search as SearchIcon, X } from "lucide-react";
+import * as React from "react";
+
+import { useControllableState } from "../../hooks/use-controllable-state/index";
+import { searchBoxClass, searchClearButtonClass, searchInputClass } from "./variants";
+
+export type SearchProps = Omit<
+  React.ComponentProps<typeof BaseInput>,
+  "className" | "style" | "type" | "value" | "defaultValue" | "onValueChange"
+> & {
+  /** Current text. Controlled; pair with `onValueChange`. */
+  value?: string;
+  /** Initial text. Uncontrolled. */
+  defaultValue?: string;
+  /** Called with the new text on each change and on clear. */
+  onValueChange?: (value: string) => void;
+  /** Placeholder text. @default "Search" */
+  placeholder?: string;
+  /** Accessible name for the field. @default "Search" */
+  "aria-label"?: string;
+};
+
+/** A search field with leading magnifier and trailing clear button. */
+export function Search({
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Search",
+  disabled,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}: SearchProps) {
+  const [currentValue, commit] = useControllableState<string>({
+    value,
+    defaultValue: defaultValue ?? "",
+    onValueChange,
+  });
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const hasValue = currentValue != null && currentValue !== "";
+  const resolvedAriaLabel = ariaLabel ?? (ariaLabelledBy ? undefined : "Search");
+
+  return (
+    <label className={searchBoxClass}>
+      <SearchIcon
+        aria-hidden
+        className="size-4 shrink-0 text-icon-placeholder transition-colors group-focus-within/search:text-icon-secondary"
+      />
+      <BaseInput
+        ref={inputRef}
+        type="search"
+        value={currentValue}
+        onValueChange={(next) => commit(next)}
+        placeholder={placeholder}
+        disabled={disabled}
+        aria-label={resolvedAriaLabel}
+        aria-labelledby={ariaLabelledBy}
+        className={cx(searchInputClass)}
+        {...props}
+      />
+      {hasValue && !disabled ? (
+        <button
+          type="button"
+          aria-label="Clear search"
+          onClick={() => {
+            commit("");
+            inputRef.current?.focus();
+          }}
+          className={searchClearButtonClass}
+        >
+          <X aria-hidden className="size-3.5" />
+        </button>
+      ) : null}
+    </label>
+  );
+}
diff --git a/packages/propel/src/ui/search/variants.ts b/packages/propel/src/ui/search/variants.ts
new file mode 100644
index 0000000..e1cf0d9
--- /dev/null
+++ b/packages/propel/src/ui/search/variants.ts
@@ -0,0 +1,31 @@
+import { cx } from "class-variance-authority";
+
+export const searchBoxClass = cx(
+  "group/search inline-flex h-8 w-full items-center gap-2 rounded-lg border-sm border-subtle-1 bg-layer-2 px-2",
+  "transition-colors hover:bg-layer-2-hover",
+  "focus-within:border-accent-strong focus-within:bg-layer-2 focus-within:ring-2 focus-within:ring-accent-strong/25",
+  "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-layer-2 has-[:disabled]:hover:bg-layer-2",
+);
+
+export const searchInputClass = cx(
+  "min-w-0 flex-1 bg-transparent text-14 text-primary outline-none",
+  "placeholder:text-placeholder disabled:cursor-not-allowed disabled:text-disabled",
+  "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
+);
+
+export const searchClearButtonClass = cx(
+  "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-icon-secondary outline-none",
+  "transition-colors hover:bg-layer-transparent-hover",
+  "focus-visible:ring-2 focus-visible:ring-accent-strong",
+);
+
+export const expandableWrapperClass = "relative inline-flex size-7 shrink-0";
+
+export const expandableBoxClass = cx(
+  "group/search absolute inset-e-0 top-0 inline-flex h-7 w-7 items-center gap-2 overflow-hidden rounded-md px-1.5",
+  "border-sm border-transparent bg-layer-transparent",
+  "transition-[width,border-color,background-color] duration-200 ease-out motion-reduce:transition-none",
+  "not-data-expanded:hover:bg-layer-transparent-hover",
+  "data-expanded:w-51 data-expanded:border-subtle-1 data-expanded:bg-layer-2",
+  "data-expanded:focus-within:border-accent-strong data-expanded:focus-within:ring-1 data-expanded:focus-within:ring-accent-strong/35",
+);
diff --git a/packages/propel/src/ui/select/index.tsx b/packages/propel/src/ui/select/index.tsx
new file mode 100644
index 0000000..dbf3708
--- /dev/null
+++ b/packages/propel/src/ui/select/index.tsx
@@ -0,0 +1,14 @@
+export { Select, type SelectProps } from "./select";
+export { SelectIcon, type SelectIconProps } from "./select-icon";
+export { SelectItem, type SelectItemProps } from "./select-item";
+export { SelectItemIndicator, type SelectItemIndicatorProps } from "./select-item-indicator";
+export { SelectItemText } from "./select-item-text";
+export { SelectLabel, type SelectLabelProps } from "./select-label";
+export { SelectList } from "./select-list";
+export { SelectPopup, type SelectPopupProps } from "./select-popup";
+export { SelectPortal } from "./select-portal";
+export { SelectPositioner, type SelectPositionerProps } from "./select-positioner";
+export { SelectScrollDownArrow } from "./select-scroll-down-arrow";
+export { SelectScrollUpArrow } from "./select-scroll-up-arrow";
+export { SelectTrigger, type SelectTriggerProps } from "./select-trigger";
+export { SelectValue, type SelectValueProps } from "./select-value";
diff --git a/packages/propel/src/ui/select/select-icon.tsx b/packages/propel/src/ui/select/select-icon.tsx
new file mode 100644
index 0000000..c18e532
--- /dev/null
+++ b/packages/propel/src/ui/select/select-icon.tsx
@@ -0,0 +1,18 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { ChevronsUpDown } from "lucide-react";
+import type * as React from "react";
+
+import { selectIconVariants } from "./variants";
+
+export type SelectIconProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Icon>,
+  "className" | "style"
+>;
+
+export function SelectIcon(props: SelectIconProps) {
+  return (
+    <BaseSelect.Icon className={selectIconVariants()} {...props}>
+      {props.children ?? <ChevronsUpDown aria-hidden className="size-4" />}
+    </BaseSelect.Icon>
+  );
+}
diff --git a/packages/propel/src/ui/select/select-item-indicator.tsx b/packages/propel/src/ui/select/select-item-indicator.tsx
new file mode 100644
index 0000000..f257d94
--- /dev/null
+++ b/packages/propel/src/ui/select/select-item-indicator.tsx
@@ -0,0 +1,18 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { selectItemIndicatorVariants } from "./variants";
+
+export type SelectItemIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseSelect.ItemIndicator>,
+  "className" | "style"
+>;
+
+export function SelectItemIndicator(props: SelectItemIndicatorProps) {
+  return (
+    <BaseSelect.ItemIndicator className={selectItemIndicatorVariants()} {...props}>
+      {props.children ?? <Check aria-hidden className="size-4" />}
+    </BaseSelect.ItemIndicator>
+  );
+}
diff --git a/packages/propel/src/ui/select/select-item-text.tsx b/packages/propel/src/ui/select/select-item-text.tsx
new file mode 100644
index 0000000..2e7b132
--- /dev/null
+++ b/packages/propel/src/ui/select/select-item-text.tsx
@@ -0,0 +1,3 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export const SelectItemText = BaseSelect.ItemText;
diff --git a/packages/propel/src/ui/select/select-item.tsx b/packages/propel/src/ui/select/select-item.tsx
new file mode 100644
index 0000000..96a6b09
--- /dev/null
+++ b/packages/propel/src/ui/select/select-item.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+import { selectItemVariants } from "./variants";
+
+export type SelectItemProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Item>,
+  "className" | "style"
+>;
+
+export function SelectItem(props: SelectItemProps) {
+  return <BaseSelect.Item className={selectItemVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select-label.tsx b/packages/propel/src/ui/select/select-label.tsx
new file mode 100644
index 0000000..ad6b5e6
--- /dev/null
+++ b/packages/propel/src/ui/select/select-label.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+import { selectLabelVariants } from "./variants";
+
+export type SelectLabelProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Label>,
+  "className" | "style"
+>;
+
+export function SelectLabel(props: SelectLabelProps) {
+  return <BaseSelect.Label className={selectLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select-list.tsx b/packages/propel/src/ui/select/select-list.tsx
new file mode 100644
index 0000000..366543c
--- /dev/null
+++ b/packages/propel/src/ui/select/select-list.tsx
@@ -0,0 +1,3 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export const SelectList = BaseSelect.List;
diff --git a/packages/propel/src/ui/select/select-popup.tsx b/packages/propel/src/ui/select/select-popup.tsx
new file mode 100644
index 0000000..a125f62
--- /dev/null
+++ b/packages/propel/src/ui/select/select-popup.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+import { selectPopupVariants } from "./variants";
+
+export type SelectPopupProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Popup>,
+  "className" | "style"
+>;
+
+export function SelectPopup(props: SelectPopupProps) {
+  return <BaseSelect.Popup className={selectPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select-portal.tsx b/packages/propel/src/ui/select/select-portal.tsx
new file mode 100644
index 0000000..3005ae3
--- /dev/null
+++ b/packages/propel/src/ui/select/select-portal.tsx
@@ -0,0 +1,3 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export const SelectPortal = BaseSelect.Portal;
diff --git a/packages/propel/src/ui/select/select-positioner.tsx b/packages/propel/src/ui/select/select-positioner.tsx
new file mode 100644
index 0000000..24509f7
--- /dev/null
+++ b/packages/propel/src/ui/select/select-positioner.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+import { selectPositionerVariants } from "./variants";
+
+export type SelectPositionerProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Positioner>,
+  "className" | "style"
+>;
+
+export function SelectPositioner(props: SelectPositionerProps) {
+  return <BaseSelect.Positioner className={selectPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select-scroll-down-arrow.tsx b/packages/propel/src/ui/select/select-scroll-down-arrow.tsx
new file mode 100644
index 0000000..4e6944d
--- /dev/null
+++ b/packages/propel/src/ui/select/select-scroll-down-arrow.tsx
@@ -0,0 +1,3 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export const SelectScrollDownArrow = BaseSelect.ScrollDownArrow;
diff --git a/packages/propel/src/ui/select/select-scroll-up-arrow.tsx b/packages/propel/src/ui/select/select-scroll-up-arrow.tsx
new file mode 100644
index 0000000..364c3f3
--- /dev/null
+++ b/packages/propel/src/ui/select/select-scroll-up-arrow.tsx
@@ -0,0 +1,3 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export const SelectScrollUpArrow = BaseSelect.ScrollUpArrow;
diff --git a/packages/propel/src/ui/select/select-trigger.tsx b/packages/propel/src/ui/select/select-trigger.tsx
new file mode 100644
index 0000000..2cbe938
--- /dev/null
+++ b/packages/propel/src/ui/select/select-trigger.tsx
@@ -0,0 +1,13 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+import { selectTriggerVariants } from "./variants";
+
+export type SelectTriggerProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Trigger>,
+  "className" | "style"
+>;
+
+export function SelectTrigger(props: SelectTriggerProps) {
+  return <BaseSelect.Trigger className={selectTriggerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select-value.tsx b/packages/propel/src/ui/select/select-value.tsx
new file mode 100644
index 0000000..a700323
--- /dev/null
+++ b/packages/propel/src/ui/select/select-value.tsx
@@ -0,0 +1,11 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+import type * as React from "react";
+
+export type SelectValueProps = Omit<
+  React.ComponentProps<typeof BaseSelect.Value>,
+  "className" | "style"
+>;
+
+export function SelectValue(props: SelectValueProps) {
+  return <BaseSelect.Value {...props} />;
+}
diff --git a/packages/propel/src/ui/select/select.stories.tsx b/packages/propel/src/ui/select/select.stories.tsx
new file mode 100644
index 0000000..537b74a
--- /dev/null
+++ b/packages/propel/src/ui/select/select.stories.tsx
@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import { Field, FieldError } from "../field/index";
+import {
+  Select,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectLabel,
+  SelectList,
+  SelectPopup,
+  SelectPortal,
+  SelectPositioner,
+  SelectScrollDownArrow,
+  SelectScrollUpArrow,
+  SelectTrigger,
+  SelectValue,
+} from "./index";
+
+const SERVER_TYPES = [
+  { label: "General purpose", value: "general" },
+  { label: "Compute optimized", value: "compute" },
+  { label: "Memory optimized", value: "memory" },
+];
+
+const meta = {
+  title: "UI/Select",
+  component: Select,
+  subcomponents: {
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+    SelectIcon,
+    SelectPortal,
+    SelectPositioner,
+    SelectPopup,
+    SelectList,
+    SelectItem,
+    SelectItemIndicator,
+    SelectItemText,
+    SelectScrollUpArrow,
+    SelectScrollDownArrow,
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Trigger-based select control composed inside Field.Root for names and validation. */
+export const Default: Story = {
+  args: { items: SERVER_TYPES, defaultValue: "general", required: true },
+  render: (args) => (
+    <Field name="serverType">
+      <Select {...args}>
+        <div className="flex w-fit flex-col gap-1.5">
+          <SelectLabel>Server type</SelectLabel>
+          <SelectTrigger>
+            <SelectValue />
+            <SelectIcon />
+          </SelectTrigger>
+        </div>
+        <SelectPortal>
+          <SelectPositioner>
+            <SelectPopup>
+              <SelectList>
+                {SERVER_TYPES.map(({ label, value }) => (
+                  <SelectItem key={value} value={value}>
+                    <SelectItemIndicator />
+                    <SelectItemText>{label}</SelectItemText>
+                  </SelectItem>
+                ))}
+              </SelectList>
+            </SelectPopup>
+          </SelectPositioner>
+        </SelectPortal>
+        <FieldError magnitude="md" />
+      </Select>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("combobox", { name: "Server type" }));
+    const popup = within(document.body);
+    await expect(
+      await popup.findByRole("option", { name: "Compute optimized" }),
+    ).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/ui/select/select.tsx b/packages/propel/src/ui/select/select.tsx
new file mode 100644
index 0000000..ff160ad
--- /dev/null
+++ b/packages/propel/src/ui/select/select.tsx
@@ -0,0 +1,12 @@
+import { Select as BaseSelect } from "@base-ui/react/select";
+
+export type SelectProps<Value, Multiple extends boolean | undefined = false> = Omit<
+  BaseSelect.Root.Props<Value, Multiple>,
+  "className" | "style"
+>;
+
+export function Select<Value, Multiple extends boolean | undefined = false>(
+  props: SelectProps<Value, Multiple>,
+) {
+  return <BaseSelect.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/select/variants.ts b/packages/propel/src/ui/select/variants.ts
new file mode 100644
index 0000000..0fb727e
--- /dev/null
+++ b/packages/propel/src/ui/select/variants.ts
@@ -0,0 +1,31 @@
+import { cva, cx } from "class-variance-authority";
+
+export const selectLabelVariants = cva("text-14 font-medium text-primary");
+export const selectTriggerVariants = cva(
+  cx(
+    "flex h-9 min-w-48 items-center justify-between gap-2 rounded-md border-sm border-subtle bg-layer-2 px-3 text-14 text-primary outline-none",
+    "hover:border-subtle-1 hover:bg-layer-2-hover",
+    "focus-visible:border-accent-strong focus-visible:ring-2 focus-visible:ring-accent-strong/20",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const selectIconVariants = cva(
+  "flex size-4 items-center justify-center text-icon-secondary",
+);
+export const selectPositionerVariants = cva("z-50 outline-none");
+export const selectPopupVariants = cva(
+  cx(
+    "max-h-[min(var(--available-height),18rem)] min-w-(--anchor-width) overflow-y-auto rounded-md border-sm border-subtle bg-layer-1 p-1 shadow-overlay-100",
+    "origin-(--transform-origin)",
+  ),
+);
+export const selectItemVariants = cva(
+  cx(
+    "grid min-h-8 cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm px-2 text-14 text-primary outline-none",
+    "data-highlighted:bg-layer-transparent-hover data-highlighted:text-primary",
+    "data-disabled:cursor-not-allowed data-disabled:text-disabled",
+  ),
+);
+export const selectItemIndicatorVariants = cva(
+  "flex size-4 items-center justify-center text-icon-accent-primary",
+);
diff --git a/packages/propel/src/ui/separator/index.tsx b/packages/propel/src/ui/separator/index.tsx
new file mode 100644
index 0000000..2139138
--- /dev/null
+++ b/packages/propel/src/ui/separator/index.tsx
@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from "./separator";
diff --git a/packages/propel/src/ui/separator/separator.stories.tsx b/packages/propel/src/ui/separator/separator.stories.tsx
new file mode 100644
index 0000000..cfc714f
--- /dev/null
+++ b/packages/propel/src/ui/separator/separator.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Separator } from "./index";
+
+// Separator is static — a thin rule with no interaction-state styling — so it gets no
+// pseudo-states story; its only axis is `orientation`, driven by Base UI.
+const meta = {
+  title: "UI/Separator",
+  component: Separator,
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The default horizontal rule, dividing stacked content. */
+export const Horizontal: Story = {
+  render: (args) => (
+    <div className="flex w-72 flex-col gap-3">
+      <span className="text-13 text-secondary">Above</span>
+      <Separator {...args} />
+      <span className="text-13 text-secondary">Below</span>
+    </div>
+  ),
+};
+
+/** `orientation="vertical"` divides inline content; Base UI sets `aria-orientation`. */
+export const Vertical: Story = {
+  render: (args) => (
+    <div className="flex h-6 items-center gap-3">
+      <span className="text-13 text-secondary">Left</span>
+      <Separator {...args} orientation="vertical" />
+      <span className="text-13 text-secondary">Right</span>
+    </div>
+  ),
+};
+
+/**
+ * Behavior: the separator exposes `role="separator"` and reflects its orientation via
+ * `aria-orientation`. Tagged out of the sidebar/docs/manifest but still runs under `test`.
+ */
+export const HasSeparatorRole: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Separator />
+      <Separator orientation="vertical" />
+    </div>
+  ),
+  play: async ({ canvas }) => {
+    const [horizontal, vertical] = canvas.getAllByRole("separator");
+    await expect(horizontal).toHaveAttribute("aria-orientation", "horizontal");
+    await expect(vertical).toHaveAttribute("aria-orientation", "vertical");
+  },
+};
diff --git a/packages/propel/src/ui/separator/separator.tsx b/packages/propel/src/ui/separator/separator.tsx
new file mode 100644
index 0000000..cd48055
--- /dev/null
+++ b/packages/propel/src/ui/separator/separator.tsx
@@ -0,0 +1,18 @@
+import { Separator as BaseSeparator } from "@base-ui/react/separator";
+import type * as React from "react";
+
+import { separatorVariants } from "./variants";
+
+export type SeparatorProps = Omit<
+  React.ComponentProps<typeof BaseSeparator>,
+  "className" | "style"
+>;
+
+/**
+ * A thin rule that visually divides content. Pass `orientation` (`"horizontal"` default |
+ * `"vertical"`); Base UI sets `role="separator"` and `aria-orientation` accordingly. Maps 1:1 to
+ * Base UI's `Separator`.
+ */
+export function Separator(props: SeparatorProps) {
+  return <BaseSeparator className={separatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/separator/variants.ts b/packages/propel/src/ui/separator/variants.ts
new file mode 100644
index 0000000..64e78de
--- /dev/null
+++ b/packages/propel/src/ui/separator/variants.ts
@@ -0,0 +1,13 @@
+import { cva, cx } from "class-variance-authority";
+
+// Separator is a structural divider — Base UI drives its `orientation` (and the
+// matching `role`/`aria-orientation`) from the native `orientation` prop and
+// reflects it as `[data-orientation]`, so styling keys off that single source of
+// truth rather than a duplicate styling axis. Uses the Figma `border/subtle` rule.
+export const separatorVariants = cva(
+  cx(
+    "shrink-0 border-subtle",
+    "data-[orientation=horizontal]:h-0 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:border-t-sm",
+    "data-[orientation=vertical]:w-0 data-[orientation=vertical]:self-stretch data-[orientation=vertical]:border-s-sm",
+  ),
+);
diff --git a/packages/propel/src/ui/slider/index.tsx b/packages/propel/src/ui/slider/index.tsx
new file mode 100644
index 0000000..0c70cbb
--- /dev/null
+++ b/packages/propel/src/ui/slider/index.tsx
@@ -0,0 +1,7 @@
+export { Slider, type SliderProps } from "./slider";
+export { SliderControl, type SliderControlProps } from "./slider-control";
+export { SliderIndicator, type SliderIndicatorProps } from "./slider-indicator";
+export { SliderLabel, type SliderLabelProps } from "./slider-label";
+export { SliderThumb, type SliderThumbProps } from "./slider-thumb";
+export { SliderTrack, type SliderTrackProps } from "./slider-track";
+export { SliderValue, type SliderValueProps } from "./slider-value";
diff --git a/packages/propel/src/ui/slider/slider-control.tsx b/packages/propel/src/ui/slider/slider-control.tsx
new file mode 100644
index 0000000..3a1c77a
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-control.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderControlVariants } from "./variants";
+
+export type SliderControlProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Control>,
+  "className" | "style"
+>;
+
+export function SliderControl(props: SliderControlProps) {
+  return <BaseSlider.Control className={sliderControlVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider-indicator.tsx b/packages/propel/src/ui/slider/slider-indicator.tsx
new file mode 100644
index 0000000..6c69553
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-indicator.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderIndicatorVariants } from "./variants";
+
+export type SliderIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Indicator>,
+  "className" | "style"
+>;
+
+export function SliderIndicator(props: SliderIndicatorProps) {
+  return <BaseSlider.Indicator className={sliderIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider-label.tsx b/packages/propel/src/ui/slider/slider-label.tsx
new file mode 100644
index 0000000..83842d2
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-label.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderLabelVariants } from "./variants";
+
+export type SliderLabelProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Label>,
+  "className" | "style"
+>;
+
+export function SliderLabel(props: SliderLabelProps) {
+  return <BaseSlider.Label className={sliderLabelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider-thumb.tsx b/packages/propel/src/ui/slider/slider-thumb.tsx
new file mode 100644
index 0000000..859511c
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-thumb.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderThumbVariants } from "./variants";
+
+export type SliderThumbProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Thumb>,
+  "className" | "style"
+>;
+
+export function SliderThumb(props: SliderThumbProps) {
+  return <BaseSlider.Thumb className={sliderThumbVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider-track.tsx b/packages/propel/src/ui/slider/slider-track.tsx
new file mode 100644
index 0000000..af8c125
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-track.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderTrackVariants } from "./variants";
+
+export type SliderTrackProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Track>,
+  "className" | "style"
+>;
+
+export function SliderTrack(props: SliderTrackProps) {
+  return <BaseSlider.Track className={sliderTrackVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider-value.tsx b/packages/propel/src/ui/slider/slider-value.tsx
new file mode 100644
index 0000000..c7bc872
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider-value.tsx
@@ -0,0 +1,13 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+import type * as React from "react";
+
+import { sliderValueVariants } from "./variants";
+
+export type SliderValueProps = Omit<
+  React.ComponentProps<typeof BaseSlider.Value>,
+  "className" | "style"
+>;
+
+export function SliderValue(props: SliderValueProps) {
+  return <BaseSlider.Value className={sliderValueVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/slider.stories.tsx b/packages/propel/src/ui/slider/slider.stories.tsx
new file mode 100644
index 0000000..da546bc
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderLabel,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from "./index";
+
+// UI-tier story: composes the atomic slider parts (root + label + value + control +
+// track + indicator + thumb). This is where you wire up multiple thumbs or a custom
+// layout. The components-tier story shows the ready-made single-thumb `Slider`.
+const meta = {
+  title: "UI/Slider",
+  component: Slider,
+  subcomponents: {
+    SliderLabel,
+    SliderValue,
+    SliderControl,
+    SliderTrack,
+    SliderIndicator,
+    SliderThumb,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-80">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single-thumb slider assembled from the raw parts. */
+export const Default: Story = {
+  args: { defaultValue: 40, min: 0, max: 100, step: 1 },
+  render: (args) => (
+    <Slider {...args}>
+      <SliderLabel>Volume</SliderLabel>
+      <SliderValue />
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb aria-label="Volume" />
+        </SliderTrack>
+      </SliderControl>
+    </Slider>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Volume" })).toBeInTheDocument();
+  },
+};
+
+/** A range slider: two thumbs share one track. */
+export const Range: Story = {
+  args: {
+    defaultValue: [0.2, 0.8],
+    min: 0,
+    max: 1,
+    step: 0.01,
+    format: { style: "percent", maximumFractionDigits: 0 },
+  },
+  render: (args) => (
+    <Slider {...args}>
+      <SliderLabel>Scaling threshold</SliderLabel>
+      <SliderValue />
+      <SliderControl>
+        <SliderTrack>
+          <SliderIndicator />
+          <SliderThumb index={0} aria-label="Minimum threshold" />
+          <SliderThumb index={1} aria-label="Maximum threshold" />
+        </SliderTrack>
+      </SliderControl>
+    </Slider>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole("slider", { name: "Minimum threshold" })).toBeInTheDocument();
+    await expect(canvas.getByRole("slider", { name: "Maximum threshold" })).toBeInTheDocument();
+  },
+};
diff --git a/packages/propel/src/ui/slider/slider.tsx b/packages/propel/src/ui/slider/slider.tsx
new file mode 100644
index 0000000..b8bf447
--- /dev/null
+++ b/packages/propel/src/ui/slider/slider.tsx
@@ -0,0 +1,12 @@
+import { Slider as BaseSlider } from "@base-ui/react/slider";
+
+import { sliderVariants } from "./variants";
+
+export type SliderProps<Value extends number | readonly number[] = number | readonly number[]> =
+  Omit<BaseSlider.Root.Props<Value>, "className" | "style">;
+
+export function Slider<Value extends number | readonly number[] = number | readonly number[]>(
+  props: SliderProps<Value>,
+) {
+  return <BaseSlider.Root className={sliderVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/slider/variants.ts b/packages/propel/src/ui/slider/variants.ts
new file mode 100644
index 0000000..008b2c1
--- /dev/null
+++ b/packages/propel/src/ui/slider/variants.ts
@@ -0,0 +1,15 @@
+import { cva, cx } from "class-variance-authority";
+
+export const sliderVariants = cva("grid w-full grid-cols-[1fr_auto] items-center gap-x-3 gap-y-2");
+export const sliderValueVariants = cva("text-13 text-secondary");
+export const sliderControlVariants = cva("col-span-2 flex h-5 items-center");
+export const sliderTrackVariants = cva("relative h-1 w-full rounded-full bg-layer-3");
+export const sliderIndicatorVariants = cva("absolute h-full rounded-full bg-accent-primary");
+export const sliderThumbVariants = cva(
+  cx(
+    "block size-4 rounded-full border-sm border-accent-strong bg-layer-1 shadow-raised-100 outline-none",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-offset-2",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-60",
+  ),
+);
+export const sliderLabelVariants = cva("text-14 font-medium text-primary");
diff --git a/packages/propel/src/ui/switch/index.tsx b/packages/propel/src/ui/switch/index.tsx
new file mode 100644
index 0000000..aa42ee9
--- /dev/null
+++ b/packages/propel/src/ui/switch/index.tsx
@@ -0,0 +1,2 @@
+export { Switch, type SwitchMagnitude, type SwitchProps } from "./switch";
+export { SwitchThumb, type SwitchThumbProps } from "./switch-thumb";
diff --git a/packages/propel/src/ui/switch/switch-thumb.tsx b/packages/propel/src/ui/switch/switch-thumb.tsx
new file mode 100644
index 0000000..e49d1a5
--- /dev/null
+++ b/packages/propel/src/ui/switch/switch-thumb.tsx
@@ -0,0 +1,21 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type * as React from "react";
+
+import type { SwitchMagnitude } from "./switch";
+import { thumbVariants } from "./variants";
+
+export type SwitchThumbProps = Omit<
+  React.ComponentProps<typeof BaseSwitch.Thumb>,
+  "className" | "style"
+> & {
+  /** Must match the parent `Switch`'s `magnitude` so the thumb travel lines up with the track. */
+  magnitude: SwitchMagnitude;
+};
+
+/**
+ * The switch knob (Base UI `Switch.Thumb`). Rendered inside a `Switch`; it slides between the
+ * off/on gutters when the track is checked. Pass the same `magnitude` as the parent `Switch`.
+ */
+export function SwitchThumb({ magnitude, ...props }: SwitchThumbProps) {
+  return <BaseSwitch.Thumb className={thumbVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/switch/switch.stories.tsx b/packages/propel/src/ui/switch/switch.stories.tsx
new file mode 100644
index 0000000..845249e
--- /dev/null
+++ b/packages/propel/src/ui/switch/switch.stories.tsx
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import { Switch, type SwitchMagnitude, SwitchThumb } from "./index";
+
+const MAGNITUDES: SwitchMagnitude[] = ["lg", "md", "sm"];
+
+// UI-tier story: composes the atomic track + thumb. `Switch` is the track (Base UI
+// `Switch.Root`, `role="switch"`); the sliding knob is a `SwitchThumb` child that must
+// carry the SAME `magnitude` so its travel lines up. The components-tier story shows the
+// ready-made `Switch` that threads `magnitude` through both for you.
+const meta = {
+  title: "UI/Switch",
+  component: Switch,
+  subcomponents: { SwitchThumb },
+  args: { magnitude: "md", "aria-label": "Notifications" },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Track + thumb composed with a matching magnitude. */
+export const Default: Story = {
+  args: { magnitude: "md", defaultChecked: true },
+  render: (args) => (
+    <Switch {...args}>
+      <SwitchThumb magnitude={args.magnitude} />
+    </Switch>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const sw = canvas.getByRole("switch");
+    await expect(sw).toHaveAttribute("aria-checked", "true");
+    await userEvent.click(sw);
+    await expect(sw).toHaveAttribute("aria-checked", "false");
+  },
+};
+
+/** The three track sizes, thumb matched to each. */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <Switch
+          key={magnitude}
+          magnitude={magnitude}
+          defaultChecked
+          aria-label={`Size ${magnitude}`}
+        >
+          <SwitchThumb magnitude={magnitude} />
+        </Switch>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/switch/switch.tsx b/packages/propel/src/ui/switch/switch.tsx
new file mode 100644
index 0000000..ec497ed
--- /dev/null
+++ b/packages/propel/src/ui/switch/switch.tsx
@@ -0,0 +1,28 @@
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { trackVariants } from "./variants";
+
+export type SwitchMagnitude = NonNullable<VariantProps<typeof trackVariants>["magnitude"]>;
+
+export type SwitchProps = Omit<
+  React.ComponentProps<typeof BaseSwitch.Root>,
+  "className" | "style"
+> & {
+  /** Track size, from the Figma "Toggle" Size scale: `lg` 30×18, `md` 27×16, `sm` 23×14. */
+  magnitude: SwitchMagnitude;
+};
+
+/**
+ * The switch track (Base UI `Switch.Root`). A switch toggles a single setting on or off; the Root
+ * carries `role="switch"` and full keyboard/form support. Maps to Figma's "Toggle" component.
+ * Render a `SwitchThumb` (with the same `magnitude`) as its child.
+ *
+ * On/off, `disabled`, and `readOnly` are control state from the primitive, not variants — pass them
+ * as props (`checked`/`defaultChecked`, `disabled`, `readOnly`). Only the size axis (`magnitude`)
+ * is a visual variant.
+ */
+export function Switch({ magnitude, ...props }: SwitchProps) {
+  return <BaseSwitch.Root className={trackVariants({ magnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/switch/variants.ts b/packages/propel/src/ui/switch/variants.ts
new file mode 100644
index 0000000..2ac3f95
--- /dev/null
+++ b/packages/propel/src/ui/switch/variants.ts
@@ -0,0 +1,44 @@
+import { cva, cx } from "class-variance-authority";
+
+// Magnitudes follow the Figma "Toggle" Size scale (track w×h, px):
+//   L 30×18 → lg · M 27×16 → md · S 23×14 → sm.
+// The thumb is the track height minus a 1px gap top/bottom; on/off it travels
+// from the 1px gutter on one side to the 1px gutter on the other.
+export const trackVariants = cva(
+  cx(
+    "relative inline-flex shrink-0 items-center rounded-full p-px transition-colors",
+    // Off track = Figma icon/placeholder; on track = accent/primary.
+    "bg-icon-placeholder data-checked:bg-accent-primary",
+    // Unchangeable (disabled or readonly) dims the whole control to 40%,
+    // matching Figma's "Unchangeable" states. Disabled also blocks the cursor.
+    "data-disabled:cursor-not-allowed data-disabled:opacity-40 data-readonly:opacity-40",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-strong",
+  ),
+  {
+    variants: {
+      magnitude: {
+        lg: "h-[18px] w-[30px]",
+        md: "h-4 w-[27px]",
+        sm: "h-[14px] w-[23px]",
+      },
+    },
+  },
+);
+
+// Thumb diameter per magnitude (track height − 2px gap) and the travel distance
+// when checked (track width − thumb − 2px of gutters).
+// The thumb stays white in every theme and in both on/off states. `surface-1`
+// is white in light mode but flips dark in dark mode, so the thumb pins to the
+// on-color token (the white-on-tone color) regardless of checked state.
+export const thumbVariants = cva(
+  "rounded-full bg-on-color shadow-raised-100 transition-transform",
+  {
+    variants: {
+      magnitude: {
+        lg: "size-4 data-checked:translate-x-[12px]",
+        md: "size-3.5 data-checked:translate-x-[11px]",
+        sm: "size-3 data-checked:translate-x-[9px]",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/table/chevron-glyph-slot.tsx b/packages/propel/src/ui/table/chevron-glyph-slot.tsx
new file mode 100644
index 0000000..51e659b
--- /dev/null
+++ b/packages/propel/src/ui/table/chevron-glyph-slot.tsx
@@ -0,0 +1,5 @@
+import { ChevronsUpDown } from "lucide-react";
+
+export function ChevronGlyphSlot({ Glyph }: { Glyph: typeof ChevronsUpDown }) {
+  return <Glyph aria-hidden className="size-3.5 shrink-0 text-icon-secondary" />;
+}
diff --git a/packages/propel/src/ui/table/index.tsx b/packages/propel/src/ui/table/index.tsx
new file mode 100644
index 0000000..84a80a6
--- /dev/null
+++ b/packages/propel/src/ui/table/index.tsx
@@ -0,0 +1,17 @@
+export { Table, type TablePinned, type TableProps, type TableVariant } from "./table";
+export { TableBody, type TableBodyProps } from "./table-body";
+export { TableCell, type TableCellProps } from "./table-cell";
+export {
+  actionableTriggerClass,
+  cellBorder,
+  headBorder,
+  pinnedCellClass,
+  pinnedHeadClass,
+  selectedTriggerClass,
+  TableCellSlot,
+  TableVariantContext,
+  useTableCellClass,
+} from "./table-context";
+export { TableHead, type TableHeadProps, type TableHeadSort } from "./table-head";
+export { TableHeader, type TableHeaderProps } from "./table-header";
+export { TableRow, type TableRowProps } from "./table-row";
diff --git a/packages/propel/src/ui/table/table-body.tsx b/packages/propel/src/ui/table/table-body.tsx
new file mode 100644
index 0000000..437303f
--- /dev/null
+++ b/packages/propel/src/ui/table/table-body.tsx
@@ -0,0 +1,8 @@
+import type * as React from "react";
+
+export type TableBodyProps = Omit<React.ComponentProps<"tbody">, "className" | "style">;
+
+/** Body section (`<tbody>`). Holds the data `TableRow`s. */
+export function TableBody(props: TableBodyProps) {
+  return <tbody {...props} />;
+}
diff --git a/packages/propel/src/ui/table/table-cell.tsx b/packages/propel/src/ui/table/table-cell.tsx
new file mode 100644
index 0000000..8b6e7d8
--- /dev/null
+++ b/packages/propel/src/ui/table/table-cell.tsx
@@ -0,0 +1,38 @@
+import { cx } from "class-variance-authority";
+import type * as React from "react";
+
+import {
+  pinnedCellClass,
+  TableCellSlot,
+  type TablePinned,
+  useTableCellClass,
+} from "./table-context";
+
+export type TableCellProps = Omit<React.ComponentProps<"td">, "className" | "style"> & {
+  /** Leading content beside the cell text — an icon or an `Avatar`. */
+  inlineStartNode?: React.ReactNode;
+  /** Trailing content beside the cell text — an icon or an `Avatar`. */
+  inlineEndNode?: React.ReactNode;
+  /** Pin this cell to the inline-start/end edge when the table scrolls sideways. */
+  pinned?: TablePinned;
+};
+
+/** A data cell (`<td>`). */
+export function TableCell({
+  inlineStartNode,
+  inlineEndNode,
+  pinned,
+  children,
+  ...props
+}: TableCellProps) {
+  const className = useTableCellClass();
+  return (
+    <td className={cx(className, "px-4 py-2", pinnedCellClass(pinned))} {...props}>
+      <div className="flex items-center gap-2">
+        {inlineStartNode != null ? <TableCellSlot>{inlineStartNode}</TableCellSlot> : null}
+        <div className="min-w-0 flex-1 truncate">{children}</div>
+        {inlineEndNode != null ? <TableCellSlot>{inlineEndNode}</TableCellSlot> : null}
+      </div>
+    </td>
+  );
+}
diff --git a/packages/propel/src/ui/table/table-context.tsx b/packages/propel/src/ui/table/table-context.tsx
new file mode 100644
index 0000000..fc559b6
--- /dev/null
+++ b/packages/propel/src/ui/table/table-context.tsx
@@ -0,0 +1,58 @@
+import { cx } from "class-variance-authority";
+import * as React from "react";
+
+export type TableVariant = "table" | "spreadsheet";
+export type TablePinned = "start" | "end";
+
+export const TableVariantContext = React.createContext<TableVariant>("table");
+
+export const headBorder: Record<TableVariant, string> = {
+  table: "border-b border-subtle",
+  spreadsheet: "border-b-[0.5px] border-e-[0.5px] border-subtle last:border-e-0",
+};
+
+export const cellBorder: Record<TableVariant, string> = {
+  table: "border-b-[0.5px] border-subtle group-last/body-row:border-b-0",
+  spreadsheet:
+    "border-b-[0.5px] border-e-[0.5px] border-subtle last:border-e-0 group-last/body-row:border-b-0",
+};
+
+function pinnedEdgeBorder(pinned: TablePinned) {
+  return pinned === "start" ? "border-e-[0.5px] border-subtle" : "border-s-[0.5px] border-subtle";
+}
+
+export function pinnedHeadClass(pinned: TablePinned | undefined) {
+  if (!pinned) return "z-20";
+  return cx(
+    "sticky z-30",
+    pinned === "start" ? "inset-s-0" : "inset-e-0",
+    pinnedEdgeBorder(pinned),
+  );
+}
+
+export function pinnedCellClass(pinned: TablePinned | undefined) {
+  if (!pinned) return "";
+  return cx(
+    "sticky z-10 bg-layer-2 group-hover/body-row:bg-layer-2-hover",
+    pinned === "start" ? "inset-s-0" : "inset-e-0",
+    pinnedEdgeBorder(pinned),
+  );
+}
+
+export function useTableCellClass() {
+  const tableVariant = React.useContext(TableVariantContext);
+  return cx("h-11 align-middle", cellBorder[tableVariant]);
+}
+
+export function TableCellSlot({ children }: { children: React.ReactNode }) {
+  return <span className="flex shrink-0 items-center">{children}</span>;
+}
+
+export const actionableTriggerClass = cx(
+  "flex h-11 w-full items-center outline-none",
+  "bg-layer-transparent hover:bg-layer-transparent-hover focus-visible:bg-layer-transparent-hover",
+  "data-popup-open:bg-layer-transparent-active",
+  "disabled:pointer-events-none disabled:text-disabled",
+);
+
+export const selectedTriggerClass = "bg-layer-transparent-selected";
diff --git a/packages/propel/src/ui/table/table-head.tsx b/packages/propel/src/ui/table/table-head.tsx
new file mode 100644
index 0000000..7e55144
--- /dev/null
+++ b/packages/propel/src/ui/table/table-head.tsx
@@ -0,0 +1,80 @@
+import { cx, type VariantProps } from "class-variance-authority";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+
+import { ChevronGlyphSlot } from "./chevron-glyph-slot";
+import {
+  headBorder,
+  pinnedHeadClass,
+  TableVariantContext,
+  type TablePinned,
+} from "./table-context";
+import { tableHeadVariants } from "./variants";
+
+/** Sort direction of a sortable `TableHead`. `none` shows the neutral affordance. */
+export type TableHeadSort = "asc" | "desc" | "none";
+
+const sortIcon: Record<TableHeadSort, typeof ChevronsUpDown> = {
+  asc: ChevronUp,
+  desc: ChevronDown,
+  none: ChevronsUpDown,
+};
+
+const ariaSort: Record<TableHeadSort, React.AriaAttributes["aria-sort"]> = {
+  asc: "ascending",
+  desc: "descending",
+  none: "none",
+};
+
+export type TableHeadProps = Omit<React.ComponentProps<"th">, "className" | "style" | "aria-sort"> &
+  VariantProps<typeof tableHeadVariants> & {
+    /** Visual treatment. */
+    variant: NonNullable<VariantProps<typeof tableHeadVariants>["variant"]>;
+    /** Current sort state for a sortable header. */
+    sort?: TableHeadSort;
+    /** Click handler for the sort control; only used when the header is sortable. */
+    onSort?: () => void;
+    /** Pin this header to the inline-start/end edge when the table scrolls sideways. */
+    pinned?: TablePinned;
+  };
+
+/** A header cell (`<th>`), optionally sortable and/or pinned. */
+export function TableHead({
+  variant,
+  sort = "none",
+  onSort,
+  pinned,
+  children,
+  ...props
+}: TableHeadProps) {
+  const tableVariant = React.useContext(TableVariantContext);
+  const isSortable = variant === "sortable";
+  const hasSortControl = isSortable && onSort != null;
+  const SortGlyph = sortIcon[sort];
+
+  return (
+    <th
+      scope="col"
+      aria-sort={isSortable ? ariaSort[sort] : undefined}
+      className={cx(
+        tableHeadVariants({ variant }),
+        headBorder[tableVariant],
+        pinnedHeadClass(pinned),
+      )}
+      {...props}
+    >
+      {hasSortControl ? (
+        <button
+          type="button"
+          onClick={onSort}
+          className="-mx-1 inline-flex items-center gap-1.5 rounded-sm px-1 text-tertiary hover:text-secondary"
+        >
+          <span className="truncate">{children}</span>
+          <ChevronGlyphSlot Glyph={SortGlyph} />
+        </button>
+      ) : (
+        <div className="truncate">{children}</div>
+      )}
+    </th>
+  );
+}
diff --git a/packages/propel/src/ui/table/table-header.tsx b/packages/propel/src/ui/table/table-header.tsx
new file mode 100644
index 0000000..8794201
--- /dev/null
+++ b/packages/propel/src/ui/table/table-header.tsx
@@ -0,0 +1,8 @@
+import type * as React from "react";
+
+export type TableHeaderProps = Omit<React.ComponentProps<"thead">, "className" | "style">;
+
+/** Header section (`<thead>`). Holds a single `TableRow` of `TableHead` cells. */
+export function TableHeader(props: TableHeaderProps) {
+  return <thead {...props} />;
+}
diff --git a/packages/propel/src/ui/table/table-row.tsx b/packages/propel/src/ui/table/table-row.tsx
new file mode 100644
index 0000000..1f3d3cf
--- /dev/null
+++ b/packages/propel/src/ui/table/table-row.tsx
@@ -0,0 +1,8 @@
+import type * as React from "react";
+
+export type TableRowProps = Omit<React.ComponentProps<"tr">, "className" | "style">;
+
+/** A table row (`<tr>`). */
+export function TableRow(props: TableRowProps) {
+  return <tr className="group/body-row bg-layer-2 hover:bg-layer-2-hover" {...props} />;
+}
diff --git a/packages/propel/src/ui/table/table.stories.tsx b/packages/propel/src/ui/table/table.stories.tsx
new file mode 100644
index 0000000..bca1d79
--- /dev/null
+++ b/packages/propel/src/ui/table/table.stories.tsx
@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import * as React from "react";
+import { expect, userEvent } from "storybook/test";
+
+import { Avatar, AvatarFallback } from "../avatar/index";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type TableHeadSort,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC table parts (each renders a single table element).
+// The components-tier `Table` story shows the ready-made editable/action cells (which compose
+// propel's Menu) plus Pagination. Here you assemble the raw structure — Table › Header/Body ›
+// Row › Head/Cell — and use the bare sortable `TableHead` (without an attached menu).
+const meta = {
+  title: "UI/Table",
+  component: Table,
+  subcomponents: { TableHeader, TableBody, TableRow, TableHead, TableCell },
+  args: { variant: "table" },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type Person = { name: string; display: string; email: string; role: string };
+
+const PEOPLE: Person[] = [
+  { name: "Chargers", display: "astra", email: "astra.terra@example.com", role: "Admin" },
+  { name: "Alpha", display: "nova", email: "nova.star@example.com", role: "Member" },
+  { name: "Beta", display: "lyra", email: "lyra.constellation@example.com", role: "Member" },
+];
+
+const COLUMNS = ["Name", "Display name", "Email", "Account type"];
+
+/** The standard `table` variant: rounded outer border with row dividers only. */
+export const Default: Story = {
+  render: (args) => (
+    <Table {...args}>
+      <TableHeader>
+        <TableRow>
+          {COLUMNS.map((c) => (
+            <TableHead key={c} variant="default">
+              {c}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {PEOPLE.map((person) => (
+          <TableRow key={person.email}>
+            <TableCell
+              inlineStartNode={
+                <Avatar magnitude="xs" role="img" aria-label={person.name}>
+                  <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
+                </Avatar>
+              }
+            >
+              {person.name}
+            </TableCell>
+            <TableCell>{person.display}</TableCell>
+            <TableCell>{person.email}</TableCell>
+            <TableCell>{person.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+  play: async ({ canvas }) => {
+    await expect(canvas.getAllByRole("columnheader")).toHaveLength(4);
+    // 1 header row + 3 data rows.
+    await expect(canvas.getAllByRole("row")).toHaveLength(4);
+  },
+};
+
+/** The denser `spreadsheet` variant: every cell is fully bordered to form a grid. */
+export const Spreadsheet: Story = {
+  args: { variant: "spreadsheet" },
+  render: (args) => (
+    <Table {...args}>
+      <TableHeader>
+        <TableRow>
+          {COLUMNS.map((c) => (
+            <TableHead key={c} variant="default">
+              {c}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {PEOPLE.map((person) => (
+          <TableRow key={person.email}>
+            <TableCell>{person.name}</TableCell>
+            <TableCell>{person.display}</TableCell>
+            <TableCell>{person.email}</TableCell>
+            <TableCell>{person.role}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+/**
+ * A sortable header (`variant="sortable"`): renders the label as a button with a sort chevron and
+ * reflects the order through `aria-sort`. Clicking cycles none → asc → desc.
+ */
+export const Sortable: Story = {
+  render: function SortableStory(args) {
+    const [sort, setSort] = React.useState<TableHeadSort>("none");
+    const cycle = () => setSort((s) => (s === "none" ? "asc" : s === "asc" ? "desc" : "none"));
+    return (
+      <Table {...args}>
+        <TableHeader>
+          <TableRow>
+            <TableHead variant="sortable" sort={sort} onSort={cycle}>
+              Name
+            </TableHead>
+            <TableHead variant="default">Email</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {PEOPLE.map((person) => (
+            <TableRow key={person.email}>
+              <TableCell>{person.name}</TableCell>
+              <TableCell>{person.email}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+  play: async ({ canvas }) => {
+    const header = canvas.getAllByRole("columnheader")[0];
+    await expect(header).toHaveAttribute("aria-sort", "none");
+    const button = canvas.getByRole("button", { name: "Name" });
+    await userEvent.click(button);
+    await expect(header).toHaveAttribute("aria-sort", "ascending");
+    await userEvent.click(button);
+    await expect(header).toHaveAttribute("aria-sort", "descending");
+  },
+};
+
+/**
+ * A pinned first column (`pinned="start"` on its header + cells) stays put while the rest of the
+ * row scrolls sideways inside a width-constrained frame.
+ */
+export const PinnedColumn: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="w-100">
+      <Table {...args}>
+        <TableHeader>
+          <TableRow>
+            <TableHead variant="default" pinned="start">
+              Name
+            </TableHead>
+            <TableHead variant="default">Display name</TableHead>
+            <TableHead variant="default">Email</TableHead>
+            <TableHead variant="default">Account type</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {PEOPLE.map((person) => (
+            <TableRow key={person.email}>
+              <TableCell
+                pinned="start"
+                inlineStartNode={
+                  <Avatar magnitude="xs" role="img" aria-label={person.name}>
+                    <AvatarFallback tone="indigo">{person.name.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                }
+              >
+                {person.name}
+              </TableCell>
+              <TableCell>{person.display}</TableCell>
+              <TableCell>{person.email}</TableCell>
+              <TableCell>{person.role}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/table/table.tsx b/packages/propel/src/ui/table/table.tsx
new file mode 100644
index 0000000..8009a23
--- /dev/null
+++ b/packages/propel/src/ui/table/table.tsx
@@ -0,0 +1,35 @@
+import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
+import type * as React from "react";
+
+import { scrollbarClass, scrollbarThumbClass } from "../../internal/scrollbar";
+import { TableVariantContext, type TableVariant } from "./table-context";
+
+export type { TablePinned, TableVariant } from "./table-context";
+
+export type TableProps = Omit<React.ComponentProps<"table">, "className" | "style"> & {
+  /** Layout (required). `table` draws row dividers only; `spreadsheet` draws a full grid. */
+  variant: TableVariant;
+};
+
+/** Root `<table>`, wrapped in a rounded, hairline-bordered scroll frame. */
+export function Table({ variant, ...props }: TableProps) {
+  return (
+    <TableVariantContext.Provider value={variant}>
+      <BaseScrollArea.Root className="relative flex max-h-full w-full flex-col overflow-hidden rounded-lg border border-subtle bg-surface-1">
+        <BaseScrollArea.Viewport className="min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-accent-strong focus-visible:ring-inset">
+          <table
+            className="w-full caption-bottom border-collapse text-13 text-primary"
+            {...props}
+          />
+        </BaseScrollArea.Viewport>
+        <BaseScrollArea.Scrollbar orientation="vertical" className={scrollbarClass}>
+          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Scrollbar orientation="horizontal" className={scrollbarClass}>
+          <BaseScrollArea.Thumb className={scrollbarThumbClass} />
+        </BaseScrollArea.Scrollbar>
+        <BaseScrollArea.Corner />
+      </BaseScrollArea.Root>
+    </TableVariantContext.Provider>
+  );
+}
diff --git a/packages/propel/src/ui/table/variants.ts b/packages/propel/src/ui/table/variants.ts
new file mode 100644
index 0000000..0f3b910
--- /dev/null
+++ b/packages/propel/src/ui/table/variants.ts
@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+
+export const tableHeadVariants = cva(
+  "sticky top-0 h-[38px] px-4 py-2 text-start align-middle text-12 font-semibold text-tertiary",
+  {
+    variants: {
+      variant: {
+        default: "bg-layer-1",
+        sortable: "bg-layer-1",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/tabs/index.tsx b/packages/propel/src/ui/tabs/index.tsx
new file mode 100644
index 0000000..1dac9d9
--- /dev/null
+++ b/packages/propel/src/ui/tabs/index.tsx
@@ -0,0 +1,7 @@
+export { Tab, type TabProps } from "./tab";
+export { TabUnderlineBar } from "./tab-underline-bar";
+export { TabUnderlineLabel, type TabUnderlineLabelProps } from "./tab-underline-label";
+export { Tabs, type TabsProps, type TabsVariant } from "./tabs";
+export { TabsIndicator, type TabsIndicatorProps } from "./tabs-indicator";
+export { TabsList, type TabsListProps } from "./tabs-list";
+export { TabsPanel, type TabsPanelProps } from "./tabs-panel";
diff --git a/packages/propel/src/ui/tabs/tab-underline-bar.tsx b/packages/propel/src/ui/tabs/tab-underline-bar.tsx
new file mode 100644
index 0000000..abb907d
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tab-underline-bar.tsx
@@ -0,0 +1,14 @@
+import { underlineBarTrackVariants, underlineBarVariants } from "./variants";
+
+/**
+ * The sliding underline beneath an `underline`-variant tab's label: a padded track containing the
+ * decorative bar that tints on hover and goes transparent when active (the shared `TabsIndicator`
+ * takes over). Owns both styled `<span>`s so the underline cva stays internal.
+ */
+export function TabUnderlineBar() {
+  return (
+    <span className={underlineBarTrackVariants()}>
+      <span aria-hidden className={underlineBarVariants()} />
+    </span>
+  );
+}
diff --git a/packages/propel/src/ui/tabs/tab-underline-label.tsx b/packages/propel/src/ui/tabs/tab-underline-label.tsx
new file mode 100644
index 0000000..0e8110b
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tab-underline-label.tsx
@@ -0,0 +1,16 @@
+import type * as React from "react";
+
+import { underlineLabelVariants } from "./variants";
+
+export type TabUnderlineLabelProps = {
+  children?: React.ReactNode;
+};
+
+/**
+ * The label row of an `underline`-variant tab: a rounded, padded box that tints and fills on
+ * hover/active via the tab's `group/tab` state. Owns the styled `<span>` so consumers never touch
+ * the underline cva directly.
+ */
+export function TabUnderlineLabel({ children }: TabUnderlineLabelProps) {
+  return <span className={underlineLabelVariants()}>{children}</span>;
+}
diff --git a/packages/propel/src/ui/tabs/tab.tsx b/packages/propel/src/ui/tabs/tab.tsx
new file mode 100644
index 0000000..bf36524
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tab.tsx
@@ -0,0 +1,17 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import * as React from "react";
+
+import { TabsVariantContext } from "./tabs-context";
+import { tabVariants } from "./variants";
+
+export type TabProps = Omit<React.ComponentProps<typeof BaseTabs.Tab>, "className" | "style">;
+
+/** A single tab button. `value` ties it to the `TabsPanel` of the same `value`. */
+export function Tab({ children, ...props }: TabProps) {
+  const variant = React.useContext(TabsVariantContext);
+  return (
+    <BaseTabs.Tab className={tabVariants({ variant })} {...props}>
+      {children}
+    </BaseTabs.Tab>
+  );
+}
diff --git a/packages/propel/src/ui/tabs/tabs-context.tsx b/packages/propel/src/ui/tabs/tabs-context.tsx
new file mode 100644
index 0000000..06d87af
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs-context.tsx
@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { rootVariants } from "./variants";
+
+// The Figma "Tabs" component defines two visual treatments. `contained` wraps
+// the tabs in a pill and lifts the active tab onto a raised card; `underline`
+// keeps the tabs flat and slides a dark bar under the active one.
+export type TabsVariant = NonNullable<VariantProps<typeof rootVariants>["variant"]>;
+
+export const TabsVariantContext = React.createContext<TabsVariant>("contained");
diff --git a/packages/propel/src/ui/tabs/tabs-indicator.tsx b/packages/propel/src/ui/tabs/tabs-indicator.tsx
new file mode 100644
index 0000000..099eef3
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs-indicator.tsx
@@ -0,0 +1,17 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type * as React from "react";
+
+import { tabsIndicatorVariants } from "./variants";
+
+export type TabsIndicatorProps = Omit<
+  React.ComponentProps<typeof BaseTabs.Indicator>,
+  "className" | "style"
+>;
+
+/**
+ * The underline bar. Surfaced for callers composing a custom list; the built-in `TabsList` already
+ * renders it for the `underline` variant.
+ */
+export function TabsIndicator(props: TabsIndicatorProps) {
+  return <BaseTabs.Indicator className={tabsIndicatorVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/tabs/tabs-list.tsx b/packages/propel/src/ui/tabs/tabs-list.tsx
new file mode 100644
index 0000000..a980269
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs-list.tsx
@@ -0,0 +1,26 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { cx } from "class-variance-authority";
+import * as React from "react";
+
+import { TabsVariantContext } from "./tabs-context";
+import { TabsIndicator } from "./tabs-indicator";
+import { tabsListVariants } from "./variants";
+
+export type TabsListProps = Omit<React.ComponentProps<typeof BaseTabs.List>, "className" | "style">;
+
+/**
+ * The row of tabs (Base UI `Tabs.List`). Renders the active-tab `TabsIndicator` for the underline
+ * variant.
+ */
+export function TabsList({ children, ...props }: TabsListProps) {
+  const variant = React.useContext(TabsVariantContext);
+  return (
+    <BaseTabs.List
+      className={cx(tabsListVariants({ variant }), "overscroll-x-contain outline-none")}
+      {...props}
+    >
+      {children}
+      {variant === "underline" ? <TabsIndicator /> : null}
+    </BaseTabs.List>
+  );
+}
diff --git a/packages/propel/src/ui/tabs/tabs-panel.tsx b/packages/propel/src/ui/tabs/tabs-panel.tsx
new file mode 100644
index 0000000..5c8653e
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs-panel.tsx
@@ -0,0 +1,14 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type * as React from "react";
+
+import { tabsPanelVariants } from "./variants";
+
+export type TabsPanelProps = Omit<
+  React.ComponentProps<typeof BaseTabs.Panel>,
+  "className" | "style"
+>;
+
+/** Content shown when the `Tab` of the matching `value` is active. */
+export function TabsPanel(props: TabsPanelProps) {
+  return <BaseTabs.Panel className={tabsPanelVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/tabs/tabs.stories.tsx b/packages/propel/src/ui/tabs/tabs.stories.tsx
new file mode 100644
index 0000000..a9eff6b
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect } from "storybook/test";
+
+import {
+  Tab,
+  TabUnderlineBar,
+  TabUnderlineLabel,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsPanel,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC tab parts. `Tabs` (Base UI `Tabs.Root`) tracks the
+// active tab and shares its `variant` via context; `TabsList` rows up the `Tab`s and renders
+// the `TabsIndicator` underline bar for the underline variant; `TabsPanel` shows the content
+// for the active value. `TabUnderlineLabel`/`TabUnderlineBar` are the decorative inner parts
+// of an underline-variant tab. The ready-made tab set lives in `components/tabs`.
+const meta = {
+  title: "UI/Tabs",
+  component: Tabs,
+  subcomponents: { TabsList, Tab, TabsIndicator, TabsPanel },
+  // The render fns assemble their own Tabs root with an explicit variant; this satisfies the
+  // required `variant` axis on the meta component type.
+  args: { variant: "contained" },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const TAB_ITEMS = [
+  { value: "overview", label: "Overview", panel: "A high-level summary of the project." },
+  { value: "activity", label: "Activity", panel: "The latest activity feed." },
+  { value: "settings", label: "Settings", panel: "Configuration and preferences." },
+];
+
+/** Assemble the atomic parts: Root › List › Tab, plus a Panel per value (contained variant). */
+export const Default: Story = {
+  render: () => (
+    <Tabs variant="contained" defaultValue="overview">
+      <TabsList>
+        {TAB_ITEMS.map((item) => (
+          <Tab key={item.value} value={item.value}>
+            {item.label}
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((item) => (
+        <TabsPanel key={item.value} value={item.value}>
+          {item.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const overview = canvas.getByRole("tab", { name: "Overview" });
+    const activity = canvas.getByRole("tab", { name: "Activity" });
+    await expect(overview).toHaveAttribute("aria-selected", "true");
+    await userEvent.click(activity);
+    await expect(activity).toHaveAttribute("aria-selected", "true");
+    await expect(overview).toHaveAttribute("aria-selected", "false");
+  },
+};
+
+/**
+ * The underline variant: `TabsList` renders the shared `TabsIndicator` that slides under the active
+ * tab. Each `Tab` decorates its body with the atomic `TabUnderlineLabel` (the rounded label box)
+ * and `TabUnderlineBar` (the per-tab hover bar the indicator hands off to when active).
+ */
+export const Underline: Story = {
+  render: () => (
+    <Tabs variant="underline" defaultValue="overview">
+      <TabsList>
+        {TAB_ITEMS.map((item) => (
+          <Tab key={item.value} value={item.value}>
+            <TabUnderlineLabel>{item.label}</TabUnderlineLabel>
+            <TabUnderlineBar />
+          </Tab>
+        ))}
+      </TabsList>
+      {TAB_ITEMS.map((item) => (
+        <TabsPanel key={item.value} value={item.value}>
+          {item.panel}
+        </TabsPanel>
+      ))}
+    </Tabs>
+  ),
+};
diff --git a/packages/propel/src/ui/tabs/tabs.tsx b/packages/propel/src/ui/tabs/tabs.tsx
new file mode 100644
index 0000000..dd54ebd
--- /dev/null
+++ b/packages/propel/src/ui/tabs/tabs.tsx
@@ -0,0 +1,28 @@
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import type * as React from "react";
+
+import { TabsVariantContext, type TabsVariant } from "./tabs-context";
+import { rootVariants } from "./variants";
+
+export type { TabsVariant } from "./tabs-context";
+
+export type TabsProps = Omit<React.ComponentProps<typeof BaseTabs.Root>, "className" | "style"> & {
+  /**
+   * Visual treatment (Figma variant). `contained` lifts the active tab onto a raised card inside a
+   * pill; `underline` slides a dark bar under it. Required, with no silent default, like the other
+   * essential axes (e.g. Switch `magnitude`).
+   */
+  variant: TabsVariant;
+};
+
+/**
+ * Root of a tab set. Groups a `TabsList` of `Tab`s with their `TabsPanel`s and tracks which tab is
+ * active.
+ */
+export function Tabs({ variant, ...props }: TabsProps) {
+  return (
+    <TabsVariantContext.Provider value={variant}>
+      <BaseTabs.Root className={rootVariants({ variant })} {...props} />
+    </TabsVariantContext.Provider>
+  );
+}
diff --git a/packages/propel/src/ui/tabs/variants.ts b/packages/propel/src/ui/tabs/variants.ts
new file mode 100644
index 0000000..a63497e
--- /dev/null
+++ b/packages/propel/src/ui/tabs/variants.ts
@@ -0,0 +1,51 @@
+import { cva, cx } from "class-variance-authority";
+
+export const rootVariants = cva("inline-flex max-w-full flex-col items-start gap-3", {
+  variants: {
+    variant: {
+      contained: "",
+      underline: "",
+    },
+  },
+});
+
+export const tabsListVariants = cva("relative inline-flex max-w-full", {
+  variants: {
+    variant: {
+      contained: "items-center gap-px rounded-lg bg-layer-3 p-0.5",
+      underline: "items-start gap-px px-0.5",
+    },
+  },
+});
+
+export const tabVariants = cva(
+  "cursor-pointer font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-accent-strong disabled:cursor-not-allowed disabled:text-disabled",
+  {
+    variants: {
+      variant: {
+        contained:
+          "inline-flex h-6 items-center justify-center gap-1 rounded-md border-sm border-transparent px-1.5 text-13 text-secondary hover:text-primary data-active:border-subtle-1 data-active:bg-layer-2 data-active:text-primary data-active:shadow-raised-200",
+        underline: "group/tab inline-flex flex-col items-stretch gap-2 text-14",
+      },
+    },
+  },
+);
+
+export const underlineLabelVariants = cva(
+  "flex h-7 items-center justify-center gap-1.5 rounded-md px-2 py-0.5 text-tertiary transition-colors group-hover/tab:bg-layer-transparent-hover group-hover/tab:text-secondary group-data-active/tab:bg-layer-transparent-selected group-data-active/tab:text-primary",
+);
+
+export const underlineBarTrackVariants = cva("flex px-2");
+
+export const underlineBarVariants = cva(
+  "h-[3px] w-full rounded-full bg-current text-transparent transition-colors group-hover/tab:text-icon-placeholder group-data-active/tab:text-transparent",
+);
+
+export const tabsPanelVariants = cva("text-14 text-secondary outline-none");
+
+export const tabsIndicatorVariants = cva(
+  cx(
+    "absolute top-[calc(var(--active-tab-top)+1.75rem+0.5rem)] left-[calc(var(--active-tab-left)+0.5rem)] h-[3px] w-[calc(var(--active-tab-width)-1rem)]",
+    "rounded-full bg-inverse transition-all duration-150",
+  ),
+);
diff --git a/packages/propel/src/ui/text-area/index.tsx b/packages/propel/src/ui/text-area/index.tsx
new file mode 100644
index 0000000..8dac54d
--- /dev/null
+++ b/packages/propel/src/ui/text-area/index.tsx
@@ -0,0 +1,6 @@
+export {
+  TextArea,
+  type TextAreaMagnitude,
+  type TextAreaProps,
+  type TextAreaSurface,
+} from "./text-area";
diff --git a/packages/propel/src/ui/text-area/text-area.stories.tsx b/packages/propel/src/ui/text-area/text-area.stories.tsx
new file mode 100644
index 0000000..2d763fb
--- /dev/null
+++ b/packages/propel/src/ui/text-area/text-area.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import type * as React from "react";
+import { expect } from "storybook/test";
+
+import { Field, FieldError, FieldLabel } from "../field/index";
+import { textAreaFieldBoxVariants } from "../field/variants";
+import { TextArea } from "./index";
+
+const meta = {
+  title: "UI/TextArea",
+  component: TextArea,
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function TextAreaSurface({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="w-80">
+      <div className={textAreaFieldBoxVariants({ tone: "neutral" })}>{children}</div>
+    </div>
+  );
+}
+
+/** Styled textarea leaf. It uses the internal Base UI-backed textarea primitive for Field wiring. */
+export const Default: Story = {
+  args: {
+    magnitude: "md",
+    surface: "field",
+    "aria-label": "Comment",
+    placeholder: "Leave a comment...",
+    rows: 4,
+  },
+  render: (args) => (
+    <TextAreaSurface>
+      <TextArea {...args} />
+    </TextAreaSurface>
+  ),
+};
+
+export const FieldComposition: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md", surface: "field", rows: 3 },
+  render: (args) => (
+    <Field name="comment">
+      <FieldLabel magnitude="md">Comment</FieldLabel>
+      <TextAreaSurface>
+        <TextArea {...args} placeholder="Leave a comment..." />
+      </TextAreaSurface>
+    </Field>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const textarea = canvas.getByRole<HTMLTextAreaElement>("textbox", { name: "Comment" });
+    await userEvent.type(textarea, "Looks good");
+    await expect(textarea).toHaveAttribute("name", "comment");
+    await expect(textarea).toHaveValue("Looks good");
+  },
+};
+
+export const FieldErrorAssociation: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md", surface: "field", rows: 3 },
+  render: (args) => (
+    <Field name="comment" invalid>
+      <FieldLabel magnitude="md">Comment</FieldLabel>
+      <TextAreaSurface>
+        <TextArea {...args} defaultValue="No" />
+      </TextAreaSurface>
+      <FieldError magnitude="md" match={true}>
+        Add a little more detail.
+      </FieldError>
+    </Field>
+  ),
+  play: async ({ canvas }) => {
+    const textarea = canvas.getByRole("textbox", { name: "Comment" });
+    await expect(textarea).toHaveAttribute("aria-invalid", "true");
+    await expect(textarea).toHaveAccessibleDescription("Add a little more detail.");
+  },
+};
diff --git a/packages/propel/src/ui/text-area/text-area.tsx b/packages/propel/src/ui/text-area/text-area.tsx
new file mode 100644
index 0000000..0dbb40a
--- /dev/null
+++ b/packages/propel/src/ui/text-area/text-area.tsx
@@ -0,0 +1,16 @@
+import { BaseTextArea, type BaseTextAreaProps } from "../../base/text-area";
+import { textAreaVariants, type TextAreaMagnitude, type TextAreaSurface } from "./variants";
+
+export type { TextAreaMagnitude, TextAreaSurface };
+
+export type TextAreaProps = Omit<BaseTextAreaProps, "className" | "style"> & {
+  /** Text size for the textarea value. */
+  magnitude: TextAreaMagnitude;
+  /** Control presentation for standalone fields or embedded composer surfaces. */
+  surface: TextAreaSurface;
+};
+
+/** Multi-line native textarea element. Compose it with `Field` for labels and validation. */
+export function TextArea({ magnitude, surface, ...props }: TextAreaProps) {
+  return <BaseTextArea className={textAreaVariants({ magnitude, surface })} {...props} />;
+}
diff --git a/packages/propel/src/ui/text-area/variants.ts b/packages/propel/src/ui/text-area/variants.ts
new file mode 100644
index 0000000..e181660
--- /dev/null
+++ b/packages/propel/src/ui/text-area/variants.ts
@@ -0,0 +1,35 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+export const textAreaVariants = cva(
+  cx(
+    "scrollbar-sm min-w-0 flex-1 resize-none overflow-y-auto bg-transparent text-primary outline-none",
+    "placeholder:text-placeholder",
+    "disabled:cursor-not-allowed disabled:text-disabled",
+  ),
+  {
+    variants: {
+      magnitude: {
+        sm: "text-12",
+        md: "text-13",
+        lg: "text-14",
+        xl: "text-16",
+      },
+      surface: {
+        field: "px-3",
+        embedded: "w-full p-3 leading-snug",
+        inline: "leading-tight",
+      },
+    },
+    compoundVariants: [
+      { surface: "field", magnitude: "sm", class: "min-h-10" },
+      { surface: "field", magnitude: "md", class: "min-h-[66px]" },
+      { surface: "field", magnitude: "lg", class: "min-h-[84px]" },
+      { surface: "field", magnitude: "xl", class: "min-h-[84px]" },
+    ],
+  },
+);
+
+type TextAreaVariantProps = VariantProps<typeof textAreaVariants>;
+
+export type TextAreaMagnitude = NonNullable<TextAreaVariantProps["magnitude"]>;
+export type TextAreaSurface = NonNullable<TextAreaVariantProps["surface"]>;
diff --git a/packages/propel/src/ui/toast/index.tsx b/packages/propel/src/ui/toast/index.tsx
new file mode 100644
index 0000000..2d1ba6b
--- /dev/null
+++ b/packages/propel/src/ui/toast/index.tsx
@@ -0,0 +1,11 @@
+export { Toast, type ToastProps } from "./toast";
+export { ToastStatusIcon, type ToastStatusIconProps, type ToastTone } from "./toast-status-icon";
+export { ToastProvider, type ToastProviderProps } from "./toast-provider";
+export { ToastPortal, type ToastPortalProps } from "./toast-portal";
+export { ToastViewport, type ToastViewportProps } from "./toast-viewport";
+export { ToastContent, type ToastContentProps } from "./toast-content";
+export { ToastTitle, type ToastTitleProps } from "./toast-title";
+export { ToastDescription, type ToastDescriptionProps } from "./toast-description";
+export { ToastAction, type ToastActionProps } from "./toast-action";
+export { ToastClose, type ToastCloseProps } from "./toast-close";
+export { createToastManager, useToastManager } from "./manager";
diff --git a/packages/propel/src/ui/toast/manager.ts b/packages/propel/src/ui/toast/manager.ts
new file mode 100644
index 0000000..6055d4e
--- /dev/null
+++ b/packages/propel/src/ui/toast/manager.ts
@@ -0,0 +1,6 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+
+// Base UI's toast manager hook + global manager factory. These are hooks/factories,
+// not styled elements, so they pass through unchanged from `@base-ui/react/toast`.
+export const useToastManager = BaseToast.useToastManager;
+export const createToastManager = BaseToast.createToastManager;
diff --git a/packages/propel/src/ui/toast/solid-circle-alert.tsx b/packages/propel/src/ui/toast/solid-circle-alert.tsx
new file mode 100644
index 0000000..37c627b
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-circle-alert.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type StatusIconProps } from "./solid-icon";
+
+export function SolidCircleAlert(props: StatusIconProps) {
+  return (
+    <SolidIcon {...props}>
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 5a1 1 0 1 0-2 0v6a1 1 0 1 0 2 0V7Zm-1 8.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z" />
+    </SolidIcon>
+  );
+}
diff --git a/packages/propel/src/ui/toast/solid-circle-check.tsx b/packages/propel/src/ui/toast/solid-circle-check.tsx
new file mode 100644
index 0000000..35e97ff
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-circle-check.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type StatusIconProps } from "./solid-icon";
+
+export function SolidCircleCheck(props: StatusIconProps) {
+  return (
+    <SolidIcon {...props}>
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm4.768 7.64a1 1 0 0 0-1.536-1.28l-4.3 5.159-2.225-2.226a1 1 0 0 0-1.414 1.414l3 3a1 1 0 0 0 1.475-.067l5-6Z" />
+    </SolidIcon>
+  );
+}
diff --git a/packages/propel/src/ui/toast/solid-circle-x.tsx b/packages/propel/src/ui/toast/solid-circle-x.tsx
new file mode 100644
index 0000000..66477fb
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-circle-x.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type StatusIconProps } from "./solid-icon";
+
+export function SolidCircleX(props: StatusIconProps) {
+  return (
+    <SolidIcon {...props}>
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm3.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 9.707 8.293a1 1 0 0 0-1.414 1.414L10.586 12l-2.293 2.293a1 1 0 1 0 1.414 1.414L12 13.414l2.293 2.293a1 1 0 0 0 1.414-1.414L13.414 12l2.293-2.293Z" />
+    </SolidIcon>
+  );
+}
diff --git a/packages/propel/src/ui/toast/solid-icon.tsx b/packages/propel/src/ui/toast/solid-icon.tsx
new file mode 100644
index 0000000..14d5571
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-icon.tsx
@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+export type StatusIconProps = React.SVGProps<SVGSVGElement>;
+
+export function SolidIcon({ children, ...props }: StatusIconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
diff --git a/packages/propel/src/ui/toast/solid-info.tsx b/packages/propel/src/ui/toast/solid-info.tsx
new file mode 100644
index 0000000..320654e
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-info.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type StatusIconProps } from "./solid-icon";
+
+export function SolidInfo(props: StatusIconProps) {
+  return (
+    <SolidIcon {...props}>
+      <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 5a1.25 1.25 0 1 0 0 2.5A1.25 1.25 0 0 0 12 7Zm1 4a1 1 0 1 0-2 0v5a1 1 0 1 0 2 0v-5Z" />
+    </SolidIcon>
+  );
+}
diff --git a/packages/propel/src/ui/toast/solid-triangle-alert.tsx b/packages/propel/src/ui/toast/solid-triangle-alert.tsx
new file mode 100644
index 0000000..adff938
--- /dev/null
+++ b/packages/propel/src/ui/toast/solid-triangle-alert.tsx
@@ -0,0 +1,9 @@
+import { SolidIcon, type StatusIconProps } from "./solid-icon";
+
+export function SolidTriangleAlert(props: StatusIconProps) {
+  return (
+    <SolidIcon {...props}>
+      <path d="M10.23 3.16a2.06 2.06 0 0 1 3.54 0l8.02 13.78A2.06 2.06 0 0 1 20.02 20H3.98a2.06 2.06 0 0 1-1.77-3.06L10.23 3.16ZM13 9a1 1 0 1 0-2 0v4a1 1 0 1 0 2 0V9Zm-1 6.75a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Z" />
+    </SolidIcon>
+  );
+}
diff --git a/packages/propel/src/ui/toast/toast-action.tsx b/packages/propel/src/ui/toast/toast-action.tsx
new file mode 100644
index 0000000..48aae8b
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-action.tsx
@@ -0,0 +1,14 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastActionVariants } from "./variants";
+
+export type ToastActionProps = Omit<
+  React.ComponentProps<typeof BaseToast.Action>,
+  "className" | "style"
+>;
+
+/** An action button that participates in the toast's focus management. Maps 1:1 to `Toast.Action`. */
+export function ToastAction(props: ToastActionProps) {
+  return <BaseToast.Action className={toastActionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-close.tsx b/packages/propel/src/ui/toast/toast-close.tsx
new file mode 100644
index 0000000..d23d039
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-close.tsx
@@ -0,0 +1,14 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastCloseVariants } from "./variants";
+
+export type ToastCloseProps = Omit<
+  React.ComponentProps<typeof BaseToast.Close>,
+  "className" | "style"
+>;
+
+/** A button that dismisses the toast when activated. Maps 1:1 to `Toast.Close`. */
+export function ToastClose(props: ToastCloseProps) {
+  return <BaseToast.Close className={toastCloseVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-content.tsx b/packages/propel/src/ui/toast/toast-content.tsx
new file mode 100644
index 0000000..56a650e
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-content.tsx
@@ -0,0 +1,17 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastContentVariants } from "./variants";
+
+export type ToastContentProps = Omit<
+  React.ComponentProps<typeof BaseToast.Content>,
+  "className" | "style"
+>;
+
+/**
+ * A container for the contents of a toast (title, description, actions). Maps 1:1 to
+ * `Toast.Content`.
+ */
+export function ToastContent(props: ToastContentProps) {
+  return <BaseToast.Content className={toastContentVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-description.tsx b/packages/propel/src/ui/toast/toast-description.tsx
new file mode 100644
index 0000000..21eae54
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-description.tsx
@@ -0,0 +1,14 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastDescriptionVariants } from "./variants";
+
+export type ToastDescriptionProps = Omit<
+  React.ComponentProps<typeof BaseToast.Description>,
+  "className" | "style"
+>;
+
+/** The supporting description for the toast. Maps 1:1 to `Toast.Description`. */
+export function ToastDescription(props: ToastDescriptionProps) {
+  return <BaseToast.Description className={toastDescriptionVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-portal.tsx b/packages/propel/src/ui/toast/toast-portal.tsx
new file mode 100644
index 0000000..cba94c2
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-portal.tsx
@@ -0,0 +1,12 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+export type ToastPortalProps = React.ComponentProps<typeof BaseToast.Portal>;
+
+/**
+ * Moves the toast viewport to a different part of the DOM so it escapes local stacking contexts.
+ * Maps 1:1 to `Toast.Portal`.
+ */
+export function ToastPortal(props: ToastPortalProps) {
+  return <BaseToast.Portal {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-provider.tsx b/packages/propel/src/ui/toast/toast-provider.tsx
new file mode 100644
index 0000000..f0b4085
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-provider.tsx
@@ -0,0 +1,12 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+export type ToastProviderProps = React.ComponentProps<typeof BaseToast.Provider>;
+
+/**
+ * Provides the context for creating and managing toasts. Structural — carries no styling. Maps 1:1
+ * to `Toast.Provider`.
+ */
+export function ToastProvider(props: ToastProviderProps) {
+  return <BaseToast.Provider {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-status-icon.tsx b/packages/propel/src/ui/toast/toast-status-icon.tsx
new file mode 100644
index 0000000..9d5c2ec
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-status-icon.tsx
@@ -0,0 +1,39 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { SolidCircleAlert } from "./solid-circle-alert";
+import { SolidCircleCheck } from "./solid-circle-check";
+import { SolidCircleX } from "./solid-circle-x";
+import type { StatusIconProps } from "./solid-icon";
+import { SolidInfo } from "./solid-info";
+import { SolidTriangleAlert } from "./solid-triangle-alert";
+import { statusIconVariants } from "./variants";
+
+export type ToastTone = NonNullable<VariantProps<typeof statusIconVariants>["tone"]>;
+
+type StatusIcon = (props: StatusIconProps) => React.JSX.Element;
+
+// Each tone auto-selects a filled status icon (see the solid-* glyphs) and its color
+// token — the caller never passes an icon. Filled glyphs match Figma's toast (node
+// 1144-3158); lucide ships no filled status equivalents, so these are hand-authored.
+const STATUS_ICON: Record<ToastTone, StatusIcon> = {
+  success: SolidCircleCheck,
+  danger: SolidCircleX,
+  info: SolidInfo,
+  warning: SolidTriangleAlert,
+  neutral: SolidCircleAlert,
+};
+
+export type ToastStatusIconProps = Omit<StatusIconProps, "className"> & {
+  /** Semantic intent — selects the filled glyph and its `icon/*` color token. */
+  tone: ToastTone;
+};
+
+/**
+ * The tone-colored status glyph at a toast's inline-start. Owns both the tone→icon mapping and the
+ * `size-4 shrink-0` + per-tone color cva, so consumers pick a `tone` and never style the icon.
+ */
+export function ToastStatusIcon({ tone, ...props }: ToastStatusIconProps) {
+  const Icon = STATUS_ICON[tone];
+  return <Icon aria-hidden className={statusIconVariants({ tone })} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-title.tsx b/packages/propel/src/ui/toast/toast-title.tsx
new file mode 100644
index 0000000..0f5c27d
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-title.tsx
@@ -0,0 +1,14 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastTitleVariants } from "./variants";
+
+export type ToastTitleProps = Omit<
+  React.ComponentProps<typeof BaseToast.Title>,
+  "className" | "style"
+>;
+
+/** The accessible title that labels the toast. Maps 1:1 to `Toast.Title`. */
+export function ToastTitle(props: ToastTitleProps) {
+  return <BaseToast.Title className={toastTitleVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast-viewport.tsx b/packages/propel/src/ui/toast/toast-viewport.tsx
new file mode 100644
index 0000000..f3aa9de
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast-viewport.tsx
@@ -0,0 +1,17 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastViewportVariants } from "./variants";
+
+export type ToastViewportProps = Omit<
+  React.ComponentProps<typeof BaseToast.Viewport>,
+  "className" | "style"
+>;
+
+/**
+ * The fixed container that positions queued toasts and acts as the live region. Maps 1:1 to
+ * `Toast.Viewport`.
+ */
+export function ToastViewport(props: ToastViewportProps) {
+  return <BaseToast.Viewport className={toastViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/toast.stories.tsx b/packages/propel/src/ui/toast/toast.stories.tsx
new file mode 100644
index 0000000..bdc5f87
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+
+import {
+  Toast,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastPortal,
+  ToastProvider,
+  ToastStatusIcon,
+  ToastTitle,
+  type ToastTone,
+  ToastViewport,
+  useToastManager,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC toast parts. `ToastProvider` carries the manager
+// context; `ToastPortal` › `ToastViewport` is the live region; each queued toast renders a
+// `Toast` (Base UI `Toast.Root`) › `ToastContent` › `ToastTitle`/`ToastDescription`, with the
+// tone-colored `ToastStatusIcon` and the `ToastClose` dismiss button. The ready-made
+// manager-driven toast (tones, actions, progress) lives in `components/toast`.
+
+// Maps every queued toast to the atomic anatomy. Base UI's `Toast.Root` needs a `toast`
+// object from the manager, so this lives inside the provider and reads `useToastManager`.
+function ToastList() {
+  const { toasts } = useToastManager();
+  return toasts.map((toast) => {
+    const tone = (toast.data as { tone?: ToastTone } | undefined)?.tone ?? "info";
+    return (
+      <Toast key={toast.id} toast={toast}>
+        <ToastStatusIcon tone={tone} />
+        <ToastContent>
+          <ToastTitle />
+          <ToastDescription />
+        </ToastContent>
+        <ToastClose aria-label="Dismiss">×</ToastClose>
+      </Toast>
+    );
+  });
+}
+
+const meta = {
+  title: "UI/Toast",
+  component: ToastProvider,
+  subcomponents: {
+    Toast,
+    ToastViewport,
+    ToastContent,
+    ToastTitle,
+    ToastDescription,
+    ToastClose,
+    ToastStatusIcon,
+  },
+} satisfies Meta<typeof ToastProvider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// A trigger that queues a toast through the manager — the real way a toast is raised.
+function Trigger() {
+  const { add } = useToastManager();
+  return (
+    <button
+      type="button"
+      className="inline-flex h-8 items-center rounded-md border-sm border-subtle-1 bg-layer-2 px-3 text-13 font-medium text-secondary"
+      onClick={() =>
+        add({
+          title: "Toast title",
+          description: "Description of the toast alert",
+          data: { tone: "info" },
+        })
+      }
+    >
+      Show toast
+    </button>
+  );
+}
+
+/**
+ * Click the trigger to queue a toast; the manager renders it through the atomic anatomy (status
+ * icon, title, description, close). The viewport is a polite live region.
+ */
+export const Default: Story = {
+  render: () => (
+    <ToastProvider>
+      <Trigger />
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const body = within(document.body);
+    await userEvent.click(canvas.getByRole("button", { name: "Show toast" }));
+    const toast = await body.findByRole("dialog", { name: "Toast title" });
+    await expect(toast).toBeVisible();
+    await expect(body.getByText("Description of the toast alert")).toBeVisible();
+  },
+};
diff --git a/packages/propel/src/ui/toast/toast.tsx b/packages/propel/src/ui/toast/toast.tsx
new file mode 100644
index 0000000..6e1f321
--- /dev/null
+++ b/packages/propel/src/ui/toast/toast.tsx
@@ -0,0 +1,14 @@
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import type * as React from "react";
+
+import { toastRootVariants } from "./variants";
+
+export type ToastProps = Omit<React.ComponentProps<typeof BaseToast.Root>, "className" | "style">;
+
+/**
+ * Groups all parts of an individual toast and wires its swipe/dismiss state. Renders the shared
+ * floating-card surface. Maps 1:1 to `Toast.Root`.
+ */
+export function Toast(props: ToastProps) {
+  return <BaseToast.Root className={toastRootVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/toast/variants.ts b/packages/propel/src/ui/toast/variants.ts
new file mode 100644
index 0000000..11787c3
--- /dev/null
+++ b/packages/propel/src/ui/toast/variants.ts
@@ -0,0 +1,63 @@
+import { cva, cx } from "class-variance-authority";
+
+import { surfaceVariants } from "../../internal/surface";
+
+// Toast is a structural overlay primitive. Base UI drives every interactive state
+// (expanded/limited/swipe/starting/ending transition styles) as data attributes, so
+// the atomic parts expose no styling axes (variant/tone/magnitude). The cva pairings
+// below hold the static chrome so each part is styled in one place, with no
+// `className` at the boundary. Provider, Portal, and Root carry no styling.
+
+export const toastViewportVariants = cva(
+  cx(
+    "fixed inset-e-4 bottom-4 z-50 flex w-85 max-w-[calc(100vw-2rem)] flex-col gap-2 rounded-lg outline-none",
+    "focus-visible:outline-md focus-visible:outline-offset-2 focus-visible:outline-accent-strong",
+  ),
+);
+
+export const toastRootVariants = cva(
+  cx(
+    surfaceVariants({ elevation: "raised", radius: "lg" }),
+    "relative flex w-full items-start gap-2 px-4 py-3",
+    "transition-opacity data-ending:opacity-0",
+  ),
+);
+
+export const toastContentVariants = cva("flex min-w-0 flex-1 flex-col gap-3");
+
+export const toastTitleVariants = cva("text-14 font-medium text-primary");
+
+export const toastDescriptionVariants = cva("text-13 text-tertiary");
+
+// Shared action-button styling, straight from Figma's "Buttons" sub-frame: a 24px-tall
+// pill with a 40px min width, `md` radius, 13px medium secondary text, transparent
+// background that fills on hover. Used for both the left cluster and the right action.
+export const toastActionVariants = cva(
+  cx(
+    "inline-flex h-6 min-w-10 shrink-0 items-center justify-center gap-1 rounded-md px-2",
+    "text-13 font-medium text-secondary outline-none",
+    "bg-layer-transparent transition-colors hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+  ),
+);
+
+export const toastCloseVariants = cva(
+  cx(
+    "absolute inset-e-1 top-1 inline-flex size-5 items-center justify-center rounded-sm text-icon-tertiary outline-none",
+    "transition-colors hover:bg-layer-transparent-hover",
+  ),
+);
+
+// Status-icon color per tone, straight from propel's `icon/*` tokens. The icon is
+// the only tone-colored element; surface/border/text stay neutral, matching Figma.
+export const statusIconVariants = cva("size-4 shrink-0", {
+  variants: {
+    tone: {
+      success: "text-icon-success-primary",
+      danger: "text-icon-danger-primary",
+      info: "text-icon-info-primary",
+      warning: "text-icon-warning-primary",
+      neutral: "text-icon-tertiary",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/toggle-group/index.tsx b/packages/propel/src/ui/toggle-group/index.tsx
new file mode 100644
index 0000000..78f3c8e
--- /dev/null
+++ b/packages/propel/src/ui/toggle-group/index.tsx
@@ -0,0 +1 @@
+export { ToggleGroup, type ToggleGroupProps } from "./toggle-group";
diff --git a/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx b/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx
new file mode 100644
index 0000000..78ca31a
--- /dev/null
+++ b/packages/propel/src/ui/toggle-group/toggle-group.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
+import { expect, fn } from "storybook/test";
+
+import { Toggle } from "../toggle/index";
+import { ToggleGroup } from "./index";
+
+// UI-tier story: composes the atomic `ToggleGroup` with atomic `Toggle` items. The group
+// manages single/multi-select state + roving focus and sizes every toggle via its
+// `magnitude` (each `Toggle` inherits it through context). The components-tier story uses
+// the ready-made re-exports.
+const meta = {
+  title: "UI/ToggleGroup",
+  component: ToggleGroup,
+  subcomponents: { Toggle },
+  args: { magnitude: "md" },
+  parameters: {
+    a11y: {
+      // Base UI's ToggleGroup renders `role="group"` with `aria-orientation`, which axe's
+      // aria-allowed-attr flags because `aria-orientation` isn't in the allowed attribute
+      // set for `role="group"`. This is Base UI's intended roving-focus markup, not invalid
+      // intent, so suppress just this rule (mirrors the menu.stories aria-required-children
+      // precedent).
+      config: { rules: [{ id: "aria-allowed-attr", enabled: false }] },
+    },
+  },
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single-select group of three alignment toggles. */
+export const Default: Story = {
+  args: { magnitude: "md", defaultValue: ["left"], onValueChange: fn() },
+  render: (args) => (
+    <ToggleGroup {...args} aria-label="Text alignment">
+      <Toggle value="left" aria-label="Align left">
+        <AlignLeft aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle value="center" aria-label="Align center">
+        <AlignCenter aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle value="right" aria-label="Align right">
+        <AlignRight aria-hidden className="size-(--node-size)" />
+      </Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({ canvas, userEvent, args }) => {
+    const left = canvas.getByRole("button", { name: "Align left" });
+    const center = canvas.getByRole("button", { name: "Align center" });
+    await expect(left).toHaveAttribute("aria-pressed", "true");
+
+    await userEvent.click(center);
+    await expect(center).toHaveAttribute("aria-pressed", "true");
+    await expect(left).toHaveAttribute("aria-pressed", "false");
+    await expect(args.onValueChange).toHaveBeenCalled();
+  },
+};
+
+/** `multiple` lets more than one toggle stay pressed. */
+export const Multiple: Story = {
+  tags: ["!dev", "!autodocs", "!manifest"],
+  args: { magnitude: "md", multiple: true, defaultValue: [] },
+  render: (args) => (
+    <ToggleGroup {...args} aria-label="Text formatting">
+      <Toggle value="bold" aria-label="Bold">
+        <AlignLeft aria-hidden className="size-(--node-size)" />
+      </Toggle>
+      <Toggle value="italic" aria-label="Italic">
+        <AlignCenter aria-hidden className="size-(--node-size)" />
+      </Toggle>
+    </ToggleGroup>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const bold = canvas.getByRole("button", { name: "Bold" });
+    const italic = canvas.getByRole("button", { name: "Italic" });
+    await userEvent.click(bold);
+    await userEvent.click(italic);
+    await expect(bold).toHaveAttribute("aria-pressed", "true");
+    await expect(italic).toHaveAttribute("aria-pressed", "true");
+  },
+};
diff --git a/packages/propel/src/ui/toggle-group/toggle-group.tsx b/packages/propel/src/ui/toggle-group/toggle-group.tsx
new file mode 100644
index 0000000..38a1ef6
--- /dev/null
+++ b/packages/propel/src/ui/toggle-group/toggle-group.tsx
@@ -0,0 +1,27 @@
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import type * as React from "react";
+
+import { ToggleGroupContext } from "../toggle/toggle-group-context";
+import type { ToggleMagnitude } from "../toggle/variants";
+import { toggleGroupVariants } from "./variants";
+
+export type ToggleGroupProps = Omit<
+  React.ComponentProps<typeof BaseToggleGroup>,
+  "className" | "style"
+> & {
+  /** Size applied to every `Toggle` in the group (each `Toggle` can still override it). */
+  magnitude?: ToggleMagnitude;
+};
+
+/**
+ * Groups related `Toggle`s, managing single- or multi-select state and roving focus. Pass `value` +
+ * `onValueChange` (array; `toggleMultiple` to allow more than one pressed). `magnitude` sizes every
+ * toggle inside via context. Maps 1:1 to Base UI's `ToggleGroup`.
+ */
+export function ToggleGroup({ magnitude = "md", children, ...props }: ToggleGroupProps) {
+  return (
+    <BaseToggleGroup className={toggleGroupVariants()} {...props}>
+      <ToggleGroupContext.Provider value={magnitude}>{children}</ToggleGroupContext.Provider>
+    </BaseToggleGroup>
+  );
+}
diff --git a/packages/propel/src/ui/toggle-group/variants.ts b/packages/propel/src/ui/toggle-group/variants.ts
new file mode 100644
index 0000000..237c0a1
--- /dev/null
+++ b/packages/propel/src/ui/toggle-group/variants.ts
@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+
+// ToggleGroup is a layout container around `Toggle`s; Base UI handles selection
+// state and roving focus. Orientation is driven by the native `orientation` prop
+// and reflected as `[data-orientation]`, so the row/column flip keys off that.
+export const toggleGroupVariants = cva(
+  "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col",
+);
diff --git a/packages/propel/src/ui/toggle/index.tsx b/packages/propel/src/ui/toggle/index.tsx
new file mode 100644
index 0000000..e830a47
--- /dev/null
+++ b/packages/propel/src/ui/toggle/index.tsx
@@ -0,0 +1,3 @@
+export { Toggle, type ToggleProps } from "./toggle";
+export { ToggleGroupContext } from "./toggle-group-context";
+export { type ToggleMagnitude } from "./variants";
diff --git a/packages/propel/src/ui/toggle/toggle-group-context.ts b/packages/propel/src/ui/toggle/toggle-group-context.ts
new file mode 100644
index 0000000..aa49b7d
--- /dev/null
+++ b/packages/propel/src/ui/toggle/toggle-group-context.ts
@@ -0,0 +1,10 @@
+import * as React from "react";
+
+import type { ToggleMagnitude } from "./variants";
+
+/**
+ * Set by `ToggleGroup` so every `Toggle` inside it shares one `magnitude`, keeping a group
+ * consistently sized. A `Toggle`'s own `magnitude` prop takes precedence. Lives with `Toggle`
+ * because `Toggle` is the consumer; `ToggleGroup` provides it.
+ */
+export const ToggleGroupContext = React.createContext<ToggleMagnitude | undefined>(undefined);
diff --git a/packages/propel/src/ui/toggle/toggle.stories.tsx b/packages/propel/src/ui/toggle/toggle.stories.tsx
new file mode 100644
index 0000000..7959223
--- /dev/null
+++ b/packages/propel/src/ui/toggle/toggle.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Bold } from "lucide-react";
+import { expect } from "storybook/test";
+
+import { Toggle, type ToggleMagnitude } from "./index";
+
+const MAGNITUDES: ToggleMagnitude[] = ["sm", "md", "lg"];
+
+// UI-tier story: the atomic `Toggle` — a two-state icon button (Base UI `Toggle`),
+// reflecting `[data-pressed]`/`[data-disabled]`. The components-tier story re-exports
+// the same primitive (no extra composition). `magnitude` is the only visual axis.
+const meta = {
+  title: "UI/Toggle",
+  component: Toggle,
+  args: { magnitude: "md", "aria-label": "Bold" },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A single toggle wrapping an icon; click flips pressed. */
+export const Default: Story = {
+  args: { magnitude: "md" },
+  render: (args) => (
+    <Toggle {...args}>
+      <Bold aria-hidden className="size-(--node-size)" />
+    </Toggle>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    const toggle = canvas.getByRole("button", { name: "Bold" });
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await userEvent.click(toggle);
+    await expect(toggle).toHaveAttribute("aria-pressed", "false");
+  },
+};
+
+/** The three sizes side by side. */
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: () => (
+    <div className="flex items-center gap-2">
+      {MAGNITUDES.map((magnitude) => (
+        <Toggle key={magnitude} magnitude={magnitude} aria-label={`Bold ${magnitude}`}>
+          <Bold aria-hidden className="size-(--node-size)" />
+        </Toggle>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/toggle/toggle.tsx b/packages/propel/src/ui/toggle/toggle.tsx
new file mode 100644
index 0000000..597c0de
--- /dev/null
+++ b/packages/propel/src/ui/toggle/toggle.tsx
@@ -0,0 +1,31 @@
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
+import * as React from "react";
+
+import { ToggleGroupContext } from "./toggle-group-context";
+import { type ToggleMagnitude, toggleVariants } from "./variants";
+
+export type ToggleProps<Value extends string = string> = Omit<
+  BaseToggleTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /**
+   * Button size. Optional because a `Toggle` inside a `ToggleGroup` inherits the group's magnitude;
+   * standalone it falls back to `md`.
+   */
+  magnitude?: ToggleMagnitude;
+};
+
+/**
+ * A two-state button (pressed / not pressed) — typically wrapping an icon. Built on Base UI's
+ * `Toggle`, so pressed/disabled are control state (`pressed`/`defaultPressed`, `disabled`),
+ * reflected as `[data-pressed]`/`[data-disabled]`. Only `magnitude` is a visual axis. Maps 1:1 to
+ * `Toggle`.
+ */
+export function Toggle<Value extends string = string>({ magnitude, ...props }: ToggleProps<Value>) {
+  // An explicit `magnitude` wins; otherwise inherit the group's (if inside one); a standalone
+  // toggle with neither falls back to `md` so it always has a size.
+  const groupMagnitude = React.useContext(ToggleGroupContext);
+  const effectiveMagnitude = magnitude ?? groupMagnitude ?? "md";
+  return <BaseToggle className={toggleVariants({ magnitude: effectiveMagnitude })} {...props} />;
+}
diff --git a/packages/propel/src/ui/toggle/variants.ts b/packages/propel/src/ui/toggle/variants.ts
new file mode 100644
index 0000000..2f28656
--- /dev/null
+++ b/packages/propel/src/ui/toggle/variants.ts
@@ -0,0 +1,26 @@
+import { cva, cx, type VariantProps } from "class-variance-authority";
+
+// A Toggle is a two-state icon button. The only visual axis is size (`magnitude`);
+// pressed/disabled are control state Base UI reflects as `[data-pressed]`/
+// `[data-disabled]`. Each magnitude sets `--node-size` so an inner icon sizes itself.
+export const toggleVariants = cva(
+  cx(
+    "inline-flex shrink-0 items-center justify-center rounded-md transition-colors outline-none",
+    "cursor-pointer text-icon-secondary",
+    "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
+    "data-pressed:bg-layer-transparent-selected data-pressed:text-icon-primary",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-disabled:cursor-not-allowed data-disabled:opacity-60",
+  ),
+  {
+    variants: {
+      magnitude: {
+        sm: "size-6 [--node-size:0.875rem]",
+        md: "size-7 [--node-size:1rem]",
+        lg: "size-8 [--node-size:1rem]",
+      },
+    },
+  },
+);
+
+export type ToggleMagnitude = NonNullable<VariantProps<typeof toggleVariants>["magnitude"]>;
diff --git a/packages/propel/src/ui/toolbar/index.tsx b/packages/propel/src/ui/toolbar/index.tsx
new file mode 100644
index 0000000..df69c9d
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/index.tsx
@@ -0,0 +1,15 @@
+export { Toolbar, type ToolbarProps } from "./toolbar";
+export { ToolbarButton, type ToolbarButtonProps } from "./toolbar-button";
+export {
+  ToolbarDropdownTriggerSurface,
+  type ToolbarDropdownTriggerSurfaceProps,
+} from "./toolbar-dropdown-trigger-surface";
+export { ToolbarGroup, type ToolbarGroupProps } from "./toolbar-group";
+export { ToolbarSeparator, type ToolbarSeparatorProps } from "./toolbar-separator";
+export { ToolbarToggle, type ToolbarToggleProps } from "./toolbar-toggle";
+export { ToolbarToggleGroup, type ToolbarToggleGroupProps } from "./toolbar-toggle-group";
+export {
+  ToolbarDensityContext,
+  type ToolbarDensity,
+  type ToolbarElevation,
+} from "./toolbar-context";
diff --git a/packages/propel/src/ui/toolbar/toolbar-button.tsx b/packages/propel/src/ui/toolbar/toolbar-button.tsx
new file mode 100644
index 0000000..39d94ca
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-button.tsx
@@ -0,0 +1,19 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import * as React from "react";
+
+import { ToolbarDensityContext } from "./toolbar-context";
+import { itemVariants } from "./variants";
+
+export type ToolbarButtonProps = Omit<
+  React.ComponentProps<typeof BaseToolbar.Button>,
+  "className" | "style"
+> & {
+  /** Accessible name for the icon button. */
+  "aria-label": string;
+};
+
+/** A plain action button in the toolbar. */
+export function ToolbarButton(props: ToolbarButtonProps) {
+  const density = React.useContext(ToolbarDensityContext);
+  return <BaseToolbar.Button className={itemVariants({ density })} {...props} />;
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar-context.ts b/packages/propel/src/ui/toolbar/toolbar-context.ts
new file mode 100644
index 0000000..48fe177
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-context.ts
@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { toolbarVariants } from "./variants";
+
+export type ToolbarElevation = NonNullable<VariantProps<typeof toolbarVariants>["elevation"]>;
+export type ToolbarDensity = NonNullable<VariantProps<typeof toolbarVariants>["density"]>;
+
+export const ToolbarDensityContext = React.createContext<ToolbarDensity>("compact");
diff --git a/packages/propel/src/ui/toolbar/toolbar-dropdown-trigger-surface.tsx b/packages/propel/src/ui/toolbar/toolbar-dropdown-trigger-surface.tsx
new file mode 100644
index 0000000..24c77e7
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-dropdown-trigger-surface.tsx
@@ -0,0 +1,25 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { ToolbarDensityContext } from "./toolbar-context";
+import { dropdownChevronVariants, dropdownTriggerVariants } from "./variants";
+
+export type ToolbarDropdownTriggerSurfaceProps = Omit<
+  React.ComponentProps<typeof BaseToolbar.Button>,
+  "className" | "style"
+>;
+
+/** The styled chrome for a toolbar dropdown trigger: a label slot plus a chevron. */
+export function ToolbarDropdownTriggerSurface({
+  children,
+  ...props
+}: ToolbarDropdownTriggerSurfaceProps) {
+  const density = React.useContext(ToolbarDensityContext);
+  return (
+    <BaseToolbar.Button className={dropdownTriggerVariants({ density })} {...props}>
+      {children}
+      <ChevronDown aria-hidden className={dropdownChevronVariants({ density })} />
+    </BaseToolbar.Button>
+  );
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar-group.tsx b/packages/propel/src/ui/toolbar/toolbar-group.tsx
new file mode 100644
index 0000000..d8a1060
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-group.tsx
@@ -0,0 +1,12 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import type * as React from "react";
+
+export type ToolbarGroupProps = Omit<
+  React.ComponentProps<typeof BaseToolbar.Group>,
+  "className" | "style"
+>;
+
+/** Groups related controls with a small gap between them. */
+export function ToolbarGroup(props: ToolbarGroupProps) {
+  return <BaseToolbar.Group className="flex items-center gap-0.5" {...props} />;
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar-separator.tsx b/packages/propel/src/ui/toolbar/toolbar-separator.tsx
new file mode 100644
index 0000000..022666a
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-separator.tsx
@@ -0,0 +1,17 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import type * as React from "react";
+
+export type ToolbarSeparatorProps = Omit<
+  React.ComponentProps<typeof BaseToolbar.Separator>,
+  "className" | "style"
+>;
+
+/** A thin vertical rule that visually divides one cluster of controls from the next. */
+export function ToolbarSeparator(props: ToolbarSeparatorProps) {
+  return (
+    <BaseToolbar.Separator
+      className="mx-1 h-5 w-0 shrink-0 border-s-sm border-subtle-1"
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx b/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx
new file mode 100644
index 0000000..d49a1a8
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-toggle-group.tsx
@@ -0,0 +1,17 @@
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import type { ToggleGroup as BaseToggleGroupTypes } from "@base-ui/react/toggle-group";
+
+export type ToolbarToggleGroupProps<Value extends string = string> = Omit<
+  BaseToggleGroupTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /** Allow more than one toggle in the group to be pressed at once. */
+  multiple?: boolean;
+};
+
+/** A set of `ToolbarToggle`s that share state. */
+export function ToolbarToggleGroup<Value extends string = string>(
+  props: ToolbarToggleGroupProps<Value>,
+) {
+  return <ToggleGroup className="flex items-center gap-0.5" {...props} />;
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar-toggle.tsx b/packages/propel/src/ui/toolbar/toolbar-toggle.tsx
new file mode 100644
index 0000000..8cc65dc
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar-toggle.tsx
@@ -0,0 +1,32 @@
+import { Toggle } from "@base-ui/react/toggle";
+import type { Toggle as BaseToggleTypes } from "@base-ui/react/toggle";
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import * as React from "react";
+
+import { ToolbarDensityContext } from "./toolbar-context";
+import { itemVariants } from "./variants";
+
+export type ToolbarToggleProps<Value extends string = string> = Omit<
+  BaseToggleTypes.Props<Value>,
+  "className" | "style"
+> & {
+  /** Accessible name for the icon toggle. */
+  "aria-label": string;
+};
+
+/** A two-state button for formatting toggles like bold or italic. */
+export function ToolbarToggle<Value extends string = string>({
+  render,
+  ...props
+}: ToolbarToggleProps<Value>) {
+  const density = React.useContext(ToolbarDensityContext);
+  // The toolbar item renders as a `Toggle`; a consumer `render` customizes that inner
+  // element (not the wrapping `Toolbar.Button`), so it is nested onto the `Toggle`.
+  return (
+    <BaseToolbar.Button
+      render={<Toggle render={render} />}
+      className={itemVariants({ density })}
+      {...props}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/toolbar/toolbar.stories.tsx b/packages/propel/src/ui/toolbar/toolbar.stories.tsx
new file mode 100644
index 0000000..816a009
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar.stories.tsx
@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Image,
+  Italic,
+  Link,
+  Strikethrough,
+  Underline,
+} from "lucide-react";
+import { expect } from "storybook/test";
+
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarDropdownTriggerSurface,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarToggle,
+  ToolbarToggleGroup,
+} from "./index";
+
+// UI-tier story: composes the ATOMIC toolbar parts (each renders a single control).
+// The components-tier `Toolbar` story shows the ready-made `ToolbarDropdown` (which composes
+// propel's Dropdown/Menu). Here you assemble the raw controls — buttons, toggles, toggle groups,
+// separators — plus the bare `ToolbarDropdownTriggerSurface` chrome (without an attached menu).
+const meta = {
+  title: "UI/Toolbar",
+  component: Toolbar,
+  subcomponents: {
+    ToolbarGroup,
+    ToolbarButton,
+    ToolbarToggle,
+    ToolbarToggleGroup,
+    ToolbarSeparator,
+    ToolbarDropdownTriggerSurface,
+  },
+  args: { elevation: "raised", density: "compact" },
+} satisfies Meta<typeof Toolbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A formatting bar assembled from raw parts: a dropdown-trigger surface, an inline B/I/U/S toggle
+ * group cluster, an exclusive alignment toggle-group, and link/image action buttons.
+ */
+export const Default: Story = {
+  render: (args) => (
+    <Toolbar {...args}>
+      <ToolbarDropdownTriggerSurface aria-label="Text style">Text</ToolbarDropdownTriggerSurface>
+      <ToolbarSeparator />
+      <ToolbarGroup aria-label="Text formatting">
+        <ToolbarToggle aria-label="Bold">
+          <Bold aria-hidden />
+        </ToolbarToggle>
+        <ToolbarToggle aria-label="Italic">
+          <Italic aria-hidden />
+        </ToolbarToggle>
+        <ToolbarToggle aria-label="Underline">
+          <Underline aria-hidden />
+        </ToolbarToggle>
+        <ToolbarToggle aria-label="Strikethrough">
+          <Strikethrough aria-hidden />
+        </ToolbarToggle>
+      </ToolbarGroup>
+      <ToolbarSeparator />
+      <ToolbarToggleGroup aria-label="Text alignment" defaultValue={["left"]}>
+        <ToolbarToggle value="left" aria-label="Align left">
+          <AlignLeft aria-hidden />
+        </ToolbarToggle>
+        <ToolbarToggle value="center" aria-label="Align center">
+          <AlignCenter aria-hidden />
+        </ToolbarToggle>
+        <ToolbarToggle value="right" aria-label="Align right">
+          <AlignRight aria-hidden />
+        </ToolbarToggle>
+      </ToolbarToggleGroup>
+      <ToolbarSeparator />
+      <ToolbarButton aria-label="Insert link">
+        <Link aria-hidden />
+      </ToolbarButton>
+      <ToolbarButton aria-label="Insert image">
+        <Image aria-hidden />
+      </ToolbarButton>
+    </Toolbar>
+  ),
+  play: async ({ canvas, userEvent }) => {
+    // The root carries the toolbar role, and a toggle flips its pressed state on click.
+    await expect(canvas.getByRole("toolbar")).toBeInTheDocument();
+    const bold = canvas.getByRole("button", { name: "Bold" });
+    await expect(bold).toHaveAttribute("aria-pressed", "false");
+    await userEvent.click(bold);
+    await expect(bold).toHaveAttribute("aria-pressed", "true");
+  },
+};
+
+/**
+ * The `elevation` axis: `raised` draws its own card (border + shadow); `flat` draws no surface and
+ * sits flush inside an existing bar.
+ */
+export const Elevations: Story = {
+  argTypes: { elevation: { control: false } },
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {(["raised", "flat"] as const).map((elevation) => (
+        <Toolbar {...args} key={elevation} elevation={elevation}>
+          <ToolbarToggle aria-label="Bold">
+            <Bold aria-hidden />
+          </ToolbarToggle>
+          <ToolbarToggle aria-label="Italic">
+            <Italic aria-hidden />
+          </ToolbarToggle>
+          <ToolbarSeparator />
+          <ToolbarButton aria-label="Insert link">
+            <Link aria-hidden />
+          </ToolbarButton>
+        </Toolbar>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * The `density` axis: `compact` packs the controls to 24px hit targets, `comfortable` gives them
+ * 28px. `density` drives the child controls' size through context.
+ */
+export const Densities: Story = {
+  argTypes: { density: { control: false } },
+  render: (args) => (
+    <div className="flex flex-col gap-6">
+      {(["compact", "comfortable"] as const).map((density) => (
+        <Toolbar {...args} key={density} density={density}>
+          <ToolbarToggle aria-label="Bold">
+            <Bold aria-hidden />
+          </ToolbarToggle>
+          <ToolbarToggle aria-label="Italic">
+            <Italic aria-hidden />
+          </ToolbarToggle>
+          <ToolbarSeparator />
+          <ToolbarButton aria-label="Insert link">
+            <Link aria-hidden />
+          </ToolbarButton>
+        </Toolbar>
+      ))}
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/toolbar/toolbar.tsx b/packages/propel/src/ui/toolbar/toolbar.tsx
new file mode 100644
index 0000000..4b4d2c6
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/toolbar.tsx
@@ -0,0 +1,30 @@
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
+import type * as React from "react";
+
+import {
+  ToolbarDensityContext,
+  type ToolbarDensity,
+  type ToolbarElevation,
+} from "./toolbar-context";
+import { toolbarVariants } from "./variants";
+
+export type { ToolbarDensity, ToolbarElevation } from "./toolbar-context";
+
+export type ToolbarProps = Omit<
+  React.ComponentProps<typeof BaseToolbar.Root>,
+  "className" | "style"
+> & {
+  /** Whether the toolbar draws its own surface. */
+  elevation: ToolbarElevation;
+  /** How tightly the controls pack. */
+  density: ToolbarDensity;
+};
+
+/** A row of controls built on Base UI's `Toolbar`. */
+export function Toolbar({ elevation, density, ...props }: ToolbarProps) {
+  return (
+    <ToolbarDensityContext.Provider value={density}>
+      <BaseToolbar.Root className={toolbarVariants({ density, elevation })} {...props} />
+    </ToolbarDensityContext.Provider>
+  );
+}
diff --git a/packages/propel/src/ui/toolbar/variants.ts b/packages/propel/src/ui/toolbar/variants.ts
new file mode 100644
index 0000000..3f5df14
--- /dev/null
+++ b/packages/propel/src/ui/toolbar/variants.ts
@@ -0,0 +1,64 @@
+import { cva, cx } from "class-variance-authority";
+
+import { surfaceVariants } from "../../internal/surface";
+
+export const toolbarVariants = cva("flex w-fit items-center gap-2 p-1.5 text-secondary", {
+  variants: {
+    elevation: {
+      raised: surfaceVariants({ elevation: "raised", radius: "lg" }),
+      flat: "",
+    },
+    density: {
+      compact: "",
+      comfortable: "",
+    },
+  },
+});
+
+export const itemVariants = cva(
+  cx(
+    "inline-flex shrink-0 items-center justify-center rounded-md",
+    "bg-layer-transparent text-icon-secondary outline-none",
+    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-pressed:bg-layer-transparent-selected data-pressed:text-icon-accent-primary",
+    "disabled:pointer-events-none disabled:text-icon-disabled",
+    "[&_svg]:shrink-0",
+  ),
+  {
+    variants: {
+      density: {
+        compact: "size-6 [&_svg]:size-3.5",
+        comfortable: "size-7 [&_svg]:size-4",
+      },
+    },
+  },
+);
+
+export const dropdownTriggerVariants = cva(
+  cx(
+    "inline-flex shrink-0 items-center gap-1 rounded-md px-2",
+    "bg-layer-transparent text-13 text-secondary outline-none",
+    "hover:bg-layer-transparent-hover active:bg-layer-transparent-active",
+    "focus-visible:ring-2 focus-visible:ring-accent-strong",
+    "data-popup-open:bg-layer-transparent-selected",
+    "disabled:pointer-events-none disabled:text-disabled",
+  ),
+  {
+    variants: {
+      density: {
+        compact: "h-6",
+        comfortable: "h-7",
+      },
+    },
+  },
+);
+
+export const dropdownChevronVariants = cva("shrink-0 text-icon-secondary", {
+  variants: {
+    density: {
+      compact: "size-3.5",
+      comfortable: "size-4",
+    },
+  },
+});
diff --git a/packages/propel/src/ui/tooltip/index.tsx b/packages/propel/src/ui/tooltip/index.tsx
new file mode 100644
index 0000000..6c395bb
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/index.tsx
@@ -0,0 +1,8 @@
+export { Tooltip, type TooltipProps } from "./tooltip";
+export { TooltipArrow } from "./tooltip-arrow";
+export { TooltipPopup, type TooltipPopupProps } from "./tooltip-popup";
+export { TooltipPortal } from "./tooltip-portal";
+export { TooltipPositioner, type TooltipPositionerProps } from "./tooltip-positioner";
+export { TooltipProvider, type TooltipProviderProps } from "./tooltip-provider";
+export { TooltipTrigger, type TooltipTriggerProps } from "./tooltip-trigger";
+export { TooltipViewport, type TooltipViewportProps } from "./tooltip-viewport";
diff --git a/packages/propel/src/ui/tooltip/tooltip-arrow.tsx b/packages/propel/src/ui/tooltip/tooltip-arrow.tsx
new file mode 100644
index 0000000..a676f57
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-arrow.tsx
@@ -0,0 +1,18 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { cx } from "class-variance-authority";
+
+export function TooltipArrow() {
+  return (
+    <BaseTooltip.Arrow
+      className={cx(
+        "size-2 rotate-45 border-sm border-subtle-1 bg-layer-2",
+        "data-[side=bottom]:top-[-3px] data-[side=bottom]:[clip-path:polygon(0_0,100%_0,0_100%)]",
+        "data-[side=top]:bottom-[-3px] data-[side=top]:[clip-path:polygon(100%_0,100%_100%,0_100%)]",
+        "data-[side=left]:right-[-3px] data-[side=left]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+        "data-[side=right]:left-[-3px] data-[side=right]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+        "data-[side=inline-start]:inset-e-[-3px] data-[side=inline-start]:[clip-path:polygon(0_0,100%_0,100%_100%)] rtl:data-[side=inline-start]:[clip-path:polygon(0_0,0_100%,100%_100%)]",
+        "data-[side=inline-end]:inset-s-[-3px] data-[side=inline-end]:[clip-path:polygon(0_0,0_100%,100%_100%)] rtl:data-[side=inline-end]:[clip-path:polygon(0_0,100%_0,100%_100%)]",
+      )}
+    />
+  );
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip-popup.tsx b/packages/propel/src/ui/tooltip/tooltip-popup.tsx
new file mode 100644
index 0000000..b4e88f4
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-popup.tsx
@@ -0,0 +1,15 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+import { tooltipPopupVariants } from "./variants";
+
+/** Props for {@link TooltipPopup}; 1:1 with Base UI `Tooltip.Popup`. */
+export type TooltipPopupProps = Omit<
+  React.ComponentProps<typeof BaseTooltip.Popup>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Tooltip.Popup`. */
+export function TooltipPopup(props: TooltipPopupProps) {
+  return <BaseTooltip.Popup className={tooltipPopupVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip-portal.tsx b/packages/propel/src/ui/tooltip/tooltip-portal.tsx
new file mode 100644
index 0000000..2099e89
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-portal.tsx
@@ -0,0 +1,4 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+
+/** 1:1 wrapper around Base UI `Tooltip.Portal`. */
+export const TooltipPortal = BaseTooltip.Portal;
diff --git a/packages/propel/src/ui/tooltip/tooltip-positioner.tsx b/packages/propel/src/ui/tooltip/tooltip-positioner.tsx
new file mode 100644
index 0000000..94dd198
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-positioner.tsx
@@ -0,0 +1,15 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+import { tooltipPositionerVariants } from "./variants";
+
+/** Props for {@link TooltipPositioner}; 1:1 with Base UI `Tooltip.Positioner`. */
+export type TooltipPositionerProps = Omit<
+  React.ComponentProps<typeof BaseTooltip.Positioner>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Tooltip.Positioner`. */
+export function TooltipPositioner(props: TooltipPositionerProps) {
+  return <BaseTooltip.Positioner className={tooltipPositionerVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip-provider.tsx b/packages/propel/src/ui/tooltip/tooltip-provider.tsx
new file mode 100644
index 0000000..dece545
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-provider.tsx
@@ -0,0 +1,24 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+type BaseTooltipProviderProps = React.ComponentProps<typeof BaseTooltip.Provider>;
+
+export type TooltipProviderProps = Omit<
+  BaseTooltipProviderProps,
+  "delay" | "closeDelay" | "children"
+> & {
+  /** How long to wait before opening a tooltip, in milliseconds. */
+  delay?: number;
+  /** How long to wait before closing a tooltip, in milliseconds. */
+  closeDelay?: number;
+  /** The subtree whose tooltips share this group's open/close timing. */
+  children?: React.ReactNode;
+};
+
+/**
+ * Shares one open/close delay across every tooltip beneath it, so moving between nearby triggers
+ * can show adjacent tooltips immediately.
+ */
+export function TooltipProvider(props: TooltipProviderProps) {
+  return <BaseTooltip.Provider {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip-trigger.tsx b/packages/propel/src/ui/tooltip/tooltip-trigger.tsx
new file mode 100644
index 0000000..a0c83bd
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-trigger.tsx
@@ -0,0 +1,13 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+/** Props for {@link TooltipTrigger}; 1:1 with Base UI `Tooltip.Trigger`. */
+export type TooltipTriggerProps = Omit<
+  React.ComponentProps<typeof BaseTooltip.Trigger>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Tooltip.Trigger`. */
+export function TooltipTrigger(props: TooltipTriggerProps) {
+  return <BaseTooltip.Trigger {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip-viewport.tsx b/packages/propel/src/ui/tooltip/tooltip-viewport.tsx
new file mode 100644
index 0000000..aca5d4f
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip-viewport.tsx
@@ -0,0 +1,15 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+import { tooltipViewportVariants } from "./variants";
+
+/** Props for {@link TooltipViewport}; 1:1 with Base UI `Tooltip.Viewport`. */
+export type TooltipViewportProps = Omit<
+  React.ComponentProps<typeof BaseTooltip.Viewport>,
+  "className" | "style"
+>;
+
+/** 1:1 wrapper around Base UI `Tooltip.Viewport`. */
+export function TooltipViewport(props: TooltipViewportProps) {
+  return <BaseTooltip.Viewport className={tooltipViewportVariants()} {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/tooltip.stories.tsx b/packages/propel/src/ui/tooltip/tooltip.stories.tsx
new file mode 100644
index 0000000..ee7f49a
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import {
+  Tooltip,
+  TooltipArrow,
+  TooltipPopup,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./index";
+
+// UI-tier story: assembles the ATOMIC tooltip parts by hand (Root › Trigger ›
+// Portal › Positioner › Popup › Arrow), optionally grouped under a Provider that
+// shares open/close timing. The components-tier `Tooltip` ready-made wraps all of
+// this and takes `content` / `shortcut` props.
+
+const meta = {
+  title: "UI/Tooltip",
+  component: Tooltip,
+  subcomponents: {
+    TooltipProvider,
+    TooltipTrigger,
+    TooltipPortal,
+    TooltipPositioner,
+    TooltipPopup,
+    TooltipArrow,
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** The full anatomy wired by hand: a focusable trigger opens a positioned popup with an arrow. */
+export const Anatomy: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger
+        delay={0}
+        render={
+          <button
+            type="button"
+            className="inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none"
+          />
+        }
+      >
+        Hover or focus me
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipPositioner side="top" sideOffset={8}>
+          <TooltipPopup role="tooltip">
+            Saves automatically
+            <TooltipArrow />
+          </TooltipPopup>
+        </TooltipPositioner>
+      </TooltipPortal>
+    </Tooltip>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Hover or focus me" })).toHaveFocus();
+    await expect(await within(document.body).findByRole("tooltip")).toHaveTextContent(
+      "Saves automatically",
+    );
+  },
+};
+
+/**
+ * `TooltipProvider` shares one open/close delay across the tooltips beneath it, so moving between
+ * adjacent triggers shows the next tooltip immediately.
+ */
+export const SharedProvider: Story = {
+  render: () => (
+    <TooltipProvider delay={0} closeDelay={0}>
+      <div className="flex gap-2">
+        {["Cut", "Copy", "Paste"].map((label) => (
+          <Tooltip key={label}>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  className="inline-flex h-8 items-center rounded-md border border-subtle bg-surface-1 px-3 text-13 text-secondary outline-none"
+                />
+              }
+            >
+              {label}
+            </TooltipTrigger>
+            <TooltipPortal>
+              <TooltipPositioner side="top" sideOffset={8}>
+                <TooltipPopup role="tooltip">{label} the selection</TooltipPopup>
+              </TooltipPositioner>
+            </TooltipPortal>
+          </Tooltip>
+        ))}
+      </div>
+    </TooltipProvider>
+  ),
+  play: async ({ canvas }) => {
+    await userEvent.tab();
+    await expect(canvas.getByRole("button", { name: "Cut" })).toHaveFocus();
+    await waitFor(() =>
+      expect(within(document.body).getByRole("tooltip")).toHaveTextContent("Cut the selection"),
+    );
+  },
+};
diff --git a/packages/propel/src/ui/tooltip/tooltip.tsx b/packages/propel/src/ui/tooltip/tooltip.tsx
new file mode 100644
index 0000000..0d8a966
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/tooltip.tsx
@@ -0,0 +1,20 @@
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+/** Props for {@link Tooltip} (the Base UI `Tooltip.Root`). */
+export type TooltipProps = Omit<
+  React.ComponentProps<typeof BaseTooltip.Root>,
+  "className" | "style"
+>;
+
+/**
+ * The atomic `Tooltip.Root` — maps 1:1 to Base UI's `Tooltip.Root`. It renders no DOM of its own;
+ * it just groups the tooltip parts (`TooltipTrigger` + `TooltipPortal` → `TooltipPositioner` →
+ * `TooltipPopup`) and owns the open/close state.
+ *
+ * For the ready-made tooltip (label + optional shortcut + arrow), use the `Tooltip` from
+ * `@plane/propel/components/tooltip`.
+ */
+export function Tooltip(props: TooltipProps) {
+  return <BaseTooltip.Root {...props} />;
+}
diff --git a/packages/propel/src/ui/tooltip/variants.ts b/packages/propel/src/ui/tooltip/variants.ts
new file mode 100644
index 0000000..e61832c
--- /dev/null
+++ b/packages/propel/src/ui/tooltip/variants.ts
@@ -0,0 +1,7 @@
+import { cva } from "class-variance-authority";
+
+export const tooltipPositionerVariants = cva("z-50 outline-none");
+export const tooltipPopupVariants = cva(
+  "flex items-center gap-3 rounded-md border-sm border-subtle-1 bg-layer-2 px-2 py-1.5 text-caption-md-regular text-primary shadow-overlay-200",
+);
+export const tooltipViewportVariants = cva("relative");
diff --git a/packages/propel/src/ui/workspace-avatar/index.tsx b/packages/propel/src/ui/workspace-avatar/index.tsx
new file mode 100644
index 0000000..a1be3c8
--- /dev/null
+++ b/packages/propel/src/ui/workspace-avatar/index.tsx
@@ -0,0 +1 @@
+export * from "./workspace-avatar";
diff --git a/packages/propel/src/ui/workspace-avatar/variants.ts b/packages/propel/src/ui/workspace-avatar/variants.ts
new file mode 100644
index 0000000..adadaec
--- /dev/null
+++ b/packages/propel/src/ui/workspace-avatar/variants.ts
@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+
+// Magnitudes follow the same scale as Avatar (Figma "Workspace avatar"): 2xs 16
+// → 3xl 64. Square with a radius that grows with size: rounded-sm (16–24),
+// rounded-md (28–40), rounded-lg (56–64). Border 1px up to 32px, 2px from 40px up.
+export const workspaceAvatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-clip border-subtle",
+  {
+    variants: {
+      magnitude: {
+        "2xs": "size-4 rounded-sm border-sm text-10",
+        xs: "size-5 rounded-sm border-sm text-10",
+        sm: "size-6 rounded-sm border-sm text-12",
+        md: "size-7 rounded-md border-sm text-13",
+        lg: "size-8 rounded-md border-sm text-16",
+        xl: "size-10 rounded-md border-lg text-18",
+        "2xl": "size-14 rounded-lg border-lg text-24",
+        "3xl": "size-16 rounded-lg border-lg text-28",
+      },
+    },
+  },
+);
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx
new file mode 100644
index 0000000..f03a301
--- /dev/null
+++ b/packages/propel/src/ui/workspace-avatar/workspace-avatar.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { AVATAR_TONES } from "../../ui/avatar/index";
+import { WorkspaceAvatar, type WorkspaceAvatarMagnitude } from "./index";
+
+const MAGNITUDES: WorkspaceAvatarMagnitude[] = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+const meta = {
+  title: "UI/WorkspaceAvatar",
+  component: WorkspaceAvatar,
+  args: {
+    magnitude: "md",
+    alt: "Plane workspace",
+    fallback: "PV",
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/ioN74zM1xMGbcPemsxs4J1/Global-components?node-id=40-46",
+    },
+  },
+} satisfies Meta<typeof WorkspaceAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Magnitudes: Story = {
+  argTypes: { magnitude: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {MAGNITUDES.map((magnitude) => (
+        <WorkspaceAvatar key={magnitude} {...args} magnitude={magnitude} />
+      ))}
+    </div>
+  ),
+};
+
+/** Initials use the same tone palette as Avatar (auto-derived from `alt`). */
+export const Tones: Story = {
+  args: { src: undefined },
+  argTypes: { tone: { control: false }, fallback: { control: false } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      {AVATAR_TONES.map((tone) => (
+        <WorkspaceAvatar
+          key={tone}
+          {...args}
+          tone={tone}
+          magnitude="lg"
+          fallback={tone[0]?.toUpperCase()}
+        />
+      ))}
+    </div>
+  ),
+};
+
+/** The two states side by side: logo and the initial fallback. */
+export const States: Story = {
+  parameters: { controls: { disable: true } },
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <WorkspaceAvatar
+        {...args}
+        magnitude="lg"
+        src="https://avatars.githubusercontent.com/u/73642778?s=128"
+      />
+      <WorkspaceAvatar {...args} magnitude="lg" src={undefined} />
+    </div>
+  ),
+};
diff --git a/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx b/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx
new file mode 100644
index 0000000..40c32a4
--- /dev/null
+++ b/packages/propel/src/ui/workspace-avatar/workspace-avatar.tsx
@@ -0,0 +1,63 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { cx, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { type AvatarTone, getAvatarTone, initialsToneClass } from "../../ui/avatar";
+import { workspaceAvatarVariants } from "./variants";
+
+export type WorkspaceAvatarMagnitude = NonNullable<
+  VariantProps<typeof workspaceAvatarVariants>["magnitude"]
+>;
+
+export type WorkspaceAvatarProps = Omit<
+  React.ComponentProps<typeof BaseAvatar.Root>,
+  "className" | "style"
+> & {
+  /** Workspace logo URL. Falls back to the initial when absent/loading/failed. */
+  src?: string;
+  /** Accessible name for the workspace avatar. */
+  alt?: string;
+  /** Shown when there is no logo — typically the workspace's initial. */
+  fallback?: React.ReactNode;
+  /** Initials background color. Defaults to a stable color derived from `alt`. */
+  tone?: AvatarTone;
+  /** Size of the avatar. Required — there is no default. */
+  magnitude: WorkspaceAvatarMagnitude;
+};
+
+export function WorkspaceAvatar({
+  magnitude,
+  src,
+  alt,
+  fallback,
+  tone,
+  ...props
+}: WorkspaceAvatarProps) {
+  // The fallback shows whenever the logo is absent, loading, or failed, so its
+  // styling lives on the Fallback element (not derived from `src`). Initials sit
+  // on a label tone color (same palette as Avatar), auto-derived from `alt`.
+  const hasInitials = fallback != null;
+  const resolvedTone = tone ?? getAvatarTone(alt ?? "");
+  return (
+    <BaseAvatar.Root
+      // One accessible name for the avatar in every state; the inner logo image is
+      // decorative. Consumers can override via spread props.
+      role="img"
+      aria-label={alt}
+      className={cx(workspaceAvatarVariants({ magnitude }), "bg-layer-1")}
+      {...props}
+    >
+      {src ? <BaseAvatar.Image src={src} alt="" className="size-full object-cover" /> : null}
+      <BaseAvatar.Fallback
+        className={cx(
+          "flex size-full items-center justify-center leading-none",
+          hasInitials
+            ? `${initialsToneClass[resolvedTone]} text-on-color`
+            : "bg-layer-1 text-primary",
+        )}
+      >
+        {fallback}
+      </BaseAvatar.Fallback>
+    </BaseAvatar.Root>
+  );
+}
diff --git a/packages/propel/vite.config.ts b/packages/propel/vite.config.ts
index 61c3930..7668f5c 100644
--- a/packages/propel/vite.config.ts
+++ b/packages/propel/vite.config.ts
@@ -1,8 +1,10 @@
 /// <reference types="vitest/config" />
 import { existsSync, readdirSync } from "node:fs";
-// Build one entry per component/hook so each is published as its own subpath
-// (`@plane/propel/components/<name>`, `@plane/propel/hooks/<name>`). There is no
-// root barrel.
+// Build one entry per primitive/component/hook so each is published as its own
+// subpath. The three component tiers each get a group: `base` (Base UI extensions),
+// `ui` (Base UI parts styled with Plane tokens), and `components` (ready-made
+// compositions of `ui`) — e.g. `@plane/propel/ui/<name>`, `@plane/propel/hooks/<name>`.
+// There is no root barrel.
 //
 // We read the folders directly and feed tsdown a *named* entry object. A bare
 // glob that matches a single file collapses to a root `index` output (and a `.`
@@ -14,6 +16,7 @@ import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { playwright } from "@vitest/browser-playwright";
 import { defineConfig } from "vite-plus";
+import { configDefaults } from "vite-plus/test/config";
 
 // Shared source of truth for the theme list (also used by `.storybook/preview.tsx`)
 // so the per-theme test projects below can't drift from the toolbar/a11y themes.
@@ -24,7 +27,7 @@ const dirname =
 // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 function subpathEntries(): Record<string, string> {
   const entry: Record<string, string> = {};
-  for (const group of ["components", "hooks"]) {
+  for (const group of ["base", "ui", "components", "hooks"]) {
     const dir = `src/${group}`;
     if (!existsSync(dir)) continue;
     for (const dirent of readdirSync(dir, {
@@ -44,8 +47,8 @@ function subpathEntries(): Record<string, string> {
 // Library build via `vp pack` (tsdown). tsdown auto-externalizes everything in
 // `dependencies` + `peerDependencies`, so there is no hand-maintained external
 // allowlist. The package.json `exports` map is static wildcards (see that file),
-// so adding `src/components/button/index.ts` exposes
-// `@plane/propel/components/button` with no config or manifest edits.
+// so adding `src/ui/button/index.ts` exposes
+// `@plane/propel/ui/button` with no config or manifest edits.
 export default defineConfig({
   pack: {
     entry: subpathEntries(),
@@ -75,7 +78,14 @@ export default defineConfig({
       },
     ],
   },
+  // Keep vite's dev/test server out of nested agent worktrees (`.claude/worktrees/<name>`,
+  // full second checkouts living inside the workspace root). See the root `vite.config.ts`.
+  server: { watch: { ignored: ["**/.claude/**"] } },
   test: {
+    // Vitest ignores `.gitignore`, so its file discovery would otherwise crawl those
+    // worktree checkouts (each carries a duplicate copy of every story). The storybook
+    // project below extends this config, so the exclude applies to it too.
+    exclude: [...configDefaults.exclude, "**/.claude/**"],
     // A SINGLE Storybook test project. The addon-vitest plugin identifies its project by
     // the `.storybook` configDir (it overrides the name to `storybook:<configDir>` when
     // launched from the Storybook UI), so there can only be one project per configDir --
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a414bde..60616a8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,13 +8,13 @@ catalogs:
   default:
     vite-plus:
       specifier: latest
-      version: 0.1.24
+      version: 0.2.0
 
 overrides:
   esbuild: 0.28.1
   js-yaml: 4.2.0
   vite: npm:@voidzero-dev/vite-plus-core@latest
-  vitest: npm:@voidzero-dev/vite-plus-test@latest
+  vitest: 4.1.9
   ws: 8.21.0
 
 importers:
@@ -26,7 +26,7 @@ importers:
         version: 2.31.0(@types/node@25.9.3)
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+        version: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
 
   packages/propel:
     dependencies:
@@ -45,25 +45,25 @@ importers:
     devDependencies:
       '@storybook/addon-a11y':
         specifier: ^10.4.5
-        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
       '@storybook/addon-designs':
         specifier: ^11.1.3
-        version: 11.1.3(25b6e59ad3c24c6d97977d0e659a64a6)
+        version: 11.1.3(3046e383f68340698f0f1f6f17dfbc5f)
       '@storybook/addon-docs':
         specifier: ^10.4.5
-        version: 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       '@storybook/addon-mcp':
         specifier: ^0.6.0
-        version: 0.6.0(19ce8edac962625b06c776893ca4f12c)
+        version: 0.6.0(@storybook/addon-vitest@10.4.5(@vitest/browser-playwright@4.1.9)(@vitest/runner@4.1.9)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vitest@4.1.9))(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)
       '@storybook/addon-themes':
         specifier: ^10.4.5
-        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
       '@storybook/addon-vitest':
         specifier: ^10.4.5
-        version: 10.4.5(@vitest/browser-playwright@4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)))(@vitest/runner@4.1.9)(@voidzero-dev/vite-plus-test@0.1.24)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+        version: 10.4.5(@vitest/browser-playwright@4.1.9)(@vitest/runner@4.1.9)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vitest@4.1.9)
       '@storybook/react-vite':
         specifier: ^10.4.5
-        version: 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       '@tailwindcss/vite':
         specifier: ^4.3.1
         version: 4.3.1(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
@@ -81,10 +81,10 @@ importers:
         version: 7.0.0-dev.20260509.2
       '@vitest/browser-playwright':
         specifier: 4.1.9
-        version: 4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+        version: 4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
       '@vitest/coverage-v8':
         specifier: 4.1.8
-        version: 4.1.8(@voidzero-dev/vite-plus-test@0.1.24)
+        version: 4.1.8(vitest@4.1.9)
       playwright:
         specifier: ^1.61.0
         version: 1.61.0
@@ -96,10 +96,10 @@ importers:
         version: 19.2.7(react@19.2.7)
       storybook:
         specifier: ^10.4.5
-        version: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+        version: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       storybook-addon-pseudo-states:
         specifier: ^10.4.5
-        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+        version: 10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
       tailwindcss:
         specifier: ^4.3.1
         version: 4.3.1
@@ -108,10 +108,10 @@ importers:
         version: 6.0.3
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+        version: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
       vitest:
-        specifier: npm:@voidzero-dev/vite-plus-test@latest
-        version: '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)'
+        specifier: 4.1.9
+        version: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       wrangler:
         specifier: 4.100.0
         version: 4.100.0
@@ -133,13 +133,13 @@ importers:
         version: 11.1.0
       oxlint:
         specifier: 1.67.0
-        version: 1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+        version: 1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       typescript:
         specifier: ^6.0.3
         version: 6.0.3
       vite-plus:
         specifier: 'catalog:'
-        version: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+        version: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
 
 packages:
 
@@ -921,8 +921,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxc-project/runtime@0.133.0':
-    resolution: {integrity: sha512-PkvjA1Lq5++V5S1E6Patr92ZVcieE6EalDr1VJTqv4BnjZdOUC4W3p8k1wMXSd5/2aFP4b/A6N5sg2Bkzcr9vQ==}
+  '@oxc-project/runtime@0.136.0':
+    resolution: {integrity: sha512-u0EutjK5y6NHJkl5jNJCs8zbup1z6A/UEWgajrYzqcEU3UX05HjqybhMQOLhSM0eKGISyM6WfSMMuklYSmH2wA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
   '@oxc-project/types@0.127.0':
@@ -931,6 +931,9 @@ packages:
   '@oxc-project/types@0.133.0':
     resolution: {integrity: sha512-KzkdCd6Uxqnf6l3HOw1xfatAlUURA0g14cvBYFyJ5SaNOQbOUvBr9PKArcPcrNIeRsBdgcUzOGrhKveVpvOIGA==}
 
+  '@oxc-project/types@0.136.0':
+    resolution: {integrity: sha512-39Al/B3v9esnHCX7S8l9Se2+s2tb9b2jcMd+bZ2L659VG73kNyGPpPrL5Zi/p0ty7p4pTTU2/Dd+g27hv94XCg==}
+
   '@oxc-resolver/binding-android-arm-eabi@11.20.0':
     resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
     cpu: [arm]
@@ -1034,124 +1037,124 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@oxfmt/binding-android-arm-eabi@0.52.0':
-    resolution: {integrity: sha512-17EMSJnQ9g+upVHrAUYDMfH5lvRKQ9Nvg8WtEoH72oDr1VpWz+7/o3tD97U1EToen2YAQ/68JmtDYkQUi20dfQ==}
+  '@oxfmt/binding-android-arm-eabi@0.55.0':
+    resolution: {integrity: sha512-+rFDOqQe5LOWgxrAJaZgLRudr6GQm0wGI6gtu7vVkrdLGjNMUSGbAlaCr8j7F2H2Er97vYQCU8WDb30onqMM1g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxfmt/binding-android-arm64@0.52.0':
-    resolution: {integrity: sha512-A2G1IdwGEW2lLJkIxcvuirRH1CzSl/e0NX11zTlW1gvxJThfwbI/BEoaKrTNpm7M2FchvIf6guvIQU7d5iz+OQ==}
+  '@oxfmt/binding-android-arm64@0.55.0':
+    resolution: {integrity: sha512-ctulLq8s3x8Zmvw6+iccB09TIKERAklRSmbJ10gk8mlAn05qZxoyo52dj3Hi9IJcmDSwF54fQaTVh2CbL6PInw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxfmt/binding-darwin-arm64@0.52.0':
-    resolution: {integrity: sha512-f9+bLvOYxy7NttCLFTvQ7afmqDOWY4wIP9xdvfj5trQ1qj6f2UFAGwZESlfsMjvJNTyRpXfIlOanCI9FOvoeQA==}
+  '@oxfmt/binding-darwin-arm64@0.55.0':
+    resolution: {integrity: sha512-xDQczLH9pw/RBk1h/GH0qcGMm8hQtmtVHBNLSH3lk1gEIR09hZ4L+mJQl4VqiVAvPK9VG9PYrWWuSQLt7xTbiA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxfmt/binding-darwin-x64@0.52.0':
-    resolution: {integrity: sha512-YSTB9sJ5nnQd/Q0ddHkgof0ZCHPAnWZT1IW2SJ8omz7CP7KluJhO1fNHrpqdxCtpztJwSs4hY1uAee35wKxxaw==}
+  '@oxfmt/binding-darwin-x64@0.55.0':
+    resolution: {integrity: sha512-JaNoFCkF2CJdGgpPSMbuO9HVyXyoNGIhMHPvp6NYAjeVKw9XEYc0HcUWJLPQa3Q69WV5wMa9m5jPMJPtbLtcRg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxfmt/binding-freebsd-x64@0.52.0':
-    resolution: {integrity: sha512-NIrRNTTPCs4UbmVs0bxLSCDlLCtIRMJIXklNKaXa5Oj2/K1UIMBvgE8+uPVo01Io3N9HF0+GAX+aAHjUgZS7vA==}
+  '@oxfmt/binding-freebsd-x64@0.55.0':
+    resolution: {integrity: sha512-DNbszhpg6S2MIzax5azdHFTTBIVkR5xr8yyRZuA4yoDAwOkzIp3tmldgKZM2+VlT+hJIG0xUksA+elISzMEAfA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.52.0':
-    resolution: {integrity: sha512-JXUCde8mn3GpgQouz2PXUokgy/uT1QrRJBL2s983VWcSQp62wTFYiNXgTKdeo1Jgbr0IgUnKKvzIk/YBlj/nVQ==}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.55.0':
+    resolution: {integrity: sha512-2snoaoRfFFyGnbOcKUK36rREBYxe/Xgz3uHbiA5zbCB/s6R4DQj4mHqYAaWWhgizCUSDxV8cE9zAZ0XleNpKGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.52.0':
-    resolution: {integrity: sha512-psbUXaRZ+V8DaXz10Qf7LSHtdtdKAmC8fxXgeU608jjzrmWK4quamZMOpl6sf+dikoFHA85uE93Q0BqxrCdQrQ==}
+  '@oxfmt/binding-linux-arm-musleabihf@0.55.0':
+    resolution: {integrity: sha512-q1aktHF/WRpSK81BX1dE/9vWrS2jGw1Nax2kb4DBLGAewubCLcoNyp4Zl/NSMgbv3vUS46Z33wIQkBVYOP3PYg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxfmt/binding-linux-arm64-gnu@0.52.0':
-    resolution: {integrity: sha512-Jw7MgWUU9lcLCcy82updISP3EthTlfvAwR6gWNxPzqly7+fLvOi2gHQE9xXQjpqaVLm/8P+gOzlv9ODuoVlaaw==}
+  '@oxfmt/binding-linux-arm64-gnu@0.55.0':
+    resolution: {integrity: sha512-VD0y36aENezl/3tsclA/4G53Cc7iV+7Uoh7gz4yvcOTaEYBtJpQsE6PKDGTtUtOvGS4kv51ybfXY/nWZejO5IA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-arm64-musl@0.52.0':
-    resolution: {integrity: sha512-wZg6bLjDvh2KibyI3QFUYo8GTXneIFsd0JvehtvJiUmQ8WRPERgxd/VM4ctWb86U5FT1FkqgS8/wZKVB+AZScg==}
+  '@oxfmt/binding-linux-arm64-musl@0.55.0':
+    resolution: {integrity: sha512-r8xlKJFcsRmn0H5jZrdORae6RX9jDBrZVvOoxF+bCQtampQJClv80aZEHsv+NsLsp2KCE5ql79O7DpPVzYWpXA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.52.0':
-    resolution: {integrity: sha512-IngE8uxhNvxcMrLjZNDo9xNLY7rEK33AKnaMd2B46he1e/mz2CfcW6If/U1wUjdRZddm1QzQaciqZkuMkdh1FA==}
+  '@oxfmt/binding-linux-ppc64-gnu@0.55.0':
+    resolution: {integrity: sha512-GRKv/HXHcwIVld/WU61rF0g0R16hl5EJ+ScKdpjevT57lnLnagj/U2YUbXf2mT+2Pg1uCzWC+mvGicPV3CDdLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.52.0':
-    resolution: {integrity: sha512-H3+DdFMv/efN3Efmhsv18jDrpiWWqKG7wsfAlQBqAt6z/E2Bx+TwEj2Nowe51CPOWB8/mFBC2dAMSgVFLvvowA==}
+  '@oxfmt/binding-linux-riscv64-gnu@0.55.0':
+    resolution: {integrity: sha512-rdv57enTiPtpSYRMKfAiEbQb0Puw5t9N7isVinDoo5qeLDScro2gznmZqSgSWbVZRzLisTeCTW8Qwgw0bOHv3A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-riscv64-musl@0.52.0':
-    resolution: {integrity: sha512-zji+1kb7lJKohSDjzC1IsS+K/cKRs1hdVf0ZH0VbdbiakmtLvN9twBoXo/k8VdjFax7kfo+DyPxS7vv52br1aw==}
+  '@oxfmt/binding-linux-riscv64-musl@0.55.0':
+    resolution: {integrity: sha512-7v1nNrlD43VY6+sYQ6efYyb3lE6QY182304PD/768ZxTjOmFd/3dQa3u/nGBUAXYdGSWOQc5N3PnS0QzUXyEIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-linux-s390x-gnu@0.52.0':
-    resolution: {integrity: sha512-hcLBYedpCy7ToUvvBidWk7+11Yhg1oAZ4+6hKPic/mQI6NaqXJSXMps5nFlwUuX2ewhtLZZDPg63TI042qGKBg==}
+  '@oxfmt/binding-linux-s390x-gnu@0.55.0':
+    resolution: {integrity: sha512-f4lJLUSPOgScjFl9LiflKCTocyNRwE25JmTMbN4XQdDjoZzEHjqf3wA3VESF1/csg7i8m7+EQLbrZyYDqe10UQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-gnu@0.52.0':
-    resolution: {integrity: sha512-IDO2loXK2OtTOhSPchU9MW25mWL2QCDGdJbjN8MXKZVS80qXe5gMTwQWu/gMJ3juoBHbkuUZNB2N1LHzNT7DoA==}
+  '@oxfmt/binding-linux-x64-gnu@0.55.0':
+    resolution: {integrity: sha512-MihqiPziJNoWy4MqNSV+jVA1g+07iQDjZiR0vaCaDoPgFEiJpCMsxamktzLV07cEeQsSJ04vQaU4CzCQwIvtDA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxfmt/binding-linux-x64-musl@0.52.0':
-    resolution: {integrity: sha512-mAV2Hjn0SatJ+KoAzKUC3eJhdJ8wv+3m1KyuS0dTsbF0c5weq+QrCt/DRZZM+uj/XiKzCDEUKYsBF30e2qkcyw==}
+  '@oxfmt/binding-linux-x64-musl@0.55.0':
+    resolution: {integrity: sha512-Yqghym7KYAVjP9MmSrNZiDeerMuoejNjo0r3ox5H3GDKk8eAfl8VyJm9i+pWCLDCTnAbcTUMMN2ZKjUYXH1v3g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxfmt/binding-openharmony-arm64@0.52.0':
-    resolution: {integrity: sha512-vd4npaUIwChxp7XzkqmepBWTT9YMcSe/NBApVGPC30/lLyOVaV3dvma1SKo03t8O73BPRAG7EyJzGlN5cJM5hQ==}
+  '@oxfmt/binding-openharmony-arm64@0.55.0':
+    resolution: {integrity: sha512-s5SDvVVSbyQl1V5UU3Yl12M+XLUQ3rl5SglNqgAA2K4PXUtQhyNSS00wivONPEnNo5W01rCou8WkDNyvI/RGHg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxfmt/binding-win32-arm64-msvc@0.52.0':
-    resolution: {integrity: sha512-k2sz6gWQdMfh5HPpIS+Bw/0UEV/kaK2xuqJRrWL233sEHx9WLlsmvlPFM4HUNThkYbSN0U0vPW7LVKZWDS8hPQ==}
+  '@oxfmt/binding-win32-arm64-msvc@0.55.0':
+    resolution: {integrity: sha512-7p9FB5R32tw2KyyNX3wpQrR2WHwEHvMEiBlGXxeTCaRMCVNx3UtFMAUbaQ/pRNWIrEUZmYhJ6tcUH52uPTRYjQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxfmt/binding-win32-ia32-msvc@0.52.0':
-    resolution: {integrity: sha512-rhke69GTcArodLHpjMTfNnvjTEBryDeZcUCKK/VjXDMtfTULl6QRh0ymX5/hbCUv2WjYm9h/QbW++q2vE15gWQ==}
+  '@oxfmt/binding-win32-ia32-msvc@0.55.0':
+    resolution: {integrity: sha512-ZYqj3fDnOT1IaVGMP5kpmkQl4F3tQIm2ZyAxvqkJYmI0xgWWak4ss4XYwv3VDfM+TWXeC9K4uQ/wW5jm/5XABA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxfmt/binding-win32-x64-msvc@0.52.0':
-    resolution: {integrity: sha512-q5xL7oeXkZdEtNZWBdvehJcmt+GRu9l2bK40yJs1jJXlqq+r0Hygb1rTjq+FM2o/2xyt4cufH6KRplHp3Jjsvw==}
+  '@oxfmt/binding-win32-x64-msvc@0.55.0':
+    resolution: {integrity: sha512-eEYT5tivGnGbPHuOHuQpi6CGLObhh0re/5jcNQHihD2GRYkTM85dyi5a19zjP8Q00t1uqAx+/QGLUGdHeqzWyg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -1192,42 +1195,84 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@oxlint/binding-android-arm-eabi@1.70.0':
+    resolution: {integrity: sha512-zFh0P4cswmRvw6nkyb89dr18rRanuaCPAsEXsFDoQY8WdaquI8Pt4NWFjaMJg6L23cy5NeN8J9cBnREbWzZhaw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
   '@oxlint/binding-android-arm64@1.67.0':
     resolution: {integrity: sha512-l6+NdYxMoRohix5r5bbigW16LPicceCwGcQ6LKKuE1kUdjgFfQolJjrJsQYPFetIs78Gxj/G/f5TEGoTCwj9nQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
+  '@oxlint/binding-android-arm64@1.70.0':
+    resolution: {integrity: sha512-qI8o4HZjeGiBrWv+pJv4lH0Yi2Gl/JSp/EumBUApezJprIKa5PS4nU0lQsQngtky8k+SplQIOjv6hwu0SSxeyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxlint/binding-darwin-arm64@1.67.0':
     resolution: {integrity: sha512-jOzXxS1AxFxhImLIRbtGIMrEwaXcgMw3gR57WB1cRk8ai+vpr6726kxXqVvlNsrXtJ/FrmOm8RxlC0m8SW24Qg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxlint/binding-darwin-arm64@1.70.0':
+    resolution: {integrity: sha512-8KjgVVHI5F9nVwHCRwwA78Ty7zNKP4Wd9OeN5PSv3iu/F/u1RVXoOCgLhWqust6HmwQG6xc8c+RCyaWENy24+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxlint/binding-darwin-x64@1.67.0':
     resolution: {integrity: sha512-3DFAVY94OqjIZHXIPz37yGRSWwOFTAqChQ64/M69GYLawzP0KiwdhDNfqdKKYT0bTR/DNxmMnQsj3ns+8+X/Lg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@oxlint/binding-darwin-x64@1.70.0':
+    resolution: {integrity: sha512-WVydssv5PSUBXFJTdNBWlmGkbNmvPGaFt/2SUT/EZRB6bq6bEOHmMlbnupZD5jmlEvi9+mZJHi8TCw15lyfSfQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxlint/binding-freebsd-x64@1.67.0':
     resolution: {integrity: sha512-e4dDKZuLu8TR9DEBssWSDahlPgZBwojTTHZUvnjBRJfJJbpxYCjfjKfi0Z1+CSLMiJBwI2yCDtRM1XJQaARjmg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@oxlint/binding-freebsd-x64@1.70.0':
+    resolution: {integrity: sha512-hJucmUf8OlinHNb1R7fI4Fw6WsAstOz7i8nmkWQfiHoZXtbufNm+MxiDTIMk1ggh2Ro4vLzgQ+bKvRY54MZoRA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxlint/binding-linux-arm-gnueabihf@1.67.0':
     resolution: {integrity: sha512-BKytFdcQzbITV3xlnzDUDTEDtbUMCCiC4EaNTDZ4FyT8gdNvBC4gfiLucXp/sQl0XU3p7syTlorUWVVVBZab2g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxlint/binding-linux-arm-gnueabihf@1.70.0':
+    resolution: {integrity: sha512-1BnS7wbCYDSXwWzJJ+mc3NURoha6m6m6RT5c6vgAY3oz7C3OVXP+S0awo2mRq97arrJkVvO3qRQfyAHL+76xtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxlint/binding-linux-arm-musleabihf@1.67.0':
     resolution: {integrity: sha512-XYAv0esBDX7BpTzRDjVX2Vdj+zndd8ll2dFQiaeQ6zTZr7A8GRDTN7fH3FP3jU+O0vCDx85oH/EtG7BzPgAXuw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxlint/binding-linux-arm-musleabihf@1.70.0':
+    resolution: {integrity: sha512-yKy/UdbR55+M2yEcuiV5DCNC/gdQAjr/GioUy50QwBzSrKm8ueWADqyRLS9Xk+qjNeCYGg6A8FvUBds56ttfqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxlint/binding-linux-arm64-gnu@1.67.0':
     resolution: {integrity: sha512-zizRMjA0i6u/2B0evgda04iycu+MoNuf1pBy6Eh+1CjC5wMEG7qN5zdDKTCvFc0KSYSDM9QTG3gjZHirgtQuKg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1235,6 +1280,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxlint/binding-linux-arm64-gnu@1.70.0':
+    resolution: {integrity: sha512-0A5XJ4alvmqFUFP/4oYSyaO+qLto/HrKEWTSaegiVl+HOufFngK2BjYw9x4RbwBt/du5QG6l5q1zeWiJYYG5yg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxlint/binding-linux-arm64-musl@1.67.0':
     resolution: {integrity: sha512-zB/Tf6sUjmmvvbva9Gj3JTJ8rJ9t4I8/U0o6vSRtd0DRIsIuyegBwJAzhSUFQHdMijIRJkW0exs/yBhpw2S20w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1242,6 +1294,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxlint/binding-linux-arm64-musl@1.70.0':
+    resolution: {integrity: sha512-JiylyurlB0CLSedNtx1gzv3FvfWPF1h/2Y3BJszPLNt5XQFlBsH5ke0Jle3iJb3uqu5m2e7A/DwzpuCAHdiU+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@oxlint/binding-linux-ppc64-gnu@1.67.0':
     resolution: {integrity: sha512-kgU40Gt74CK0TCsF51KZymkIwN9U0BajKsMijB52zPqOeZU9NAHkA/NSQkZDHEaCakx42DxhXkODiAqf2b4Gug==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1249,6 +1308,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxlint/binding-linux-ppc64-gnu@1.70.0':
+    resolution: {integrity: sha512-J8VPG7I3/HmgaU4u8pNU2kFx2+0U+vPLS1dXFxXOaR/2TQ0f8AC7DRz0SRGRI1bfphnX2hVYTTtLuhL4nYKL+Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxlint/binding-linux-riscv64-gnu@1.67.0':
     resolution: {integrity: sha512-tOYhkk/iaG9aD3FvGpBFd1Lrw0x0RaVoJBxjUkfNzS50rC5NS5BteNCwgr8A2zCdADrIIoze6D7u6U5Ic++/iQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1256,6 +1322,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxlint/binding-linux-riscv64-gnu@1.70.0':
+    resolution: {integrity: sha512-N2+4lV2KLN+oXTIIIwmWDhwkrnvqf5oX7Hw0zPjk+RuIVgiBQSOlJWF7uQoFx2siEYX0ZQ5cfSbEAHm+J3t7Wg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxlint/binding-linux-riscv64-musl@1.67.0':
     resolution: {integrity: sha512-sEtywrPb+0b+tHYl1SDCrw903fiC4eyKoNqzP3v+f2JT3Xcv4NEYG+P8rj+eEnX7IWhqV/xj8/JmcmVj21CXaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1263,6 +1336,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxlint/binding-linux-riscv64-musl@1.70.0':
+    resolution: {integrity: sha512-1e2L7cFCvx9QDzq6NPP+0tABKb5z6nWHyddWTNKprEsjO9xNrAtPowuCGpjNXxkTdsMiZ4jc8YQ5SstZd4XK6g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
   '@oxlint/binding-linux-s390x-gnu@1.67.0':
     resolution: {integrity: sha512-BvR8Moa0zCLxroOx4vZaZN9nUfwAUpSTwjZdxZyKy4bv3PrzrXrxKR/ZQ0L9wNSvlPhnMJeZfa3q5w6ZCTuN6Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1270,6 +1350,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxlint/binding-linux-s390x-gnu@1.70.0':
+    resolution: {integrity: sha512-Kwu/l/8GcYibCWA9m9N5pRXMIKVSsL/YbgpLzYkqDhWTiqdRfnNJ/+nqIKRKQiFbHWsdlHEhzMwruJK+qcEruA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@oxlint/binding-linux-x64-gnu@1.67.0':
     resolution: {integrity: sha512-mm2cxM6fksOpq6l0uFws8BUGKAR4dNa/cZCn37Npq7PFbhD5HDJqWfnoIvTaeRKMy5XdS2tO0MA0qbHDrnXAAA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1277,6 +1364,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxlint/binding-linux-x64-gnu@1.70.0':
+    resolution: {integrity: sha512-tap04CsHYOl0nSAQJfPNIuBxqEPB2HnhQqwaOXLg1jnp2XfRo8Fa814dA4QC4zpvTWXCjAAaCY1W5LOORkEQuQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxlint/binding-linux-x64-musl@1.67.0':
     resolution: {integrity: sha512-WmbMuLapKyDlobMkXAaAL0Y+Uczh4LETfIfQsUpbId4Ip8Ai82/jqeYTOoUCkuuhBFapgqP253+d83tLKOksJg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1284,34 +1378,69 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxlint/binding-linux-x64-musl@1.70.0':
+    resolution: {integrity: sha512-hzJa/WgvtJpbBD9rgfy0qe+MjbxOXNUT0bfR1S6EQQzfTtBFA9xg5q8KSwRrQ2QfSS+TaP4j+4mVPQrfNc6UNg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@oxlint/binding-openharmony-arm64@1.67.0':
     resolution: {integrity: sha512-9g/PqxYJelzzTAOR5Y+RiRqdeydhEuXv2KxNeFcAKQ7UsvnWSY1OP4MsuPMbTO2Pf70tz7mFhl1j13H3fyh+8g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
+  '@oxlint/binding-openharmony-arm64@1.70.0':
+    resolution: {integrity: sha512-xbsaNSNzVSnaJACCUYr1HQMyY/Q/Q1LkePmHG3UvZPvGCYGNxrsZp9OmtA6ick8xH47ltRRbRrPCM1YXYcyC+A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@oxlint/binding-win32-arm64-msvc@1.67.0':
     resolution: {integrity: sha512-2VhwE6Gatb0vJGnN0TBuQMbKCOiZlSQ/zJvVWYLK4a9d4iDiJOen/yVQkGpmsJ90MuH66fzi0kEKI0jRQMDxGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@oxlint/binding-win32-arm64-msvc@1.70.0':
+    resolution: {integrity: sha512-icAEsUI7JbW1TMRdEXV83mVAInhRVQYuuAlPpxdGwJ95chNdnCzjloRW8GglT0WvzOEZSio6fnYSk2DJ2Hv7LQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxlint/binding-win32-ia32-msvc@1.67.0':
     resolution: {integrity: sha512-EQ3VExXfeM1InbE5+JjufhZZTWy+kHUwgt3yZR7gQ47Je/mE0WspQPan0OJznh493L5anM210YNJtH1PXjTSFg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
+  '@oxlint/binding-win32-ia32-msvc@1.70.0':
+    resolution: {integrity: sha512-FHMSWbVsPVs/f+Jcl04ws4JJ2wUnauyTzlpxWRG/lSO/8GpX08Fo2gQZqdA6CrRFI+zvkxl+N/KwJGWfUwYVZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@oxlint/binding-win32-x64-msvc@1.67.0':
     resolution: {integrity: sha512-bw24y+/1MHS4QDkons3YyHkPT9uCMoLHHgQhb+mb8NOjTYwub1CZ+K9Ngr8aO5DMrDrkqHwTzlTwFP2vS8Y/ZQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@oxlint/binding-win32-x64-msvc@1.70.0':
+    resolution: {integrity: sha512-ptOlKwCz7n4AKs5VweMqG6DAg677FmKOK+vBkkL9DMNgFATIQ+upqUYBTOEwRQyRAx1ncGlPlXleV2hIcm3z4g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxlint/plugins@1.61.0':
     resolution: {integrity: sha512-nkOyZEF1vH527CkdQtOp1HMrVFEM4ResURvI2JFeGoup+h+43J/k/FgdOR9b9Isxg+Yae7qVDa7y3nssE8b3TQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@oxlint/plugins@1.68.0':
+    resolution: {integrity: sha512-titLmukUt/h8ho7Svlf0xSBjoy2ccZKrXjpXpZCj+v6V4CJccC2KyP45BLSCMx8YIpifMyiDyUptM4+5sruKbQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -1498,7 +1627,7 @@ packages:
       '@vitest/browser-playwright': ^4.0.0
       '@vitest/runner': ^3.0.0 || ^4.0.0
       storybook: ^10.4.5
-      vitest: ^3.0.0 || ^4.0.0
+      vitest: 4.1.9
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -1820,6 +1949,11 @@ packages:
       playwright: '*'
       vitest: 4.1.9
 
+  '@vitest/browser-preview@4.1.9':
+    resolution: {integrity: sha512-a4/OrkMDb/WUnE4OOB/4FJbK3rYVO7YykqtUgcTKG4p2a0R3XcjPVu7SLRHFBs2+NIYhv5yxp1Lz3dbdGBjIow==}
+    peerDependencies:
+      vitest: 4.1.9
+
   '@vitest/browser@4.1.9':
     resolution: {integrity: sha512-j1BKtWmPcqpMhmx/L9EPLgAJpCb0zKfwoWLmqBbxaogCXHjOwHFSEoHCBfnGtx93xKQwilZ26m+UOsHqHMkRNg==}
     peerDependencies:
@@ -1829,7 +1963,7 @@ packages:
     resolution: {integrity: sha512-lt3kovsyHwYe00wq4D1ti0Z974fWj4NLp6siqiyEufUpyFwK9Yhi7rBhac9JL5aA0zoMrJqc4vYPZRUnI7l7nw==}
     peerDependencies:
       '@vitest/browser': 4.1.8
-      vitest: 4.1.8
+      vitest: 4.1.9
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -1837,19 +1971,8 @@ packages:
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.1.8':
-    resolution: {integrity: sha512-h3nDO677RDLEGlBxyQ5CW8RlMThSKSRLUePLOx09gNIWRL40edgA1GCZSZgf1W55MFAG6/Sw14KeaAnqv0NKdQ==}
-
-  '@vitest/mocker@4.1.8':
-    resolution: {integrity: sha512-LEiN/xe4OSIbKe9HQIp5OC24agGD9J5CnmMgsLohVVoOPWL9a2sBoR6VBx43jQZb7Kr1l4RCuyCJzcAa0+dojw==}
-    peerDependencies:
-      msw: ^2.4.9
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
-    peerDependenciesMeta:
-      msw:
-        optional: true
-      vite:
-        optional: true
+  '@vitest/expect@4.1.9':
+    resolution: {integrity: sha512-vl/rYsUKcBr3SnQn166+XR5ZQcgMx3DQhFWdfli/cWpLnLUmbxZvyrJZotLFUryib+LtArYMSTJ5RbQ57ZqrlA==}
 
   '@vitest/mocker@4.1.9':
     resolution: {integrity: sha512-EVkXzBjrPGM+cK8/ANWgBrkUCfJfb38/EfTSO8h7pWvKkyPkpWxvR7BkD2MyItMF62C97zAEoqdpUixwR/e+Rw==}
@@ -1871,21 +1994,15 @@ packages:
   '@vitest/pretty-format@4.1.9':
     resolution: {integrity: sha512-s0iufns3iIFitdgm+YR7g1whCAaGtXz459VS9/PqyKDEEFgYIhsHOQmXgIgDuYCt7DeQmiZT0Qe2OA2p4ZPu5A==}
 
-  '@vitest/runner@4.1.8':
-    resolution: {integrity: sha512-EmVxeBAfMJvycdjd6Hm+RbFBbA9fKvo0Kx37hNpBYoYeavH3RNsBXWDooR1mgD52dCrxIIuP7UotpfiwOikvcg==}
-
   '@vitest/runner@4.1.9':
     resolution: {integrity: sha512-KXLMDtc7oe70+3mJfGrPUWPesswH+3sTxAMAMl8DG7I8IUQT4XW718dY5ID3vPUcmlu27CcKfY4P3h3I29SLJg==}
 
-  '@vitest/snapshot@4.1.8':
-    resolution: {integrity: sha512-acfZboRmAIf05DEKcBQy33VXojFJjtUdLyo7oOmV9kebb2xdU01UknNiPuPZoJZQyO7DF0gZdTGTpeAzET9QPQ==}
+  '@vitest/snapshot@4.1.9':
+    resolution: {integrity: sha512-Jc7RKGNBo8Z28WYIm0Niej4xdSPByRf6mU58VpHQkd6Zh05rlnA+twjbK5HyeIGHxrzsc3mJgS43uM0CZKzaIA==}
 
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.1.8':
-    resolution: {integrity: sha512-6EevtBp6OZOPF7bmz36HrGMeP3txgVSrgebWxHOafDXGkhIzfXK14f8KF6MuFfgXXUeHxmpD3BQxkV00/3s5mA==}
-
   '@vitest/spy@4.1.9':
     resolution: {integrity: sha512-fHpsS6mIi+PiEW+vcRVOMkX1oSaPKne3VOclSFICPcGOmfKgXPU5iAah+wcNcj2xPrCCmfq99IDGf+EojhhvhA==}
 
@@ -1898,13 +2015,13 @@ packages:
   '@vitest/utils@4.1.9':
     resolution: {integrity: sha512-A51o8ymO5PpqlWNnBP9ZHPXDIpuMtTLlGSjN7la4US+LJzoUMyhwjA5QXlm39JexgwHKW4Xjs8Z2d3dLCXOeuA==}
 
-  '@voidzero-dev/vite-plus-core@0.1.24':
-    resolution: {integrity: sha512-iXPGBABnQnrDMx89H6MOCGcTZp+QW+3rY4YMVKdE6ydchSvPk2O3MI2vgaRVfOtWJ2IjnxSnf1n2yjP67ZBRFQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-core@0.2.0':
+    resolution: {integrity: sha512-wCgDtjRlV5LdwMDdcNPTHFn2te1Rx5ib/E2Cc1PPreWv6byLm6dvzLgG5dT7i0obMjJn7K3gkwywUufoysgUwA==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     peerDependencies:
       '@arethetypeswrong/core': ^0.18.1
-      '@tsdown/css': 0.22.1
-      '@tsdown/exe': 0.22.1
+      '@tsdown/css': 0.22.3
+      '@tsdown/exe': 0.22.3
       '@types/node': ^20.19.0 || >=22.12.0
       '@vitejs/devtools': ^0.1.18
       esbuild: 0.28.1
@@ -1961,86 +2078,55 @@ packages:
       yaml:
         optional: true
 
-  '@voidzero-dev/vite-plus-darwin-arm64@0.1.24':
-    resolution: {integrity: sha512-Hpo9W9piSFlEsJzGkwzfDXhJGrnYByxHXF7NVQZ7g+SLOprddtlfTeM8t+gq9dxcuq0RzM8ddMAhDQP/K3fZQA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-darwin-arm64@0.2.0':
+    resolution: {integrity: sha512-mfXvqn5qDa7waP6md1fK9GNyaVO/PMB2Jz3bkPM8JdwpoVtpYc3XfQfQBkhiFtPi928gTZMaPqDktSDEIQZgUA==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@voidzero-dev/vite-plus-darwin-x64@0.1.24':
-    resolution: {integrity: sha512-SwnnnZrEFBiU5iKlh/CZAVwn0RFt/Udrvt3kFLtdRxMtN5bKaqTFVA2H8Y/FPCWp1QX9bs4V9ZIAeXAk06zLkw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-darwin-x64@0.2.0':
+    resolution: {integrity: sha512-oz9vpzs7DTXSbl4EK6LNaD4tMEXn7007pmjgnQYeGwuLrRCh9Zt+TpyYGNs9Sqrl89HM13PXj2nyyX89pxbFXg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [x64]
     os: [darwin]
 
-  '@voidzero-dev/vite-plus-linux-arm64-gnu@0.1.24':
-    resolution: {integrity: sha512-ImM3eqDki4DpRuHjW6dEh4St8zvbcfOMR7KQZJX42ArriCLQ/QdaYhDRRbcDi27XsOBqRxm2eqUUEymPrYIHpA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-linux-arm64-gnu@0.2.0':
+    resolution: {integrity: sha512-BlBvBwIERvc2obnFZ56YIfHItiU4Rfo8PoR4X89m0s2Tx4Y47Cod7LuXqU1wT95t3+ocUWoYXqLo015hYWmMvg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@voidzero-dev/vite-plus-linux-arm64-musl@0.1.24':
-    resolution: {integrity: sha512-gj4mzbob/ls8Zs7iTuF9Gr0EFFF7tdpDiPxDPBkH8tJP5OkHABlzWUwJhU+9xxcUbTaXqpHDw68Mil7jm5dpMg==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-linux-arm64-musl@0.2.0':
+    resolution: {integrity: sha512-0K5sYjx6oJJmL+0zBp/5VH4uANXEnLM+9Igav/WzzEP5QEq8dn2OZrAdsPFf+swrfq5AMrZx7sjbeYwGPUvctg==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@voidzero-dev/vite-plus-linux-x64-gnu@0.1.24':
-    resolution: {integrity: sha512-x7IYK7lI+WuF1n3jSzEYU6FgJxPX/R0rDmTTsOutooGGCU7uShZvfZqIoiTXK0eFnJU5ij5BfBgenenUfsaT/A==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-linux-x64-gnu@0.2.0':
+    resolution: {integrity: sha512-Qgsxwcf203gncyNSFue2DxRWovE8BDiRC1HTYjlV6sQ21R+w1yhFaxrdmfVDcbjzt6UKPbm0s/YTQoE7lm5igw==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@voidzero-dev/vite-plus-linux-x64-musl@0.1.24':
-    resolution: {integrity: sha512-JCy2w0eSVUlWQlggK5T47MnL+j0o4EY7hLskINVI8gi+aixQF4xnYBDobz0lbxkqz3/IfiLyXUx6TcU3thcsGQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-linux-x64-musl@0.2.0':
+    resolution: {integrity: sha512-c6ul3t0wpgedQEwa/kXTMqx3FdU3p7rw1IkELT7dw1FDZYDoc3nTyAJIqph9+mdGWQrPSsMkFa5z9N9wI4T+pA==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@voidzero-dev/vite-plus-test@0.1.24':
-    resolution: {integrity: sha512-9NiG6UadG0iOaPL1AMsO5sDKkx6MADHw4/mMOmHWZUhhUwqzfVtnnptMK37vD71e6KyR7yAscx19FrtOWWtjvA==}
-    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
-    peerDependencies:
-      '@edge-runtime/vm': '*'
-      '@opentelemetry/api': ^1.9.0
-      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/coverage-istanbul': 4.1.8
-      '@vitest/coverage-v8': 4.1.8
-      '@vitest/ui': 4.1.8
-      happy-dom: '*'
-      jsdom: '*'
-      vite: ^6.0.0 || ^7.0.0 || ^8.0.0
-    peerDependenciesMeta:
-      '@edge-runtime/vm':
-        optional: true
-      '@opentelemetry/api':
-        optional: true
-      '@types/node':
-        optional: true
-      '@vitest/coverage-istanbul':
-        optional: true
-      '@vitest/coverage-v8':
-        optional: true
-      '@vitest/ui':
-        optional: true
-      happy-dom:
-        optional: true
-      jsdom:
-        optional: true
-
-  '@voidzero-dev/vite-plus-win32-arm64-msvc@0.1.24':
-    resolution: {integrity: sha512-G+/lhLKVjyn3FmgXX8jeWgq7RcE5O1kdR7QyFayQOdlMX/ZRkvUwQD7bFaqhKzgJM6Oj3a1FH3HQPYk5QOYuCQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-win32-arm64-msvc@0.2.0':
+    resolution: {integrity: sha512-J6+RVo5oWuy0xY+bk7CLNVjKmy6R2WB+mu5L3f6ZSKWu+/CQ84YJawmduNNth0h312Gy0dlfqup75qK1l6/mpA==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [arm64]
     os: [win32]
 
-  '@voidzero-dev/vite-plus-win32-x64-msvc@0.1.24':
-    resolution: {integrity: sha512-b0e5XohEV1w/RdzAtv8/Hm6tvHPXouPtBNsljjW/lDJZq3NCLND5s6lqe8H4IenrgmKSoqakHWtlqJqM36cFbw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  '@voidzero-dev/vite-plus-win32-x64-msvc@0.2.0':
+    resolution: {integrity: sha512-Dm7kRVbHghXqDuGyTawf0p/3Bzq/Dxf6fSaDz1Pk7Iw7cXypvnCrqNl9cqMGd0zBTUI57eKaKge5uBPrUM1J0A==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     cpu: [x64]
     os: [win32]
 
@@ -2262,9 +2348,6 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-module-lexer@1.7.0:
-    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
-
   es-module-lexer@2.1.0:
     resolution: {integrity: sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==}
 
@@ -2662,8 +2745,8 @@ packages:
   oxc-resolver@11.20.0:
     resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
 
-  oxfmt@0.52.0:
-    resolution: {integrity: sha512-nJlYM35F64zTDMecCNhoHNkf+D/eHv7xcjj9XDSj+bFAVtN93m7v8DQMdHd6nDG6Akf/kEYYHmDUBs2Dz27Sug==}
+  oxfmt@0.55.0:
+    resolution: {integrity: sha512-jSj2wCTakwgPMxkfiVZX0jf+nX+Nz6xlyAZjqNE0qXTFdCBPYlP6JAN+ODjmealw7DXBjOzYbdsqwBMAZnPZ6A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -2692,6 +2775,19 @@ packages:
       vite-plus:
         optional: true
 
+  oxlint@1.70.0:
+    resolution: {integrity: sha512-D6JgHtzkhRwvEC+A0Nw5AEc5bk8x5i1pHzvZIEf/a0C4hOzmAACNGtkDGPyFaxxX3ZVGxCPeig3P3rMM8XU3/g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=0.22.1'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
+
   p-filter@2.1.0:
     resolution: {integrity: sha512-ZBxxZ5sL2HghephhpGAQdoskxplTwr7ICaehZwLIlfL6acuVgZPm8yBNuRAFBGEqtD/hmUeq9eqLg2ys9Xr/yw==}
     engines: {node: '>=8'}
@@ -2765,10 +2861,6 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pixelmatch@7.2.0:
-    resolution: {integrity: sha512-xhcb4yHu9sM/G7foGzoLtXYcC0zHEaOXXjRKhGup0fw78Nf2Tkiapv4EQyMzrbcmQPsllAI7DbFY2UT7PlI9Pg==}
-    hasBin: true
-
   playwright-core@1.61.0:
     resolution: {integrity: sha512-caX7TrY3Ml6egyDX0WUcTHDxodl/b51y5wJOdCEA36QviK/s2g081hvmGs8eaE3DWb6NYZQ6BjO/QkNRPenoPA==}
     engines: {node: '>=18'}
@@ -3118,10 +3210,18 @@ packages:
     resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  vite-plus@0.1.24:
-    resolution: {integrity: sha512-b3fr6WtCiEhetjuzW/4KcEMOAMuZxoxZATWaXKmPzOLf1upG+pzKJOFZTb94D6wiPBlwcjxoaUtF7C3uAN+VjQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
+  vite-plus@0.2.0:
+    resolution: {integrity: sha512-/GO1AlECCa9fzR7BLutUiIPuxJyAUr49Zn9uXupyTwI55+04fSldLLZrw8uCplLHtKxA6/4gnatl8UrTtgtYJw==}
+    engines: {node: ^22.18.0 || >=24.11.0}
     hasBin: true
+    peerDependencies:
+      '@vitest/browser-playwright': 4.1.9
+      '@vitest/browser-webdriverio': 4.1.9
+    peerDependenciesMeta:
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
 
   vite@8.0.16:
     resolution: {integrity: sha512-h9bXPmJichP5fLmVQo3PyaGSDE2n3aPuomeAlVRm0JLmt4rY6zmPKd59HYI4LNW8oTK7tlTsuC7l/m7awx9Jcw==}
@@ -3166,20 +3266,20 @@ packages:
       yaml:
         optional: true
 
-  vitest@4.1.8:
-    resolution: {integrity: sha512-flY6ScbCIt9HThs+C5HS7jvGOB560DJtk/Z15IQROTA6zEy49Nh8T/dofWTQL+n3vswqn87sbJNiuqw1SDp5Ig==}
+  vitest@4.1.9:
+    resolution: {integrity: sha512-nE3/LEyc0z87uHYLZebqCUOaJr2hdtuPp7BQ4BosVFnfltxgAvMG08NyrSGlPpOUWvR27c5flSmYFTNr78L9GQ==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
       '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
-      '@vitest/browser-playwright': 4.1.8
-      '@vitest/browser-preview': 4.1.8
-      '@vitest/browser-webdriverio': 4.1.8
-      '@vitest/coverage-istanbul': 4.1.8
-      '@vitest/coverage-v8': 4.1.8
-      '@vitest/ui': 4.1.8
+      '@vitest/browser-playwright': 4.1.9
+      '@vitest/browser-preview': 4.1.9
+      '@vitest/browser-webdriverio': 4.1.9
+      '@vitest/coverage-istanbul': 4.1.9
+      '@vitest/coverage-v8': 4.1.9
+      '@vitest/ui': 4.1.9
       happy-dom: '*'
       jsdom: '*'
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -3989,12 +4089,14 @@ snapshots:
   '@oxc-parser/binding-win32-x64-msvc@0.127.0':
     optional: true
 
-  '@oxc-project/runtime@0.133.0': {}
+  '@oxc-project/runtime@0.136.0': {}
 
   '@oxc-project/types@0.127.0': {}
 
   '@oxc-project/types@0.133.0': {}
 
+  '@oxc-project/types@0.136.0': {}
+
   '@oxc-resolver/binding-android-arm-eabi@11.20.0':
     optional: true
 
@@ -4056,61 +4158,61 @@ snapshots:
   '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
     optional: true
 
-  '@oxfmt/binding-android-arm-eabi@0.52.0':
+  '@oxfmt/binding-android-arm-eabi@0.55.0':
     optional: true
 
-  '@oxfmt/binding-android-arm64@0.52.0':
+  '@oxfmt/binding-android-arm64@0.55.0':
     optional: true
 
-  '@oxfmt/binding-darwin-arm64@0.52.0':
+  '@oxfmt/binding-darwin-arm64@0.55.0':
     optional: true
 
-  '@oxfmt/binding-darwin-x64@0.52.0':
+  '@oxfmt/binding-darwin-x64@0.55.0':
     optional: true
 
-  '@oxfmt/binding-freebsd-x64@0.52.0':
+  '@oxfmt/binding-freebsd-x64@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-gnueabihf@0.52.0':
+  '@oxfmt/binding-linux-arm-gnueabihf@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm-musleabihf@0.52.0':
+  '@oxfmt/binding-linux-arm-musleabihf@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-gnu@0.52.0':
+  '@oxfmt/binding-linux-arm64-gnu@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-arm64-musl@0.52.0':
+  '@oxfmt/binding-linux-arm64-musl@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-ppc64-gnu@0.52.0':
+  '@oxfmt/binding-linux-ppc64-gnu@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-gnu@0.52.0':
+  '@oxfmt/binding-linux-riscv64-gnu@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-riscv64-musl@0.52.0':
+  '@oxfmt/binding-linux-riscv64-musl@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-s390x-gnu@0.52.0':
+  '@oxfmt/binding-linux-s390x-gnu@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-gnu@0.52.0':
+  '@oxfmt/binding-linux-x64-gnu@0.55.0':
     optional: true
 
-  '@oxfmt/binding-linux-x64-musl@0.52.0':
+  '@oxfmt/binding-linux-x64-musl@0.55.0':
     optional: true
 
-  '@oxfmt/binding-openharmony-arm64@0.52.0':
+  '@oxfmt/binding-openharmony-arm64@0.55.0':
     optional: true
 
-  '@oxfmt/binding-win32-arm64-msvc@0.52.0':
+  '@oxfmt/binding-win32-arm64-msvc@0.55.0':
     optional: true
 
-  '@oxfmt/binding-win32-ia32-msvc@0.52.0':
+  '@oxfmt/binding-win32-ia32-msvc@0.55.0':
     optional: true
 
-  '@oxfmt/binding-win32-x64-msvc@0.52.0':
+  '@oxfmt/binding-win32-x64-msvc@0.55.0':
     optional: true
 
   '@oxlint-tsgolint/darwin-arm64@0.23.0':
@@ -4134,62 +4236,121 @@ snapshots:
   '@oxlint/binding-android-arm-eabi@1.67.0':
     optional: true
 
+  '@oxlint/binding-android-arm-eabi@1.70.0':
+    optional: true
+
   '@oxlint/binding-android-arm64@1.67.0':
     optional: true
 
+  '@oxlint/binding-android-arm64@1.70.0':
+    optional: true
+
   '@oxlint/binding-darwin-arm64@1.67.0':
     optional: true
 
+  '@oxlint/binding-darwin-arm64@1.70.0':
+    optional: true
+
   '@oxlint/binding-darwin-x64@1.67.0':
     optional: true
 
+  '@oxlint/binding-darwin-x64@1.70.0':
+    optional: true
+
   '@oxlint/binding-freebsd-x64@1.67.0':
     optional: true
 
+  '@oxlint/binding-freebsd-x64@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-arm-gnueabihf@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-arm-gnueabihf@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-arm-musleabihf@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-arm-musleabihf@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-arm64-gnu@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-arm64-gnu@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-arm64-musl@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-arm64-musl@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-ppc64-gnu@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-ppc64-gnu@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-riscv64-gnu@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-riscv64-gnu@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-riscv64-musl@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-riscv64-musl@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-s390x-gnu@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-s390x-gnu@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-x64-gnu@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-x64-gnu@1.70.0':
+    optional: true
+
   '@oxlint/binding-linux-x64-musl@1.67.0':
     optional: true
 
+  '@oxlint/binding-linux-x64-musl@1.70.0':
+    optional: true
+
   '@oxlint/binding-openharmony-arm64@1.67.0':
     optional: true
 
+  '@oxlint/binding-openharmony-arm64@1.70.0':
+    optional: true
+
   '@oxlint/binding-win32-arm64-msvc@1.67.0':
     optional: true
 
+  '@oxlint/binding-win32-arm64-msvc@1.70.0':
+    optional: true
+
   '@oxlint/binding-win32-ia32-msvc@1.67.0':
     optional: true
 
+  '@oxlint/binding-win32-ia32-msvc@1.70.0':
+    optional: true
+
   '@oxlint/binding-win32-x64-msvc@1.67.0':
     optional: true
 
+  '@oxlint/binding-win32-x64-msvc@1.70.0':
+    optional: true
+
   '@oxlint/plugins@1.61.0': {}
 
+  '@oxlint/plugins@1.68.0': {}
+
   '@polka/url@1.0.0-next.29': {}
 
   '@poppinss/colors@4.1.6':
@@ -4274,32 +4435,32 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-a11y@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
+  '@storybook/addon-a11y@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
     dependencies:
       '@storybook/global': 5.0.0
       axe-core: 4.12.1
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
 
-  '@storybook/addon-designs@11.1.3(25b6e59ad3c24c6d97977d0e659a64a6)':
+  '@storybook/addon-designs@11.1.3(3046e383f68340698f0f1f6f17dfbc5f)':
     dependencies:
       '@figspec/react': 2.0.1(@types/react@19.2.17)(react@19.2.7)
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
     optionalDependencies:
-      '@storybook/addon-docs': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@storybook/addon-docs': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@storybook/addon-docs@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@19.2.17)(react@19.2.7)
-      '@storybook/csf-plugin': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@storybook/csf-plugin': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       '@storybook/icons': 2.0.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@storybook/react-dom-shim': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+      '@storybook/react-dom-shim': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       ts-dedent: 2.3.0
     optionalDependencies:
       '@types/react': 19.2.17
@@ -4310,43 +4471,43 @@ snapshots:
       - vite
       - webpack
 
-  '@storybook/addon-mcp@0.6.0(19ce8edac962625b06c776893ca4f12c)':
+  '@storybook/addon-mcp@0.6.0(@storybook/addon-vitest@10.4.5(@vitest/browser-playwright@4.1.9)(@vitest/runner@4.1.9)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vitest@4.1.9))(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)':
     dependencies:
       '@storybook/mcp': 0.7.0(typescript@6.0.3)
       '@tmcp/adapter-valibot': 0.1.6(tmcp@1.19.4(typescript@6.0.3))(valibot@1.2.0(typescript@6.0.3))
       '@tmcp/transport-http': 0.8.6(tmcp@1.19.4(typescript@6.0.3))
       picoquery: 2.5.0
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       tmcp: 1.19.4(typescript@6.0.3)
       valibot: 1.2.0(typescript@6.0.3)
     optionalDependencies:
-      '@storybook/addon-vitest': 10.4.5(@vitest/browser-playwright@4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)))(@vitest/runner@4.1.9)(@voidzero-dev/vite-plus-test@0.1.24)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+      '@storybook/addon-vitest': 10.4.5(@vitest/browser-playwright@4.1.9)(@vitest/runner@4.1.9)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vitest@4.1.9)
     transitivePeerDependencies:
       - '@tmcp/auth'
       - typescript
 
-  '@storybook/addon-themes@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
+  '@storybook/addon-themes@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
     dependencies:
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       ts-dedent: 2.3.0
 
-  '@storybook/addon-vitest@10.4.5(@vitest/browser-playwright@4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)))(@vitest/runner@4.1.9)(@voidzero-dev/vite-plus-test@0.1.24)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
+  '@storybook/addon-vitest@10.4.5(@vitest/browser-playwright@4.1.9)(@vitest/runner@4.1.9)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vitest@4.1.9)':
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.0.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
     optionalDependencies:
-      '@vitest/browser-playwright': 4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@vitest/browser-playwright': 4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
       '@vitest/runner': 4.1.9
-      vitest: '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)'
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
     transitivePeerDependencies:
       - react
       - react-dom
 
-  '@storybook/builder-vite@10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@storybook/builder-vite@10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
-      '@storybook/csf-plugin': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      '@storybook/csf-plugin': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       ts-dedent: 2.3.0
       vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
     transitivePeerDependencies:
@@ -4354,9 +4515,9 @@ snapshots:
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@storybook/csf-plugin@10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.28.1
@@ -4379,28 +4540,28 @@ snapshots:
       - '@tmcp/auth'
       - typescript
 
-  '@storybook/react-dom-shim@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
+  '@storybook/react-dom-shim@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))':
     dependencies:
       react: 19.2.7
       react-dom: 19.2.7(react@19.2.7)
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
     optionalDependencies:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@storybook/react-vite@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@storybook/react-vite@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(esbuild@0.28.1)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
       '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       '@rollup/pluginutils': 5.4.0
-      '@storybook/builder-vite': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
-      '@storybook/react': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)
+      '@storybook/builder-vite': 10.4.5(esbuild@0.28.1)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@storybook/react': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)
       empathic: 2.0.1
       magic-string: 0.30.21
       react: 19.2.7
       react-docgen: 8.0.3
       react-dom: 19.2.7(react@19.2.7)
       resolve: 1.22.12
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       tsconfig-paths: 4.2.0
       vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
     transitivePeerDependencies:
@@ -4412,15 +4573,15 @@ snapshots:
       - typescript
       - webpack
 
-  '@storybook/react@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)':
+  '@storybook/react@10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))(typescript@6.0.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
+      '@storybook/react-dom-shim': 10.4.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)))
       react: 19.2.7
       react-docgen: 8.0.3
       react-docgen-typescript: 2.4.0(typescript@6.0.3)
       react-dom: 19.2.7(react@19.2.7)
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
     optionalDependencies:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
@@ -4629,20 +4790,32 @@ snapshots:
     dependencies:
       valibot: 1.2.0(typescript@6.0.3)
 
-  '@vitest/browser-playwright@4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@vitest/browser-playwright@4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)':
     dependencies:
-      '@vitest/browser': 4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@vitest/browser': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
       '@vitest/mocker': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       playwright: 1.61.0
       tinyrainbow: 3.1.0
-      vitest: '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)'
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser-preview@4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
+      '@vitest/browser': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
     transitivePeerDependencies:
       - bufferutil
       - msw
       - utf-8-validate
       - vite
 
-  '@vitest/browser@4.1.9(@voidzero-dev/vite-plus-test@0.1.24)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
+  '@vitest/browser@4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)':
     dependencies:
       '@blazediff/core': 1.9.1
       '@vitest/mocker': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
@@ -4651,7 +4824,7 @@ snapshots:
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.1.0
-      vitest: '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)'
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
       ws: 8.21.0
     transitivePeerDependencies:
       - bufferutil
@@ -4659,7 +4832,7 @@ snapshots:
       - utf-8-validate
       - vite
 
-  '@vitest/coverage-v8@4.1.8(@voidzero-dev/vite-plus-test@0.1.24)':
+  '@vitest/coverage-v8@4.1.8(vitest@4.1.9)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.1.8
@@ -4671,22 +4844,7 @@ snapshots:
       obug: 2.1.3
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)'
-
-  '@vitest/coverage-v8@4.1.8(vitest@4.1.8)':
-    dependencies:
-      '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.1.8
-      ast-v8-to-istanbul: 1.0.4
-      istanbul-lib-coverage: 3.2.2
-      istanbul-lib-report: 3.0.1
-      istanbul-reports: 3.2.0
-      magicast: 0.5.3
-      obug: 2.1.3
-      std-env: 4.1.0
-      tinyrainbow: 3.1.0
-      vitest: 4.1.8(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
-    optional: true
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -4696,24 +4854,14 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.1.8':
+  '@vitest/expect@4.1.9':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.8
-      '@vitest/utils': 4.1.8
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
       chai: 6.2.2
       tinyrainbow: 3.1.0
-    optional: true
-
-  '@vitest/mocker@4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
-    dependencies:
-      '@vitest/spy': 4.1.8
-      estree-walker: 3.0.3
-      magic-string: 0.30.21
-    optionalDependencies:
-      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
-    optional: true
 
   '@vitest/mocker@4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))':
     dependencies:
@@ -4735,33 +4883,22 @@ snapshots:
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.8':
-    dependencies:
-      '@vitest/utils': 4.1.8
-      pathe: 2.0.3
-    optional: true
-
   '@vitest/runner@4.1.9':
     dependencies:
       '@vitest/utils': 4.1.9
       pathe: 2.0.3
-    optional: true
 
-  '@vitest/snapshot@4.1.8':
+  '@vitest/snapshot@4.1.9':
     dependencies:
-      '@vitest/pretty-format': 4.1.8
-      '@vitest/utils': 4.1.8
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/utils': 4.1.9
       magic-string: 0.30.21
       pathe: 2.0.3
-    optional: true
 
   '@vitest/spy@3.2.4':
     dependencies:
       tinyspy: 4.0.4
 
-  '@vitest/spy@4.1.8':
-    optional: true
-
   '@vitest/spy@4.1.9': {}
 
   '@vitest/utils@3.2.4':
@@ -4782,10 +4919,10 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
-  '@voidzero-dev/vite-plus-core@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)':
+  '@voidzero-dev/vite-plus-core@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)':
     dependencies:
-      '@oxc-project/runtime': 0.133.0
-      '@oxc-project/types': 0.133.0
+      '@oxc-project/runtime': 0.136.0
+      '@oxc-project/types': 0.136.0
       lightningcss: 1.32.0
       postcss: 8.5.15
     optionalDependencies:
@@ -4798,69 +4935,28 @@ snapshots:
       typescript: 6.0.3
       yaml: 2.9.0
 
-  '@voidzero-dev/vite-plus-darwin-arm64@0.1.24':
+  '@voidzero-dev/vite-plus-darwin-arm64@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-darwin-x64@0.1.24':
+  '@voidzero-dev/vite-plus-darwin-x64@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-linux-arm64-gnu@0.1.24':
+  '@voidzero-dev/vite-plus-linux-arm64-gnu@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-linux-arm64-musl@0.1.24':
+  '@voidzero-dev/vite-plus-linux-arm64-musl@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-linux-x64-gnu@0.1.24':
+  '@voidzero-dev/vite-plus-linux-x64-gnu@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-linux-x64-musl@0.1.24':
+  '@voidzero-dev/vite-plus-linux-x64-musl@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-test@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)':
-    dependencies:
-      '@standard-schema/spec': 1.1.0
-      '@types/chai': 5.2.3
-      '@voidzero-dev/vite-plus-core': 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)
-      es-module-lexer: 1.7.0
-      obug: 2.1.3
-      pixelmatch: 7.2.0
-      pngjs: 7.0.0
-      sirv: 3.0.2
-      std-env: 4.1.0
-      tinybench: 2.9.0
-      tinyexec: 1.2.4
-      tinyglobby: 0.2.17
-      vite: 8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)
-      ws: 8.21.0
-    optionalDependencies:
-      '@types/node': 25.9.3
-      '@vitest/coverage-v8': 4.1.8(vitest@4.1.8)
-    transitivePeerDependencies:
-      - '@arethetypeswrong/core'
-      - '@tsdown/css'
-      - '@tsdown/exe'
-      - '@vitejs/devtools'
-      - bufferutil
-      - esbuild
-      - jiti
-      - less
-      - publint
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - terser
-      - tsx
-      - typescript
-      - unplugin-unused
-      - unrun
-      - utf-8-validate
-      - yaml
-
-  '@voidzero-dev/vite-plus-win32-arm64-msvc@0.1.24':
+  '@voidzero-dev/vite-plus-win32-arm64-msvc@0.2.0':
     optional: true
 
-  '@voidzero-dev/vite-plus-win32-x64-msvc@0.1.24':
+  '@voidzero-dev/vite-plus-win32-x64-msvc@0.2.0':
     optional: true
 
   '@webcontainer/env@1.1.1': {}
@@ -4953,8 +5049,7 @@ snapshots:
       loupe: 3.2.1
       pathval: 2.0.1
 
-  chai@6.2.2:
-    optional: true
+  chai@6.2.2: {}
 
   chardet@2.1.1: {}
 
@@ -5038,10 +5133,7 @@ snapshots:
 
   es-errors@1.3.0: {}
 
-  es-module-lexer@1.7.0: {}
-
-  es-module-lexer@2.1.0:
-    optional: true
+  es-module-lexer@2.1.0: {}
 
   esbuild@0.28.1:
     optionalDependencies:
@@ -5086,8 +5178,7 @@ snapshots:
 
   esutils@2.0.3: {}
 
-  expect-type@1.3.0:
-    optional: true
+  expect-type@1.3.0: {}
 
   extendable-error@0.1.7: {}
 
@@ -5427,30 +5518,55 @@ snapshots:
       '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
       '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
 
-  oxfmt@0.52.0(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+  oxfmt@0.55.0(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
     dependencies:
       tinypool: 2.1.0
     optionalDependencies:
-      '@oxfmt/binding-android-arm-eabi': 0.52.0
-      '@oxfmt/binding-android-arm64': 0.52.0
-      '@oxfmt/binding-darwin-arm64': 0.52.0
-      '@oxfmt/binding-darwin-x64': 0.52.0
-      '@oxfmt/binding-freebsd-x64': 0.52.0
-      '@oxfmt/binding-linux-arm-gnueabihf': 0.52.0
-      '@oxfmt/binding-linux-arm-musleabihf': 0.52.0
-      '@oxfmt/binding-linux-arm64-gnu': 0.52.0
-      '@oxfmt/binding-linux-arm64-musl': 0.52.0
-      '@oxfmt/binding-linux-ppc64-gnu': 0.52.0
-      '@oxfmt/binding-linux-riscv64-gnu': 0.52.0
-      '@oxfmt/binding-linux-riscv64-musl': 0.52.0
-      '@oxfmt/binding-linux-s390x-gnu': 0.52.0
-      '@oxfmt/binding-linux-x64-gnu': 0.52.0
-      '@oxfmt/binding-linux-x64-musl': 0.52.0
-      '@oxfmt/binding-openharmony-arm64': 0.52.0
-      '@oxfmt/binding-win32-arm64-msvc': 0.52.0
-      '@oxfmt/binding-win32-ia32-msvc': 0.52.0
-      '@oxfmt/binding-win32-x64-msvc': 0.52.0
-      vite-plus: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+      '@oxfmt/binding-android-arm-eabi': 0.55.0
+      '@oxfmt/binding-android-arm64': 0.55.0
+      '@oxfmt/binding-darwin-arm64': 0.55.0
+      '@oxfmt/binding-darwin-x64': 0.55.0
+      '@oxfmt/binding-freebsd-x64': 0.55.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.55.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.55.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.55.0
+      '@oxfmt/binding-linux-arm64-musl': 0.55.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.55.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.55.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.55.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.55.0
+      '@oxfmt/binding-linux-x64-gnu': 0.55.0
+      '@oxfmt/binding-linux-x64-musl': 0.55.0
+      '@oxfmt/binding-openharmony-arm64': 0.55.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.55.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.55.0
+      '@oxfmt/binding-win32-x64-msvc': 0.55.0
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+
+  oxfmt@0.55.0(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+    dependencies:
+      tinypool: 2.1.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.55.0
+      '@oxfmt/binding-android-arm64': 0.55.0
+      '@oxfmt/binding-darwin-arm64': 0.55.0
+      '@oxfmt/binding-darwin-x64': 0.55.0
+      '@oxfmt/binding-freebsd-x64': 0.55.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.55.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.55.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.55.0
+      '@oxfmt/binding-linux-arm64-musl': 0.55.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.55.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.55.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.55.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.55.0
+      '@oxfmt/binding-linux-x64-gnu': 0.55.0
+      '@oxfmt/binding-linux-x64-musl': 0.55.0
+      '@oxfmt/binding-openharmony-arm64': 0.55.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.55.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.55.0
+      '@oxfmt/binding-win32-x64-msvc': 0.55.0
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
 
   oxlint-tsgolint@0.23.0:
     optionalDependencies:
@@ -5461,7 +5577,7 @@ snapshots:
       '@oxlint-tsgolint/win32-arm64': 0.23.0
       '@oxlint-tsgolint/win32-x64': 0.23.0
 
-  oxlint@1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+  oxlint@1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
     optionalDependencies:
       '@oxlint/binding-android-arm-eabi': 1.67.0
       '@oxlint/binding-android-arm64': 1.67.0
@@ -5483,7 +5599,55 @@ snapshots:
       '@oxlint/binding-win32-ia32-msvc': 1.67.0
       '@oxlint/binding-win32-x64-msvc': 1.67.0
       oxlint-tsgolint: 0.23.0
-      vite-plus: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+
+  oxlint@1.70.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.70.0
+      '@oxlint/binding-android-arm64': 1.70.0
+      '@oxlint/binding-darwin-arm64': 1.70.0
+      '@oxlint/binding-darwin-x64': 1.70.0
+      '@oxlint/binding-freebsd-x64': 1.70.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.70.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.70.0
+      '@oxlint/binding-linux-arm64-gnu': 1.70.0
+      '@oxlint/binding-linux-arm64-musl': 1.70.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.70.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.70.0
+      '@oxlint/binding-linux-riscv64-musl': 1.70.0
+      '@oxlint/binding-linux-s390x-gnu': 1.70.0
+      '@oxlint/binding-linux-x64-gnu': 1.70.0
+      '@oxlint/binding-linux-x64-musl': 1.70.0
+      '@oxlint/binding-openharmony-arm64': 1.70.0
+      '@oxlint/binding-win32-arm64-msvc': 1.70.0
+      '@oxlint/binding-win32-ia32-msvc': 1.70.0
+      '@oxlint/binding-win32-x64-msvc': 1.70.0
+      oxlint-tsgolint: 0.23.0
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+
+  oxlint@1.70.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.70.0
+      '@oxlint/binding-android-arm64': 1.70.0
+      '@oxlint/binding-darwin-arm64': 1.70.0
+      '@oxlint/binding-darwin-x64': 1.70.0
+      '@oxlint/binding-freebsd-x64': 1.70.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.70.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.70.0
+      '@oxlint/binding-linux-arm64-gnu': 1.70.0
+      '@oxlint/binding-linux-arm64-musl': 1.70.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.70.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.70.0
+      '@oxlint/binding-linux-riscv64-musl': 1.70.0
+      '@oxlint/binding-linux-s390x-gnu': 1.70.0
+      '@oxlint/binding-linux-x64-gnu': 1.70.0
+      '@oxlint/binding-linux-x64-musl': 1.70.0
+      '@oxlint/binding-openharmony-arm64': 1.70.0
+      '@oxlint/binding-win32-arm64-msvc': 1.70.0
+      '@oxlint/binding-win32-ia32-msvc': 1.70.0
+      '@oxlint/binding-win32-x64-msvc': 1.70.0
+      oxlint-tsgolint: 0.23.0
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
 
   p-filter@2.1.0:
     dependencies:
@@ -5536,10 +5700,6 @@ snapshots:
 
   pify@4.0.1: {}
 
-  pixelmatch@7.2.0:
-    dependencies:
-      pngjs: 7.0.0
-
   playwright-core@1.61.0: {}
 
   playwright@1.61.0:
@@ -5724,8 +5884,7 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  siginfo@2.0.0:
-    optional: true
+  siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
 
@@ -5748,16 +5907,15 @@ snapshots:
 
   sqids@0.3.0: {}
 
-  stackback@0.0.2:
-    optional: true
+  stackback@0.0.2: {}
 
   std-env@4.1.0: {}
 
-  storybook-addon-pseudo-states@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))):
+  storybook-addon-pseudo-states@10.4.5(storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))):
     dependencies:
-      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      storybook: 10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
 
-  storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
+  storybook@10.4.5(@testing-library/dom@10.4.1)(@types/react@19.2.17)(prettier@2.8.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)):
     dependencies:
       '@storybook/global': 5.0.0
       '@storybook/icons': 2.0.2(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -5777,7 +5935,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
       prettier: 2.8.8
-      vite-plus: 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
+      vite-plus: 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
@@ -5910,24 +6068,95 @@ snapshots:
   validate-npm-package-name@5.0.1:
     optional: true
 
-  vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0):
+  vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0):
     dependencies:
-      '@oxc-project/types': 0.133.0
-      '@oxlint/plugins': 1.61.0
-      '@voidzero-dev/vite-plus-core': 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)
-      '@voidzero-dev/vite-plus-test': 0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0)
-      oxfmt: 0.52.0(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
-      oxlint: 1.67.0(oxlint-tsgolint@0.23.0)(vite-plus@0.1.24(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      '@oxc-project/types': 0.136.0
+      '@oxlint/plugins': 1.68.0
+      '@vitest/browser': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/browser-preview': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/expect': 4.1.9
+      '@vitest/mocker': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/runner': 4.1.9
+      '@vitest/snapshot': 4.1.9
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
+      '@voidzero-dev/vite-plus-core': 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)
+      oxfmt: 0.55.0(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      oxlint: 1.70.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/coverage-v8@4.1.8)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      oxlint-tsgolint: 0.23.0
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+    optionalDependencies:
+      '@vitest/browser-playwright': 4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@voidzero-dev/vite-plus-darwin-arm64': 0.2.0
+      '@voidzero-dev/vite-plus-darwin-x64': 0.2.0
+      '@voidzero-dev/vite-plus-linux-arm64-gnu': 0.2.0
+      '@voidzero-dev/vite-plus-linux-arm64-musl': 0.2.0
+      '@voidzero-dev/vite-plus-linux-x64-gnu': 0.2.0
+      '@voidzero-dev/vite-plus-linux-x64-musl': 0.2.0
+      '@voidzero-dev/vite-plus-win32-arm64-msvc': 0.2.0
+      '@voidzero-dev/vite-plus-win32-x64-msvc': 0.2.0
+    transitivePeerDependencies:
+      - '@arethetypeswrong/core'
+      - '@edge-runtime/vm'
+      - '@opentelemetry/api'
+      - '@tsdown/css'
+      - '@tsdown/exe'
+      - '@types/node'
+      - '@vitejs/devtools'
+      - '@vitest/coverage-istanbul'
+      - '@vitest/coverage-v8'
+      - '@vitest/ui'
+      - bufferutil
+      - esbuild
+      - happy-dom
+      - jiti
+      - jsdom
+      - less
+      - msw
+      - publint
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - svelte
+      - terser
+      - tsx
+      - typescript
+      - unplugin-unused
+      - unrun
+      - utf-8-validate
+      - vite
+      - yaml
+
+  vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0):
+    dependencies:
+      '@oxc-project/types': 0.136.0
+      '@oxlint/plugins': 1.68.0
+      '@vitest/browser': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/browser-preview': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/expect': 4.1.9
+      '@vitest/mocker': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/runner': 4.1.9
+      '@vitest/snapshot': 4.1.9
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
+      '@voidzero-dev/vite-plus-core': 0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(yaml@2.9.0)
+      oxfmt: 0.55.0(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
+      oxlint: 1.70.0(oxlint-tsgolint@0.23.0)(vite-plus@0.2.0(@arethetypeswrong/core@0.18.3)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(esbuild@0.28.1)(jiti@2.7.0)(publint@0.3.21)(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(yaml@2.9.0))
       oxlint-tsgolint: 0.23.0
+      vitest: 4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
     optionalDependencies:
-      '@voidzero-dev/vite-plus-darwin-arm64': 0.1.24
-      '@voidzero-dev/vite-plus-darwin-x64': 0.1.24
-      '@voidzero-dev/vite-plus-linux-arm64-gnu': 0.1.24
-      '@voidzero-dev/vite-plus-linux-arm64-musl': 0.1.24
-      '@voidzero-dev/vite-plus-linux-x64-gnu': 0.1.24
-      '@voidzero-dev/vite-plus-linux-x64-musl': 0.1.24
-      '@voidzero-dev/vite-plus-win32-arm64-msvc': 0.1.24
-      '@voidzero-dev/vite-plus-win32-x64-msvc': 0.1.24
+      '@vitest/browser-playwright': 4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@voidzero-dev/vite-plus-darwin-arm64': 0.2.0
+      '@voidzero-dev/vite-plus-darwin-x64': 0.2.0
+      '@voidzero-dev/vite-plus-linux-arm64-gnu': 0.2.0
+      '@voidzero-dev/vite-plus-linux-arm64-musl': 0.2.0
+      '@voidzero-dev/vite-plus-linux-x64-gnu': 0.2.0
+      '@voidzero-dev/vite-plus-linux-x64-musl': 0.2.0
+      '@voidzero-dev/vite-plus-win32-arm64-msvc': 0.2.0
+      '@voidzero-dev/vite-plus-win32-x64-msvc': 0.2.0
     transitivePeerDependencies:
       - '@arethetypeswrong/core'
       - '@edge-runtime/vm'
@@ -5945,6 +6174,7 @@ snapshots:
       - jiti
       - jsdom
       - less
+      - msw
       - publint
       - sass
       - sass-embedded
@@ -5974,15 +6204,15 @@ snapshots:
       jiti: 2.7.0
       yaml: 2.9.0
 
-  vitest@4.1.8(@types/node@25.9.3)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)):
+  vitest@4.1.9(@types/node@25.9.3)(@vitest/browser-playwright@4.1.9)(@vitest/browser-preview@4.1.9)(@vitest/coverage-v8@4.1.8)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0)):
     dependencies:
-      '@vitest/expect': 4.1.8
-      '@vitest/mocker': 4.1.8(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
-      '@vitest/pretty-format': 4.1.8
-      '@vitest/runner': 4.1.8
-      '@vitest/snapshot': 4.1.8
-      '@vitest/spy': 4.1.8
-      '@vitest/utils': 4.1.8
+      '@vitest/expect': 4.1.9
+      '@vitest/mocker': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))
+      '@vitest/pretty-format': 4.1.9
+      '@vitest/runner': 4.1.9
+      '@vitest/snapshot': 4.1.9
+      '@vitest/spy': 4.1.9
+      '@vitest/utils': 4.1.9
       es-module-lexer: 2.1.0
       expect-type: 1.3.0
       magic-string: 0.30.21
@@ -5998,10 +6228,11 @@ snapshots:
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.9.3
-      '@vitest/coverage-v8': 4.1.8(vitest@4.1.8)
+      '@vitest/browser-playwright': 4.1.9(playwright@1.61.0)(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/browser-preview': 4.1.9(vite@8.0.16(@types/node@25.9.3)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.0))(vitest@4.1.9)
+      '@vitest/coverage-v8': 4.1.8(vitest@4.1.9)
     transitivePeerDependencies:
       - msw
-    optional: true
 
   webpack-virtual-modules@0.6.2: {}
 
@@ -6013,7 +6244,6 @@ snapshots:
     dependencies:
       siginfo: 2.0.0
       stackback: 0.0.2
-    optional: true
 
   workerd@1.20260611.1:
     optionalDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f613d1c..62c7105 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -9,7 +9,7 @@ catalog:
   "@types/node": ^24
   typescript: ^5
   vite: npm:@voidzero-dev/vite-plus-core@latest
-  vitest: npm:@voidzero-dev/vite-plus-test@latest
+  vitest: 4.1.9
   vite-plus: latest
 
 overrides:
diff --git a/tools/oxlint-plugin-propel/README.md b/tools/oxlint-plugin-propel/README.md
index ab6b895..aa3b68f 100644
--- a/tools/oxlint-plugin-propel/README.md
+++ b/tools/oxlint-plugin-propel/README.md
@@ -31,6 +31,27 @@ It also handles grouped, peer, named, and negated presence data variants:
 "group-data-popup-open/trigger:text-primary";
 ```
 
+Fixes logical inset arbitrary utilities:
+
+```tsx
+"data-[side=inline-start]:end-[-3px]";
+"data-[side=inline-start]:inset-e-[-3px]";
+```
+
+Fixes logical inset scale utilities:
+
+```tsx
+"end-4";
+"inset-e-4";
+```
+
+Fixes arbitrary pixel widths that map exactly to the spacing scale:
+
+```tsx
+"w-[340px]";
+"w-85";
+```
+
 The rule intentionally does not rewrite valued arbitrary data selectors such as `data-[state=open]:...` or arbitrary values with fallbacks such as `h-[var(--height,auto)]`.
 
 ## Development
diff --git a/tools/oxlint-plugin-propel/src/index.ts b/tools/oxlint-plugin-propel/src/index.ts
index 950fc9f..a48b64b 100644
--- a/tools/oxlint-plugin-propel/src/index.ts
+++ b/tools/oxlint-plugin-propel/src/index.ts
@@ -5,11 +5,37 @@ export const RULE_NAME = "prefer-tailwind-v4-shorthand";
 const cssVariableArbitraryValue = /\[var\((--[A-Za-z0-9_-]+)\)\]/g;
 const presenceDataVariant =
   /(^|[\s:])(not-)?((?:group-|peer-|in-)?data-)\[([A-Za-z][A-Za-z0-9_-]*)\]((?:\/[A-Za-z][A-Za-z0-9_-]*)?):/g;
+const logicalInsetArbitraryUtility = /(^|[\s:])(start|end)-(\[[^\]\s]+\]|\(--[A-Za-z0-9_-]+\))/g;
+const logicalInsetScaleUtility = /(^|[\s:])(start|end)-(\d+(?:\.\d+)?)/g;
+const spacingWidthArbitraryPixelUtility = /(^|[\s:])w-\[(\d+)px\]/g;
+
+const logicalInsetUtilityPrefix = {
+  end: "inset-e",
+  start: "inset-s",
+} satisfies Record<string, string>;
 
 export function normalizeTailwindV4Shorthand(value: string): string {
   return value
     .replace(cssVariableArbitraryValue, "($1)")
-    .replace(presenceDataVariant, "$1$2$3$4$5:");
+    .replace(presenceDataVariant, "$1$2$3$4$5:")
+    .replace(
+      logicalInsetArbitraryUtility,
+      (_, boundary: string, side: keyof typeof logicalInsetUtilityPrefix, value: string) =>
+        `${boundary}${logicalInsetUtilityPrefix[side]}-${value}`,
+    )
+    .replace(
+      logicalInsetScaleUtility,
+      (_, boundary: string, side: keyof typeof logicalInsetUtilityPrefix, value: string) =>
+        `${boundary}${logicalInsetUtilityPrefix[side]}-${value}`,
+    )
+    .replace(spacingWidthArbitraryPixelUtility, (match, boundary: string, pixels: string) => {
+      const numericPixels = Number(pixels);
+      if (!Number.isInteger(numericPixels) || numericPixels <= 0 || numericPixels % 4 !== 0) {
+        return match;
+      }
+
+      return `${boundary}w-${numericPixels / 4}`;
+    });
 }
 
 function quoteStringLiteral(raw: string, value: string): string {
diff --git a/tools/oxlint-plugin-propel/tests/index.test.ts b/tools/oxlint-plugin-propel/tests/index.test.ts
index aec4029..71c9f7e 100644
--- a/tools/oxlint-plugin-propel/tests/index.test.ts
+++ b/tools/oxlint-plugin-propel/tests/index.test.ts
@@ -32,6 +32,10 @@ tester.run(RULE_NAME, preferTailwindV4ShorthandRule, {
       name: "keeps arbitrary selectors",
       code: 'const className = "[&[data-highlighted]]:bg-primary";',
     },
+    {
+      name: "keeps non-spacing arbitrary pixel widths",
+      code: 'const className = "w-[342px] sm:w-[1px]";',
+    },
   ],
   invalid: [
     {
@@ -73,5 +77,38 @@ tester.run(RULE_NAME, preferTailwindV4ShorthandRule, {
         'const element = <div className="data-popup-open:bg-layer-transparent-hover h-(--panel-height)" />;',
       errors: [{ messageId: "preferTailwindV4Shorthand" }],
     },
+    {
+      name: "fixes logical inset arbitrary utilities",
+      code: code(
+        'const className = "data-[side=inline-start]:end-[' +
+          "-3px] data-[side=inline-end]:start-[" +
+          '-3px]";',
+      ),
+      output:
+        'const className = "data-[side=inline-start]:inset-e-[-3px] data-[side=inline-end]:inset-s-[-3px]";',
+      errors: [{ messageId: "preferTailwindV4Shorthand" }],
+    },
+    {
+      name: "fixes logical inset css variable utilities",
+      code: code(
+        'const className = "hover:end-[' +
+          "var(--edge-offset)] focus:start-[" +
+          'var(--edge-offset)]";',
+      ),
+      output: 'const className = "hover:inset-e-(--edge-offset) focus:inset-s-(--edge-offset)";',
+      errors: [{ messageId: "preferTailwindV4Shorthand" }],
+    },
+    {
+      name: "fixes logical inset spacing utilities",
+      code: code('const className = "fixed end-' + "4 bottom-4 group-hover:start-" + '1";'),
+      output: 'const className = "fixed inset-e-4 bottom-4 group-hover:inset-s-1";',
+      errors: [{ messageId: "preferTailwindV4Shorthand" }],
+    },
+    {
+      name: "fixes arbitrary pixel widths that match the spacing scale",
+      code: code('const className = "w-[' + "340px] md:w-[" + '640px]";'),
+      output: 'const className = "w-85 md:w-160";',
+      errors: [{ messageId: "preferTailwindV4Shorthand" }],
+    },
   ],
 });
diff --git a/vite.config.ts b/vite.config.ts
index 54d9c9c..1e9c378 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,18 @@
 import { defineConfig } from "vite-plus";
+import { configDefaults } from "vite-plus/test/config";
 
 export default defineConfig({
   staged: {
     "*": "vp check --fix",
   },
+  // Agent worktrees (`.claude/worktrees/<name>`) are full second checkouts of the repo
+  // nested inside vite's workspace root. Vitest doesn't honor `.gitignore`, so a
+  // repo-root `vp test` would otherwise crawl those duplicate trees; also keep the
+  // dev/test server's file watcher out of them.
+  server: { watch: { ignored: ["**/.claude/**"] } },
+  test: {
+    exclude: [...configDefaults.exclude, "**/.claude/**"],
+  },
   fmt: {
     ignorePatterns: ["dist/**"],
     // Sort Tailwind classes (oxfmt's prettier-plugin-tailwindcss equivalent). propel